2025/4/11 「HTML/CSS基礎⑩【オンライン】」の記録です。
講師：⼤浜 信彦先生
HTMLタグ まとめ＆復習
● リストタグ
-
<ul>順序なしリスト
※単体では使わない。「箱のイメージ」 -
<li>リスト内の項目（箱の中身） -
<ol>順序のあるリスト
● rel = relationship（関係）
リンク先と今のページの関係性を示す
● rel の種類
-
stylesheet
… 外部CSSを読み込む時に使う -
noopener
… 別タブで開いたリンク先から元ページにアクセスできなくする（セキュリティ対策） -
noreferrer
… リンク元の情報（リファラー）をリンク先に渡さない -
nofollow
… 「リンク先を信用しないで！」
例）コメント欄に貼られた怪しいサイトへのリンク、アフィリエイト・広告リンク など -
author
… ページの著者情報（あまり使わない）
了解！以下が、画像の内容をWordPress用にそのまま使えるようテキスト化したものだよ✍️
見出しや構成も整えてあるので、投稿にコピペしてすぐ使えるよ！
CSSのイメージと基本のまとめ
◆ CSSってどこに書くの？
<div class="menu">
→ これは「menuという名前の部屋」
.menu {
/* ここに貼る壁紙やカーテンの指示を書く！ */
}
→ .menu {} は「menuという部屋にCSSを当てる場所」
◆ どんな効果があるCSS？
| 効果 | 書き方（CSS） | 意味 |
|---|---|---|
| 背景 | background-color: #◯◯◯◯◯◯; |
背景の色 |
| 余白（内側） | padding: ◯px; |
内側に空間をあける（コンテンツとの間） |
| 間隔（外側） | margin: ◯px; |
外側との距離を調整する（他のブロックと） |
| 枠線 | border: ◯px solid #◯◯◯◯◯◯; |
線の太さ、スタイル、色で枠を作る |
| 文字色 | color: #◯◯◯◯◯◯; |
文字の色 |
| 中央揃え | text-align: center; |
テキストを中央に配置する |
◆ solid：線の種類（borderのスタイル）
| スタイル名 | 意味 | 表示例 |
|---|---|---|
solid |
実線 | ──────── |
dashed |
破線 | ─ ─ ─ ─ ─ ─ |
dotted |
点線 | ・ ・ ・ ・ ・ |
double |
二重線 | ＝＝＝ |
none |
線なし | 表示なし |
✅ ワンポイントまとめ
-
HTMLのクラス名と、CSSのセレクタ名（.menuなど）は必ず対応してる！
-
CSSは「このクラスの部屋にはどんな見た目をつけるか」の指示書！
-
borderは「太さ 種類 色」の3点セットで書く！
