CSS
レイアウト制御

構文

• 表示：なし|インライン|ブロック|リスト項目| |インラインリストアイテム| |インラインブロック|インラインテーブル|テーブル|テーブルセル| | | | | | |フレックス|インラインフレックス|グリッド|インライングリッド|ランイン|ルビー|ルビーベース|ルビーテキスト|ルビーベース容器|ルビーテキストコンテナ|内容

パラメーター

表示プロパティ

display CSSプロパティは、HTMLドキュメントのレイアウトとフローを制御するための基本的な要素です。ほとんどの要素は、 blockまたはinlineデフォルトdisplay値を持ちます（ただし、一部の要素には他のデフォルト値があります）。

列をなして

inline要素は必要な幅だけを占有します。同じタイプの他の要素と水平に積み重ねられ、他の非インライン要素を含むことはできません。

<span>This is some <b>bolded</b> text!</span>

上で示したように、2つのinline要素<span>と<b>はインライン（したがって名前）であり、テキストの流れを壊さない。

ブロック

block要素は、その '親要素'の利用可能な最大幅を占めます。それは新しい行から始まり、 inline要素とは対照的に、それが含むかもしれない要素の種類を制限しません。

<div>Hello world!</div><div>This is an example!</div>

div要素はデフォルトではブロックレベルであり、上に示したように、2つのblock要素が縦に積み重ねられ、 inline要素とは異なり、テキストの流れが壊れます。

インラインブロック

inline-block値は、 inline要素に目に見える影響を及ぼさないpadding 、 margin 、 heightなどのプロパティを使用できるようにしながら、エレメントをテキストのフローとブレンドして、両方の世界のベストを提供します。

この表示値を持つ要素は、通常のテキストのように動作し、その結果、 text-alignなどのテキストの流れを制御する規則の影響を受けtext-align 。デフォルトでは、コンテンツを収めるために最小サイズに縮小されます。

<!--Inline: unordered list-->
<style>
li {
    display : inline;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--block: unordered list-->
<style>
li {
    display : block;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--Inline-block: unordered list-->
<style>
li {
    display : inline-block;
    background : lightblue;
    padding:10px; 

    border-width:2px;
    border-color:black;
    border-style:solid;
    }

</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

無し

displayプロパティにnone値を指定した要素は、まったく表示されません。

たとえば、 myDivというIDを持つdiv要素を作成しましょう。

<div id="myDiv"></div>

これで、次のCSSルールでは表示されないとマークできます。

#myDiv {
    display: none;
}

要素がdisplay:none;設定されている場合display:none;ブラウザはその特定の要素（ positionとfloat両方）の他のすべてのレイアウトプロパティを無視します。その要素に対してボックスはレンダリングされず、htmlでのその存在は次の要素の位置に影響しません。

これはvisibilityプロパティをhidden設定するのとは異なることに注意してください。 visibility: hidden;設定visibility: hidden;要素がページ上に要素を表示することはないが、要素はレンダリングプロセスの空間を、あたかも可視であるかのように占有することになる。したがって、次の要素がページにどのように表示されるかに影響します。

displayプロパティのnone値は、JavaScriptを使用して自由に要素を表示または非表示にするために一般的に使用されるため、実際に要素を削除して再作成する必要はありません。

divを使用して古いテーブル構造を取得するには

これは通常のHTMLテーブル構造です

<style>
    table {
        width: 100%;
    }
</style>

<table>
  <tr>
    <td>
        I'm a table
    </td>
  </tr>
</table>

このように同じ実装を行うことができます

<style>
    .table-div {
        display: table;
    }
    .table-row-div {
        display: table-row;
    }
    .table-cell-div {
        display: table-cell;
    }
</style>

<div class="table-div>
  <div class="table-row-div>
    <div class="table-cell-div>
      I behave like a table now
    </div>
  </div>
</div>