CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのdisplayプロパティでHTML要素のボックスタイプを指定する方法

HTML要素に使用されるボックスのタイプを指定するには、CSSのdisplayプロパティを使用します。このプロパティを設定することで、要素をブロックレベル・インライン・フレックスコンテナなど、目的に応じたさまざまな形式で表示できます。

主なdisplayプロパティの値

  • block：要素をブロックレベルボックスとして表示します（要素の前後で改行されます）
  • inline：要素をインラインボックスとして表示します
  • inline-block：インライン配置でありながら、幅や高さの指定が可能になります
  • flex：要素をブロックレベルのフレックスコンテナとして表示します
  • grid：要素をグリッドコンテナとして表示します
  • none：要素を非表示にします

使用例

以下のコードを実行すると、displayプロパティに「flex」を指定してフレックスコンテナを表示できます。子要素が横並びに配置され、align-selfプロパティによって個別の位置調整も可能です。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            height: 300px;
            background-color: orange;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 90px;
            font-size: 40px;
            width: 100px;
            margin: 50px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div style = "align-self: center">Q4</div>
         <div>Q5</div>
      </div>
   </body>
</html>

  1. CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

    CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro

  2. CSSだけでメニューアイコン（ハンバーガーメニュー）を作成する方法

    CSSだけを使えば、画像ファイルに頼らずに、スマートフォンサイトなどでよく見かける「メニューアイコン」（三本線のハンバーガーアイコン）を簡単に作成できます。仕組みはとてもシンプルで、横長の長方形（バー）を3つ縦に並べるだけです。 実装例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div {   width: