Xhtml+css
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1378/dom%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e3%81%ab%e3%82%88%e3%82%8b%e8%b6%85%e7%b0%a1%e6%98%93cms%e3%81%ae%e4%bd%9c%e6%88%90/’;CheckあるWeb運用案件で、全くCMS化されていない今時珍しいサイトがある。 運用を任されており、お知らせ一覧を毎回、トップページ、お知らせ一覧その１、お知らせその２と 三箇所更新しなくてはいけないのがいい加減面倒になってきたので、これを簡易CMS化してみようと思い、やってみた。 もっとも適している言語はPHPだが、URLが変わってしまうので、 あくまでJavaScriptによるDOM操作のレベルで、一箇所書き替えるだけで３つの場所に代入され更新されるような プログラムを考えたかった。 １）JavaScriptで配列を組む（更新日、リンク先、更新内容、など） ２）配列内の文字列を加算演算子で制御して、htmlソースを組み立てる（htmlタグの間に上記文字列を挿入） ３）トップページは五件まで繰り返す。お知らせ一覧は全て出力。それぞれを関数化。 ４）jQueryでDOM操作（指定のIDを持つタグに上記文字列を関数化し代入） ５）DOM（xhtml）の作成 というような処理を作ってみた。 ４）でつまづくかと思ったが、普通のJavaScriptで書いた関数名をそのままjQueryのセレクタに代入できたので、 createElementやらappendChildやらinnerHTMLやら使わずに、あっけないほど簡単に実現出来た。 直感的にDOM操作が簡単にできるjQueryはすごく便利だ。DOM操作には欠かせない。
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/985/css-nite-in-ginza-vol-49%e3%80%8c%e3%83%90%e3%82%b7%e3%83%a3%e3%83%ad%e3%82%b0-live%e3%80%8d/’;Check会社が早く終わったので、css niteが行われるApple Store銀座に久々に潜入。きょうはバシャログの中の方たちによる「バシャログLIVE」。業界10年というベテランのディレクターさんを中心とする中の方３名から、現場で使えるWebデザイン+コーディングのTipsを惜しげもなく伝授いただいた、大変貴重な一時間。 デザイン編 デザインのテンプレート化による効率アップ。幅960pxのFireworksファイルを使用。 シンボル・スタイルの活用。どんどん自分で登録しカスタマイズすることで、簡単にデザインテイストを比較し作りこんでいくことができる。 Fireworksの矩形スライスでパーツの書き出し。これぞFireworksの隠れた真骨頂。 デザインの時点でスライスを見据えたレイヤーわけをしておくと、作業がスピーディーになる。 コーディング編 原稿テキストには■（画像を入れたいテキスト）と#（リンクを張りたいテキスト）を入れ、正規表現で一気に置換。DWではよく使う正規表現も登録／呼び出しが可能。 横並びのグローバルナビゲーションの実現には、display:table-cellを使用。これはfloatに比べ、解除(clear)の指定が要らないので、cssが簡潔になる。IE6,7対応にはハックも仕込む必要あり。 スニペットの活用。 パンくずリストの実装では、先頭の不要なアイコンをネガティブマージンとoverflow：hiddenで消している。これだとhtmlに余計なクラス名などを入れないで済む。
Continue reading about CSS Nite in Ginza, Vol.49「バシャログ LIVE」
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/972/%e8%81%b7%e5%a0%b4%e3%81%8c%e5%a4%89%e3%82%8f%e3%82%8a%e3%81%be%e3%81%97%e3%81%9f%e3%80%82/’;Check新しい職場は、やはりIT企業でのWeb制作業務ですが、 デザインツール（Photoshop,Illustrator）を使った業務が多いです。 面接時にお願いされた、 「SE（サーバーサイド）とデザイナー（フロントエンド）の橋渡しとなるようなポジション」 とは程遠い業務でのスタートとなっておりますが、 確かにデザインツールを使える人が少ないようなので、仕方ない。 レイアウトが出来る人も、イラレでアイコンなどを作れないので、そういうところを任されたりしてます。 思えば前職は、デザイナー職で入ったが、コーディングばかりだったし、 今度はコーダーで入ったら、バリバリのデザイン業務・・・と。 しかし、会社とはそういうところだとようやく思えるようになってきました。 うちのつれさんも、デザイナーとして入ったが、在庫や発注の管理などを任されているようだし。 結局どんな仕事も、人員バランスとの兼ね合いですね。 まあ、デザイン力をつける良い機会だと思って、今ある仕事を精一杯がんばります。 また、同じ職場に腰を落ち着けて働くのも大事だけど、３社くらい経験してみるのも良いかもしれませんね。 特に、今回の私の転職は、企業の規模や風土が前職とは全く違うので、比較すると、それぞれの 良い点、悪い点、いろいろと見えてくるものがあります。
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/837/css%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%e3%83%bb%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e8%be%9e%e5%85%b8/’;Check初級～上級実務レベルまで、cssコーディングについてはこの一冊でOK、と思わせる決定版。 カラーの図解がたっぷり多いので、cssの値を指定した際に実際どのような表示になるのかが細かくわかるのも、大変ありがたい。
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/623/table%e3%82%bf%e3%82%b0%e3%81%aetd%e3%82%92th%e3%81%ab%e5%a4%89%e6%8f%9b%e3%81%97%e3%81%9f%e3%81%84/’;Check正規表現。Dreamweaverの場合。 「検索」欄： ＜td＞(.*)＜/td＞ 「置換」欄： ＜th＞$1＜/th＞ ※＜＞を半角に変更する必要があります。 メモでした。 イミフーですいません。
