2025.12.15 学習記録 ～HTML/CSS④～
Kumiko OkawaraCSSの基礎を勉強し、実際にHTMLとCSSのコードを編集してサイトの表示を整えた。
本日の実習作品
HTML/CSS編集後のサイト
HTML/CSS編集前のサイト
CSSの基本構造
セレクタ｛
プロパティ: 値;
}
/*コメント*/
セレクタ：スタイル対象を指定
プロパティ：スタイル種別を指定 ※半角空欄あってもなくても問題ない
値：スタイル値を指定
コメント
リセットCSSとCSSスタイルシートの適用例
<!doctype html>
<html>
<head>
<meta>
<meta>
<title>〜〜〜</title>
<link href="reset.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>文字列1</p>
<p>文字列2</p>
</body>
</html>
- CSSファイルが別のフォルダにある場合は、フォルダの場所から指定すること。
（link href="〇〇/reset.css"） - リセットCSSは必ず適用したいCSSの前に記載すること。
セレクタでcssを反映させる
①HTMLファイルの任意のタグにclassを付与する
<body>
<p class="abc">文字列1</p> （classを付与）
<p>文字列2</p>
</body>
pタグ文字列1にabcクラスを付与。
②CSSファイルのclassセレクタで設定を反映させる
p.abc {
color: blue;
}
pタグabcクラスの文字列を青色にする。
備考・メモ
レイアウト系プロパティは少々複雑。他は単純。
実際のCSSファイルに書き込む前に、検証ツールでシュミレーションできる。
HTMLとCSSファイル連携、CSSファイルにセレクタ情報だけ入れておく→検証ツールでCSSにプロパティや値を書き込み
※更新するとすべて消えてしまう点に注意！
検証でうまくいったら、CSSのstyle.cssのファイル名部分をクリックしてからコードのコピーも可能。そのままCSSファイルにペーストすればOK。
※全部左揃えで貼り付けられてしまうので、スタイルシートの見た目は自分で整える。
HTMLチェックツール
Another HTML Lint - Gateway
CSSチェックツール
W3C CSS 検証サービス
キャプチャフルサイズスクリーンショットを撮りたい場合
検証→レスポンシブのシュミレーション→サイズ変更のタブの右上にある三点マークから「Capture full size screenshot」を選択
画像の配置を変える場合、imgを直接CSSで配置変えるのは大変なので、HTML上「pタグ」で囲んでしまう。
pタグに変えてimgにクラスをつけて、CSS上でクラス指定して配置を変更。
ファビコンジェネレーター…画像をファビコンサイズに変換できる。
※ファビコンはタブの左にあるアイコンのこと。
