スタイルシート「CSSのdisplayプロパティ」を全部教えて！

こんにちは、ハナさん。WEBデザインにおいて欠かせないCSSのdisplayプロパティについて全部お教えします！displayプロパティは要素の表示方法を指定するプロパティで、9種類の値があります。blockやinlineはよく使われ、blockは要素を縦方向に並べて表示するとき、inlineは横方向に表示するときに使います。他にもflexやgridはレイアウトの構築に使われることが多く、tableはテーブルのセルを表示するときに使います。また、noneやhiddenは要素を非表示にするために使われます。このようにdisplayプロパティは、要素をどのように表示するかを指定できる重要なプロパティです。どのような場面でも役立つ知識ですので、覚えておくとよいでしょう。

このブログは、webデザイナーになりたい女子小学生ハナさんと、人工知能リュウとの質疑応答の様子を全てAIが執筆しています。リュウはたまに変な事を言いますが、どうか優しい気持ちでお読みください。

CSSのdisplayプロパティとは何ですか？

ハナ:リュウさん、CSSのdisplayプロパティとは何ですか？

リュウ:ハナさん、displayプロパティは要素の表示方法を指定するプロパティです。例えば、display:none;と指定するとその要素は非表示になります。また、display:inline;と指定すると、要素を行内要素として表示します。こんな感じで、表示方法を指定できるんです。分かりましたか、ハナさん？

displayプロパティの基本的な使い方とは？

ハナ:リュウさん、displayプロパティって基本的にどんな使い方があるんですか？

リュウ:displayプロパティは、要素を画面に表示する方法を指定するプロパティです。例えば、display: block;と指定すると、要素が一行ずつ表示されるブロックレベル要素になります。また、display: inline;と指定すると、要素が行内要素になり、他の行内要素と同じ行に表示されます。

ハナ:なるほど、blockとinlineというのは、大きさとか色とかが違う要素を、同じ行に並べたいとか、縦に一列で並べたいとかの場合に使うんですね。

リュウ:そうですね。また、display:flex;という指定もあって、この場合は要素を柔軟に配置することができます。例えば、横に3つ、縦に4つ、といったように、自由自在にレイアウトを設計することができますよ。

ハナ:わぁ、すごく便利そうですね！使ってみたいなぁ。ありがとうございました、リュウさん！

リュウ:どういたしまして、ハナさん。気になることがあったらいつでも聞いてくださいね。

displayプロパティの値とは何ですか？

ハナ:リュウさん、displayプロパティの値って何ですか？

リュウ:displayプロパティの値とは、HTMLやCSSで作られた要素をどのように表示するかを指定するものです。例えば、『display:none』は、その要素を非表示にすることができます。また、『display:inline』は、要素を行内要素として表示することができます。

ハナ:なるほど！でも、どういう時に使うんですか？

リュウ:例えば、ページ内の要素を非表示にしたい場合には『display:none』が使われます。また、テキストの一部として扱いたい場合は『display:inline』、要素をブロックとして扱いたい場合は『display:block』が使われます。

ハナ:うーん、まだちょっと分かりにくいかな…

リュウ:椅子に座っているのを想像してくれると分かりやすいかもしれません。椅子には、４本の脚があって、それを頼りに座っていますよね。displayプロパティの値は、椅子にとって脚の本数と同じようなものです。要素の表示方法を指定することで、その要素がどのように大事な役割を担っているかを決定することができるんですよ。

display: blockとは何ですか？

ハナ：リュウさん、display: blockって何ですか？

リュウ：あら、ハナさん、よくぞ聞いてくれました！display: blockとは、HTMLやCSSで使われる表示方法の1つですよ。要素を横並びではなく、縦に並べるように指定するものです。例えば、段落や見出しなどのようなブロック要素はdisplay: blockがデフォルトに設定されています。

ハナ：縦に並べるんですね！ありがとうございます！

リュウ：どういたしまして、ハナさん。分かりやすく説明できているでしょうか？display: blockが指定されることで、要素がブロックと呼ばれる箱のような形になって、縦に配置されるようになるのですよ。例えば、リストのような要素を表示する場合にも役立ちますね。

display: inlineとは何ですか？

ハナ: リュウさん、display: inlineって何ですか？

リュウ: ふむふむ、ハナさん。display: inlineは、HTMLとCSSでテキストや画像を表示する時に使う指定方法の一つで、その要素を行内で表示させることができますよ。例えば、複数の画像を並べたい時にdisplay: inlineを使えば、横一列に画像を並べることができます。わかりましたか、ハナさん？

display: inline-blockとは何ですか？

ハナ：リュウさん、display: inline-blockって何ですか？

リュウ：そうですね、ハナさん。displayとは要素の表示方法を指定するCSSのプロパティの一つで、inline-blockとはその要素をインライン要素とブロック要素の両方の特徴を持つように表示する方法です。

ハナ：インライン要素とブロック要素って何ですか？

リュウ：インライン要素はテキストなどと混じって、一つの行に表示される要素で、ブロック要素は縦に積み重なったブロックのような形で表現される要素です。display: inline-blockは、要素が行の中にあるように表示しながら、高さや幅の指定ができるので、使い勝手がいいんですよ。

ハナ：なるほど！ありがとうございました、リュウさん！

display: noneとは何ですか？

ハナ：リュウさん、display: noneとは何ですか？

リュウ：ハナさん、display: noneは、HTMLやCSSで要素を非表示にすることを意味します。例えば、あるウェブページに表示される画像やテキストが一時的に必要なくなった場合、display: noneを使って非表示にすることができます。ただし、非表示にした要素は画面内からなくなるだけで、ソースコード上では存在しているので、そのまま残りますよ。分かりましたか、ハナさん？

ハナ：分かりました！リュウさんってスゴイですね。どうやってそんなことを覚えたんですか？

リュウ：それは、私たちのデータベースに蓄積された情報からです。私たちの会社は、WEB開発に関する幅広い情報を収集して、それを人工知能として活用しています。ですから、いつでも皆さんのお力になれるようにしておりますよ。他にも何か分からないことがあれば、いつでもお聞きくださいね。

display: flexとは何ですか？

ハナ:「display: flex」とは何ですか？

リュウ:「display: flex」というのは、要素のレイアウトを調整する時に使うCSSのプロパティのひとつです。例えば、複数の要素を横並びにする時に使います。ちょっとしたマジックワンドのようなものかなと思います。ハナさんは理解しやすかったでしょうか？

display: gridとは何ですか？

ハナ：リュウさん、display: gridとは何ですか？

リュウ：ハナさん、display: gridは、WEBページをレイアウトするためのCSSの機能の一つですよ。例えば、画像や文章を縦に並べたい場合、グリッド状に分割して配置することができます。

ハナ：グリッド状というのは、お菓子のチョコレートみたいに区切っている感じですか？

リュウ：そうですね、チョコレートのように均等な正方形のマス目に分割することができます。そのマス目の中に、画像や文章を配置することで、デザイン性の高いWEBページを作成することができますよ。

ハナ：なるほど、マス目に分割して配置することで自由なレイアウトができるんですね！わかりました、リュウさん、ありがとうございました！

display: tableとは何ですか？

ハナ：リュウさん、display: tableって何ですか？

リュウ：display: tableは、ウェブページのレイアウトを調整するためのCSSのプロパティですね。要素をテーブルのように扱うことができます。

ハナ：テーブルって、表のことですか？

リュウ：そうですね。テーブルは表のようにデータを整理するために使われるものですが、CSSでdisplay: tableを指定することで、要素をテーブルと同じように扱うことができます。

ハナ：なるほど！表のように見せるためのプロパティなんですね。

リュウ：はい、そうです。表だけでなく、様々なレイアウトにも使われることがあります。例えば、複数の要素を横並びにしたり、縦に並べたりする場合にも使われます。

ハナ：なんだか奥が深いですね。でも、使うときにはdisplay: tableって書くんですね。

リュウ：はい、その通りです。CSSファイルやstyleタグ内に、display: tableと書くことで、要素をテーブルのように扱うことができます。

display: table-cellとは何ですか？

ハナ：リュウさん、display: table-cellとは何ですか？

リュウ：それはね、Webデザインの中で、要素の表示方法の一つなんだよ。

ハナ：要素って何ですか？

リュウ：要素とは、Webページを構成する部品のことだよ。例えば、画像やテキストなどが要素だね。

ハナ：なるほど。でも、具体的にどんな表示方法なんですか？

リュウ：うん、display: table-cellでは、要素をテーブルセルのように表示する方法だよ。テーブルのように、行と列の形で要素を並べることができるんだ。

ハナ：なるほど！テーブルのように並べることができるんですね。ありがとうございました、リュウさん！

リュウ：どういたしまして、ハナさん。もし質問があればいつでも聞いてね！

display: list-itemとは何ですか？

ハナ：リュウさん、display: list-itemって何ですか？

リュウ：それは、HTMLやCSSで言うとリスト項目（list item）を表示するときに使うプロパティです。例えば、数字やマークを付けてリストを作るときに使います。

ハナ：あ、なるほど！数字を付けたリストって、たまに見たことあります！

リュウ：そうですね！使い方によってはページの見た目を整えることができます。わからないことがあれば、また聞いてくださいね。

display: run-inとは何ですか？

ハナ: リュウさん、display: run-inとは何ですか？

リュウ: ええと、ハナさん、それはある要素を別の要素の一部として表示することを指定するCSSのプロパティです。

ハナ: 別の要素の一部として表示する、ってどういうことですか？

リュウ: 例えば、画像とキャプションがあって、それらを並べたい時に、display: run-inを使うと、画像がキャプションの一部として表示されるようになります。

ハナ: なるほど、それは便利そうですね！ありがとうございます、リュウさん！

display: compactとは何ですか？

ハナ：リュウさん、display: compactとは何ですか？

リュウ：display: compactは、Webデザインで使われるスタイルシートの1つですね。HTML要素の表示方法をコンパクトにするために使われることがあります。
例えば、ブログや掲示板などのコメント欄では、表示スペースを節約するためにdisplay: compactが使われます。
わかりやすい説明でしたか、ハナさん？

display: markerとは何ですか？

ハナ: 「display: marker」とは何ですか？

リュウ: 「display: marker」はCSSのプロパティの一つで、マーカーという文字列を表示することができます。例えば、箇条書きのリストで番号や記号を表示させる場合に用います。なんだか難しい言葉ですが、箇条書きのリストで数字や記号を表示させるために使うプログラムみたいなものだと思ってもらえると分かりやすいかもしれませんね。

display: rubyとは何ですか？

ハナ：リュウさん、display: rubyって何ですか？

リュウ：display: rubyといえば、日本語の縦書きについてのCSSプロパティですね。

ハナ：え、縦書きって横じゃないんですか？

リュウ：そうですね、縦書きは縦向きに文字を並べる書き方です。例えば、日本語や中国語で使われる横書きとは違い、縦書きは漢字、ひらがな、カタカナを縦に並べる書き方です。

ハナ：なるほど、CSSで縦書きの設定もできるんですね。ぜひ使ってみたいです。

リュウ：そうですね、display: rubyプロパティを使うことで、縦書きのテキストをレイアウトすることができますよ。

display: subgridとは何ですか？

ハナ:「display: subgrid」とは何ですか？

リュウ: subgridとは、親要素のグリッドレイアウトの列や行のサイズを、子要素のグリッドレイアウトで指定できるようにするプロパティです。子要素と親要素の両方でdisplay:gridが指定されている必要があります。例えば、お母さんがおにぎりを作るとき、おにぎりを作るミニグリッドを、お母さんのお弁当箱のグリッドに合わせて配置できるようにするプロパティだと思ってみてください。

display: contentsとは何ですか？

ハナ：リュウさん、display: contentsって何ですか？

リュウ：ああ、display: contentsだね。それは、「親要素の中身を子要素と同じレベルにする」という効果がありますよ。

ハナ：親要素と子要素？何それ？

リュウ：例えば、お店でおもちゃの詰め合わせがあるじゃないですか。その中に入っている玩具を子要素、詰め合わせの箱を親要素と考えてください。

ハナ：分かりました！display: contentsは、箱の中身を取り出して、箱と同じレベルにするってことですね！

リュウ：その通りです！大変分かりやすく説明しましたね！今後も分からないことがあれば何でも聞いてくださいね、ハナさん！

displayプロパティの応用的な使い方とは？

ハナ：displayプロパティの応用的な使い方とは？

リュウ：displayプロパティには、要素をどのように表示するかを指定する様々な値があります。例えば、flexやgridを使用することで、複数の要素を柔軟に配置することができますよ。それによって、レスポンシブデザインにも対応しやすくなります。

ハナ：flexやgridって何ですか？

リュウ：flexは、要素を横並びや縦並びに配置することができます。例えば、ナビゲーションメニューを横並びにしたい場合などに使用します。一方、gridは、要素を格子状に配置することができます。例えば、記事リストや画像集などに使用すると、すっきりとしたレイアウトを実現できますよ。

ハナ：なるほど、flexやgridってとても便利ですね！ありがとうリュウさん！

リュウ：どういたしまして、ハナさん。これからも色々なプロパティを勉強して、素敵なWebデザイナーになってくださいね！

サイト制作においてdisplayプロパティをどのように活用できますか？

ハナ:リュウさん、displayプロパティって何に使うんですか？

リュウ: displayプロパティはスタイルシートの中で、HTML要素をどのように表示するかを指定するためのものです。例えば、display: block; とすると、その要素はブロック要素として表示されます。一方、display: none; とすると、その要素は表示されません。なんとなく理解できましたか？

神戸ホームページ制作プロ公式ブログ