区切り線、ヘッダー、ナビゲーションの作成

dreamweaver13

それでは(hr)の区切り線を設定します。区切り線の設定は区切り線を見えなくするだけです。それなら最初から区切り線を入れなくてもいいんですが、携帯で見た場合に見やすくするために今回はあえて区切り線を入れて作成してあります。

区切り線(hr)のところをクリックして新規cssルールをクリックしてください。新規cssルールが開きセレクター名の所が#wrapper hrになってると思いますので#wrapperは消してhrにしてOKを押して設定します。

区切り線設定

hrのcssルール定義が開いたらブロックを選びDisplay-noneを選んで適用をクリックしOKをクリックしてください。するとhrはPC上だと消えてなくなります。

区切り線を設定する

ヘッダーの作成

新規cssルールを開くまで手順は今までに説明した内容と同様なので、ここからは新規cssルールを開くまでの説明は省略させていただきます。headerのcssルール定義で背景を選びBackground-imageに画像を選んでください。画像は800×200pxの画像を設定してください。Background-repeatをno-repeatを選び、カテゴリーのボックスを選びWidthを800px、hight250pxに設定してください。高さに50px余裕を持ってるのは後から設定するナビゲーションの50px分の余裕をもたせてる為です。

ナビゲーションの作成

ホーム~お問い合わせまでを横並びに変えてみます。#header ulのcssルール定義を開きます。位置を選びposition-absoluto、Width-800px、placement-top-200に設定します。

次に#header ul liのcss定義ルールを設定します。ボックスを選びFloat-leftを選んでください。すると横並びに変化したと思います。続けて#header ul li aのcss定義ルールと#header ul li a:hoverのcss定義ルールの設定をしますが下記にスタイルシートを参考に作ってみてください。

#header {
	background-repeat: no-repeat;
	height: 250px;
	width: 800px;
	background-image: url(images/topmihon.jpg);
}
#header ul {
	position: absolute;
	width: 800px;
	top: 200px;
}
#header ul li {
	float: left;
}
#header ul li a {
	height: 50px;
	width: 158px;
	line-height: 50px;
	display: block;
	background-color: #999;
	border: 1px solid #CCC;
	text-align: center;
	color: #FFF;
}
#header ul li a:hover {
	color: #333;
	background-color: #CCC;
}

すると下記の様なナビゲーションが出来上がります。

ナビゲーション完了

それでは次に#sidebar、#main、#footerを作成していきますがcss定義ルールの設定の仕方は同じですので今までの完成形のスタイルシートを表示しておきますので、それを参考に作成してみてください。

最終更新日: 2013年3月5日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

区切り線、ヘッダー、ナビゲーションの作成の関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*