前回は「入門８：【CSS/position】をすぐに理解したい人向け徹底解説」でポジションを実践的に解説しました
位置を制御するプロパティだったね
今回はどんなプロパティですか？
今回は要素の表示形式を指定するdisplayプロパティです。要素を消す以外にも、文章を表のように見せたり、リストのように見せたりすることもできますよ
このページではCSSのdisplayプロパティの使い方や注意したいポイントについて解説します。displayを学ぶことで要素の表示形式を自在に指定できるようになるでしょう。
CSSのdisplayって何？
displayは要素の表示形式を指定するプロパティです。対象となる要素に制限はありません。div要素やspan要素など、対象の種類を選ばずに使えます
displayには様々な用途がありますが、基本となるのは次の4つです。
- block
- inline
- list-item
- none
CSS初心者の中には、この4つしか知らない方も多いのではないでしょうか。現在は、CSSのバージョンアップに伴ってdisplayプロパティでできることが増えています。
日々進化して複雑になっているのねー
複雑になっているわけではないのですが、より効率的にするために種類が増えているといった感じです。では、まずdisplayプロパティの種類から解説しますよ
displayプロパティの種類
displayプロパティには多くの種類があります。ここではプロパティの種類を大きく5つに分けて、それぞれの概要を紹介しますよ
了解です！
①：ブロック
まずは、ブロックに関するプロパティです
display:inline
対象要素を強制的にインラインボックスにします。
ブロック要素のdivタグにdisplay:inlineを指定すると、インライン要素であるspanタグと同じような振る舞いをします。
display:block
対象要素を強制的にブロックボックスにします。
主にURLリンクを貼るためのaタグ（アンカータグ）に使います。アンカータグはインライン要素であるため通常は幅や高さを指定できません。display:blockを使いブロック要素化することで、幅と高さを持ったリンクボタンを生成できるようになります。
display:list-item
spanタグなどを強制的にリスト項目として扱います。
リストを作るときはulタグやolタグを使うのが主流です。そのため、display:list-itemは特別な事情がない限りは使われません。
display:inline-block
対象を、インライン要素のように扱えるブロック要素にします。
display:inline-blockが指定されたタグはspanタグと同じように、文章と並んで表示されます。ブロック要素のような自動改行は起こりません。
しかし、ブロック要素のように幅や高さ、余白を指定できるので、ブロック要素を横並び表示するときに使うと便利です。
②：テーブル
続いては、テーブルに関するプロパティです。このプロパティは、対象要素を強制的にテーブルのような見た目で表示します
親となるタグに対してdisplay:tableやdisplay:inline-tableを指定し、子となるタグにdisplay:table-cellを指定することで表構造を定義していきます。
display:table
div要素を使ってテーブル表示を再現するプロパティです。
HTMLのtableタグが存在するため、あまり使う機会はありません。display:tableを使うのは、デバイスの画面サイズに応じて表示方法を切り替えるときです。CSSはデバイスの画面サイズによって異なるスタイルを定義できます。
display:tableを使えば、画面が広いときはテーブル形式で表示し、画面が狭いときはブロック要素として表示することができます。
display:inline-table
基本はdisplay:tableと同じですが、こちらはインライン要素になります。自動改行が発生せず、文章と横並びの状態でテーブルが表示されます。
ここからはdisplay:tableやdisplay:inline-tableの子要素に指定するプロパティを簡単に説明します。
display:table-header-group
指定要素をtheadタグと同じように扱います。
display:table-row-group
指定要素をtbodyタグと同じように扱います。
display:table-footer-group
指定要素をtfootタグと同じように扱います。
display:table-row
指定要素をtrタグと同じように扱います。
display:table-column
指定要素をcolタグと同じように扱います。
display:table-column-group
指定要素をcolgroupタグと同じように扱います。
display:table-cell
指定要素をtdタグと同じように扱います。
display:table-caption
指定要素をcaptionタグと同じように扱います。
なんか、めちゃくちゃ多くないか？
たしかに……
言うと思いました（笑） 一気に覚える必要はないので大丈夫ですよ
③：ルビ
続いてルビです。 これは、rubyタグ以外の要素を、ルビ関連のタグと同じように扱うプロパティです
display:ruby
指定要素をrubyタグと同じように扱います。
display:ruby-base
指定要素をrbタグと同じように扱います。
display:ruby-text
指定要素をrtタグと同じように扱います。
display:ruby-base-container
指定要素をrbcタグと同じように扱います。
display:ruby-text-container
指定要素をrtcタグと同じように扱います。
④：表示・継承
表示・継承に関するプロパティは2つです。
display:none
要素を非表示にします。要素のあった領域は詰められます。
パソコンとモバイルで表示したい要素が異なるときなどに使います。
display:inherit
親要素のdisplay値を引き継ぎます。
⑤：コンテナ
最後に紹介するのは、要素をコンテナとして利用する際のプロパティです。コンテナ関連のdisplayプロパティは4つあります
display:flex
親要素に指定することで子要素を横並びに表示できます。
display:inline-block
display:flexをインライン要素にしたものです。flexとの違いは横幅がコンテナの中身に依存することです。
display:grid
指定要素をグリッドコンテナボックスにします。
グリッドコンテナボックスは、グリッドレイアウトを実現するためのボックスです。グリッドレイアウトとは画面を方眼紙のように捉え、正方形や長方形のパーツを組み合わせて作るレイアウトのことです。display:gridを使うことで簡単にグリッドレイアウトを実現できます。
display:inline-grid
display:gridと同じように指定要素をグリッドコンテナボックスにします。こちらのプロパティで生成されたボックスはインライン要素になります。
displayプロパティの注意点
ここからは、displayプロパティを使用する際の注意点を紹介しますよ。 よく使うプロパティだけにしっかり覚えておきましょう
①：ブラウザの対応状況に注意しよう
CSSバージョン1で定義されていたdisplayプロパティは以下の4つです。
- block
- inline
- list-item
- none
それ以外のプロパティは後から追加されたものであり、ブラウザによって実装状況が異なります。新しいプロパティを使うときはブラウザの対応状況をチェックするようにしましょう。
使えないこともあるのかー
②：display noneとvisibility hiddenの違い
display:noneとvisibility:hiddenはどちらも要素を非表示にするコマンドです。この2つの違いは、非表示にした領域が詰めて表示されるかどうかです。
display:none
display:noneは非表示にした領域が詰められます。ボックス自体がなかったことになり、レイアウトが変化します。
visibility:hidden
visibility:hiddenは非表示にした領域に空っぽのボックスが表示されます。ボックスは残っているためレイアウトは変化しません。
③：display noneと隠しテキスト
display:noneは要素を非表示にしますが、画面上で非表示となるだけでデータは残っています。
display:noneは便利なプロパティですが、検索エンジンの表示順位を気にかける場合は注意が必要です。大量の要素を非表示にすると、検索エンジンのロボットを騙すための隠しテキストだと判断されることがあるからです。
以下はGoogleのガイドラインからの情報です。
https://developers.google.com/search/docs/advanced/guidelines/hidden-text-links
サイトに隠しテキストや隠しリンクが含まれていないかを判断する際は、ユーザーから見えにくい部分がないか、ユーザーではなく検索エンジンのみを対象としたテキストやリンクがないかを確認します。ただし、隠しテキストがすべて偽装行為と見なされるわけではありません。
display:noneを使うときは、それがユーザー体験向上のための非表示になっているかをチェックしたほうがよいでしょう
使い方を間違うと偽装行為のように思われてしまうこともあるんですね
④：display flexとfloatの違い
display:flexと似た用途のプロパティにfloatがあります。どちらも要素を横並びで表示するときに使いますが、2つのプロパティは異なる仕組みで動きます。
display:flex
display:flexは横並びのデザインを簡単に実現するためのプロパティです。親要素にflexを指定することで自動的に子要素が配置されます。
flexのデメリットは要素が自動配置されることです。細かな調整ができないので、ピクセル単位で厳密にデザインを再現するのが難しくなります。
float
floatは横並びを目的としたプロパティではなく、回り込みを指定するプロパティです。画像の横にテキストを回り込ませるのが主な使い道です。
ブロック要素にfloatを指定することで擬似的に横並びレイアウトを再現できます。1つ1つのブロック要素に対して指定を行うため、細かな調整が可能です。
displayプロパティの記述例
ではここからは、よく使うdisplayプロパティのコードを使って記述例を紹介します
待ってました！実践編の方が理解しやすいから好き！
一部の要素だけを非表示にする
一部の要素だけを非表示にするコードです。
HTMLタグ
<div class=”p1”>1：要素を非表示にします。</div>
<div class=”p2”>2：要素を<span class=”ko”>非表示</span>にします。</div>CSS
.p1 { display : none; }
.ko { display : none; }上記のコードでは1行目が完全に非表示になり、2行目は「非表示」という文字部分だけが非表示になります。文字は詰められ、2行目の文章は「要素をにします」と表示されます。
リンクをボタンとして表示する
アンカータグで囲った文字をボタンのように表示する例です。
HTMLタグ
<a href=”#” class=”btn”>リンク</a>CSS
.btn {
display:block;
width:200px;
height:60px;
padding:10px;
background-color:#4C74E7;
color:#FFFFFF;
text-align:center;
}display:blockの指定によりアンカータグがブロック要素になります。上記のコードでは幅200ピクセル、高さ60ピクセルのボタンとして表示されます。
通常、アンカータグのクリック（タップ）が有効な領域は文字列部分のみですが、ブロック要素にするとブロック全体がクリックの対象となります。リンクのボタン化はデザインのためだけでなくユーザーの操作性向上にも役立ちます。
CSS displayの使い方まとめ
要素の表示形式を指定するのがdisplayプロパティの役割です。displayプロパティを使うとレイアウトが簡単になり、要素の非表示などの細かい調整ができるようになります。displayはCSSプロパティの中でも基本的なものなので、最初に覚えたいものの1つですね
displayにはflexとfloatや、noneとvisibility:hiddenのように似ている動きのプロパティがいくつかありましたね
それぞれにメリット・デメリットがあるので、使い分けられるとよりデザインを再現しやすくなるでしょう。
次回は「入門10：【CSS/Flexbox】基本を抑えたい方へ〜基礎知識とサンプル」で割と新しいFlexboxについて解説していきます。
次も頑張ろー！