6 CSSで色、幅、余白、線、背景、文字のスタイルを設定する

要素にはクラス名をつけてスタイルを定義する 属性 class=”クラス名”

スタイルを設定したい要素には、予めクラス名（属性 class=”クラス名”）を設定しておきましょう。
クラス名は、要素の種類に関わらず複数の要素に対して同じ名前を付与できます。また、要素には複数のクラス名を付与することもできます。

Webページでは、同じスタイルを使いまわすことが多いので、その場合はクラス名を流用して要素へ設定します。

要素に対して、aタグのリンク先（属性 href=”ジャンプ先”）などで名前を付けたいときや、JavaScriptで要素を制御したい場合は、ID名（属性 id=”ID名”）を使います。

ID名は、ページ内で重複した名前を要素に付与できない（あるID名を使ったら、同じID名を別の要素には使えない）というルールがあるので検索性が高く、JavaScriptでの処理時間も短くなります。

HTML

<div class="box">
   <p>クラス名をつけて、スタイルを変えよう</p>
</div>

CSS

.box{
    
}

色の設定

色の設定方法はいくつかあります。

色設定の書き方

通常は、デザインファイル（AdobeソフトやFigma）から色情報をコピーして貼り付けることが多いと思います。
状況に応じて、好きな色指定の方法を使ってください。

16進数

光の三原色 rgb(赤red/緑green/青blue)の数値を6桁で書きます。
alpha値（透明度）を含む8桁で記載することもできます。

color: #ffcc00; /* rgbで6桁 */
color: #c00; /* #cc0000と同じ意味 */
color: #ffcc00a9; /*  rgbaで8桁*/

hsla

色相（H）、彩度（S）、輝度（L）の各成分によって定義します。
alpha値（A）は任意で色の透明度を指定できます。
VS Codeでは、カラーチップをクリック後、上部のバー部分をクリックすると、色の設定方法を変更できます。

サイズの設定

CSSでは横幅、高さ、太さ、大きさ、などを設定しますが、代表的な設定方法を紹介します。

サイズ設定の書き方

ピクセル指定

単位はpxで記載します。

.box {
    color: hsla(48, 100%, 50%, 0.663);
    font-size: 18px; /*フォントの大きさ*/
    width: 100%;
    padding: 0 20px; /*線の内側の余白　上下0，左右は20px*/
    margin: 0 auto 80px; /*他の要素との距離　上0, 左右auto, 下80px*/
}

％指定

単位は%で指定します。
大きさを示す場合は親要素に対する割合となります。

.box {
    color: hsla(48, 100%, 50%, 0.663); /*彩度100% 照度50%*/
    font-size: 18px;
    width: 100%; /*幅 100%*/
    padding: 0 20px;
    margin: 0 auto 80px;
}

数値指定

単位がなく、数値で指定する場合があります。プロパティによっては設定が可能です。

.box {
    color: hsla(48, 100%, 50%, 0.663);
    font-size: 18px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto 80px;
    line-height: 1.6; /*行の高さ 1.6文字*/
}

rem指定

htmlに指定したフォントサイズ(文字の大きさの標準値)を基準にします。
デフォルトは100%＝16px ですが、CSSに設定がある場合はそのサイズが1remとなります。

少しややこしいので使用は必須ではないのですが、サイトではよく見かける設定方法なので、説明しました。

html {
    font-size: 62.5%; /*1rem=10pxの場合*/
    line-height: 1.6;
    letter-spacing: 0.1em;
    scroll-behavior: smooth;
}
footer {
    padding: 2rem 0; /*20px*/
    text-align: center;
}

vw指定

View Widthの略で、意味は「画面（ビューエリア）の内側の幅」です。
画面のサイズに応じて要素のサイズを制御したい場合に使用します。
レスポンシブ対応では、親に対しての横幅は％で対応できるので、vwを使う場面はレアなケースかもしれません。

以下は、画面に対して50％のサイズの正方形を左右中央配置にする例です。

.square {
    width: 50vw;
    height: 50vw;
    margin: 0 auto;
    background-color: #999;
}

文字のスタイル

文字のスタイルの基本設定は、bodyに設定しておくと一部の子要素でデフォルトとして適用されます。
ブラウザごとに要素の基本設定が既にあり、変更したい場合はそのセレクタへ新たな設定が必要です。

例えば、aタグの色設定は、個別に設定が必要です。
（直接、aタグへ設定します。親要素に指定しても聞かない場合があります）

文字の色 color

クラス名boxの中にあるpタグに、文字色 #333を指定した場合の書き方です。

.box {
    color: hsla(48, 100%, 50%, 0.663);
    font-size: 18px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto 80px;
    line-height: 1.6;

    p {
        color: #333;
    }
}

文字のフォント font-family

WindowsやMac、iOSやAndroid…色々な種類のOSによって、利用できるフォントが異なります。

以下の例は、ゴシック系のフォントの設定例です。
フォントは1文字ごとに適用され、フォントファミリーで指定された種類を頭から探して表示します。
最終的に指定フォントが見つからない場合は、最後の「sans-serif」（＝システムフォントのゴシック体）が適用されます。

p {
        color: #333;
        font-family: "Helvetica Neue",
            Arial,
            "Hiragino Kaku Gothic ProN",
            "Hiragino Sans",
            Meiryo,
            sans-serif;
    }

文字の太さ font-weight

設定可能な文字の太さは、フォントの種類によって異なります。
normalは400、boldは700と同じです。
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight

.box {
    color: hsla(48, 100%, 50%, 0.663);
    font-size: 18px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto 80px;
    line-height: 1.6;

    p {
        color: #333;
        font-family: "Helvetica Neue",
            Arial,
            "Hiragino Kaku Gothic ProN",
            "Hiragino Sans",
            Meiryo,
            sans-serif;
        /* font-weight: normal; は、400と同じ */
        font-weight: bold; /*boldは700と同じ*/
    }
}

文字間のサイズ letter-spacing

文字と文字の間隔を調整したいときは、letter-spacingを設定します。
https://developer.mozilla.org/ja/docs/Web/CSS/letter-spacing

.box {
    color: hsla(48, 100%, 50%, 0.663);
    font-size: 18px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto 80px;
    line-height: 1.6;

    p {
        color: #333;
        font-family: "Helvetica Neue",
            Arial,
            "Hiragino Kaku Gothic ProN",
            "Hiragino Sans",
            Meiryo,
            sans-serif;
        /* font-weight: normal; */
        font-weight: bold;
        letter-spacing: 1px; /*マイナス値も設定可能*/
    }
}

行の高さ line-height

行の高さを指定したい場合は、line-heightを使います。
1.6と設定すると、文字の下に0.6文字分の余白が入ります。（＝文字を含んだ次の文字までの高さ）

https://developer.mozilla.org/ja/docs/Web/CSS/line-height

.box {
    color: hsla(48, 100%, 50%, 0.663);
    font-size: 18px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto 80px;
    line-height: 1.6;

    p {
        color: #333;
        font-family: "Helvetica Neue",
            Arial,
            "Hiragino Kaku Gothic ProN",
            "Hiragino Sans",
            Meiryo,
            sans-serif;
        /* font-weight: normal; */
        font-weight: bold;
        letter-spacing: 1px;
        line-height: 1.6; /*無指定だと狭い行間になって読みにくいので、1.3～2くらいで設定しておきましょう*/
    }
}

要素のスタイル

要素の色（背景色） background-color

要素に色を付けたい場合は、背景色を設定します。

要素の背景に1つの画像を表示 background-image, background-repeat

要素に背景画像を設定したい場合は、background-imageで画像を設定します。
background-repeatで、繰り返し表示するかを設定します。（1枚のときは、no-repeatを指定）
背景画像のサイズに合わせて、要素に幅 widthと、高さ height を設定する場合が多いです。
レスポンシブ対応をしたい場合は、widthで単位を%指定し、さらにアスペクト比 aspect-ratioを設定します。
（要素の中身が小さくても、アスペクト比の大きさは確保されます）

要素の背景画像のサイズ background-size

背景画像がちゃんと表示されない場合は、background-sizeも指定しましょう。
cover指定では、隙間がでないように自動調整されて表示されます。（この設定はよく使われます）
contain指定では、要素の中に全体が入り切るように自動サイズ調整されます。

要素の背景画像の位置 background-position

背景画像が要素より大きい場合に、位置を調整することもできます。
左上が基準となり、左右 上下 という順番で、0%から100%の間で指定する方法を覚えておきましょう。
下の例では、サイズを一旦大き目にしてから、ボートの位置を調整しています。

線 border

要素に枠線をつけたい場合は、borderを設定します。
太さ、線の種類、色を一括設定します。

mdn web docs: border
https://developer.mozilla.org/ja/docs/Web/CSS/border

線の種類は、以下を参照。
https://developer.mozilla.org/ja/docs/Web/CSS/border-style

角丸 border-radius

要素に角丸を設定したい場合は、border-radiusを使います。
角丸の大きさを設定します。

円形 border-radius: 50%;

正円を作りたい場合は、アスペクト比を1:1 に設定し、角丸を50%に設定しましょう。

子要素が上部で円の外にはみ出しています。中央配置にしてみましょう。

内側の余白 padding

要素の内側の余白を増やしたい場合は、paddingを指定します。
h1に下線を引いて、下線と文字を離したい場合には、padding-bottomを指定しましょう。

全体的に、要素が画面にピタッとなっているので、bodyにもpaddingを設定します。
内側の余白をつけていくと、ページが洗練されて見やすくなります。

paddingに1つの値を設定した場合は、上下左右同じ値となります。

padding: 上下左右;
padding: 上下 左右
padding: 上 左右 下;
padding: 上 右 下 左;

他の要素との距離 margin

要素の外側、他の要素との距離をあけたい場合は、marginを設定します。
タイトルの下に、次の要素との隙間を設定してみましょう。

ブロックタイプの要素を中央配置にしたい場合は、margin-leftとmargin-rightをautoに設定しましょう。
（paddingはauto設定できません）

1つの値を設定した場合は、上下左右同じ値となります。

margin: 上下左右;
margin: 上下 左右
margin: 上 左右 下;
margin: 上 右 下 左;

要素の種類による表示の違い display

タグには、インラインタイプ、ブロックタイプ、両方の特徴を持つインラインブロックタイプ、などがあります。
デフォルトのタイプは、以下のようになります。

インライン →文字のような

幅や高さの設定、上下の余白設定が効きません。
デフォルトの幅は、タグ内のコンテンツの幅となります。
インライン要素同士は、横に並びます。

a, span, small, br, など

ブロック →箱のような

幅や高さ、余白設定が可能です。
デフォルトの幅は、親に対して100%となり、横に広がります。
ブロック要素は、複数ある場合は縦に積まれていきます。（横には並びません）
marginのautoが設定できます。

header, main, footer, ul, li, section, h1～h6, div, など

インラインブロック →小さい箱のような

幅が狭いとき、インラインのように横に並びます。
デフォルトの幅は、タグ内のコンテンツの幅となります。
ブロックのように、幅や高さ、余白設定が可能です。

img など

※displayプロパティの設定により、デフォルトのタイプを変更することができます。

Webフォントの適用方法（Google Fontsの場合）

Google Fontsは、商用利用可能なフォントサービスです。無料で利用できます。
https://fonts.google.com/

Webフォントを使用すると、デバイスやOSの種類に関わらず、同じフォントを使って文字を表示できます。

フォントを選びます

検索から、好きなフォントを選んでクリックします。

Get fontでバッグの中に入れます

バッグの中を見て、「Get embed code」をクリックします

headタグ内に上部のlinkタグ一式を入れ、CSSで使用します

HTMLのheadタグ内にlinkタグを入れます。この例では、3行のコードを使います。

HTMLに組み込んだCSSファイルなど、任意のセレクタへfont-familyを設定し、font-weightを指定します。
weightは、フォントの種類によって利用可能な範囲が決まっています。
Noto Sans Japaneseの場合は、100から900まで、100単位で設定が可能です。