「CSS - CSSの基礎」の版間の差分

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

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

移転先はhttps://mochiu.net/index.php?title=CSS - CSSの基礎です。

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

新しい編集 →

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

@@ 157行目: / 157行目: @@
   }
   </syntaxhighlight>
+<br><br>
+== 見出しの位置とスタイル ==
+<body>の上部には、大きな隙間がある。<br>
+これは、スタイリングされていないページに読みやすさを提供することが意図されており、Webブラウザがh1要素にデフォルトのスタイルを適用するためである。<br>
+<br>
+この大きな隙間のサイズを調整する場合、Webブラウザのデフォルトスタイルを<code>margin: 0;</code>と指定する。<br>
+また、見出しの上下のパディングを20ピクセル、見出しのテキストをHTMLの背景色と同じ色に指定する。<br>
+さらに、影を適用するため、<code>text-shadow</code>を指定する。<br>
+<br>
+ <syntaxhighlight lang="css">
+ h1 {
+    margin: 0;
+    padding: 20px 0;
+    color: #ffffff;
+    text-shadow: 3px 3px 1px black;
+    /* text-shadow */
+    /* 引数 1 : テキストからのシャドウの水平オフセット */
+    /* 引数 2 : テキストからの影の垂直方向のオフセット */
+    /* 引数 3 : 影のぼかし半径  値を大きくする場合、より影がぼやける */
+    /* 引数 4 : 影のベースカラー */
+ }
+ </syntaxhighlight>
+<br><br>
+== 画像 ==
+画像に対してCSSを指定する場合、<code>body</code>タグと同様、<code>margin: 0 auto</code>等を使用することもできる。<br>
+しかし、CSSを機能させるために追加設定が必要な場合がある。<br>
+<Br>
+<body>タグはブロック要素である。<br>
+ブロック要素に適用されるマージンは、ページ上の他の要素に尊重される。<br>
+これとは対照的に、画像はインライン要素であるため、この画像に自動マージンを適用するには<code>display: block;</code>を使用して、ブロックレベルの振る舞いを与える必要がある。<br>
+ <syntaxhighlight lang="css">
+ img {
+    display: block;
+    margin: 0 auto;
+ }
+ </syntaxhighlight>
+<br>
+<u>※注意 1</u><br>
+<u>本文に設定されている幅よりも画像が大きい場合、<code>body</code>からはみ出して、ページの他の部分にまで画像が広がる。</u><br>
+<u>これを解決するには、[https://en.wikipedia.org/wiki/Raster%20graphics%20editor グラフィックエディタ]を使用して画像の幅を小さくする、または、CSSを使用して<code><img></code>要素の<code>width</code>プロパティに小さい値を設定する必要がある。</u><br>
+<br>
+<u>※注意 2</u><br>
+<u><code>display</code>の詳細を知りたい場合は、[https://developer.mozilla.org/en-US/docs/Web/CSS/display MDNの公式ドキュメント]を参照すること。</u><br>
 <br><br>