[15-4-2-2] ナビを横並びに_追加記事(display使用)

*ご注意*

この記事は2011年6月にアップしたもので、情報が古いです。
display: inline 、display: box には下記の注意点があります。(2015年8月記)

display: inline でもナビはできますが、これを指定した要素がインラインの性質になるため、上下の margin が指定できなくなります。
「パンくずリスト」などのテキストのナビには適しますが、グローバルナビゲーションなどには display: inline-blockdisplay: table などのほうが最適です。
display: inline-blockdisplay: table については、後日「はじめてのCSS」で取り上げる予定です。)

display: box のほうは、2011年6月時点では定義されていましたが、
その後、display: box display: flexbox と変更され、最終的にはdisplay: flex という「CSS Flexible Box Layout Module」の値になりました。
ですので、今後 display: box は使っても意味がありませんのでご注意ください。
また、display: box はベンダープレフィックス付きの実装となっています。

display: box のブラウザ対応: 
IEは実装せず。Chromeはver.4〜20、Safariは3.1〜6.0、Firefoxは2〜21、iOSは3.2〜6.1、Androidは2.1〜4.3まで、いずれもベンダープレフィックス付きの実装。

display: inline に関しては間違っているわけではないので若干手直しして記載を残し、
display: box に関しては注意書きを施して記載を残すことにいたします。ご了承ください。

[15-4-2] リストでナビゲーション( その2 : ナビを横に並べる )では、
CSSの「float」で横に並べる方法しか紹介しませんでしたが、
リスト要素なら CSSの「display: inline」のほうが簡単。
また、CSS3から新たに加わった「display: box」を使う方法もあります。

CSSプロパティと値 display: inline
display: box

サンプルはこちら


↑プレビュー画像は前回の記事と同じですが、サンプルHTMLは新しく作り直しています。
サンプル画像をクリックすると、HTMLファイルが開きます(別ウィンドウで開く) 。

displayプロパティについて

「display」は、ブロックレベル・インラインなどの「表示形式」を指定するプロパティです。

ブロックレベルとは、<h1〜h6> <div> <p>や、リスト要素の <ul> <ol> <li> <dl> <dt> <dd> など、
ひと固まりのブロックになる要素で、 ブラウザのデフォルトスタイルで前後が改行されます。

インラインは、テキストの一部のような扱いになる要素 <span> <a>などで、ブラウザのデフォルトスタイルでは前後が改行されません。

ブロックレベルの要素に「display: inline」と指定すれば、インラインの性質(改行なし)になり、
インラインの要素に「display: block」としてやれば、ボックスレベルの性質(幅や高さや上下のマージンを使える)になります。

例えば、今回のように、ボックスレベルの<li>に「display: inline;」と指定して横に並べるとか、
インライン要素の<a>に「display: block;」と指定して、幅や高さを与えるなど、その要素がデフォルトで持つスタイルの性質を変えることができるんです。

CSSの「display: inline」で横に並べます

display: inline は、「パンくずリスト」などのテキストのナビゲーションには手軽です。

CSSソースを見てみましょう。重要部分のみ表示。

ul#sample1 li {
	list-style: none;
	display: inline;
}

<li>に「display: inline」と指定しただけ。(前回の「float: left」をこれにすげ替えただけ)
これで<li>要素は横に並びます。floatの時の「clear: both;」の指定は不要になります。

CSS3の「display: box」で横に並べます

*ご注意*

display: box は、2011年6月時点では定義されていましたが、
その後、display: flexbox と変更され、最終的にはdisplay: flex という「CSS Flexible Box Layout Module」の値になりました。
ですので、今後 display: box は使っても意味がありませんのでご注意ください。
また、display: box はベンダープレフィックス付きの実装となっています。

display: box のブラウザ対応: 
IEは実装せず。Chromeはver.4〜20、Safariは3.1〜6.0、Firefoxは2〜21、iOSは3.2〜6.1、Androidは2.1〜4.3まで、いずれもベンダープレフィックス付きの実装。

では、もうひとつの方法「display: box」で横に並べてみます。
「display: box」を親要素に指定すると、子要素(ブロックレベル)が左から順に横に並びます。

ul#sample2 {
	margin:0px;
	padding: 0px;
	display: -moz-box;
	display: -webkit-box;
    display: -o-box;
	display: box;
}
ul#sample2 li {
	list-style: none;
}

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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