MochiuWiki : SUSE, EC, PCB

「CSS - レイアウト」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

← 古い編集
ビジュアルウィキテキスト
 
(同じ利用者による、間の7版が非表示)
10行目: 10行目:
*: 代表的な値として、以下に示すものが存在する。
*: 代表的な値として、以下に示すものが存在する。
*:* block
*:* block
*:*: 要素が横幅いっぱいに広がり、前後に改行が入る。
*:*: 縦に積み重なって表示される。
*:*: 要素の幅が親要素いっぱいに広がり、それぞれの要素が新しい行から始まる。(前後に改行が入る)
*:*: [[ファイル:CSS Layout 1.png|フレームなし|中央]]
*:* inline
*:* inline
*:*: テキストのように横に並ぶ。
*:*: 横に並んで表示される。
*:*: コンテンツの幅のみ占める。
*:*: 行の途中から始めることができる。
*:*: [[ファイル:CSS Layout 2.png|フレームなし|中央]]
*:* inline-block
*:* inline-block
*:*: blockとinlineの特徴を併せ持つ。
*:*: blockとinlineの特徴を併せ持つ。
*:*: 要素が横並びで配置される。(inlineの特徴)
*:*: 幅と高さを指定できる。(blockの特徴)
*:*: 各要素間にスペースを設定できる。
*:*: テキストの基準線に合わせて配置される。
*:*: <br>
*:*: 下図では、青い四角形は各inline-block要素を表しており、それぞれが独立したボックスとして振る舞いながら、横並びで配置されている様子を示している。
*:*: [[ファイル:CSS Layout 3.png|フレームなし|中央]]
*:* flex
*:* flex
*:*: フレックスボックスレイアウトを使用できる。
*:*: フレックスボックスレイアウトを使用できる。
79行目: 91行目:
==== CSS Flexbox ====
==== CSS Flexbox ====
CSS Flexboxは、1次元のレイアウトに特に強みがある。<br>
CSS Flexboxは、1次元のレイアウトに特に強みがある。<br>
また、動的なコンテンツに柔軟に対応している。<br>
<br>
<br>
以下の例では、横一列に要素を配置して、等間隔で配置している。<br>
これは、ナビゲーションメニューやカードの配置等で使用される。<br>
これは、ナビゲーションメニューやカードの配置等で使用される。<br>
<br>
以下の例では、上に1つ、中央に2つ、下に1つレイアウトを配置している。<br>
<br>
<syntaxhighlight lang="html">
<div class="container">
  <div class="top">上部コンテンツ</div>
  <div class="middle">
    <div class="middle-item">中部左</div>
    <div class="middle-item">中部右</div>
  </div>
  <div class="bottom">下部コンテンツ</div>
</div>
</syntaxhighlight>
<br>
  <syntaxhighlight lang="css">
  <syntaxhighlight lang="css">
  .container {
  .container {
   display: flex;
   display: flex;
   justify-content: space-between;
  flex-direction: column;
   align-items: center;
   justify-content: space-between; /* 左右の要素を両端に配置 */
   align-items: center;             /* 縦方向を中央揃え */
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.top, .bottom {
  background: #e0e0e0;
  padding: 20px;
  min-height: 100px;
}
.middle {
  display: flex;
  gap: 20px;
}
.middle-item {
  flex: 1;
  background: #e0e0e0;
  padding: 20px;
  min-height: 100px;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
  .middle {
    flex-direction: column;
  }
  }
  }
  </syntaxhighlight>
  </syntaxhighlight>
92行目: 148行目:
==== CSS Grid ====
==== CSS Grid ====
CSS Gridは、2次元のレイアウトを実現できる。<br>
CSS Gridは、2次元のレイアウトを実現できる。<br>
これは、複雑なページ構造を作成する場合に便利である。<br>
grid-areaを使用して直感的な配置が可能である。<br>
<br>
複雑なレイアウトを作成する可能性がある場合は、CSS Gridの方が拡張性が高い。<br>
<br>
実務では、CSS FlexboxおよびCSS Gridを組み合わせて使用することが多い。<br>
<br>
以下の例では、上に1つ、中央に2つ、下に1つレイアウトを配置している。<br>
<syntaxhighlight lang="html">
<div class="grid-container">
  <div class="top">上部コンテンツ</div>
  <div class="middle-left">中部左</div>
  <div class="middle-right">中部右</div>
  <div class="bottom">下部コンテンツ</div>
</div>
</syntaxhighlight>
<br>
<br>
以下の例では、3列のグリッドレイアウトを作成して、各列が均等な幅を持つ。<br>
  <syntaxhighlight lang="css">
  <syntaxhighlight lang="css">
  .grid-container {
  .grid-container {
   display: grid;
   display: grid;
  grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   gap: 20px;
  grid-template-areas:
    "top"
    "middle-left middle-right"
    "bottom";
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.top {
  grid-area: top;
  grid-column: 1 / -1;  /* 全幅を使用 */
  background: #e0e0e0;
  padding: 20px;
  min-height: 100px;
}
.middle-left {
  grid-area: middle-left;
  background: #e0e0e0;
  padding: 20px;
  min-height: 100px;
}
.middle-right {
  grid-area: middle-right;
  background: #e0e0e0;
  padding: 20px;
  min-height: 100px;
}
.bottom {
  grid-area: bottom;
  grid-column: 1 / -1;  /* 全幅を使用 */
  background: #e0e0e0;
  padding: 20px;
  min-height: 100px;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "middle-left"
      "middle-right"
      "bottom";
  }
  }
  }
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
実務では、CSS FlexboxおよびCSS Gridを組み合わせて使用することが多い。<br>
CSS Gridには、以下に示すような代表的なプロパティが存在する。<br>
* justify-content
*: space-between; /* グリッド全体を配置 */
* align-items
*: center; /* 各セル内のアイテムを中央配置 */
*: <br>
* justify-items
*: グリッドセル内での水平方向の配置
* align-content
*: グリッド全体の垂直方向の配置
<br>
 
==== float ====
floatは要素を左右に配置するためのCSSプロパティである。<br>
基本的には、<code>float: left</code>や<code>float: right</code>を使用して、要素を左右に寄せて配置する。<br>
特に、2カラムや3カラムのレイアウトを作成する場合によく使用される。<br>
<br>
  <syntaxhighlight lang="css">
  <syntaxhighlight lang="css">
  /* CSS FlexboxおよびCSS Gridの組み合わせ */
  /* リセットとベーススタイル */
* {
    margin:    0;
    padding:    0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
   
   
  /* メインレイアウト */
.container {
  .page {
    width:    90%;
  display: grid;
    max-width: 1200px;
  grid-template-areas:  
    margin:    0 auto;
    "header header"
    padding:  20px;
    "sidebar main"
}
    "footer footer";
  /* 左カラム */
  .left-content {
    float:      left;
    width:     50%;
    min-height: 400px;
    padding:    20px;
    background-color: #f0f0f0;
  }
  }
   
   
  /* ヘッダ内の要素配置 */
  /* 右カラム */
  .header {
  .right-content {
   display: flex;
    float:      right;
  justify-content: space-between;
    width:      50%;
    min-height: 400px;
    padding:   20px;
    background-color: #e0e0e0;
}
</syntaxhighlight>
<br>
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!-- モバイルデバイスでのWebサイトの表示方法を制御する設定
      width=device-widthは、ページの幅をデバイスの画面幅に合わせることを指示する。
      これにより、スマートフォンやタブレットでWebサイトを閲覧する場合に、デバイスの実際の画面幅に応じて適切にコンテンツが表示される。
        initial-scale=1.0は、ページが最初に読み込まれた場合の拡大率を設定する。
        1.0は等倍表示を意味する。
        これにより、ユーザが最初にページを開いた時に、適切なサイズで表示される。
        このメタタグが無い場合、モバイルデバイスではデスクトップ用のレイアウトが縮小表示されて、テキストが非常に小さくなったり、ユーザが手動で拡大する必要が生じたりする可能性がある。
        特にレスポンシブデザインのWebサイトを作成する場合、このviewportの設定は必須といえる。
        モバイルフレンドリーなWebサイトを実現するための基本的な設定として広く使用される。
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
      <div class="left-content">
          <h2>左カラム</h2>
          <p>左側のコンテンツがここに入る</p>
      </div>
      <div class="right-content">
          <h2>右カラム</h2>
          <p>右側のコンテンツがここに入る</p>
      </div>
      <div class="clearfix"></div>
    </div>
</body>
</html>
</syntaxhighlight>
<br>
ただし、floatを使用する場合には注意点がある。<br>
<u>floatを適用した要素は通常のドキュメントフローから外れるため、親要素が高さを認識できない。</u><br>
<u>これを解決するために、clearfixと呼ばれる手法を使用する。</u><br>
<syntaxhighlight lang="css">
/* floatのクリア */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
</syntaxhighlight>
<br>
レスポンシブデザインに対応する場合、<br>
メディアクエリを使用してスマートフォン等の画面幅が狭いデバイスでは、float設定を解除し、縦並びに変更するのが一般的である。<br>
<syntaxhighlight lang="css">
/* レスポンシブデザイン */
@media screen and (max-width: 768px) {
    .left-content,
    .right-content {
      float: none;
      width: 100%;
      margin-bottom: 20px;
    }
  }
  }
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
==== float ====
floatは、特定のケース (画像の周りにテキストを回り込ませる等) で現在でも使用されるが、<br>
floatは、特定のケース (画像の周りにテキストを回り込ませる等) で現在でも使用されるが、一般的なレイアウトには前述の手法が推奨される。<br>
最近のWeb開発では、FlexboxやGrid Layout等のより柔軟なレイアウト手法が主流となっている。<br>
<br>
しかし、floatレイアウトは、シンプルな実装と高いブラウザ互換性という利点があり、特定の状況では今でも有効である。<br>
<br>
例えば、レガシーブラウザのサポートが必要な場合や画像とテキストを組み合わせたシンプルなレイアウトを作成する場合等に使用される。<br>
<br>
他の使用例としては、ナビゲーションメニューの横並び表示やブログ記事内での画像配置等がある。<br>
ただし、複雑なレイアウトを実現する場合は、より現代的なレイアウト手法の使用を検討することを推奨する。<br>
<br>
<br>
==== レスポンシブデザイン ====
==== レスポンシブデザイン ====
レスポンシブデザインを考慮する場合、メディアクエリと組み合わせることにより、柔軟な対応が可能である。<br>
レスポンシブデザインを考慮する場合、メディアクエリと組み合わせることにより、柔軟な対応が可能である。<br>
「http://mochiuwiki.e2.valueserver.jp/index.php?title=CSS_-_レイアウト」から取得