MochiuWiki : SUSE, EC, PCB

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

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

← 古い編集
ビジュアルウィキテキスト
 
(同じ利用者による、間の6版が非表示)
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;
  }
  }
</syntaxhighlight>
<br>
実務では、CSS FlexboxおよびCSS Gridを組み合わせて使用することが多い。<br>
<syntaxhighlight lang="css">
/* CSS FlexboxおよびCSS Gridの組み合わせ */
   
   
/* メインレイアウト */
  .bottom {
  .page {
   grid-area: bottom;
   display: grid;
   grid-column: 1 / -1;  /* 全幅を使用 */
   grid-template-areas:  
  background: #e0e0e0;
    "header header"
  padding: 20px;
    "sidebar main"
  min-height: 100px;
    "footer footer";
  }
  }
   
   
  /* ヘッダ内の要素配置 */
  /* レスポンシブ対応 */
  .header {
  @media (max-width: 768px) {
  display: flex;
  .grid-container {
  justify-content: space-between;
    grid-template-columns: 1fr;
    grid-template-areas:  
      "top"
      "middle-left"
      "middle-right"
      "bottom";
  }
  }
  }
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
CSS Gridには、以下に示すような代表的なプロパティが存在する。<br>
* justify-content
*: space-between; /* グリッド全体を配置 */
* align-items
*: center; /* 各セル内のアイテムを中央配置 */
*: <br>
* justify-items
*: グリッドセル内での水平方向の配置
* align-content
*: グリッド全体の垂直方向の配置
<br>
==== float ====
==== float ====
floatは要素を左右に配置するためのCSSプロパティである。<br>
floatは要素を左右に配置するためのCSSプロパティである。<br>
128行目: 238行目:
特に、2カラムや3カラムのレイアウトを作成する場合によく使用される。<br>
特に、2カラムや3カラムのレイアウトを作成する場合によく使用される。<br>
<br>
<br>
  <syntaxhighlight lang="css">  
  <syntaxhighlight lang="css">
/* リセットとベーススタイル */
* {
    margin:    0;
    padding:    0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
.container {
    width:    90%;
    max-width: 1200px;
    margin:    0 auto;
    padding:  20px;
}
/* 左カラム */
  .left-content {
  .left-content {
     float: left;
     float:     left;
     width: 50%;
     width:     50%;
    min-height: 400px;
    padding:    20px;
    background-color: #f0f0f0;
  }
  }
   
   
/* 右カラム */
  .right-content {
  .right-content {
     float: right;
     float:     right;
     width: 50%;
     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>
  </syntaxhighlight>
<br>
<br>
143行目: 318行目:
<u>floatを適用した要素は通常のドキュメントフローから外れるため、親要素が高さを認識できない。</u><br>
<u>floatを適用した要素は通常のドキュメントフローから外れるため、親要素が高さを認識できない。</u><br>
<u>これを解決するために、clearfixと呼ばれる手法を使用する。</u><br>
<u>これを解決するために、clearfixと呼ばれる手法を使用する。</u><br>
  <syntaxhighlight lang="css">  
  <syntaxhighlight lang="css">
/* floatのクリア */
  .clearfix::after {
  .clearfix::after {
     content: "";
     content: "";
153行目: 329行目:
レスポンシブデザインに対応する場合、<br>
レスポンシブデザインに対応する場合、<br>
メディアクエリを使用してスマートフォン等の画面幅が狭いデバイスでは、float設定を解除し、縦並びに変更するのが一般的である。<br>
メディアクエリを使用してスマートフォン等の画面幅が狭いデバイスでは、float設定を解除し、縦並びに変更するのが一般的である。<br>
  <syntaxhighlight lang="css">  
  <syntaxhighlight lang="css">
/* レスポンシブデザイン */
  @media screen and (max-width: 768px) {
  @media screen and (max-width: 768px) {
     .left-content,
     .left-content,
159行目: 336行目:
       float: none;
       float: none;
       width: 100%;
       width: 100%;
      margin-bottom: 20px;
     }
     }
  }
  }
「http://mochiuwiki.e2.valueserver.jp/index.php?title=CSS_-_レイアウト」から取得