Chapter 07

6. カスタムCSSの追加

Masumi Morishige(umi-mori)
Masumi Morishige(umi-mori)
2021.01.02に更新

はじめに

自分でCSSを追加で記述することで、細かいデザインを修正することができます。
その場合、以下の手順で作成することができます。

カスタムCSSの追加方法

1. CSSファイルの作成

まず、main.cssというカスタムCSSファイルをpublic/static/cssの中に生成していきましょう(ファイル名は任意の名前でも構いません)。

main_css.png

【余談:Terminalからmain.cssを生成する方法】

もしもmacOSユーザーの場合は、Terminalというアプリを開いて、以下のコマンドを実行することで作成することもできます。

$ touch public/static/css/main.css

2. linkタグの追加

次に、index.htmlheadタグの中に以下のようなコードを挿入します。
<link rel="stylesheet" href="./static/css/main.css" />

結果的に、headタグ全体のコードは以下のようになります。

index.html
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="format-detection" content="email=no,telephone=no,address=no">

    <title>Landing Page Temp</title>
    <link rel="stylesheet" href="./static/css/mvp.css" />
    <link rel="shortcut icon" href="./static/icons/favicon.ico">
    <!-- この行を追加 -->
    <link rel="stylesheet" href="./static/css/main.css" />
</head>

3. main.cssの変更

最後に、main.cssのファイルを変更していきます。
しっかりとcssが反映されているかを確認するために、以下のように背景色をbackground-colorというプロパティを設定しましょう。

main.css
body {
    background-color: lightyellow;
}

4. ウェブページの確認

再びウェブブラウザでindex.htmlを開き、再読み込みを行い、以下のように背景色が黄色がかりましたら、成功です!

index_html_yellow.png