📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
編集の要約なし |
|||
| 159行目: | 159行目: | ||
<br><br> | <br><br> | ||
== 背景色 == | == ボックス == | ||
==== ボックスについて ==== | |||
CSSでは、サイズ、色、位置等を指定することができる。<br> | |||
<br> | |||
これは、Webページ上の多くのHTML要素は、他のボックスの上に置かれたボックスと考えることができる。<br> | |||
CSSのレイアウトの多くはボックスモデルに基づいており、Webページ上のスペースを占める各ボックスには、以下に示すようなプロパティがある。<br> | |||
* padding | |||
*: コンテンツの周りのスペース。 | |||
*: 下図では、段落テキストの周りのスペースのことである | |||
* border | |||
*: パディングのすぐ外側にある実線 | |||
* margin | |||
*: ボーダーの外側のスペース | |||
* width | |||
*: 要素の幅 | |||
* background-color | |||
*: 要素の内容と<code>padding</code>の背景色 | |||
* color | |||
*: 要素の内容 (テキスト等) の色 | |||
* text-shadow | |||
*: 要素内のテキストの影 | |||
* display | |||
*: 要素の表示モード | |||
<br> | |||
==== 背景色 ==== | |||
ページ全体の背景色を指定する。<br> | ページ全体の背景色を指定する。<br> | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
| 166行目: | 190行目: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | |||
==== ボディのスタイリング ==== | |||
== ボディのスタイリング == | |||
<code><body></code>要素には、いくつかの宣言がある。<br> | <code><body></code>要素には、いくつかの宣言がある。<br> | ||
* width | * width | ||
| 192行目: | 215行目: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | |||
==== 見出しの位置とスタイル ==== | |||
== 見出しの位置とスタイル == | |||
<body>の上部には、大きな隙間がある。<br> | <body>の上部には、大きな隙間がある。<br> | ||
これは、スタイリングされていないページに読みやすさを提供することが意図されており、Webブラウザがh1要素にデフォルトのスタイルを適用するためである。<br> | これは、スタイリングされていないページに読みやすさを提供することが意図されており、Webブラウザがh1要素にデフォルトのスタイルを適用するためである。<br> | ||
| 215行目: | 237行目: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | |||
==== 画像 ==== | |||
== 画像 == | |||
画像に対してCSSを指定する場合、<code>body</code>タグと同様、<code>margin: 0 auto</code>等を使用することもできる。<br> | 画像に対してCSSを指定する場合、<code>body</code>タグと同様、<code>margin: 0 auto</code>等を使用することもできる。<br> | ||
しかし、CSSを機能させるために追加設定が必要な場合がある。<br> | しかし、CSSを機能させるために追加設定が必要な場合がある。<br> | ||