CSS - レイアウト - 版の履歴

Wiki: /* CSS Grid */

2024-11-23T02:57:24Z

CSS Grid

@@ 221行目: / 221行目: @@
   </syntaxhighlight>
 <br>
 ==== float ====
 floatは要素を左右に配置するためのCSSプロパティである。<br>

Wiki: /* 分割レイアウト */

2024-11-20T01:52:42Z

分割レイアウト

@@ 146行目: / 146行目: @@
   </syntaxhighlight>
 <br>
 ==== CSS Grid ====
 CSS Gridは、2次元のレイアウトを実現できる。<br>
-これは、複雑なページ構造を作成する場合に便利である。<br>
+grid-areaを使用して直感的な配置が可能である。<br>
 <br>
   <syntaxhighlight lang="css">
   .grid-container {
     display: grid;
     gap: 20px;
+  }
- /* メインレイアウト */
+  .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;
+  }
-  /* ヘッダ内の要素配置 */
+  /* レスポンシブ対応 */
-  .header {
+  @media (max-width: 768px) {
-   display: flex;
+   .grid-container {
-   justify-content: space-between;
+     grid-template-columns: 1fr;
+  }
   </syntaxhighlight>

Wiki: /* CSS Flexbox */

2024-11-20T01:43:15Z

CSS Flexbox

@@ 91行目: / 91行目: @@
 ==== CSS Flexbox ====
 CSS Flexboxは、1次元のレイアウトに特に強みがある。<br>
 <br>
 これは、ナビゲーションメニューやカードの配置等で使用される。<br>
   <syntaxhighlight lang="css">
   .container {
     display: flex;
-    justify-content: space-between;
+   flex-direction: column;
-    align-items: center;
+    justify-content: space-between;  /* 左右の要素を両端に配置 */
+  }
   </syntaxhighlight>
 <br>
 ==== CSS Grid ====
 CSS Gridは、2次元のレイアウトを実現できる。<br>

Wiki: /* 概要 */

2024-11-05T18:09:56Z

概要

← 古い版		2024年11月6日 (水) 03:09時点における版
20行目:		20行目:
	: inline-block		: inline-block
	:: blockとinlineの特徴を併せ持つ。		:: blockとinlineの特徴を併せ持つ。
			:: 要素が横並びで配置される。(inlineの特徴)
			:: 幅と高さを指定できる。(blockの特徴)
			:: 各要素間にスペースを設定できる。
			:: テキストの基準線に合わせて配置される。
			:: <br>
			:: 下図では、青い四角形は各inline-block要素を表しており、それぞれが独立したボックスとして振る舞いながら、横並びで配置されている様子を示している。
			:: [[ファイル:CSS Layout 3.png\|フレームなし\|中央]]
	: flex		: flex
	:: フレックスボックスレイアウトを使用できる。		:: フレックスボックスレイアウトを使用できる。

Wiki: /* 概要 */

2024-11-05T18:02:29Z

概要

← 古い版		2024年11月6日 (水) 03:02時点における版
10行目:		10行目:
	*: 代表的な値として、以下に示すものが存在する。		*: 代表的な値として、以下に示すものが存在する。
	: block		: block
	:: ~~要素が横幅いっぱいに広がり、前後に改行が入る。~~		:: 縦に積み重なって表示される。
			:: 要素の幅が親要素いっぱいに広がり、それぞれの要素が新しい行から始まる。(前後に改行が入る)
			:: [[ファイル:CSS Layout 1.png\|フレームなし\|中央]]
	: inline		: inline
	:: ~~テキストのように横に並ぶ。~~		:: 横に並んで表示される。
			:: コンテンツの幅のみ占める。
			:: 行の途中から始めることができる。
			:: [[ファイル:CSS Layout 2.png\|フレームなし\|中央]]
	: inline-block		: inline-block
	:: blockとinlineの特徴を併せ持つ。		:: blockとinlineの特徴を併せ持つ。

Wiki: /* float */

2024-11-05T17:50:21Z

float

@@ 129行目: / 129行目: @@
 <br>
   <syntaxhighlight lang="css">
   .left-content {
-     float: left;
+     float:      left;
-     width: 50%;
+     width:      50%;
+  }
   .right-content {
-     float: right;
+     float:      right;
-     width: 50%;
+     width:      50%;
+  }
   </syntaxhighlight>
 <br>
@@ 144行目: / 209行目: @@
 <u>これを解決するために、clearfixと呼ばれる手法を使用する。</u><br>
   <syntaxhighlight lang="css">
   .clearfix::after {
      content: "";
@@ 154行目: / 220行目: @@
 メディアクエリを使用してスマートフォン等の画面幅が狭いデバイスでは、float設定を解除し、縦並びに変更するのが一般的である。<br>
   <syntaxhighlight lang="css">
   @media screen and (max-width: 768px) {
      .left-content,
@@ 159行目: / 226行目: @@
         float: none;
         width: 100%;
+     }
+  }

Wiki: /* float */

2024-11-05T17:39:10Z

float

← 古い版		2024年11月6日 (水) 02:39時点における版
128行目:		128行目:
	特に、2カラムや3カラムのレイアウトを作成する場合によく使用される。<br>		特に、2カラムや3カラムのレイアウトを作成する場合によく使用される。<br>
	<br>		<br>
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	.left-content {		.left-content {
	float: left;		float: left;
143行目:		143行目:
	<u>floatを適用した要素は通常のドキュメントフローから外れるため、親要素が高さを認識できない。</u><br>		<u>floatを適用した要素は通常のドキュメントフローから外れるため、親要素が高さを認識できない。</u><br>
	<u>これを解決するために、clearfixと呼ばれる手法を使用する。</u><br>		<u>これを解決するために、clearfixと呼ばれる手法を使用する。</u><br>
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	.clearfix::after {		.clearfix::after {
	content: "";		content: "";
153行目:		153行目:
	レスポンシブデザインに対応する場合、<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,

Wiki: /* float */

2024-11-05T17:38:25Z

float

@@ 124行目: / 124行目: @@
 <br>
 ==== float ====
-floatは、特定のケース (画像の周りにテキストを回り込ませる等) で現在でも使用されるが、一般的なレイアウトには前述の手法が推奨される。<br>
+floatは要素を左右に配置するためのCSSプロパティである。<br>
 <br>
 ==== レスポンシブデザイン ====
 レスポンシブデザインを考慮する場合、メディアクエリと組み合わせることにより、柔軟な対応が可能である。<br>

Wiki: /* 概要 */

2024-11-05T17:22:25Z

概要

@@ 1行目: / 1行目: @@
 == 概要 ==
+一般的に、HTMLは上から下に要素が記述されるが、CSSを使用することによりこの自然な流れを制御することができる。<br>
 <br><br>

Wiki: ページの作成:「== 概要 ==

== 分割レイアウト == ==== CSS Flexbox ==== CSS Flexboxは、1次元のレイアウトに特に強みがある。

以下の例では、横一列に要素を配置して、等間隔で配置している。
これは、ナビゲーションメニューやカードの配置等で使用される。
.container { display: flex; justify-content: space-between; align-items: center; }
2024-11-05T07:28:01Z

ページの作成:「== 概要 == == 分割レイアウト == ==== CSS Flexbox ==== CSS Flexboxは、1次元のレイアウトに特に強みがある。 以下の例では、横一列に要素を配置して、等間隔で配置している。 これは、ナビゲーションメニューやカードの配置等で使用される。 <syntaxhighlight lang="css"> .container { display: flex; justify-content: space-between; align-items: center; } </…」

新規ページ
== 概要 ==

 

== 分割レイアウト ==
==== CSS Flexbox ====
CSS Flexboxは、1次元のレイアウトに特に強みがある。 
 
以下の例では、横一列に要素を配置して、等間隔で配置している。 
これは、ナビゲーションメニューやカードの配置等で使用される。 
<syntaxhighlight lang="css">
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
</syntaxhighlight>
 
==== CSS Grid ====
CSS Gridは、2次元のレイアウトを実現できる。 
これは、複雑なページ構造を作成する場合に便利である。 
 
以下の例では、3列のグリッドレイアウトを作成して、各列が均等な幅を持つ。 
<syntaxhighlight lang="css">
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
</syntaxhighlight>
 
実務では、CSS FlexboxおよびCSS Gridを組み合わせて使用することが多い。 
<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>
 
==== float ====
floatは、特定のケース (画像の周りにテキストを回り込ませる等) で現在でも使用されるが、一般的なレイアウトには前述の手法が推奨される。 
 
==== レスポンシブデザイン ====
レスポンシブデザインを考慮する場合、メディアクエリと組み合わせることにより、柔軟な対応が可能である。 
 
<syntaxhighlight lang="css">
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; / スマートフォン向けに1列に */
}
}
</syntaxhighlight>
 

{{#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]]

← 古い版		2024年11月6日 (水) 03:09時点における版
20行目:		20行目:
	: inline-block		: inline-block
	:: blockとinlineの特徴を併せ持つ。		:: blockとinlineの特徴を併せ持つ。
			:: 要素が横並びで配置される。(inlineの特徴)
			:: 幅と高さを指定できる。(blockの特徴)
			:: 各要素間にスペースを設定できる。
			:: テキストの基準線に合わせて配置される。
			:: <br>
			:: 下図では、青い四角形は各inline-block要素を表しており、それぞれが独立したボックスとして振る舞いながら、横並びで配置されている様子を示している。
			:: [[ファイル:CSS Layout 3.png\|フレームなし\|中央]]
	: flex		: flex
	:: フレックスボックスレイアウトを使用できる。		:: フレックスボックスレイアウトを使用できる。

← 古い版		2024年11月6日 (水) 03:02時点における版
10行目:		10行目:
	*: 代表的な値として、以下に示すものが存在する。		*: 代表的な値として、以下に示すものが存在する。
	: block		: block
	:: ~~要素が横幅いっぱいに広がり、前後に改行が入る。~~		:: 縦に積み重なって表示される。
			:: 要素の幅が親要素いっぱいに広がり、それぞれの要素が新しい行から始まる。(前後に改行が入る)
			:: [[ファイル:CSS Layout 1.png\|フレームなし\|中央]]
	: inline		: inline
	:: ~~テキストのように横に並ぶ。~~		:: 横に並んで表示される。
			:: コンテンツの幅のみ占める。
			:: 行の途中から始めることができる。
			:: [[ファイル:CSS Layout 2.png\|フレームなし\|中央]]
	: inline-block		: inline-block
	:: blockとinlineの特徴を併せ持つ。		:: blockとinlineの特徴を併せ持つ。