では、上部ウィンドウ領域に表示されるメニューから始めましょう。
このメニューには、すでにかなりの前提条件があります。おそらく、1ピクセルのグラフィックとして保存された美しいグラデーションを覚えているはずです。そのグラデーションを使用します。ただし、メニューエリアのための適切なHTML構造を作成する必要があります。これは次のように見えるでしょう:
<div class="header"> <div class="header-top"> <h1>あなたの税理士</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">ホームページ</a></li> <li><a href="#">当社について</a></li> <li><a href="#">業務内容</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">法的表記</a></li> </ul> </div> <div class="header-img"> </div> </div>
背景のデザインには、1ピクセルのグラフィックが挿入され、要素全体が埋め尽くされるまで縦方向に繰り返されます。
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
その後、メニューをフォーマットすることができます。基本的には特に注意すべき点はありません。このようなメニューの重要な点は次のとおりです:
・リストのスタイルを list-style-type: none; で非表示にする。
・リストエントリを横並びに表示する。
私はこの地点で、グラフィックを使用して実行されるグラデーションを使用しています。現在、メニューにはJavaScriptフレームワークであるjQueryなどの他の多くのオプションがあります。これらすべてのオプションを紹介することはもちろんここでは限度を超えますが、数クリックでメニューを作成できるオンラインジェネレータがたくさんあります。おそらくその中の1つは、評価は別にして、http://www.cssmenubuilder.com/ で見つけることができます。
私はとにかく以下のバリエーションを選択しました:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}右側のメニュー
ウェブサイトには上部にメニューがあるだけでなく、右のウィンドウ領域にもメニューが表示されます。
このメニューは、content-right クラスを持つ div 領域に属します。ページの開発フェーズでは、そこにダミーコンテンツしか配置していません。
<div class="content-right"> <h2>メインメニュー</h2> <ul> <li><a href="#">リンク1</a></li> <li><a href="#">リンク2</a></li> <li><a href="#">リンク3</a></li> <li><a href="#">リンク4</a></li> <li><a href="#">リンク5</a></li> <li><a href="#">リンク6</a></li> <li><a href="#">リンク7</a></li> <li><a href="#">リンク8</a></li> <li><a href="#">リンク9</a></li> <li><a href="#">リンク10</a></li> </ul>
最初に、エリアは適切な位置に配置され、必要なサイズに設定されます。
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
次に、実際のメニューを定義します。この場合、エントリは垂直に配置されます。したがって、単にリストのスタイルを非表示にするだけで十分です。メニューの残りのデザインは、最終的には自由です。
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}ブラウザで次のようなものが表示されるはずです:
下部メニュー
ウェブサイトのフッターには別のメニューがあります。ここ、PSD-Tutorials.deでも同様のメニューが使用されており、一般情報へのリンクを提供しています。
当ウェブサイトには著作権表示があります。どちらもウェブサイトには非常に一般的なものです。まずHTML構造を見ていきましょう。
<div class="bottom"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="#">私たちについて</a></li> <li><a href="#">お知らせ</a></li> <li><a href="#">コントロールセンター</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">法的表記</a></li> <li><a href="#">サイトマップ</a></li> </ul> <p>© 著作権所有 PSD-Tutorials.de 2014年</p> </div>
これは単純なulリストです。各リストアイテムにはメニューアイテムが含まれています。 ulリストの下には、著作権表示が含まれているp要素があります。まだ何か欠けているのは、もちろんCSSの構文です。
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
フッターのデザインは最終的にあなた次第です。私はまたグラデーションを使用しています。ただし、単一の背景色を使用したり、直接CSS3構文を使用したりすることもできます。私のグラフィックバージョンの場合、重要なのはbackground-repeat: no-repeat; によって繰り返しを防ぐことです。
まずは結果を見てみましょう：
ここで目につくのは、個々のメニューアイテムの横に表示される白いストライプです。これらは異なるborder-leftスタイルの指定によって定義されており、基本的には各指定が左側の要素境界に対応することを意味します。
全体的に、下部メニューの構文は次のようになります：
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
トップメニューとは異なり、ここでは特筆すべき点があります。実際、ホバー時に追加のグラフィックが読み込まれません。ただし、訪問者にはリンク上でマウスを移動したことを示すため、ホバーイベントが発生すると各リンクが下線付きになります。
このチュートリアルの終わりに、ウェブサイトに関する基本的な手順が完了しました。次回のチュートリアルでページの装飾を行う必要があります。それについては、次のチュートリアルで詳しく説明します。
