CSSを修正
2008/09/19(金) 23:57
先週来，当ブログのテンプレートについて，CSSに手を入れて来ました。主な変更点は以下のとおりです。
(1) ナビゲーションバー（ブログタイトル下側）のリンクボタンを，マウスオンで色が変わるようにした。
(2) 検索窓を，ナビゲーションバーからサイドバー最上部に移動，テキスト入力欄とボタンの見栄えを調整。
(3) リンク設定されたテキスト，画像をマウスクリックした際，凹んだように見える動きを追加した。
(4) 全般に強調文字を減らし，背景とのコントラストが強すぎないよう，テキストの色を調整した。
参考書はこんなところ。
(ｱ) HTML+CSS HANDBOOK
(ｲ) web creators 2008-10月号
今回は，(1)の設定に一番，苦労しました。画像は使っていないので平面的なボタンのイメージです。世の中はグラデュエーションをかけた立体的なバナーやボタンがWeb2.0っぽいので流行りだけど，当ブログは未だにWeb1.0ということで（薄笑）。
(2)は，(1)を実現するのに，ナビゲーションバーから検索窓を外す必要があったため。サイト内検索の窓は，右の上側に設置すべき，との話をどこかでみたことがあったので，最短距離の引越しです。
(3)は，(ｲ)に掲載されていた「使えるCSSデザインの技152」から。リンク箇所をクリックするとボタンを押したように見えるはず。ちょっと，くどいかな。
(4)は，アクセシビリティ（利用しやすさ）の向上を目指して。当ブログを見に来ていただいた方が，少しでも見やすく，疲れにくくなれば，という余計なお世話的配慮です。
それにしてもCSSは難しいです。ボックスの概念，コンテンツの位置調整の仕方は，何とか理解できましたが，セレクタの使い方や優先順位がいまひとつ，良く分かっていません。CSSを少しづつ書き換えて，ブラウザーで確認。この繰り返しですから時間の掛かること。でも，思うとおりの画面が出来上がったときには「キタ～ッ！」（山本高弘で）ってところです。
コメントする
トラックバック(0)
Writer：
I'm watching
Gallery
