CSS - レイアウトのソースを表示

== 概要 ==
一般的に、HTMLは上から下に要素が記述されるが、CSSを使用することによりこの自然な流れを制御することができる。<br>
<br>
最も基本的な概念として<u>ボックスモデル</u>がある。<br>
これは要素を箱として捉え、content (内容)、padding (内側の余白)、border (枠線)、margin (外側の余白) で構成されている。<br>
<br>
レイアウトの主要な手法を以下に示す。<br>
* displayプロパティ
*: displayプロパティは、要素の表示方法を決定する重要な要素である。
*: 代表的な値として、以下に示すものが存在する。
*:* block
*:*: 縦に積み重なって表示される。
*:*: 要素の幅が親要素いっぱいに広がり、それぞれの要素が新しい行から始まる。(前後に改行が入る)
*:*: [[ファイル:CSS Layout 1.png|フレームなし|中央]]
*:* inline
*:*: 横に並んで表示される。
*:*: コンテンツの幅のみ占める。
*:*: 行の途中から始めることができる。
*:*: [[ファイル:CSS Layout 2.png|フレームなし|中央]]
*:* inline-block
*:*: blockとinlineの特徴を併せ持つ。
*:* flex
*:*: フレックスボックスレイアウトを使用できる。
*:* grid
*:*: グリッドレイアウトを使用できる。
<br>
* フレックスボックス
*: モダンなレイアウトの主力として使用される。
*: 親要素に<code>display: flex</code>を指定することにより、子要素を柔軟に配置できる。
*: <syntaxhighlight lang="css">
.container {
   display: flex;
   justify-content: space-between; /* 横方向の配置 */
   align-items: center; /* 縦方向の配置 */
}
</syntaxhighlight>
*: <br>
* グリッドレイアウト
*: 2次元のグリッドベースのレイアウトを実現できる。
*: <syntaxhighlight lang="css">
.grid-container {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   gap: 20px;
}
</syntaxhighlight>
*: <br>
* ポジショニング
*: positionプロパティを使用することにより、詳細な配置制御が可能となる。
*: <syntaxhighlight lang="css">
.element {
   position: relative; /* または absolute, fixed, sticky */
   top: 0;
   left: 0;
}
</syntaxhighlight>
*: <br>
* レスポンシブデザイン
*: 様々な画面サイズに対応するため、メディアクエリを使用する。
*: <syntaxhighlight lang="css">
@media (max-width: 768px) {
   .container {
      flex-direction: column;
   }
}
</syntaxhighlight>
<br>
最近のWeb開発では、フレックスボックスとグリッドを組み合わせて使用することが一般的である。<br>
フレックスボックスは1次元のレイアウト、グリッドは2次元のレイアウトに適している。<br>
<br>
また、<code>calc</code>関数やCSS変数を使用することにより、柔軟なレイアウト調整が可能になっている。<br>
 <syntaxhighlight lang="css">
 :root {
    --main-width: 80%;
 }
 
 .container {
    width: calc(var(--main-width) - 20px);
 }
 </syntaxhighlight>
<br><br>

== 分割レイアウト ==
==== CSS Flexbox ====
CSS Flexboxは、1次元のレイアウトに特に強みがある。<br>
<br>
以下の例では、横一列に要素を配置して、等間隔で配置している。<br>
これは、ナビゲーションメニューやカードの配置等で使用される。<br>
 <syntaxhighlight lang="css">
 .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 </syntaxhighlight>
<br>
==== CSS Grid ====
CSS Gridは、2次元のレイアウトを実現できる。<br>
これは、複雑なページ構造を作成する場合に便利である。<br>
<br>
以下の例では、3列のグリッドレイアウトを作成して、各列が均等な幅を持つ。<br>
 <syntaxhighlight lang="css">
 .grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
 }
 </syntaxhighlight>
<br>
実務では、CSS FlexboxおよびCSS Gridを組み合わせて使用することが多い。<br>
 <syntaxhighlight lang="css">
 /* CSS FlexboxおよびCSS Gridの組み合わせ */
 
 /* メインレイアウト */
 .page {
   display: grid;
   grid-template-areas: 
     "header header"
     "sidebar main"
     "footer footer";
 }
 
 /* ヘッダ内の要素配置 */
 .header {
   display: flex;
   justify-content: space-between;
 }
 </syntaxhighlight>
<br>
==== float ====
floatは要素を左右に配置するためのCSSプロパティである。<br>
基本的には、<code>float: left</code>や<code>float: right</code>を使用して、要素を左右に寄せて配置する。<br>
特に、2カラムや3カラムのレイアウトを作成する場合によく使用される。<br>
<br>
 <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 {
    float:      left;
    width:      50%;
    min-height: 400px;
    padding:    20px;
    background-color: #f0f0f0;
 }
 
 /* 右カラム */
 .right-content {
    float:      right;
    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>
<br>
floatは、特定のケース (画像の周りにテキストを回り込ませる等) で現在でも使用されるが、<br>
最近のWeb開発では、FlexboxやGrid Layout等のより柔軟なレイアウト手法が主流となっている。<br>
<br>
しかし、floatレイアウトは、シンプルな実装と高いブラウザ互換性という利点があり、特定の状況では今でも有効である。<br>
<br>
例えば、レガシーブラウザのサポートが必要な場合や画像とテキストを組み合わせたシンプルなレイアウトを作成する場合等に使用される。<br>
<br>
他の使用例としては、ナビゲーションメニューの横並び表示やブログ記事内での画像配置等がある。<br>
ただし、複雑なレイアウトを実現する場合は、より現代的なレイアウト手法の使用を検討することを推奨する。<br>
<br>

==== レスポンシブデザイン ====
レスポンシブデザインを考慮する場合、メディアクエリと組み合わせることにより、柔軟な対応が可能である。<br>
<br>
 <syntaxhighlight lang="css">
 @media (max-width: 768px) {
   .grid-container {
     grid-template-columns: 1fr;  /* スマートフォン向けに1列に */
   }
 }
 </syntaxhighlight>
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Web]]