その1」で紹介した、デザインサンプル2の作り方についてお話していこうと思います。デザイン2デザイン2です。メニューの左側に濃い色のボーダーが入り、全体の背景にテクスチャを使っています。デザイン1と元は全く同じなのですが、だいぶ雰囲気が変わっているのではないかと思います。この辺もCSSの面白さではないかと思います。CSSの設定では、早速CSSで組んでいきましょう。手順はデザイン1のときと比較できるように、だいたい同じにしていきますね。全体を囲むボーダーを設定するこのデザインでは全体をボーダーで囲っていますが、それぞれ少しずつ違っています。左は3pxの太い実線、右は1pxのドット、上下は1pxの実線になっています。#392600;}このように上下左右のボーダーに少し変化を付けるだけでも面白いものができますね。メニュー部分の背景の設定メニュー部分の背景に小さな背景画像を指定します。参考までに、この画像はFireworksで、#CCCEA6の塗りにメッシュのテクスチャを37%の割合で指定したものです。濃かったので、透明度を67%に。デフォルトの素材でもこのくらいの感じなら、ちゃっちゃっと作れちゃいます。url(img/menu2-back.gif);}メニュータイトルの変更メニュータイトルの設定は実はデザイン1と全く同じで、背景色の変わりに背景画像を使っているだけです。この素材はメニュー部分の背景に使っているものとほとんど同じで、色を暗くしてあります。色を暗くするとテクスチャが強く感じたので、9%に減らしました。リストマークを背景画像として表示させます。背景の位置調整の数値が変わっていますが、実はこれ、「デザイン1」で使った子アイテムの小さい矢印の色違いなので、そちらの設定をそのままもらってきています。子アイテムも同じリストマークにしたので、手順も一つ減りました。7px;}アイテムごとに区切り線こちらも前回と考え方は一緒です。ボーダーの種類と色が変わっています。none;}リスト一番上のボーダーを消し、タイトル下にボーダーをタイトル下の濃いボーダーは、メニュータイトルに設定し、そこに重なって表示されてしまうリスト一番上のボーダーは消してしまいましょう。#392600;}リンクの範囲を広げ、文字色を調節これも前回と全く同じなので、コードは省略します。下のまとめのコードを見て下さいね。CSSのまとめCSSのまとめです。#940101;}はい、デザイン2はこれで出来上がりです。一つ作ってしまうと、ちょっとしたCSSの指定の書き換えでデザインが変わるので、とても楽ですね。素材のおまけ今回も、ちょっぴりですが、素材を。メニューとタイトルで使っている背景素材とリストマーク。それにプラスして背景画像のもととして使っていただけるように背景画像をPNGのグレーでつけておきますね。デザイン2のパターンで使える素材を詰め合わせしましたデザイン2の素材をダウンロードまたまた続くいかがでしたか?全く同じhtmlのものでも、CSSだけで、がらっと変わる面白さを感じていただければうれしいです。次回はデザイン3をちゃちゃっといこうかな、と思っています。AM記事全部読みました。読解力無い自分でも解りやすく理解出来ました♪また勉強させて下さい。さんうわぁ、全部読んでいただけたんですね!うれしい♪ありがとうございます。間があいてしまいそうなのですが、またがんばって記事を書きますね。PM最近更新あまりなくて寂しいです。コメント欄がデフォルトのままでダサいのでコメント欄のカスタマイズについてやって欲しいです。さんお返事大変遅くなりました。していましたが、そろそろ更新も再開できそうです。コメント欄についても触れていこうと思いますので、お待ち下さいね。AM更新楽しみにしてますね。Webourgeon。