著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

HTMLとCSSは連携して、ブラウザでWebページの視覚要素をレンダリングします。 HTML要素は計算的および階層的な意味を持ち、ブラウザがこれらの要素に適用するデフォルトのスタイルを持っています。 これらのデフォルトスタイルには、displayプロパティがあります。 このプロパティの値は、ボックスモデルに影響します。これは、ページ上で要素が互いにどのように相互作用するかを決定するメカニズムです。 displayプロパティを使用すると、要素がWebページのレイアウトとどのように相互作用するかを効率的に制御できるため、レスポンシブモバイルWebデザインなどの状況に対してより柔軟なソリューションを作成できます。

このチュートリアルでは、displayプロパティを使用して複数のデモを実行し、他の要素とのフローの相互作用を決定する方法を学習します。 displayの基本値であるblockおよびinlineから始めます。 次に、inline-blockの組み合わせ値を使用して、inline-プレフィックス値の可能性について学習します。 次に、none値を使用することの威力と危険性について学習します。 最後に、max-widthメディアクエリを使用して、テーブルを小さな画面のdisplay: blockビューに変換します。

前提条件

  • タイプセレクター、コンビネーターセレクター、およびセレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
  • CSSチュートリアルでボックスモデルを操作する方法にあるCSSボックスモデルの知識。
  • チュートリアルの後半でサンプルテーブルをリファクタリングするためのコンテキストとしてのHTMLテーブル要素とその視覚的プロパティの理解。 テーブルについては、CSSチュートリアルでテーブルのスタイルを設定する方法で学ぶことができます。
  • ローカルマシンにindex.htmlとして保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。

初期HTMLおよびCSSファイルの設定

まず、チュートリアル全体で使用するHTMLファイルとCSSファイルを設定します。 また、テキストを含む要素のデフォルトのdisplay値についても説明します。

まず、テキストエディタでindex.htmlを開き、ファイルに次のコードを追加します。

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>The Terrestrial Planets</title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

このコードは、すべてのHTMLドキュメントに必要なフレームワークを設定します。 <head>要素に含まれる情報は、<title>要素のページ名と、<link>要素で決定されるスタイルシートのロード先を定義します。 <meta>タグは、それぞれ文字エンコードと小画面デバイスの処理を定義します。 ページのメインコンテンツは、チュートリアル全体で<body>タグ内に追加されます。

次に、<body>要素内に、class属性がcontent-widthに設定された<main>要素を作成します。 この要素を使用して、ページ内のコンテンツのレイアウトを処理します。 <main>要素内に、<h1>タグペアを作成してから<p>を作成します。 <h1>および<p>要素内に、次のコードブロックに示されているコンテンツを追加します。

index.html
<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <main class="content-width">
      <h1>The Terrestrial Planets of the Solar System</h1>

      <p>
        The four inner planets of the Solar System consist of Mercury, Venus, Earth, and Mars. These planets are known as terrestrial due to their hard, rocky surface. Compared to the gaseous planets of the outer solar system, the inner terrestrial planets are significantly smaller in size. Depending on tectonic activity and presence of liquids these planets will have features such as canyons, mountains, and volcanoes on their surface.
      </p>
    </main>
  </body>
</html>

前のコードブロックのように強調表示されたコードは、コードへの変更を強調するためにこのチュートリアル全体で使用されます。

変更内容をindex.htmlに保存し、styles.cssという名前の新しいファイルを作成して、エディターで開きます。

styles.cssファイルに、index.htmlで作成した要素のセレクターを追加します。 bodyおよび.content-widthのセレクターを作成し、次のコードブロックに示すようにスタイリングプロパティを追加します。

styles.css
body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.5;
  color: hsl(215, 5%, 20%);
  background-color: hsl(215, 5%, 98%);
}

.content-width {
  margin: 2rem auto;
  width: 90%;
  max-width: 40rem;
}

body要素のスタイルは、marginfont-family、およびline-heightプロパティを使用してデフォルトのレイアウトとテキストスタイルをリセットします。 colorbackgroundの色は、ページにダークグレーブルーとライトグレーブルーを追加します。 .content-widthプロパティは、ページの中央に配置し、最大サイズ40remまたは640pxに達するまで、画面幅の90%を占めます。

次に、テキストを読みやすくするためにフォントスタイルを追加します。

styles.css
...
.content-width {
  margin: 2rem auto;
  width: 90%;
  max-width: 40rem;
}

h1 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

p {
  font-size: 1.125rem;
}

h1プロパティは、テキストのサイズと太さを定義し、line-heightプロパティを見出しのより良い間隔に下げます。 最後に、p要素セレクターはfont-size1.125rem、つまり18pxに上げます。

変更内容をstyles.cssに保存し、Webブラウザを開きます。 ファイルをブラウザウィンドウにドラッグするか、ブラウザのファイルを開くオプションを使用して、ブラウザでindex.htmlを開きます。 ブラウザはHTMLおよびCSSコードをレンダリングして、次の画像のようなページを生成します。

Large header text and smaller paragraph text in a dark blue-gray color on a light gray background.

これまでのところ、使用したHTML要素はブロック要素と呼ばれています。 これらは、親コンテナの全幅を占めるコンテンツの定義された領域を作成する要素です。 さらに、ブロック要素は通常、新しい行に単独でレンダリングされます。 これは、追加されたブロック要素がページの終わりに向かってスタックすることを意味します。 英語のような上から下、左から右の言語の場合、ブロック要素はブラウザウィンドウの下部に向かってスタックします。

次に、テキストコンテンツのフロー内に存在する要素であるインライン要素を追加します。 インライン要素は親の幅全体を占めるわけではなく、独自の行にレンダリングされないため、テキストフローの方向に追加されます。 英語の場合、これは左から右の方向です。

ブロック要素が段落のようにコンテンツの意味とグループを定義する場合、インライン要素は強調などの単語または単語のグループに関するコンテキストを提供します。

テキストエディタでindex.htmlに戻ります。 2番目の文では、terrestrialという単語を強調タグ<em>で囲みます。 次に、3番目の文で、フレーズ gaseousplanetsをアンカータグ<a>でラップします。 開始<a>タグに、https://en.wikipedia.org/wiki/Giant_planetの値を持つhref属性を追加します。 これにより、トピックに関するWikipediaページにリンクされます。 次のコードブロックで強調表示されているHTMLは、これがどのように設定されているかを示しています。

index.html
...
<p>
  The four inner planets of the Solar System consist of Mercury, Venus, Earth, and Mars. These planets are known as <em>terrestrial</em> due to their hard, rocky surface. Compared to the <a href="https://en.wikipedia.org/wiki/Giant_planet">gaseous planets</a> of the outer solar system, the inner terrestrial planets are significantly smaller in size. Depending on tectonic activity and presence of liquids these planets will have features such as canyons, mountains, and volcanoes on their surface.
</p>
...

これらの追加をindex.htmlに保存してから、テキストエディタでstyles.cssに戻ります。 ブロック要素とインライン要素の違いを示すために、a要素セレクターを作成します。 次のコードブロックに示すように、セレクター内でdisplayプロパティをblockに設定します。

styles.css
...
p {
  font-size: 1.125rem;
}

a {
  display: block;
}

変更内容をstyles.cssに保存してから、Webブラウザのページに戻ります。 ページを更新して、コードの最新バージョンをロードします。 このページは、block要素とinline要素の主な違いを示しています。これは、display: blockに設定されたリンクが独自の行を占めるようになったためです。 これは、次の画像に示されています。

Large header text and smaller paragraph text in a dark blue-gray color on a light gray background with a blue underlined text breaking up the paragraph into two sections.

blockinlineの値の主な違いは、blockが現在のコンテンツフローを中断し、inlineがそれを維持することです。 さらに、widthプロパティがaセレクターに適用された場合、レイアウトは変更されません。 コンテンツフローがblock要素によって中断された場合、コンテンツフローは壊れたままになり、幅は常に親コンテナの幅全体を占めます。

inlineおよびblockは、最も一般的なブラウザーのデフォルト値です。 displayプロパティには多くの値がありますが、いくつかの例外はありますが、残りのすべての要素はこれら2つの値のいずれかを使用します。

blockinlineの違いを調べたので、テキストエディタでstyles.cssに戻ります。 aセレクターで、display: blockを削除し、hsl(215, 80%, 50%)の値を持つcolorプロパティに置き換えます。これは、使用される青のより豊富なバージョンです。 bodyで。 次に、text-decorationプロパティをnoneに設定してa:hoverセレクターを作成します。 これにより、リンクにカーソルを合わせたときに下線が削除されます。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

styles.css
...
a {
  color: hsl(215, 80%, 50%);
}

a:hover {
  text-decoration: none;
}

変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを更新します。 次の画像に示すように、リンクは再びテキストとインラインになり、明るい青色になります。

Large header text and smaller paragraph text in a dark blue-gray color on a light gray background with a blue underlined link.

このセクションでは、チュートリアル全体で使用するHTMLファイルとCSSファイルを設定します。 これらのファイルは定期的に修正および変更されるため、テキストエディタで両方のファイルを開いたままにし、定期的に保存することを忘れないでください。 また、デフォルトのdisplay値、inlineおよびblockについて学習し、inline要素の値をblockに変更しました。 次のセクションでは、inlineblockの機能を組み合わせたinline-block値を使用します。

inline-block値の使用

次に、親コンテナの幅全体を占めるボタンではなく、カスタマイズ可能な幅のボタン要素を作成します。 これを行うには、inline-block値を使用します。これは、marginpaddingなどのblock値のボックスモデルプロパティを維持しながら、コンテンツフローも保持します。 inline値のプロパティ。

inline-プレフィックスは、inline-flexinline-gridinline-tableなど、いくつかのdisplay値で使用できます。 inline-block値は、要素のボックスモデルをblockとして定義しますが、コンテンツフローを中断することはありません。 さらに、inline-blockは、blockのように、親の幅全体を占めることはありません。 代わりに、inline-block要素はそのコンテンツの幅だけに凝縮されます。 ボタンなどの短いコンテンツの場合、これにより、marginなどのblockボックスモデルプロパティを使用して要素のサイズを変更すると便利です。

inline-blockの操作を開始するには、テキストエディタでindex.htmlを開きます。 <p>タグを閉じた後、class属性がbuttonに設定され、href属性がhttps://en.wikipedia.org/wiki/Terrestrial_planet。 そのタグの中に、テキストWikipediaで詳細を追加します。 次のコードブロックで強調表示されているHTMLは、これがどのように記述されているかを示しています。

index.html
<div class="content-width">
  <h1>The Terrestrial Planets of the Solar System</h1>

  <p>
    ...
  </p>

  <a href="https://en.wikipedia.org/wiki/Terrestrial_planet" class="button">Learn more on Wikipedia</a>
</div>

変更内容をindex.htmlに保存し、テキストエディタでstyles.cssを開きます。

styles.cssファイルに、.buttonのクラスセレクターを追加します。 これにより、index.htmlファイルで作成したリンクのスタイルが設定されます。 デフォルトでは、<a>displayの値はinlineです。 この手順では、buttonクラスのdisplay値をblockに変更してから、次のコードブロックから強調表示されたスタイルを追加します。

styles.css
...
a:hover {
  text-decoration: none;
}

.button {
  display:block;
  padding: 0.5rem 1.25rem;
  text-align: center;
  text-decoration: none;
  color: hsl(215, 20%, 95%);
  background: linear-gradient(to bottom, hsl(215, 80%, 60%), hsl(215, 80%, 40%));
}

.button要素に追加された追加のスタイルは、パディングを追加し、テキストを中央に配置し、リンクの下線を削除します。 さらに、スタイルは、この青の以前のバージョンと同じ色相の青のグラデーションを追加し、テキストの色は白に近くなります。

これらの変更をstyles.cssに保存してから、ブラウザに戻ってindex.htmlを更新してください。 ボタンは、コンテンツ領域の全幅を青いグラデーションで塗りつぶします。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

Large header text and smaller paragraph text in a dark blue-gray color on a light gray background with a blue button below the paragraph with white text. The button is as wide as the paragraph.

次に、displayプロパティのblock値をinline-blockに変更します。 次のコードブロックで強調表示されているように、テキストエディタでstyles.cssに戻り、displayプロパティ値をblockからinline-blockに変更します。

styles.css
...
.button {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  text-align: center;
  text-decoration: none;
  color: hsl(215, 20%, 95%);
  background: linear-gradient(to bottom, hsl(215, 80%, 60%), hsl(215, 80%, 40%));
}

これらの変更をstyles.cssに保存してから、Webブラウザーでindex.htmlを更新してください。 ボタンの幅は、親の全幅を拡張して、コンテンツと同じ幅にパディング値を加えたものに縮小されました。 次の画像は、inline-block要素がブラウザでどのようにレンダリングされるかを示しています。

Large header text and smaller paragraph text in a dark blue-gray color on a light gray background with a blue button below the paragraph with white text. The button is only as wide as the text inside the button.

最後に、styles.cssに戻って、ボタンの最後のスタイルを追加します。 border-radiusbordertext-shadowbox-shadowを追加して、ボタンに3D効果を適用するスタイルを追加します。 また、.button:hoverセレクターを作成し、box-shadowlinear-gradien()を追加して、ホバー状態を暗くします。 次のコードブロックで強調表示されているCSSは、これらのスタイルの記述方法を示しています。

styles.css
...
.button {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  text-align: center;
  text-decoration: none;
  color: hsl(215, 20%, 95%);
  background: linear-gradient(to bottom, hsl(215, 80%, 60%), hsl(215, 80%, 40%));
  border-radius: 0.25rem;
  border: 1px solid hsl(215, 80%, 35%);
  text-shadow: 0 -1px hsl(215, 80%, 35%);
  box-shadow: 0 1px hsl(215, 80%, 70%) inset;
}

.button:hover {
  box-shadow: 0 1px hsl(215, 80%, 60%) inset;
  background: linear-gradient(to bottom, hsl(215, 80%, 50%), hsl(215, 80%, 30%));
}

変更をstyles.cssに保存してから、Webブラウザーでページを更新します。 次の画像に示すように、視覚的には、ボタンの定義と深さが増しています。

Blue gradient button with white text and a dark border.

このセクションでは、リンクのinline-block値を使用して、大きくてクリック可能なボタンを作成しましたが、リンクのテキストと同じ幅しかありません。 また、コンテンツフローを中断しないさまざまな表示タイプを可能にする他のinline-プレフィックス付きdisplay値があることも学びました。 次のセクションでは、テーブル要素をblockに切り替えて、displayの値を変更し続けます。

使用するテーブルの変更display: block

次に、display: blockプロパティ値を使用するようにテーブル全体を変換します。 テーブルにはtable要素に固有のHTMLが必要であり、テーブルの各子要素には独自のデフォルトのdisplay値があります。 たとえば、<table>要素のdisplay値はtableであり、テーブルセル<td>display値はtable-cell。 テーブルがdisplay値を変更する必要がある理由はたくさんありますが、ほとんどの場合、テーブルがうまく収まらない小画面デバイスソリューションの場合です。

テーブルのdisplayプロパティの操作を開始するには、テキストエディタでindex.htmlを開きます。 ボタンリンクの後に、次のコードブロックから強調表示されたHTMLを追加します。

index.html
...
<a href="https://en.wikipedia.org/wiki/Terrestrial_planet" class="button">Learn more on Wikipedia</a>

<table>
  <caption>
    Terrestrial Planets Statistics
  </caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Radius</th>
      <th>Moons</th>
      <th>Gravity</th>
      <th>Wikipedia</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Mercury</th>
      <td>2,439.7 km</td>
      <td>0</td>
      <td>3.7 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Mercury_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
    <tr>
      <th>Venus</th>
      <td>6,051.8 km</td>
      <td>0</td>
      <td>8.87 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Venus_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
    <tr>
      <th>Earth</th>
      <td>6,371.0 km</td>
      <td>1</td>
      <td>9.80665 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Earth_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
    <tr>
      <th>Mars</th>
      <td>3,389.5 km</td>
      <td>2</td>
      <td>3.72076 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Mars_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
  </tbody>
</table>
...

このテーブルHTMLは、スクリーンリーダーでアクセス可能なテーブルの必要なコンポーネントである<caption>要素にその名前を入力することにより、「TerrestrialPlanetsStatistics」というテーブルを作成します。 次に、HTMLは、ヘッダー行と4つのデータ行で構成される5列のテーブルを作成します。

次に、テーブルにいくつかの視覚的なスタイルを追加するには、テキストエディタでstyles.cssを開きます。 captionをテーブルのヘッダーのようにする視覚スタイルを作成します。 表のヘッダー行は背景が暗くなるとより明確になり、データ行の背景色を交互に変えてゼブラストライプ効果を作成します。 次のコードブロックで強調表示されているCSSは、これらのスタイルがどのように記述されているかを示しています。

styles.css
...
table {
  border-collapse: collapse;
  width: 100%;
  margin: 3rem 0;
}

caption {
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(215, 25%, 25%);
  text-align: left;
  margin-bottom: 0.5em;
}

tr {
  text-align: center;
}

thead > tr {
  color: hsl(215, 25%, 100%);
  background-color: hsl(215, 80%, 20%);
}

tbody > tr:nth-child(even) {
  background-color: hsl(215, 50%, 93%);
}

tbody th {
  font-size: 1.125rem;
}

td, th {
  padding: 0.5rem;
}

変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを開きます。 次の画像に示すように、テーブルは明確なデータと配置でスタイル設定されています。

Table grid of data containing information about the four terrestrial planets.

ローカルバージョンのindex.htmlをスマートフォンで開くか、ブラウザのウィンドウをスマートフォンのサイズ程度に縮小します。 次の画像に示すように、テーブルは最終的に画面から消え始め、水平方向にスクロールすることによってのみ表示されます。

A phone containing a table going off screen, cutting off informations.

これは、テーブル要素のdisplay値を変更すると、小さい画面での表示エクスペリエンスが向上する場合に役立ちます。

テキストエディタでstyles.cssに戻り、60remmax-widthに設定されたメディアクエリを作成します。 通常、モバイルファーストのデザインフローに従うには、メディアクエリでmax-widthの代わりにmin-widthを使用します。 ただし、小さな画面でのみスタイルを変更してから、特定の画面サイズでブラウザのデフォルトに戻すため、この例の状況では、max-widthの作業は最小限で済みます。 メディアクエリ内で、tablecaptiontheadtbodytr[で構成されるグループコンビネータを作成します。 X126X]、およびtd。 次に、次のコードブロックで強調表示されているように、displayプロパティをblockに設定します。

styles.css
@media (max-width: 60rem) {
  table,
  caption,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }
}

変更内容をstyles.cssに保存し、スマートフォンまたは小さなブラウザウィンドウでindex.htmlに戻ります。 これで、テーブルのすべてのコンテンツが1つの大きな列にスタックされ、各行のコンテンツがグループ化されます。 次の画像は、これが携帯電話でどのようにレンダリングされるかを示しています。

Contents of a table in a vertical stack.

テーブルのdisplay値に対するこの変更により、2つの問題が発生します。 1つ目は、ブラウザがテーブルをテーブルとして認識しなくなったため、スクリーンリーダーにテーブルとして読み込まれないことです。 2つ目は、一部のコンテンツとスタイルが現在、有用な情報を提供していないことです。 手始めに、テーブルヘッダーはデータ型への視覚的な接続を提供しなくなりました。 第二に、ゼブラストライプはこのシナリオではそれほど多くの情報を提供しません。

テキストエディタでstyles.cssに戻ります。 まず、グループコンビネータからtheadを削除します。 次に、thead要素の新しいセレクターを作成し、displayプロパティをnoneの値に設定します。 display: none値は、ブラウザーでのレンダリングから要素を視覚的に完全に削除します。 noneの値もスクリーンリーダーのDOMから要素を削除するため、要素はすべてのユーザーから非表示になることを知っておくことが重要です。 次のコードブロックで強調表示されているCSSは、これがどのように設定されているかを示しています。

styles.css
@media (max-width: 60rem) {
  table,
  caption,
  tbody,
  tr,
  th,
  td {
    display: block;
  }
  
  thead {
    display: none;
  }
}

次に、スタイルの変更に対処するために、text-alignプロパティをleftの値を持つ大規模グループコンビネータに追加することから始めます。 次に、ゼブラストライプに使用するセレクターtbody> tr:nth-child(even)を複製し、background-colortransparentに設定します。 これにより、60rem、つまり幅960pxよりも小さい画面やウィンドウのゼブラストライプ効果が削除されます。 次に、詳細ボタンを小さな画面で全幅ボタンとして機能させます。 displayプロパティをblockに設定して、table .button子孫セレクターを作成します。これにより、ボタンがコンテナーの幅いっぱいになります。 次のコードブロックで強調表示されているCSSは、これがどのように見えるかを示しています。

styles.css
@media (max-width: 60rem) {
  table,
  caption,
  tbody,
  tr,
  th,
  td {
    display: block;
    text-align: left;
  }
  
  thead {
    display: none;
  }

  tbody > tr:nth-child(even) {
    background-color: transparent;
  }

  table .button {
    display: block;
  }
}

テキストエディタでstyles.cssに変更を保存してから、ブラウザでindex.htmlを更新します。 小さな画面のデバイスでは、テーブルのコンテンツはすべて、コンテンツの幅にまたがるボタンと左揃えになります。 次の画像は、これが携帯電話のSafariでどのようにレンダリングされるかを示しています。

A series of bold heading text with data information and a button for each group.

このセクションでは、テーブルをblock要素に変換して、画面またはブラウザーウィンドウが小さいときに視覚的に使いやすくしました。 最後のセクションでは、目の見えるユーザーとスクリーンリーダーを使用しているユーザーの両方のテーブルのアクセシビリティを向上させます。

小画面コンテキスト要素の追加

小画面でのテーブル要素の表示値を変更したので、いくつかの拡張機能を追加して、このビューを大画面バージョンと同じくらい便利にすることができます。 小さな画面で情報をより理解しやすくするのに役立つHTMLを追加します。 次に、テーブル情報の小さな画面エクスペリエンスに特化したスタイリングを提供します。

まず、テキストエディタでindex.htmlを開きます。 thead要素を非表示にすることで失われるテーブルのコンテキスト情報を提供するには、そのヘッダー値を<span>要素内の各セルに追加します。 たとえば、各<td>要素の惑星のRadius 情報を含む列の値の前に、<span>Radius: </span>を追加します。 さらに、各<span>要素にはclass属性がlabelの値に設定されるため、これらの要素のスタイルをすばやく設定できます。 次のコードブロックで強調表示されているHTMLは、マークアップの記述方法を示しています。

index.html
...
  <tbody>
    <tr>
      <th>Mercury</th>
      <td><span class="label">Radius: </span>2,439.7 km</td>
      <td><span class="label">Moons: </span>0</td>
      <td><span class="label">Gravity: </span>3.7 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Mercury_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
    <tr>
      <th>Venus</th>
      <td><span class="label">Radius: </span>6,051.8 km</td>
      <td><span class="label">Moons: </span>0</td>
      <td><span class="label">Gravity: </span>8.87 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Venus_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
    <tr>
      <th>Earth</th>
      <td><span class="label">Radius: </span>6,371.0 km</td>
      <td><span class="label">Moons: </span>1</td>
      <td><span class="label">Gravity: </span>9.80665 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Earth_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
    <tr>
      <th>Mars</th>
      <td><span class="label">Radius: </span>3,389.5 km</td>
      <td><span class="label">Moons: </span>2</td>
      <td><span class="label">Gravity: </span>3.72076 m/s<sup>2</sup></td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Mars_(planet)" class="button">
          Learn More
        </a>
      </td>
    </tr>
  </tbody>
...

変更内容をindex.htmlに保存し、ブラウザに戻って小画面表示を確認します。 各データポイントの意味に関するコンテキスト情報が視覚的に認識できるようになりました。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

A series of bold heading text with contextual data information and a button for each group.

次に、テキストエディタでstyles.cssに戻ります。 これらのラベルは、不要になったときに大きな画面に表示されるため、この問題を修正するにはいくつかのスタイルが必要になります。 max-widthメディアクエリアプローチにより、これは、大画面でコンテンツを非表示にするために、クエリ外の.labelのデフォルトスタイルをdisplay: noneに設定する必要があることを意味します。 次に、メディアクエリ内で、displayプロパティがinlineに設定された.labelセレクターを作成します。これは、値を含むコンテンツフローに含まれている必要があるためです。 ラベルとデータポイントを視覚的に分離するには、font-weightプロパティを700に設定します。 次のコードブロックで強調表示されているCSSは、これらの追加を適用する方法と場所を示しています。

styles.css
...
td, th {
  padding: 0.5rem;
}

.label {
  display: none;
}

@media (max-width: 60rem) {
  ...
  .label {
    display: inline;
    font-weight: 700;
  }
}

変更をstyles.cssに保存し、もう一度ブラウザに戻ってindex.htmlを更新します。 次の画像に示すように、ブラウザはラベルを太字のインラインコンテンツとしてレンダリングします。

A series of bold heading text with bold contextual labels and data information and a button for each group.

大画面でWebブラウザを使用しているときに、テーブルが表形式に戻るまでウィンドウを展開します。 ラベルが非表示になり、シナリオごとに特徴的な視覚的でアクセス可能な情報が提供されます。 次の画像は、テーブルの大画面バージョンがどのようにレンダリングされるかを示しています。

Table grid of data containing information about the four terrestrial planets.

最後に、各テーブル行に追加のスタイルを提供して、それらを独自の小さなテーブルとして表示します。

テキストエディタでstyles.cssを開きます。 メディアクエリ内に、tbody th子孫セレクターを追加し、thead > trセレクターから色のプロパティと値を追加します。 これにより、各惑星名に同じ濃い青色の背景とほぼ白色のテキストの色が与えられます。 次に、border-radiusプロパティを0.5rem 0.5rem 0 0に設定して、見出しに丸みを帯びた上部を作成します。 次のコードブロックで強調表示されているCSSは、惑星名のスタイルを設定する方法を示しています。

stlyes.css
...
@media (max-width: 60rem) {
  ...
  .label {
    display: inline;
    font-weight: 700;
  }
  
  tbody th {
    color: hsl(215, 25%, 100%);
    background-color: hsl(215, 80%, 20%);
    border-radius: 0.5rem 0.5rem 0 0;
  }
}

次に、データセットに定義を追加し、各グループ間に間隔を空けます。 まず、borderプロパティを1px solid hsl(215, 80%, 20%)に設定して、メディアクエリ内にtbody > trセレクターを作成します。 次に、値が0.5remborder-radiusプロパティを追加します。これにより、コンテナのすべての側面の角が丸められます。 最後に、margin-topプロパティを1remに設定して、tbody > tr + tr隣接する兄弟コンビネータを作成します。これにより、データの各グループ間にスペースが与えられます。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

stlyes.css
...
@media (max-width: 60rem) {
  ...
  tbody th {
    color: hsl(215, 25%, 100%);
    background-color: hsl(215, 80%, 20%);
    border-radius: 0.5rem 0.5rem 0 0;
  }
  
  tbody > tr {
    border: 1px solid hsl(215, 80%, 20%);
    border-radius: 0.5rem;
  }
  
  tbody > tr + tr {
    margin-top: 1rem;
  }
}

最後に、td要素ごとにゼブラストライプ効果を追加します。 これは、td:nth-child(even)疑似クラスセレクターを作成することによって行われます。 次に、次のコードブロックで強調表示されているように、以前と同じbackground-colorプロパティと値を使用します。

stlyes.css
...
@media (max-width: 60rem) {
  ...
  tbody > tr + tr {
    margin-top: 1rem;
  }
  
  td:nth-child(even) {
    background-color: hsl(215, 50%, 93%);
  }
}

変更内容をstyles.cssに保存し、小幅のブラウザまたはスマートフォンでindex.htmlを開きます。 これで、テーブルの各行が、ヘッダー、データポイント、および詳細を確認するためのボタンを備えたテーブルであるかのように表示されます。 次の画像は、これがスマートフォンブラウザでどのようにレンダリングされるかを示しています。

Groups of data blocks, with the header in white on a dark background, and data points in alternating rows of light blue and white background.

この最後のセクションでは、displayプロパティを使用して、小画面デバイスの表示シナリオに関連する関連情報を表示および非表示にしました。 また、小さな画面のテーブルにスタイリングを提供して、よりアクセスしやすく使いやすくしました。

結論

displayプロパティを操作する場合、多くの可能性があります。 このチュートリアルでは、blockinlineのデフォルト値について学習しました。 <a>要素をinline-blockに変更しました。これにより、blockinlineの両方の特別な組み合わせが得られました。 次に、<table>のすべての要素を小さな画面でblockに変更し、大きな画面でデフォルトのテーブル表示値に戻すように設定しました。 最後に、none値を使用して、必要なときに必要な場所ですべての能力のユーザーにコンテンツを非表示にしました。 displayプロパティは強力な機能であり、ボックスモデルがどのように機能し、要素に影響を与えるかをさらに操作するために利用できるさらに多くの値があります。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。