（最新更新月：2021年5月）
「HTMLは書けるようになってきたけど、見栄えを良くしたい！」
「CSSはどこに書けばいいの？」
というCSS初学者向けの記事となります
CSSの基本 ～ CSSの記述場所
について解説します
筆者プロフィール
【現職】プロマネ/システムプランニング
【副業】ブログ（月間7万PV）/YouTube/Web・アプリ制作
【元】外資系金融機関の営業
コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
はじめに
記述場所は3通り！
- 対象のタグ内（インライン）
- styleタグ内
- 別ファイル（.css）
上記の3通りの方法でそれぞれ書いてます
出力結果はこの通り↓
各場所が別々でも同じようにCSSが反映されています
コード紹介
全体のコードはこんな感じです↓
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css" />
<style>
.style-css{
color:blue;
}
</style>
<title>CSSの基本</title>
</head>
<body>
<p style="color: red;">インライン</p>
<p class="style-css">styleタグ</p>
<p class="css-file">cssファイル</p>
</body>
</html>「よくわからない！」「見ていていやになる！」という人はさっと目を通して飛ばしてください！笑
下記より解説します！
図解
それぞれの記述場所はこの通り↓
まだちょっとよくわからないですよね？
ひとまず先に進んで下さい！
場所の解説
インライン
CSSを適用したいタグに直接記述します
<p style="color: red;">インライン</p>styleタグ内
styleタグをHTMLファイルのheadタグ内に記述します
<style>
.style-css{color:blue;}
</style>適用したいタグ内にクラス名を入れ込みます（この場合style-css）
<p class="style-css">styleタグ</p>別ファイル(.css)
HTMLファイルと同列に別ファイルを作成します(index.css)
【別ファイル(index.css)内】
.css-file{color:green;}【htmlファイル内】
headタグ内に作成した.cssファイルを取り込む（index.css）
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href=ファイルパス />
となりますので、形を覚えてしまいましょう！
適用したいタグ内にクラス名を入れ込みます（この場合css-file）
<p class="css-file">cssファイル</p>
まとめ
インラインやstyleタグへ記述する方法ですと、CSSを変更するたびに対象のタグやファイルまでアクセスしないといけません
おススメは、別ファイル（.css）です！
最初の段階から別ファイルで記述することに慣れておきましょう！
最後までご覧頂きありがとうございました！！！