Displayプロパティを使用してCSSでボックスモデルを操作する方法
著者は、 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
を開き、ファイルに次のコードを追加します。
<!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>
要素内に、次のコードブロックに示されているコンテンツを追加します。
<!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
のセレクターを作成し、次のコードブロックに示すようにスタイリングプロパティを追加します。
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
要素のスタイルは、margin
、font-family
、およびline-height
プロパティを使用してデフォルトのレイアウトとテキストスタイルをリセットします。 color
とbackground
の色は、ページにダークグレーブルーとライトグレーブルーを追加します。 .content-width
プロパティは、ページの中央に配置し、最大サイズ40rem
または640pxに達するまで、画面幅の90%
を占めます。
次に、テキストを読みやすくするためにフォントスタイルを追加します。
...
.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-size
を1.125rem
、つまり18pxに上げます。
変更内容をstyles.css
に保存し、Webブラウザを開きます。 ファイルをブラウザウィンドウにドラッグするか、ブラウザのファイルを開くオプションを使用して、ブラウザでindex.html
を開きます。 ブラウザはHTMLおよびCSSコードをレンダリングして、次の画像のようなページを生成します。
これまでのところ、使用したHTML要素はブロック要素と呼ばれています。 これらは、親コンテナの全幅を占めるコンテンツの定義された領域を作成する要素です。 さらに、ブロック要素は通常、新しい行に単独でレンダリングされます。 これは、追加されたブロック要素がページの終わりに向かってスタックすることを意味します。 英語のような上から下、左から右の言語の場合、ブロック要素はブラウザウィンドウの下部に向かってスタックします。
次に、テキストコンテンツのフロー内に存在する要素であるインライン要素を追加します。 インライン要素は親の幅全体を占めるわけではなく、独自の行にレンダリングされないため、テキストフローの方向に追加されます。 英語の場合、これは左から右の方向です。
ブロック要素が段落のようにコンテンツの意味とグループを定義する場合、インライン要素は強調などの単語または単語のグループに関するコンテキストを提供します。
テキストエディタでindex.html
に戻ります。 2番目の文では、terrestrialという単語を強調タグ<em>
で囲みます。 次に、3番目の文で、フレーズ gaseousplanetsをアンカータグ<a>
でラップします。 開始<a>
タグに、https://en.wikipedia.org/wiki/Giant_planet
の値を持つhref
属性を追加します。 これにより、トピックに関するWikipediaページにリンクされます。 次のコードブロックで強調表示されている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
に設定します。
...
p {
font-size: 1.125rem;
}
a {
display: block;
}
変更内容をstyles.css
に保存してから、Webブラウザのページに戻ります。 ページを更新して、コードの最新バージョンをロードします。 このページは、block
要素とinline
要素の主な違いを示しています。これは、display: block
に設定されたリンクが独自の行を占めるようになったためです。 これは、次の画像に示されています。
block
とinline
の値の主な違いは、block
が現在のコンテンツフローを中断し、inline
がそれを維持することです。 さらに、width
プロパティがa
セレクターに適用された場合、レイアウトは変更されません。 コンテンツフローがblock
要素によって中断された場合、コンテンツフローは壊れたままになり、幅は常に親コンテナの幅全体を占めます。
inline
およびblock
は、最も一般的なブラウザーのデフォルト値です。 display
プロパティには多くの値がありますが、いくつかの例外はありますが、残りのすべての要素はこれら2つの値のいずれかを使用します。
block
とinline
の違いを調べたので、テキストエディタでstyles.css
に戻ります。 a
セレクターで、display: block
を削除し、hsl(215, 80%, 50%)
の値を持つcolor
プロパティに置き換えます。これは、使用される青のより豊富なバージョンです。 body
で。 次に、text-decoration
プロパティをnone
に設定してa:hover
セレクターを作成します。 これにより、リンクにカーソルを合わせたときに下線が削除されます。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。
...
a {
color: hsl(215, 80%, 50%);
}
a:hover {
text-decoration: none;
}
変更内容をstyles.css
に保存し、Webブラウザでindex.html
を更新します。 次の画像に示すように、リンクは再びテキストとインラインになり、明るい青色になります。
このセクションでは、チュートリアル全体で使用するHTMLファイルとCSSファイルを設定します。 これらのファイルは定期的に修正および変更されるため、テキストエディタで両方のファイルを開いたままにし、定期的に保存することを忘れないでください。 また、デフォルトのdisplay
値、inline
およびblock
について学習し、inline
要素の値をblock
に変更しました。 次のセクションでは、inline
とblock
の機能を組み合わせたinline-block
値を使用します。
inline-block
値の使用
次に、親コンテナの幅全体を占めるボタンではなく、カスタマイズ可能な幅のボタン要素を作成します。 これを行うには、inline-block
値を使用します。これは、margin
やpadding
などのblock
値のボックスモデルプロパティを維持しながら、コンテンツフローも保持します。 inline
値のプロパティ。
inline-
プレフィックスは、inline-flex
、inline-grid
、inline-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は、これがどのように記述されているかを示しています。
<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
に変更してから、次のコードブロックから強調表示されたスタイルを追加します。
...
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
を更新してください。 ボタンは、コンテンツ領域の全幅を青いグラデーションで塗りつぶします。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。
次に、display
プロパティのblock
値をinline-block
に変更します。 次のコードブロックで強調表示されているように、テキストエディタでstyles.css
に戻り、display
プロパティ値をblock
からinline-block
に変更します。
...
.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
要素がブラウザでどのようにレンダリングされるかを示しています。
最後に、styles.css
に戻って、ボタンの最後のスタイルを追加します。 border-radius
、border
、text-shadow
、box-shadow
を追加して、ボタンに3D効果を適用するスタイルを追加します。 また、.button:hover
セレクターを作成し、box-shadow
とlinear-gradien()
を追加して、ホバー状態を暗くします。 次のコードブロックで強調表示されている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ブラウザーでページを更新します。 次の画像に示すように、視覚的には、ボタンの定義と深さが増しています。
このセクションでは、リンクの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を追加します。
...
<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は、これらのスタイルがどのように記述されているかを示しています。
...
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
を開きます。 次の画像に示すように、テーブルは明確なデータと配置でスタイル設定されています。
ローカルバージョンのindex.html
をスマートフォンで開くか、ブラウザのウィンドウをスマートフォンのサイズ程度に縮小します。 次の画像に示すように、テーブルは最終的に画面から消え始め、水平方向にスクロールすることによってのみ表示されます。
これは、テーブル要素のdisplay
値を変更すると、小さい画面での表示エクスペリエンスが向上する場合に役立ちます。
テキストエディタでstyles.css
に戻り、60rem
のmax-width
に設定されたメディアクエリを作成します。 通常、モバイルファーストのデザインフローに従うには、メディアクエリでmax-width
の代わりにmin-width
を使用します。 ただし、小さな画面でのみスタイルを変更してから、特定の画面サイズでブラウザのデフォルトに戻すため、この例の状況では、max-width
の作業は最小限で済みます。 メディアクエリ内で、table
、caption
、thead
、tbody
、tr
、td
。 次に、次のコードブロックで強調表示されているように、display
プロパティをblock
に設定します。
@media (max-width: 60rem) {
table,
caption,
thead,
tbody,
tr,
th,
td {
display: block;
}
}
変更内容をstyles.css
に保存し、スマートフォンまたは小さなブラウザウィンドウでindex.html
に戻ります。 これで、テーブルのすべてのコンテンツが1つの大きな列にスタックされ、各行のコンテンツがグループ化されます。 次の画像は、これが携帯電話でどのようにレンダリングされるかを示しています。
テーブルのdisplay
値に対するこの変更により、2つの問題が発生します。 1つ目は、ブラウザがテーブルをテーブルとして認識しなくなったため、スクリーンリーダーにテーブルとして読み込まれないことです。 2つ目は、一部のコンテンツとスタイルが現在、有用な情報を提供していないことです。 手始めに、テーブルヘッダーはデータ型への視覚的な接続を提供しなくなりました。 第二に、ゼブラストライプはこのシナリオではそれほど多くの情報を提供しません。
テキストエディタでstyles.css
に戻ります。 まず、グループコンビネータからthead
を削除します。 次に、thead
要素の新しいセレクターを作成し、display
プロパティをnone
の値に設定します。 display: none
値は、ブラウザーでのレンダリングから要素を視覚的に完全に削除します。 none
の値もスクリーンリーダーのDOMから要素を削除するため、要素はすべてのユーザーから非表示になることを知っておくことが重要です。 次のコードブロックで強調表示されている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-color
をtransparent
に設定します。 これにより、60rem
、つまり幅960pxよりも小さい画面やウィンドウのゼブラストライプ効果が削除されます。 次に、詳細ボタンを小さな画面で全幅ボタンとして機能させます。 display
プロパティをblock
に設定して、table .button
子孫セレクターを作成します。これにより、ボタンがコンテナーの幅いっぱいになります。 次のコードブロックで強調表示されている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でどのようにレンダリングされるかを示しています。
このセクションでは、テーブルをblock
要素に変換して、画面またはブラウザーウィンドウが小さいときに視覚的に使いやすくしました。 最後のセクションでは、目の見えるユーザーとスクリーンリーダーを使用しているユーザーの両方のテーブルのアクセシビリティを向上させます。
小画面コンテキスト要素の追加
小画面でのテーブル要素の表示値を変更したので、いくつかの拡張機能を追加して、このビューを大画面バージョンと同じくらい便利にすることができます。 小さな画面で情報をより理解しやすくするのに役立つHTMLを追加します。 次に、テーブル情報の小さな画面エクスペリエンスに特化したスタイリングを提供します。
まず、テキストエディタでindex.html
を開きます。 thead
要素を非表示にすることで失われるテーブルのコンテキスト情報を提供するには、そのヘッダー値を<span>
要素内の各セルに追加します。 たとえば、各<td>
要素の惑星のRadius 情報を含む列の値の前に、<span>Radius: </span>
を追加します。 さらに、各<span>
要素にはclass
属性がlabel
の値に設定されるため、これらの要素のスタイルをすばやく設定できます。 次のコードブロックで強調表示されている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
に保存し、ブラウザに戻って小画面表示を確認します。 各データポイントの意味に関するコンテキスト情報が視覚的に認識できるようになりました。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。
次に、テキストエディタでstyles.css
に戻ります。 これらのラベルは、不要になったときに大きな画面に表示されるため、この問題を修正するにはいくつかのスタイルが必要になります。 max-width
メディアクエリアプローチにより、これは、大画面でコンテンツを非表示にするために、クエリ外の.label
のデフォルトスタイルをdisplay: none
に設定する必要があることを意味します。 次に、メディアクエリ内で、display
プロパティがinline
に設定された.label
セレクターを作成します。これは、値を含むコンテンツフローに含まれている必要があるためです。 ラベルとデータポイントを視覚的に分離するには、font-weight
プロパティを700
に設定します。 次のコードブロックで強調表示されているCSSは、これらの追加を適用する方法と場所を示しています。
...
td, th {
padding: 0.5rem;
}
.label {
display: none;
}
@media (max-width: 60rem) {
...
.label {
display: inline;
font-weight: 700;
}
}
変更をstyles.css
に保存し、もう一度ブラウザに戻ってindex.html
を更新します。 次の画像に示すように、ブラウザはラベルを太字のインラインコンテンツとしてレンダリングします。
大画面でWebブラウザを使用しているときに、テーブルが表形式に戻るまでウィンドウを展開します。 ラベルが非表示になり、シナリオごとに特徴的な視覚的でアクセス可能な情報が提供されます。 次の画像は、テーブルの大画面バージョンがどのようにレンダリングされるかを示しています。
最後に、各テーブル行に追加のスタイルを提供して、それらを独自の小さなテーブルとして表示します。
テキストエディタでstyles.css
を開きます。 メディアクエリ内に、tbody th
子孫セレクターを追加し、thead > tr
セレクターから色のプロパティと値を追加します。 これにより、各惑星名に同じ濃い青色の背景とほぼ白色のテキストの色が与えられます。 次に、border-radius
プロパティを0.5rem 0.5rem 0 0
に設定して、見出しに丸みを帯びた上部を作成します。 次のコードブロックで強調表示されている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.5rem
のborder-radius
プロパティを追加します。これにより、コンテナのすべての側面の角が丸められます。 最後に、margin-top
プロパティを1rem
に設定して、tbody > tr + tr
隣接する兄弟コンビネータを作成します。これにより、データの各グループ間にスペースが与えられます。 次のコードブロックで強調表示されている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
プロパティと値を使用します。
...
@media (max-width: 60rem) {
...
tbody > tr + tr {
margin-top: 1rem;
}
td:nth-child(even) {
background-color: hsl(215, 50%, 93%);
}
}
変更内容をstyles.css
に保存し、小幅のブラウザまたはスマートフォンでindex.html
を開きます。 これで、テーブルの各行が、ヘッダー、データポイント、および詳細を確認するためのボタンを備えたテーブルであるかのように表示されます。 次の画像は、これがスマートフォンブラウザでどのようにレンダリングされるかを示しています。
この最後のセクションでは、display
プロパティを使用して、小画面デバイスの表示シナリオに関連する関連情報を表示および非表示にしました。 また、小さな画面のテーブルにスタイリングを提供して、よりアクセスしやすく使いやすくしました。
結論
display
プロパティを操作する場合、多くの可能性があります。 このチュートリアルでは、block
とinline
のデフォルト値について学習しました。 <a>
要素をinline-block
に変更しました。これにより、block
とinline
の両方の特別な組み合わせが得られました。 次に、<table>
のすべての要素を小さな画面でblock
に変更し、大きな画面でデフォルトのテーブル表示値に戻すように設定しました。 最後に、none
値を使用して、必要なときに必要な場所ですべての能力のユーザーにコンテンツを非表示にしました。 display
プロパティは強力な機能であり、ボックスモデルがどのように機能し、要素に影響を与えるかをさらに操作するために利用できるさらに多くの値があります。
CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。