【17-1】displayプロパティでボックスの表示形式を自由に変えよう

最終更新日:2016年08月17日  (初回投稿日:2016年03月16日)

displayは、要素の見た目(表示形式)を変える ことができるプロパティです。
例えば、インラインの要素をブロックに変えたり、その逆もOK。
リストと関係ない要素を リスト風に表示したり、テーブルじゃない要素をテーブル風にしたり。

テーブル風なモノは、以前「display: table」「display: table-cell」を使ったサンプルを紹介しましたね。画面の縦中央に配置したい時にはテーブルの性質を使うというサンプル↓(vhという単位の紹介の記事でしたが)

また、先日(2016年3月)やっと勧告候補になった Flexbox も、この displayプロパティで display: flex と指定することから始めます。

display は「表示」という意味。各要素の表示形式を指定するのが displayプロパティです。

もちろんHTML要素はそれぞれ文法的に正しく書かなきゃいけませんが、その上で、レイアウトで必要な場合に表示形式を変えれば、ウェブページがグッと見やすくなります。
そんなdisplayプロパティを 今回から見ていきましょう。

記事中に、サイト制作でよく使う「パンくずリスト」「メニューボタン」「プルダウンメニュー」などのサンプルソースもあります。displayプロパティを使って簡単にできる基本的なモノばかりです。

displayプロパティは、かなり内容が盛りだくさんなので記事を数回に分けます。こんなかんじで↓

【17-1】display でボックスの表示形式を自由に変えよう ←今日はココ
displayプロパティと値の一覧/display: inline/block/inline-block/none/run-in
【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく
display:list-item で、<li>要素じゃない要素を<li>要素のように扱えます
【17-2-2】リスト関連の要素のためのCSSプロパティ
リスト関連の要素だけに使えるCSSプロパティをまとめます
【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく
display:table などで、テーブル関連じゃない要素にテーブルの性質を与えます
【17-3-2】テーブル関連の要素のためのCSSプロパティ
テーブル関連の要素だけに使えるCSSプロパティをまとめます
【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに
display:ruby で、要素にルビ(ruby)を表示する機能を与えます
【17-4-2】ルビ関連の要素のためのCSSプロパティ
ルビ関連の要素だけに使えるCSSプロパティをまとめます
display: flex に関しては、Flexbox として仕切り直します。
display: flex で「Flexboxコンテナ」を定義し、その他のプロパティも使ってフレキシブルボックスを作ります。【18-1】Flexbox を使おう!(display:flexでFlexboxを作る)から5回くらいでまとめる予定です。
というわけで、本日のINDEX
  1. 各HTML要素の ブラウザデフォルトのdisplayの値
  2. displayプロパティの値一覧
  3. displayプロパティのベーシックな値
    1. display: inline でパンくずリストを作る
    2. display: block でリンクボタンを作る
    3. display: inline-block でメニューを作る
    4. display: none でプルダウンメニューを作る
  4. display:run-in を使ってみたけど...

参考資料:W3C - CSS Display Module Level 3

各HTML要素の ブラウザデフォルトのdisplayの値

HTML要素のスタイルには大きく分けて「インライン」と「ブロック」がありましたね。
(インラインやブロックの詳細は【9】HTML要素の インラインレベル・ブロックレベル について にも書いています)
横に並ぶのが「インライン」、幅や高さを持ち縦に並ぶのが「ブロック」ですね。
これらのスタイルは displayプロパティで決められているんです。
ブラウザのデフォルトスタイルが display: inlineだったらインラインdisplay: block だったらブロックなんです。
いろんなブラウザがあるけれど、どのブラウザも業界の常識としてこう統一されているんです。

また、ブラウザデフォルトでその要素特有の display の値を持つ要素もあります。
<li>要素display: list-item
<table>display: table
<th> や <td>display: table-cell といったかんじです。

主な HTML要素が持っている デフォルトの displayの値 を一覧にしてみました。

HTML要素 ブラウザデフォルトのdisplayの値
a(中身がフレージング・コンテンツのとき)
span ruby sub sup strong em mark b i small br u s ins del
cite q abbr dfn code kbd samp var bdo label

フレージング・コンテンツに分類される要素はインラインですね)

★以下は置換要素
img area audio canvas embed iframe object video menu など
エンベッディド・コンテンツの要素(外部コンテンツを組み込む要素)ですね)
display: inline
input textarea select button
インタラクティブ・コンテンツに分類される要素(フォームの部品の要素))
display: inline-block
ヘディング・コンテンツに分類される要素
h1〜h6
セクショニング・コンテンツに分類される要素
section article aside nav
フロー・コンテンツで他のカテゴリに含まれないもの
header footer div p address pre figure hr blockquote  ul ol dl li table form fieldset
●このほか、html要素、body要素も
display: block
li(リストアイテム。ulol の子要素) display: list-item
tableテーブル display: table
tr(テーブルの行) display: table-row
th td(テーブルのセル) display: table-cell
theadtableの横列をグループ化する要素) display: table-header-group
tbodytableの横列をグループ化する要素) display: table-row-group
tfoottableの横列をグループ化する要素) display: table-footer-group
colgrouptableの縦列をグループ化する要素) display: table-column-group
coltableの縦列をグループ化する要素) display: table-column

display:inline の要素の中でも、置換要素(replaced elements)と呼ばれるものは、インラインなんだけど幅や高さを持てる要素です。
文法上はインラインですが、表示は display:inline-block のようになります。

インラインレベルの置換要素・非置換要素については、
【9】HTML要素の インライン・ブロックレベル について をご覧ください。

displayプロパティの値一覧

上記のdisplayプロパティ 以外にも「flex」「inline-flex」という値もあります。
displayプロパティの値を一覧に整理しました。

CSS1, CSS2 からのものは、古いブラウザでも対応。CSS3の新しい値は「Flexbox」がやっと2016年3月に勧告になったくらいで、まだドラフト(草案)のものが多く、しかも草案の中でいろんな値が登場したり消えたりしています。とにかく現時点での値をまとめました。
(2016年3月現在ドラフトのものはグレーバックにしています)

display の値
none 要素を非表示に。領域も無くなります。 Basic
(CSS1)
inline 要素はインラインの性質になります。これがデフォルト値
ただし、ブラウザのデフォルトスタイルは各要素ごとに決まっているので、displayを省略したら全部 inline になるわけではありません。
各要素のブラウザデフォルトのdisplayの値はすぐ下に
block 要素はブロックレベルの性質になります。
list-item 要素は<li>要素の表示になり、リストマーカーが付けられます。
inline-block 要素はインラインプロックの性質に。幅や高さはあるけど、インラインのように横に並びます。 Extended
(CSS2.1)
table 要素は<table>要素と同じ性質になります。 Table
model
(CSS2.1)
table-cell 要素はテーブルのセル = <td>要素と同じ性質になります。
table-row 要素は<tr>要素と同じ性質になります。
table-header-group 要素は<thead>要素と同じ性質になります。
table-row-group 要素は<tbody>要素と同じ性質になります。
table-footer-group 要素は<tfoot>要素と同じ性質になります。
table-column-group 要素は<colgroup>要素と同じ性質になります。
table-column 要素は<col>要素と同じ性質になります。
table-caption 要素は<caption>要素と同じ性質になります。
inline-table 要素は<table>要素と同じ性質だけど、インラインの並び方になります。
flex 要素を Flexboxコンテナにします。 Flexbox
model
(CSS3)
inline-flex インラインの性質を持つ Flexboxコンテナにします。
ruby 要素は<ruby>要素と同じ性質になります。 Ruby
Model
(CSS3)
ドラフト
ruby-base 要素は<rb>要素と同じ性質になります。
ruby-text 要素は<rt>要素と同じ性質になります。
ruby-base-container 要素は<rbc>要素と同じ性質になります。
ruby-text-container 要素は<rtc>要素と同じ性質になります。
run-in 要素はランインボックスになります。後に続く要素によってブロックかインラインかに変化して表示されます。 Run-In
(CSS3)
ドラフト

上記の値のほかに、CSS3のドラフトで新たに flow flow-root grid inline-grid contents という値も登場しているようですが、まだ対応ブラウザが無いっぽい(ので表示がよくわからん)ため、今回は省略しています。(2016年3月記)

displayプロパティの値の継承と適用要素です。

値の継承 なし 適用できる要素 全部

displayプロパティのベーシックな値

というわけで、今回は displayの値の中でもベーシックな inline, block, inline-block, none を使ってみましょう。すっごくよく使う値です。
これらは過去記事にもう何度か出てきてたけど、今回はもうちょっと具体的に、ウェブページでよく使うメニューなどのサンプルを作ってみましたよ↓

display: inline でパンくずリストを作る

ブロックレベルの要素をナビゲーションとして横並びにしたい時、display: inline が便利です。
ヘッダーのメニューとか、パンくずリストでよく使います。
パンくずリストを作ってみましょう。<li>要素を display:inline で横に並べて作ります。
★パンくずリスト(breadcrumb list)とは、ユーザにウェブサイトの階層(の今どこを見ているか)を教えるナビです。

  • Top page
  • 2nd page
  • Current page
<ul id="smp2_1">
<li><a href="#">Top page</a></li>
<li><a href="#">2nd page</a></li>
<li>Current page</li>
</ul>
ul#smp2_1 {
	margin:0;
	padding:0;
    font-size:0; /*親のulのフォントサイズを0に初期化しておきます*/
    border:solid 1px #ccc;}
ul#smp2_1 li {
	display: inline;
	font-size:0.8rem;
	line-height:3;
	margin:0 0.2em; 
	padding:0;}
ul#smp2_1 li::before {content: "> "}
ul#smp2_1 li:first-child::before {content: ""}

インラインレベルの要素は、親の font-size を継承するので、要素の周りにスペースができてしまいます。それを解消するために、親に「font-size:0」を指定しています(4行目)子要素に改めて font-size を指定する必要があるけどね。
値の継承についての詳細は【5】CSSの値の継承(Inheritance)のルール で。
また、8行目の「0.8rem」は、ルート(html要素)に対しての em という単位です。
rem についての詳細は【7-1】CSSのサイズの単位について(em, %, px, rem の使い分け)で。

★パンくずリストで重宝する擬似要素と擬似クラス★
12行目で使ってる ::before擬似要素(Pseudo-elements)です。
指定の内容の「content: "> "」は、contentプロパティで「> 」というコンテンツを挿入するってこと。この場合 <li>要素の前に「> 」を付けるという指定です。

13行目の :first-child擬似クラス(Pseudo-classes)です。
この場合は最初の<li>要素だけを指しています。
li:first-child::before {content: "" } は、もうわかりますね。
最初の<li>要素の前に「> 」を入れたくないので空のコンテンツを入れる指定をしてます。

これらは、擬似要素 ::after、擬似クラス :last-child を使ってもいけますね。
ul#smp2_1 li::after {content: "> "}
ul#smp2_1 li:last-child::after {content: ""}
と指定しても同じことです。

display: block でリンクボタンを作る

<a>要素をブロックレベルにする基本中の基本の使い方です。

<a>要素はインラインなので、普通はこんなかんじでテキストの領域のみにリンクができますよね。
CLICK!

<a>要素を display:block でブロックレベルにすると幅や高さを持たせることができるし、テキスト以外の背景領域も反応するので、クリックしやすくなります。

CLICK!
<a href="#">CLICK!</a>
a {
	-webkit-box-sizing: border-box;
    box-sizing: border-box; /*box-sizing*/
	display: block;
	text-align:center;
	line-height:1;
	margin:0;
	padding:1em;
	width:80px;
	background:#fdf5a0;
	border-radius:10px}

display: inline-block でメニューを作る

<li>要素を display:inline-block で横に並べてメニューを作ります。
<li>要素を inline-block にすることで、blockの性質を持ったまま横に並べることができます。

  • MENU1
  • MENU2
  • MENU3
<ul>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
</ul>
ul#smp2_3 li {
    -webkit-box-sizing: border-box;/*box-sizing*/
    box-sizing: border-box;
	display: inline-block;
	text-align:center;
	line-height:1;
	margin:0 5px 0 0;
	padding:0;
	width:80px;
	background:#fdf5a0;
	border-radius:10px}
ul#smp2_3 li a {display:block; padding:1em}  /*a要素にdisplay:blockして背景領域もリンクさせます*/
ul#smp2_3 li:nth-child(2) {background:#fed5f4}
ul#smp2_3 li:nth-child(3) {background:#c9f0ff}

display: none でプルダウンメニューを作る

display:none を指定すると、領域ごと無くなります
HTMLソースで「表示したくないけど、また使うかもしれないから削除しないでとっておきたい」ときコメントアウト(HTMLのコメント(<!-- -->)で囲む)をしたりしますが、これと同じように非表示にしたい要素に display:none を指定すれば見えなくなり、領域(スペース)も無くなります。

同じく「非表示」になる指定で visibility:hidden がありますが(これは【19】で紹介する予定です)、こちらは領域はそのまま残ります。ただ隠すだけ。
編集用語で言うと、display:none は「トルツメ」、visibility:hidden は「トルママ」です。

display:nonedisplay:block を切り替えて、サブメニューを通常時は非表示、マウスオーバーで表示にしてプルダウンメニューも作れます。CSSだけで簡単に作れるプルダウンメニューは便利なのでサンプルを貼っておきますね。

*ご注意*
ただしコレは「:hover」を使ってサブメニューを表示させるので、PCサイト限定。スマホでは見れません。
スマホの場合のプルダウンメニューは、jQueryの「.toggleClass」などを使うとイイですね。
jQueryの「.toggleClass」に関しては、ドロワーメニュー(ハンバーガーメニュー)を簡単な jQueryとCSSだけで作る手順 | *Web Design 覚え書き*をご覧ください。

<ul id="smp2_4">
  <li><a href="#">MENU1</a>
    <ul>  <!-- li要素の中に ulを入れ子にします。これが肝心-->
      <li><a href="#">Sub menu1</a></li>
      <li><a href="#">Sub menu2</a></li>
      <li><a href="#">Sub menu3</a></li>
    </ul>
  </li>
</ul>
ul#smp2_4 {
	position:relative; /*親のulにposition:relativeを指定しておきます*/
	z-index:10;        /*他のコンテンツより上のレイヤーにしておきます。*/
	margin:0;
	padding:0}
ul#smp2_4 li {         /*子孫セレクタで、すべてのli(孫も)への指定です*/
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
	display:inline-block; /*親のliは横に並ぶ指定です*/
	text-align:center;
	line-height:1em;
	margin:0 5px 0 0;
	padding:0;
	width:110px;
	background:#fdf5a0;
	border-radius:0.5em}
ul#smp2_4 li a {display:block; padding:1em}
ul#smp2_4 li ul li a {display:block; padding:0.5em 1em}
ul#smp2_4 li ul {
	display:none;      /*通常は非表示にしておきます*/
    position:absolute; /*親のul内に絶対位置指定すれば、表示されても他の要素に影響を与えずに済みます*/
	top:2.5em;
	margin:0;
	padding:0}
ul#smp2_4 li ul li {
	display:block;     /*サブメニューのliはブロックレベルに戻して縦に並べます*/
	border:solid 2px #fdf5a0;
	border-top:none;
	background:#fff;
	border-radius:0}
ul#smp2_4 li ul li:last-child {border-radius:0 0 0.5em 0.5em}
ul#smp2_4 li:hover > ul {
	display:block} /*親のliにマウスオーバーしたら、その中のulを表示します*/

positionプロパティについて
プルダウンメニューは、サブメニューに「display:none」を指定しておいて、親メニューにマウスオーバーしたら「display:block」で表示するという理屈です。
が、ただ単に「display:block」にしたら、サブメニューの領域が無かったところに突然その領域ができるので、それ以降の要素がドカッと下がるよね。で、マウスが他に行ったらまたガって上がって、なんとも見にくいサイトになります。
それを防ぐために、サブメニューの<ul>要素に position:absolute を指定(21行目)して、親の<ul>要素に対して絶対位置で配置します。それで親以外の他の要素との関係が絶たれて、ドカ下がりを防げるんです。*positionプロパティについては、後日詳しくやるつもりです。

display:run-in を使ってみたけど...

display: run-inって、大昔(CSS1の頃)にあって、一度廃止され、また今のドラフトに登場しているようです。ただ、今のところ実装しているブラウザは無いみたい(2016年3月記)

run-inって「突っ込む」という意味らしく、display:run-inを指定した要素は、すぐ後に続く要素がブロックレベルだったらインラインになって、その後続の要素の冒頭にに突っ込むらしいです。
ブラウザプレビューが今のところ見れなくて、なんとも言えませんが。

とりあえず、W3Cのサンプルソースをそっくりそのまま書いておきますね。
(参考資料:CSS Display Module Level 3__4. Run-In Layout
<dl>(記述リスト)で構成されていて、<dt>要素に display:run-in を指定しています。↓
(今のところ単なる dlの表示のままだけど、これがいつかちゃんと run-in になるかも)

dictionary
a book that lists the words of a language in alphabetical order and gives their meaning, or that gives the equivalent words in a different language.
glossary
an alphabetical list of terms or words found in or relating to a specific subject, text, or dialect, with explanations; a brief dictionary.

これ↑が、このように↓表示されたいらしい。(コレ↓は画像だけどね)

<dl id='smp_ri'>
  <dt>dictionary</dt>
  <dd>a book that lists the words of a language in ...(略)</dd>
  <dt>glossary</dt>
  <dd>an alphabetical list of terms or words found in ...(略)</dd>
</dl>
dl#smp_ri > dt {display:run-in}
dl#smp_ri > dt::after {content: ": "}

次回予告

今回は displayプロパティの基本的な値を使ってみましたが、他の値もどんどんいきますよ。
次回は、<li>要素じゃない要素を <li>要素っぽく表示できる display: list-item を使ってみよう。
また、リストのためのスタイルを指定する list-styleプロパティ も一緒に紹介します。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2017/09 | 10
- - - - - 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.