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

== 概要 ==

<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は、特定のケース (画像の周りにテキストを回り込ませる等) で現在でも使用されるが、一般的なレイアウトには前述の手法が推奨される。<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]]