MochiuWiki : SUSE, EC, PCB

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

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

← 古い編集
ビジュアルウィキテキスト
 
(同じ利用者による、間の1版が非表示)
146行目: 146行目:
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
==== 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>
「http://mochiuwiki.e2.valueserver.jp/index.php?title=CSS_-_レイアウト」から取得