CSS 表示を使用して Web サイトのレイアウトを制御する

CSS 表示を使用して Web サイトのレイアウトを制御する

CSS 表示プロパティは、Web デザイナーにとって強力なツールです。覚えやすい単純な値を使用して、最小限のスタイリングで Web サイト要素のレイアウトを制御できます。





しかし、これらの値はそれぞれ何をし、どのように機能するのでしょうか?確認してみましょう。





今日のメイク動画

CSS 表示プロパティとは何ですか?

display プロパティは、Web ページの HTML 要素に使用されるボックス レンダリングのタイプを指定します。これにより、まったく表示されないなど、さまざまな動作が発生します。これらの値は、スタイル シートまたは適切な CSS カスタマイズ セクションを使用して、Web サイトで編集できます。 WordPress などの CMS ツール .





要素を CSS 表示に合わせて保持: インライン

  CSS インライン値を含むテキスト

幅と高さの値は、インライン表示の要素には適用されません。内部のコンテンツがその寸法を設定します。インライン HTML 要素は、他の要素と並べて配置でき、 <スパン> .インライン表示は、テキストに対して最も一般的に使用されます。

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>

上記の HTML マークアップと CSS は、表示インライン値の良い例です。一緒に使用すると、2 つの異なる HTML 要素で作成された 1 行のテキストが表示されます。



CSS で Web サイトのレイアウトを制御する display: block

  css 表示ブロックを持つ要素

いくつかの点で、表示ブロックの値はインラインの値の反対です。高さと幅の寸法を設定できますが、この値を持つ要素は隣同士に配置できません。上記の例は、block 値を持つ 2 つの要素を示しています。ブロック表示値のデフォルト値を持つ要素は、親要素の最大幅になります。

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>

インライン スタイルの例とは異なり、この表示ブロック値の例では、テキスト行が 2 つの異なる行に分割されています。 fit-content width 値は、要素の幅をテキストの長さと一致するように設定します。





CSS 表示の HTML 要素を並べて表示: inline-block

  css inline-block 値を持つ html 要素

CSS の display inline-block 値は、通常のインライン値と同じように機能しますが、特定のサイズを追加する機能のみがあります。これにより、親要素を配置せずにグリッドのようなレイアウトを作成できます。前の例に戻ると、inline-block 値を追加すると、要素を隣り合わせに配置できます。

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>

inline-block の値は inline の値とあまり変わらないように見えます。ただし、この値を使用して要素の寸法を設定できることに注意してください。これにより、場合によっては作業が容易になります。





CSS 表示で Web サイト要素を非表示にする: なし

最も単純な表示値は「なし」です。この値は、余白やその他の間隔プロパティと共に、要素と子要素を非表示にします。 CSS display none 値を持つ要素は、ブラウザーのインスペクター内に引き続き表示されます。

CSS display: flex を使用して柔軟でレスポンシブな要素を作成する

  css ディスプレイ フレックスボックス

Display flex は、最新の CSS レイアウト モードの 1 つです。 display flex が親要素にある場合、その中のすべての要素が柔軟な CSS 要素になります。この構成の親要素はフレックスボックスです。

PCからAndroidWi-FiDirectにファイルを転送する

フレックスボックスは、幅や高さなどの事前定義された変数を使用してレスポンシブ デザインを作成します。それは価値があります HTML/CSS フレックスボックスについて学ぶ 始める前に。

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>

Flexbox を並べて配置する ディスプレイ付き: inline-flex

  インライン値を持つcssディスプレイフレックスボックス

Inline-flex は通常のフレックスボックスと同じように動作し、要素を他の要素の隣に配置できるという追加の利点があります。

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>

CSS display: table を使用して複雑なテーブルを作成する

  cssで作った基本的なhtmlテーブル

表示テーブルの値は、昔の Web サイト デザインを思い起こさせます。現在、ほとんどの Web サイトはレイアウトにテーブルを使用していませんが、データやコンテンツを読み取り可能な形式で表示するためには依然として有効です。

テーブル値を HTML 要素に追加すると、テーブル要素のように機能しますが、テーブルを適切に機能させるには追加の値が必要です。

CSS 表示: table-cell

table-cell 値を持つ要素は、メイン テーブル内の個々のセルとして機能します。また、table-column と table-row の値によって、これらの個々のセルがグループ化されます。

CSS 表示: table-row

table-row 値は HTML 要素のように機能します。 table-cell 値を持つ要素の親として、テーブルを水平行に分割します。

CSS 表示: table-column

table-column 値は table-row 値と同様に機能しますが、テーブルを分割しません。代わりに、この値を使用して、既存のさまざまな列に特定の CSS ルールを追加できます。

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>

CSS ディスプレイを使用してサイド バイ サイド テーブルを作成する: inline-table

すでに見た他のインライン バリアントと同様に、inline-table を使用すると、テーブル要素を他の要素の隣に配置できます。

CSS display: grid を使用してレスポンシブ Web サイト レイアウトを構築する

  グリッド値を持つ css 要素

CSS ディスプレイ グリッドの値はテーブルの値と似ていますが、グリッドの列と行のみが柔軟なサイズ設定を行うことができます。これにより、グリッドは Web ページのメイン レイアウトを作成するのに最適です。全幅のヘッダーとフッター用のスペースを残しつつ、さまざまなサイズのコンテンツ領域を持つことも可能にします。

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>

グリッドはフレックスボックスに似ていますが、要素を上下に並べて配置できる点のみが異なります。これには grid-template-areas プロパティが不可欠です。コードからわかるように、ヘッダーとフッターは全角であるため、配列内で 4 つのスペースを使用します。サイドバーはそれぞれ 1 つのスロットを占有しますが、コンテンツは 2 つのスロットを占有し、グリッドの中央の行を効果的に 3 つの列に分割します。

CSS 表示: インライン グリッド

inline-grid 値を使用すると、このガイドの他のインライン値と同様に、グリッドを他の要素の隣に配置できます。

Web デザインに CSS 表示を使用する

CSS 表示プロパティは、HTML マークアップを変更せずに Web サイトの要素構造を調整する便利な方法を提供します。これは、Shopify や WordPress などのコンテンツ配信プラットフォームを使用しているユーザーにとって理想的ですが、一般的な Web デザインにも役立ちます.