入門9:【CSS/display】の使い方・注意点をすぐに理解したい人へ

入門9:【CSS/display】の使い方・注意点をすぐに理解したい人へ CSS入門
CANIT先生
CANIT先生

前回は「入門8:CSS/position】をすぐに理解したい人向け徹底解説」でポジションを実践的に解説しました

猫田さん
猫田さん

位置を制御するプロパティだったね

牛山くん
牛山くん

今回はどんなプロパティですか?

CANIT先生
CANIT先生

今回は要素の表示形式を指定するdisplayプロパティです。要素を消す以外にも、文章を表のように見せたり、リストのように見せたりすることもできますよ

このページではCSSのdisplayプロパティの使い方や注意したいポイントについて解説します。displayを学ぶことで要素の表示形式を自在に指定できるようになるでしょう。

CSSのdisplayって何?

CSSのdisplayって何?
CANIT先生
CANIT先生

displayは要素の表示形式を指定するプロパティです。対象となる要素に制限はありません。div要素やspan要素など、対象の種類を選ばずに使えます

displayには様々な用途がありますが、基本となるのは次の4つです。

  • block
  • inline
  • list-item
  • none

CSS初心者の中には、この4つしか知らない方も多いのではないでしょうか。現在は、CSSのバージョンアップに伴ってdisplayプロパティでできることが増えています

猫田さん
猫田さん

日々進化して複雑になっているのねー

CANIT先生
CANIT先生

複雑になっているわけではないのですが、より効率的にするために種類が増えているといった感じです。では、まずdisplayプロパティの種類から解説しますよ

displayプロパティの種類

displayプロパティの種類
CANIT先生
CANIT先生

displayプロパティには多くの種類があります。ここではプロパティの種類を大きく5つに分けて、それぞれの概要を紹介しますよ

牛山くん
牛山くん

了解です!

①:ブロック

CANIT先生
CANIT先生

まずは、ブロックに関するプロパティです

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タグと同じように、文章と並んで表示されます。ブロック要素のような自動改行は起こりません。

しかし、ブロック要素のように幅や高さ、余白を指定できるので、ブロック要素を横並び表示するときに使うと便利です。

②:テーブル

CANIT先生
CANIT先生

続いては、テーブルに関するプロパティです。このプロパティは、対象要素を強制的にテーブルのような見た目で表示します

親となるタグに対して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タグと同じように扱います。

猫田さん
猫田さん

なんか、めちゃくちゃ多くないか?

牛山くん
牛山くん

たしかに……

CANIT先生
CANIT先生

言うと思いました(笑) 一気に覚える必要はないので大丈夫ですよ

③:ルビ

パソコン
CANIT先生
CANIT先生

続いてルビです。 これは、rubyタグ以外の要素を、ルビ関連のタグと同じように扱うプロパティです

display:ruby

指定要素をrubyタグと同じように扱います。

display:ruby-base

指定要素をrbタグと同じように扱います。

display:ruby-text

指定要素をrtタグと同じように扱います。

display:ruby-base-container

指定要素をrbcタグと同じように扱います。

display:ruby-text-container

指定要素をrtcタグと同じように扱います。

④:表示・継承

CANIT先生
CANIT先生

表示・継承に関するプロパティは2つです。

display:none

要素を非表示にします。要素のあった領域は詰められます

パソコンとモバイルで表示したい要素が異なるときなどに使います。

display:inherit

親要素のdisplay値を引き継ぎます。

⑤:コンテナ

CANIT先生
CANIT先生

最後に紹介するのは、要素をコンテナとして利用する際のプロパティです。コンテナ関連のdisplayプロパティは4つあります

display:flex

親要素に指定することで子要素を横並びに表示できます。

display:inline-block

display:flexをインライン要素にしたものです。flexとの違いは横幅がコンテナの中身に依存することです。

display:grid

指定要素をグリッドコンテナボックスにします

グリッドコンテナボックスは、グリッドレイアウトを実現するためのボックスです。グリッドレイアウトとは画面を方眼紙のように捉え、正方形や長方形のパーツを組み合わせて作るレイアウトのことです。display:gridを使うことで簡単にグリッドレイアウトを実現できます。

グリッドコンテナボックスの子要素はアイテムとして扱われます。アイテムに幅や高さを指定することでボックスを配置できます。

display:inline-grid

display:gridと同じように指定要素をグリッドコンテナボックスにします。こちらのプロパティで生成されたボックスはインライン要素になります。

displayプロパティの注意点

displayプロパティの注意点
CANIT先生
CANIT先生

ここからは、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
CANIT先生
CANIT先生

display:noneを使うときは、それがユーザー体験向上のための非表示になっているかをチェックしたほうがよいでしょう

牛山くん
牛山くん

使い方を間違うと偽装行為のように思われてしまうこともあるんですね

④:display flexとfloatの違い

display:flexと似た用途のプロパティにfloatがあります。どちらも要素を横並びで表示するときに使いますが、2つのプロパティは異なる仕組みで動きます。

display:flex

display:flexは横並びのデザインを簡単に実現するためのプロパティです。親要素にflexを指定することで自動的に子要素が配置されます。

flexのデメリットは要素が自動配置されることです。細かな調整ができないので、ピクセル単位で厳密にデザインを再現するのが難しくなります。

float

floatは横並びを目的としたプロパティではなく、回り込みを指定するプロパティです。画像の横にテキストを回り込ませるのが主な使い道です。

ブロック要素にfloatを指定することで擬似的に横並びレイアウトを再現できます。1つ1つのブロック要素に対して指定を行うため、細かな調整が可能です。

displayプロパティの記述例

displayプロパティの記述例
CANIT先生
CANIT先生

ではここからは、よく使う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の使い方まとめ

CSS displayの使い方まとめ
CANIT先生
CANIT先生

要素の表示形式を指定するのがdisplayプロパティの役割です。displayプロパティを使うとレイアウトが簡単になり、要素の非表示などの細かい調整ができるようになります。displayはCSSプロパティの中でも基本的なものなので、最初に覚えたいものの1つですね

牛山くん
牛山くん

displayにはflexとfloatや、noneとvisibility:hiddenのように似ている動きのプロパティがいくつかありましたね

それぞれにメリット・デメリットがあるので、使い分けられるとよりデザインを再現しやすくなるでしょう。

CANIT先生
CANIT先生

次回は「入門10:【CSS/Flexbox】基本を抑えたい方へ〜基礎知識とサンプル」で割と新しいFlexboxについて解説していきます。

猫田さん
猫田さん

次も頑張ろー!

挫折率が高い??プログラミング学習のポイント
駆け出しエンジニアが一緒に学ぶ
CANITは、Progateやドットインストールで独学している人達同士をつなげます。駆け出しエンジニアのあなたのためのSNSです。
CSS入門
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

CANIT
タイトルとURLをコピーしました