Dreamweaver8＋CSS入門・動画講座（スタイルシートの使い方） - スタイルシート 定番テクニック集 - （4）背景画像を使った見出し
|
初心者webデザイナーさんのための、ホームページ制作無料講座です。Dreamweaver8を使ったXHTML＋CSSコーディングの方法を紹介します。
スタイルシート初心者の方に役立つように作ってみました。
※Adobe® Dreamweaver® はAdobe Systems Incorporated（アドビ システムズ社）の商標です。
|
（4）背景画像を使った見出し
|
5分40秒
 |
|
|
|
|
Tweet |
|
|
解説
ドリームウィーバーを使ったスタイルシートの使い方、小技集。今回は、背景画像を使った見出しを作ってみます。クラスを分けることで色のバリエーションをつけてみましょう。 作例では、div class="midasi green" でやっていますが、見出しなのでh2やh3の方が妥当ですね。 その場合は h2 class="green" になるわけです。 同じパターンのボックスで、一部の要素にバリエーションをつけたい場合 div class"box2 green" div class"box2 pink" みたいにして、２つのクラスを同時に指定することができます。 ＊＊＊＊＊ 最近作った大阪のポータルサイトです。 京橋タウンガイド 表紙にあるイベント新着情報でこの画像を使っています。見てみてください。 このサイトはxoopsで構築しました。 地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。 URLの静的生成と正しいマークアップでseo対策済み。 xoopsサイトの型にはまったデザインを一新して、オールCSSコーディング。 今風のテイストに変えてしまってますので、そのへんも見てくれると嬉しいなぁ～。。。。 オールCSSにしてあることで、携帯表示にも対応できるというわけです。 xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。 デザイン：webの森 協力／xoopsシステム構築：A-XYZ |
 |
|
カテゴリー内最新記事
マニュアル カテゴリ一覧
マニュアル エントリ一覧