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

📢 Webサイト閉鎖と移転のお知らせ

このWebサイトは2026年9月に閉鎖いたします。

移転先はhttps://mochiu.net/index.php?title=CSS - レイアウトです。

新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

新しい編集 →

ビジュアルウィキテキスト

@@ 1行目: / 1行目: @@
 == 概要 ==
+一般的に、HTMLは上から下に要素が記述されるが、CSSを使用することによりこの自然な流れを制御することができる。<br>
+<br>
+最も基本的な概念として<u>ボックスモデル</u>がある。<br>
+これは要素を箱として捉え、content (内容)、padding (内側の余白)、border (枠線)、margin (外側の余白) で構成されている。<br>
+<br>
+レイアウトの主要な手法を以下に示す。<br>
+* displayプロパティ
+*: displayプロパティは、要素の表示方法を決定する重要な要素である。
+*: 代表的な値として、以下に示すものが存在する。
+*:* block
+*:*: 要素が横幅いっぱいに広がり、前後に改行が入る。
+*:* inline
+*:*: テキストのように横に並ぶ。
+*:* 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>