CSSを修正

先週来,当ブログのテンプレートについて,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を少しづつ書き換えて,ブラウザーで確認。この繰り返しですから時間の掛かること。でも,思うとおりの画面が出来上がったときには「キタ~ッ!」(山本高弘で)ってところです。

99.関係ありそうな記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください