2025/3/28 「HTML/CSS基礎③」の記録です。
講師：湊 有加⾥先生
ブロックレベルとは
ページ内で新しい「ブロック」を作り出す要素です。
これらの要素は常に新しい行から始まり、幅いっぱいに広がります。
例としては、<div>, <p>, <h1> などがあります。これらの要素は通常、他の要素の上または下に配置されます。
インライン
行の中に直接配置され、他の要素と横に並ぶ要素です。
インライン要素は、ページ内で新しい行を作らず、その周りに他の要素と一緒に表示されます。
例としては、<span>, <a>, <strong> などがあります。
コメントアウトとは
プログラムのコードの一部を無効化し、プログラムの動作に影響を与えないようにすること。
主な用途
-
メモや説明を書く：コードの意図を説明するために使う。
-
デバッグ時に一時的にコードを無効化：エラーの原因を特定するため、特定のコードを一時的に無効化する。
-
将来の修正のために残しておく：すぐには使わないが、後で再利用する可能性のあるコードを残す。
<!-- これはコメント -->
/* これはコメント */
相対パスと絶対パス
ァイルやページの場所を指定するときに使う方法
HTMLで href や src に使われることが多い。
絶対パス
「どこからでもアクセスできる、完全なURL」のこと。
サイトのルート（https://example.com など）からのフルパスを書く。
例: 絶対パス
<a href="https://example.com/about.html">会社概要</a>
-
https:// から始まる 完全なURL を書く
-
どこからでもリンクできる（他のサイトからでもOK）
相対パス
「今いるファイルの場所からの相対的な位置」で指定する方法。
現在のファイルの位置を基準にパスを書く。
例: 同じフォルダにあるファイル
<a href="about.html">会社概要</a>
-
同じフォルダにあるファイル にリンクする場合、そのままファイル名を書く
例: 1つ上のフォルダにあるファイル
<a href="../index.html">ホームに戻る</a>
-
.. は「1つ上のフォルダ」を意味する
-
../index.html は、「1つ上のフォルダにある index.html 」を指す
例: フォルダの中のファイル
<a href="blog/post.html">ブログ記事</a>
-
blog/ は「今のフォルダの中の blog フォルダ」
-
blog/post.html は「blog フォルダの中にある post.html 」
どっちを使うべき？
絶対パスを使う場合
- 外部サイトへのリンク
- 別のサイトからもアクセスできるURLを使いたい場合
相対パスを使う場合
- 同じサイト内でページを移動する
- 開発環境と本番環境で同じコードを使いたい （ローカル開発時に https://example.com を書くと動かなくなる）
<em> 要素（強調）
意味的に強調したい部分に使うタグです。
通常、ブラウザでは 斜体 で表示されます。
基本の使い方
<p>私は <em>重要な</em> メッセージを伝えたい。</p>
- <em> で囲んだ部分が 斜体 になります。
<strong> との違い
-
<em>: 強調したいけど、意味的に重要な部分に使う（視覚的には斜体）。
-
<strong>: 特に重要な部分に使う（視覚的には太字）。
<p>これは <strong>非常に重要な</strong> 注意事項です。</p>
CSSとの紐付けについて
CSSファイルを作成し、HTMLファイルでそのCSSファイルをリンクする
CSSファイル（styles.css）
p {
color: green;
font-size: 16px;
}
HTMLファイル（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部CSSファイルの例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>このテキストは緑色で、フォントサイズが16pxです。</p>
</body>
</html>
-
メリット: 複数のページで同じCSSファイルを使い回せるので、効率的でメンテナンスも簡単。
-
デメリット: 外部ファイルをリンクするため、HTMLとCSSが異なるファイルに分かれるので、管理が必要。
