80サイトパーツの作り方

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

サイトパーツの作り方

グローバルナビの作り方(インライン版-1)

グローバルナビとはサイト内全ページの定位置に掲載されるナビゲーションメニューを指します。ここでは、ページ上部に掲載するグローバルナビの作り方を解説します。

グローバルナビの作り方(インライン版-2)

liタグやpタグで書かれたグローバルナビ部分を、CSSで整形し、メニューを横に並べる指定方法をタイプ別に解説します。

グローバルナビの作り方(ブロック版)

グローバルナビをブロック要素の組み合わせで作る方法は、インライン要素で作成する場合に比べ、設定がやや複雑になります。

サイドバー用メニューリストのHTML構造

ブログなどでは、サイドバーにカテゴリや月別アーカイブなどへのリンクをリストで掲載することがよくありますが、このサイドバー用のメニューのデザインをCSSで整えるためには、まず、メニューリストのHTML構造を理解しなければなりません。

メニューリストのリストマークを画像に

通常、リストに付けられるストマークは黒丸や白丸になりますが、CSSを使えばリストマークに画像を使用することができます。

メニューリストのリンク部をブロック化

通常、リンク部分はアンカーテキスト上でマウスをクリックしないとリンク先にジャンプしませんが、aタグをブロック要素として表示させれば、余白部分でクリックしてもジャンプすることができるようになります。

サイト作りに役立つCSSの使い方

ひとつひとつのパーツのデザインを整形するのもCSSの使い方のひとつですが、その他にも、サイト製作に役立つ使い方があります。