さまざまな要素タイプに応じて、各要素にはデフォルトの表示属性値があります。たとえば、 <div>のデフォルトの表示属性値はブロック (ブロックレベル要素) であり、 <span>のデフォルトの表示属性値はインライン (インライン) です。 element) の場合、要素の表示プロパティを別の値に手動で変換することもできます。表示属性のオプション値は次のとおりです。
| 価値 | 説明 |
|---|---|
| none | 隠し要素 |
| block | 要素をブロックレベル要素として設定する |
| inline | 要素をインライン要素として設定する |
| list-item | 要素をリスト項目として設定する |
| inline-block | 要素をインラインブロック要素として設定します |
| table | ブロック要素レベルで要素をテーブルとして設定します ( <table>と同様)。 |
| inline-table | 要素をインラインの要素レベル テーブルとして設定します ( <table>と同様)。 |
| table-caption | 要素をテーブルのタイトルとして設定します ( <caption>と同様) |
| table-cell | 要素をテーブルのセルとして設定します ( <td>や<th>など) |
| table-row | 要素をテーブルの行として設定します ( <tr>など)。 |
| table-row-group | 要素をテーブルのコンテンツ部分として設定します ( <tbody>など) |
| table-column | 要素をテーブルの列として設定します ( <col>など) |
| table-column-group | テーブル内の 1 つ以上の列のグループとして要素を設定します ( <colgroup>と同様)。 |
| table-header-group | 要素をテーブルのヘッドとして設定します ( <thead>と同様) |
| table-footer-group | 要素をテーブルの足として設定します ( <tfoot>と同様) |
| box | CSS3 の新しい属性値。これは、オブジェクトがフレックス ボックス (フレックス ボックスの最も古いバージョン) として設定されることを意味します。 |
| inline-box | オブジェクトがインライン要素レベルのフレックス ボックス (フレックス ボックスの最も古いバージョン) として設定されていることを示す、CSS3 に追加された新しいプロパティ値 |
| flexbox | CSS3 の新しい属性値で、オブジェクトがフレックス ボックス (フレックス ボックスの移行バージョン) として設定されていることを示します。 |
| inline-flexbox | CSS3 の新しい属性値。これは、オブジェクトがインライン要素レベルのフレックス ボックス (フレックス ボックスの移行バージョン) として設定されることを意味します。 |
| flex | オブジェクトがフレックス ボックス (フレックス ボックスの最新バージョン) として設定されていることを示す、CSS3 で追加された新しいプロパティ値 |
| inline-flex | オブジェクトがインライン要素レベルのフレックス ボックス (フレックス ボックスの最新バージョン) として設定されていることを示す、CSS3 に追加された新しいプロパティ値 |
| run-in | 要素をブロックレベル要素として設定するかインライン要素として設定するかの決定は、コンテキストに依存します |
| inherit | 親要素から表示属性の値を継承する |
フレックス ボックス (エラスティック ボックス) は、CSS3 の新しいレイアウト モードです. フレックス ボックスを導入する目的は、ページ内の要素にスペースを配置、整列、および割り当てるためのより効果的な方法を提供することです. ページをさまざまな画面に適応させる必要がある場合レイアウトは、サイズとデバイスの種類に応じて、要素が適切にサイズ設定され、配置されるようにします。
以下は、いくつかの一般的な属性値を使用して、次の表示属性の使用を紹介します。
display:none
属性値 none of display を使用して、要素を非表示にすることができます。これは、「 CSS visibility 」を導入したときに前述したvisibility: hidden;関数に似ていますが、違いはdisplay: none;場所も非表示になることです。 display: none;通常、要素を非表示または表示するために JavaScript と組み合わせて使用されます。これを示す例を次に示します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 100px;
background-color: #AAA;
}
</style>
</head>
<body>
<div id="box"> </div>
<button onclick="change_box(this)">隠す</button>
<script>
function change_box(obj){
var box = document.getElementById('box');
if(box.style.display == 'none'){
box.style.display = "";
obj.innerHTML = "隠す";
}else{
box.style.display = "none";
obj.innerHTML = "表示";
}
}
</script>
</body>
</html> 次の図に示すように、上記のコードを実行し、ページの [表示] または [非表示] ボタンをクリックして、指定した要素をページに表示または非表示にします。
display:block
display 属性の属性値ブロックは、要素を強制的にブロック レベルの要素にすることができます。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style>
a{
display: block;
width: 150px;
height: 50px;
background-color: #ACC;
line-height: 50px;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<a href="">これはリンクです</a>
</body>
</html> 実行結果は次の図のとおりです。
display:inline
display 属性の属性値 inline は、要素を強制的にインライン要素に変換することができます。これにより、要素はインライン要素の特性を持ちます。たとえば、他のインライン要素と行を共有することができます。サンプル コード以下のとおりであります：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50px;
height: 50px;
background-color: #ACC;
border: 1px solid black;
}
.inline {
display: inline;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div class="inline">display: inline;</div>
<div class="inline">display: inline;</div>
</body>
</html> 実行結果は次の図のとおりです。
display 属性の属性値 inline-block により、要素を強制的にインラインブロック要素に変換することができます.インラインブロックは、ブロックが幅と高さを設定できるという特徴だけでなく、インラインが占有しないという特徴もあります.サンプルコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 130px;
height: 50px;
background-color: #ACC;
border: 1px solid black;
}
.inline-block {
display: inline-block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div class="inline-block">display: inline-block;</div>
<div class="inline-block">display: inline-block;</div>
</body>
</html> 実行結果は次の図のとおりです。
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
