2025.12.13 学習記録 ～HTML/CSS③～

2025年12月13日 最終更新日時 : 2026年2月18日 Kumiko Okawara

CSSの基本構造

HTMLファイルとは別に記述する場合

セレクタ {　　　　　
　　プロパティ: 値;
　　プロパティ: 値;
}

セレクタ{…どこの
プロパティ:…何を
値;…どうする
}

HTMLファイル内に記述する場合

headタグ内に

<style>
p {
color: yellow;
}
</style>

＝ｐタグの文字を黄色にする

HTMLタグにインラインで記述する場合

bodyタグ内に

<p>これはｐタグです</p>
<p>これはｐタグです</p>
<p style=”color: purple;”>これはｐタグです</p>

=指定のｐタグのみ文字を紫にする

リセットCSS

ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っており、ブラウザ環境を変更すると意図しない表示になることがある。
このような現象を防ぐためにリセットCSSを使用する。

※先にリセットCSS（recet.css）を用意してフォルダ内に格納しておくこと。

リセットCSSはHTMLファイル内にパスを通すように指示を入れる。

headタグ内の<link href="style.css" rel="stylesheet">（＝CSSファイルのパスを通す）前に、下記の指示を入れること。

<link href="recet.css" rel="stylesheet">

パスを通す



記述例
使い方
<img src="images/sample_img001.jpg" alt="">画像「img」
<a href="index.html" >リンク</a>リンク「a」
<link href="style.css" rel="stylesheet">外部スタイルシート「link」
background-image:url("images/home_bg01.gif");背景画像「background」「background-image」

例）画像の表示（HTMLで）
<img src="images/sample_img001.jpg" alt="">

src=""→HTMLのファイルから見て対象の画像がどこにあるのかを指定する。
　　　 （同じフォルダなら、フォルダの場所は省略できる）

alt=""→画像の説明文。画像が表示されない場合や、読み上げソフトで説明として利用される。
　　　　★Googleの検索エンジンもここで何の画像なのかを認識している。SEOに直結する！

例）CSSを適用したい場合（HTMLのheadタグ内に）
<link href="style.css" rel="stylesheet">

href=""→HTMLのファイルから見て対象のCSSファイルがどこにあるのかを指定する。
　　　　（同じフォルダなら、フォルダの場所は省略できる）

CSSでも画像が表示できる。
利用シーン…画像に意味を持たせたくない場合。（背景画像等）

HTML復習

<meta name="description" content="説明文">
サイトの説明文を記述する項目。任意。

<meta name="keywords" content="html,css,見本">
サイトのキーワードを記述する項目。任意。

本文中のタグには全て意味がある！
人目線だと「見た目」さえ整って入ればタグの構造は重要ではないが、Googleの検索エンジン（bot）は見た目じゃなくて「構造」を見ている！
⇒構造が崩れていると検索結果表示の優先度が下がる。SEO対策として致命的！
　※特にh〇の見出しタグの扱い（階層飛ばし）には注意！

検証ツール（開発ツール、デベロッパーツール）

検証ツールを使うと、そのサイトのHTMLとCSSの構成が確認できる。

自分で検証ツール内のコードをいじってシュミレーションも可能！リロードすれば元に戻る。

スマホ（機種別）の表示もシュミレーションできる。

コード→表示だけでなく、表示→コ―ドで逆引きすることも可能。

備考・メモ

HTMLのファイル名…index.html
CSSのファイル名…style.cssで保存。

コメントアウト方法

CSS…/* 〇〇〇〇〇 */

HTML…<!-- 〇〇〇〇〇 -->

CSSの処理は記述の上から順番に読み込まれる。対象の処理が競合している場合は一番下の処理が反映される。
処理に優先順位をつける場合はクラスをつけて、「セレクタの得点」をうまく利用すること！

その他資料・リンク

カテゴリー
オンライン
タグ

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
2025.12.11 学習記録 ～HTML/CSS②～
2025年12月11日
次の記事
2025.12.15 学習記録 ～HTML/CSS④～
2025年12月15日