XHTML/CSS　第7章　段組 - t2567cdcasの日記

こんにちは！

XHTML/CSSも残り60ページぐらいになりました。

で、今回紹介＆説明していくのは段組みです。

段組みの設定

段組みの設定はCSSで行います

それぞれのhtmlファイル

</ul>の下に</div>を記述します。

（他のXHTMLファイルにも同じく記述します。）

CSSファイルにはこのように記述しておきます。

インターネットで開いてみると・・・・・・・・

なんかカッコいい感じのものが出ましたねｗｗｗ

続いてメニューのスタイルを設定していきます。

リスト全体のスタイル

メニュー上部に太い線を付けたりメニュー全体を囲む枠線を付けたりします。

メニュー全体にスタイルを設定するには ul要素 にスタイルを指定します。

また、リスト一つ一つにスタイルを設定するには li要素 にスタイルを指定します。

こんな感じにCSSに追加

先ほどと同じようにそれぞれのhtmlファイルに

liのあとの　class="kugiri"　を入力ｗｗｗ

リンクのスタイル

メニューの部分をさらにボタンらしくしていきます。

そのために今回は　displayプロパティ　を使います。

displayプロパティ

要素の表示形式を指定します。

display:表示形式

----------------------------------------------------------------

すべての表示形式に適用

表示形式には　none(非表示)　block(ブロックレベル要素)やinline(インライン要素)などを指定

今回最後に選択しているメニューに色を付ける指定をします。