ウェブサイトの見た目を整える

style 属性を用いると、多くのHTML 要素の見た目をカスタマイズすることができます。

style 属性#

p 要素の style 属性に color: red; を指定します。

index.html

<p style="color: red;">Hello CSS!</p>

次のように、style 属性を指定した要素内のテキストが赤色で表示されます。

CSSを書き始める

前項で style 属性に指定した値を詳しく見ていきましょう。

color: red;

この属性に指定される値は、CSS と呼ばれる言語により記述されます。style 属性では、プロパティと呼ばれるスタイルの種類と、プロパティ値と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。

上の例では、color というプロパティに、red というプロパティ値を設定することで、文字色を赤色に設定するよう指示しています。

複数のプロパティを指定する場合には、下のように プロパティ: プロパティ値; の組を並べて記述します。セミコロンの指定が必要であることに注意してください。

index.html

<p style="color: red; font-size: 30px;">Hello CSS!</p>

CSS のプロパティには color (文字色) や font-size (文字サイズ) だけでなく、background-color (背景色)、text-decoration (文字装飾)等、数えきれないほどの種類が定義されています。

MDNは、信頼できるオンラインの情報源です。MDN の CSS リファレンスには、たくさんのプロパティが掲載されています。ざっくりと眺めて、その可能性を感じてみてください。

この課題への解答は任意です。時間が余った際に取り組んでみてください。

画像のようなシンプルなボックスを作ってみましょう。

シンプルなボックス

シンプルで、よく見かけるデザインですが、様々な指定が必要であることが分かります。次のような点に注意してデザインしてみてください。