値の継承しない■値インラインとブロックinlineインラインボックスを生成する(初期値)blockブロックボックスを生成するlist-itemli要素のようにリスト内容が収められるブロックボックスと、リストマーカーのためのマーカーボックスを生成するrun-in文脈に応じてブロックまたはインラインボックスのいずれかを作成するinline-blockインラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。テーブルtabletable要素のような表示となるinline-tableインラインレベルのテーブルとなるtable-row-grouptbody要素のような表示となるtable-header-groupthead要素のような表示となるtable-footer-grouptfoot要素のような表示となるtable-rowtr要素のような表示となるtable-column-groupcolgroup要素のような表示となるtable-columncol要素のような表示となるtable-celltd要素のような表示となるtable-captioncaption要素のような表示となるルビrubyルビコンテナボックスを生成、ruby要素のような表示となるruby-baseルビベースボックスを生成、rb要素のような表示となるruby-textルビテキストボックスを生成、rt要素のような表示となるruby-base-containerルビベースコンテナボックスを生成、rbc要素のような表示となるruby-text-containerルビテキストコンテナボックスを生成、rtc要素のような表示となる非表示・継承none要素が表示されず、レイアウトに影響を与えないinherit親要素の値を継承するフレックスコンテナflexブロックレベルのフレックスコンテナボックスを生成するinline-flexインラインレベルのフレックスコンテナボックスを生成するグリッドレイアウトgridブロックレベルのグリッドコンテナボックスを生成するinline-gridインラインレベルのグリッドコンテナボックスを生成するインラインとブロックブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素で、一般的なブラウザでは前後に改行が入って表示されます。インライン要素とは、主に文章の一部として利用される要素でその前後は改行されません。指定すると、ブロックレベル表示となって前後が改行されて表示されるようになります。■使用例(インラインとブロック)スタイルシート部分は外部ファイル(sample.css)に記述。href="http://www.htmq.com/">リンク</a>をブロックレベル表示にします。class="sample2">見出し</h3>をインライン表示にします。</p></body></html>↓↓↓ブラウザ上の表示インライン→ブロックレベルの例a要素にdisplay:block;を指定して、リンクをブロックレベル表示にします。見出しをインライン表示にします。フレックスコンテナフレックスコンテナとは、CSS3から追加された表示形式です。フレックスコンテナでは段組みレイアウトなどを比較的簡単に実現することができます。href="#">メニュー4</a></li></ul>↓↓↓ブラウザ上の表示メニュー1メニュー2メニュー3メニュー4尚、フレックスコンテナでは、ブロックレイアウトの前提で設計されたCSSプロパティの一部は適用されません。first-letter擬似要素などの指定は無効となります。フレックスコンテナについては、CSS3リファレンスのフレキシブルボックスで関連するCSSプロパティを紹介しています。ウェブ制作小ネタTIPSのCSSのFlexboxでレイアウトを作るでは、フレックスコンテナを使用したレイアウト作成例を紹介しています。