はじめに
自分でCSSを追加で記述することで、細かいデザインを修正できます。
その場合、以下の手順で作成できます。
カスタムCSSの追加方法
1. CSSファイルの作成
まず、main.css
というカスタムCSSファイルをpublic/static/css
の中に生成していきましょう(ファイル名は任意の名前でも構いません)。
【余談:Terminalからmain.cssを生成する方法】
もしもmacOSユーザーの場合は、Terminalというアプリを開いて、以下のコマンドを実行することで作成することもできます。
touch public/static/css/main.css
2. linkタグの追加
次に、index.html
のhead
タグの中に以下のようなコードを挿入します。
<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
を開き、再読み込みを行い、以下のように背景色が黄色がかりましたら、成功です!
宣伝:もしもよかったらご覧ください^^
『AIとコミュニケーションする技術(インプレス出版)』という書籍を出版しました🎉
これからの未来において「変わらない知識」を見極めて、生成AIの業界において、読まれ続ける「バイブル」となる本をまとめ上げました。
かなり自信のある一冊なため、もしもよろしければ、ご一読いただけますと幸いです^^