【Part4】簡単なCSSを書いてみる

前回までで、基本的なHTMLの構文を書けるようになりました。

今回からは、本格的にデザインをしていくためにCSSを書けるようになっていきましょう！

CSSの基本構文
HTMLにCSSを読み込む
1. 直接書き込む
2. CSSファイルを読み込む
色を変更する
コンテンツ位置を調整する
リファレンスを確認する
課題
参考

CSSの基本構文

CSSは、セレクタ・プロパティ・値の３つで構成されています。

例えば、<body>タグの範囲内の背景色を青色にするCSSは、以下のように書くことができます。

body {
    background-color: #004e9c;
}

body{...}でHTML内のbody要素を指定し、background-colorプロパティをRGBカラーコードで指定するという内容です。

よく使われるプロパティ

プロパティ名	説明
`color`	テキストの色を指定
`font-size`	テキストのフォントサイズを指定
`font-family`	テキストのフォントファミリーを指定
`font-weight`	テキストの太さを指定
`text-align`	テキストの水平方向の配置を指定
`text-decoration`	テキストの装飾（下線、取り消し線など）を指定
`line-height`	行の高さを指定
`background-color`	背景色を指定
`background-image`	背景画像を指定
`background-size`	背景画像のサイズを指定
`margin`	要素の外側の余白を指定
`padding`	要素の内側の余白を指定
`border`	境界線のスタイル、太さ、色を指定
`width`	要素の幅を指定
`height`	要素の高さを指定
`display`	要素の表示方法を指定
`position`	要素の位置指定方法（相対位置、絶対位置など）を指定
`opacity`	要素の透明度を指定
`box-shadow`	要素に影を付ける効果を指定

HTMLにCSSを読み込む

CSSを読み込む方法は大きく2パターンあります。

HTMLの<style>タグを使って、CSSを直接書いていく方法
CSSファイルを作成して、HTMLファイルからCSSファイルを呼び出す方法

上記の２パターンの両方を紹介します！

直接書き込む

HTMLファイルにCSSを書いていく場合、<head>タグ内に<style>タグを書きます。背景を青色にする場合は、以下のように<style>タグを書きます。

<style>
     body {
         background-color: #004e9c;
     }
</style>

CSSファイルを読み込む

CSSファイルを読み込む場合は、<link>タグを使ってCSSファイルの参照をする必要があります。

例えばフォルダ・ファイル構成が次のようになっているとします。

Web
├ index.html
└ styles
　└ style1.css

HTMLファイルから呼び出すための<link>タグの書き方は、この構成では以下のようになります。

<link rel="stylesheet" href="styles/style1.css">

色を変更する

文字色を変えるためには、colorプロパティを変更します。例えば、文字を白にする場合は、3種類の書き方をすることができます。

color: #ffffff; /* カラーコード指定 */
color: #fff; /* カラーコード指定 (短縮形) */
color: white; /* キーワード指定 */

背景色を変更するには、background-colorプロパティ(backgroundプロパティ)を変更します。背景色を半透明にしたい場合には、RGBカラーコード指定ではなく、RGBA指定ができる関数を利用します。

rgba(赤色数値, 緑色数値, 青色数値, 透明度)

それぞれの色の数値は0から255の間で指定することができます。透明度は0から1の間で指定することができ、0で完全塗りつぶしになり1で無色透明になります。

background: rgba(00,78,156,0.5); /* 濃い青色 透明度50% */

コンテンツ位置を調整する

コンテンツ位置を調節するためには、marginプロパティを変更します。ほかにもコンテンツ位置を調整する方法としてpaddingプロパティもあります。marginとpaddingの違いはコンテンツの内側を基準とするか外側を基準とするかで変化します。また、ピクセル単位での指定以外にも、ウィンドウサイズに対する割合で指定することもできます。pタグで囲まれた部分を変化させてみて、確認してみましょう。

p {
    background-color: red;
    margin: 10px; /* ピクセル指定 */
    padding: 5%; /* パーセント指定 */
}

画面の中央に要素を配置したい場合、autoというキーワードを使うことができます。

また、marginとpaddingの両方ともに上下左右の4方向を個別に指定できるプロパティがあります。左右は余白ほしいけれど、上下に必要無い場合には個別に指定しましょう。

文字揃え位置を調整するためには、text-alignプロパティを設定します。中央揃えにするためには、以下のようにプロパティを設定します。標準では、text-align: left;に設定されています。

p {
   text-align: center;
}

フォントを変更するには、font-familyプロパティを設定します。OSによってインストールされている標準フォントが異なるため、複数指定するのがスタンダードとなっています。以下は、pタグ内のフォントを変化させてみるCSSです。

p {
    font-family: Arial, Helvetica, sans-serif;
}

リファレンスを確認する

CSSで設定できる項目は多種多様で、今回紹介できたのは一部にすぎません。自学習のために、リファレンスに掲載されているプロパティを上から順番に試してみるのも良いかもしれません。

CSSプロパティ ABC順一覧【CSSリファレンス】 (cman.jp)

課題

自分のよく使っているサイトから一つ選び、どのような構成になっているか考えてみましょう！
自分のできる範囲でサイトを再現してみることが、デザインの上達のための近道です！

参考

【CSS】まずはこれを読め！CSSの基本(指定の仕方、優先順位) #CSS – Qiita
CSSのmarginとは？paddingとは？余白の指定方法まとめ (saruwakakun.com)
font-familyの書き方まとめ：CSSでフォント種類を指定しよう (saruwakakun.com)
CSSプロパティ ABC順一覧【CSSリファレンス】 (cman.jp)