[15-4-2] リストでナビゲーション( その2 : ナビを横に並べる )

※追加記事あり!<li>要素を横に並べるには、display: inline を使う方が簡単でした!
こちらをご覧ください→[15-4-2-2] ナビを横並びに_追加記事(display使用)
※本記事は、CSSの「float」と、その「clear」についての詳細が書かれていますので、
 このまま残します。

今日は、前回作ったナビを横並びにしてみましょう。CSSの floatを使います。

CSSプロパティ float

グローバルナビゲーションを横並びにしよう

前回、縦並びだったナビをこのように横に並べます。

honttoni15-4.html

これは↑プレビュー画像。
クリックするとサンプルHTMLで見られます(別ウィンドウで開く) 。

サンプルのダウンロードはこちら

★サンプルは前回とおなじです。上のサンプル画像クリックでHTMLファイルを開きます。
★開いたHTMLのソースをブラウザで読んでもらえばOKですが、
↓下記でもzipファイルをダウンロードできます。
→本日のサンプル(sample15-4set.zip (4k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

CSSの「float」プロパティで横に並べます

CSSの「float」プロパティで横に並べますよ。
まずはCSSのソースを見てみましょう。

ul#sample2 {
	margin:0px;background: url(../img/dd_bg.gif) no-repeat 0px 0px;
	padding: 0px;
}
ul#sample2 li {
	list-style: none;
	float: left;
}
ul#sample2 li a {
	height: 17px;
	background: url(../img/110521.gif) no-repeat 0px 0px;
	line-height: 17px;
	margin-left: 17px;
	padding-left: 22px;
	color: #666;
	text-decoration: none;
}
ul#sample2 li a:hover {
	color: #F90;
	background: url(../img/110521.gif) no-repeat 2px 0px;
}
.c-both {
	clear: both;
	padding: 0px;
	margin: 0px;
}

前回のCSSと違うところは2ヶ所(赤字部分)。
float: left;と、clear: both;の指定です。
そのほかは前回とまったくいっしょ。画像をロールオーバーで変化させるなどの指定はそのままです。
li要素に「float: left;」と指定してあげるだけで横に並ぶんですね。

floatについて

CSSの floatプロパティの値は「left」と「right」だけです。
ちなみに今回は float: left; と指定していますが、 float: right; としても横に並びます。

横には並ぶんですが、rightだとこのように
honttoni15-4.html
右から順番に並んでしまいます。右詰めになってますしね。

float は、適用された要素を左または右の位置に配置し、その後に記述された要素が反対側に回り込みます。今回のように、要素を左詰めで左から順に並べたい時は、float: left; と指定します。

★float はページ全体の縦割りにも使います。このページも本文の右サイドにサイドバーがある「2カラム」のレイアウトです。
詳しくは…「CSSレイアウトメモ : 本文2段組[4]2段組にする」をご覧ください

★また、画像の横にテキストを回り込ませるときにも float をつかいます。
詳しくは…「ほんっとにはじめてのHTML [9-2] 画像にテキストを回り込ませよう」をご覧ください

float は使い終わったら必ず clear !これ重要

float は、解除してあげない限りずーっとその効果が続きます。
フッターが変なところに表示されるなど、レイアウトが崩れる原因はたいがいこれ。
float指定したら、もうその効果がなくていいところで必ず解除しましょう。

解除するには「clear」プロパティを使います。
clearプロパティの値は「left」「right」と「both」です。(左、右、両方、ですね。)

画像のテキスト回り込みの回では、すぐあとのp要素に clear: を指定しましたが、今回はもっと便利な方法を。

名前は何でもいいので、ひとつクラス(class)を作っておいて、それに clear: both; と指定しておきます。 これを使いたいタイミングで、空のブロック要素を作ってこのクラスを適用します。
(このブロック要素のmarginやpaddingは0にしておく必要がありますよ。)

このサンプルではクラス名を「.c-both」にしています。
.c-both { clear: both; }

今回のHTMLソースでは、li要素が終わったところに↓このように clear: both; を指定しています。
<nav>
<ul id="sample2">
<li><a href="#">HOME</a></li>
<li><a href="#">新着情報</a></li>
<li><a href="#">新商品のご紹介</a></li>
<li><a href="#">店舗情報</a></li>
<li><a href="#">お客様の声</a></li>
<div class="c-both"></div> <!--←カラのDIVをかましてフロートをクリア-->
</ul>
</nav>

このサンプルでは float: left; しか使ってないので clear: left; で良さそうなもんですが、
サイト全体を作るときには、もしかしたら float: right; を使うことがあるかもしれないでしょ?
そういうときもこれ1コで流用できるように both(両方)で作っといた方が便利。

次回予告

次回は、ブログのサイドメニューなどによく使われる、
dl要素をつかったナビをCSSで整えてみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.