WEBデザイン備忘録

使用ツール

ChatGPT
CodePen

HTML

覚えておきたいHTML

Font Awesomeのリンク

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

integrityとcrossoriginについて
これらはセキュリティのための設定です。integrityは読み込んだファイルが安全かどうか確認し、crossoriginは外部サイトからファイルを安全に読み込むための設定です。

Google Fontsのリンク

<link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">

このリンクを使うと、「Teko」という名前のフォントが読み込まれます。wght@500は文字の太さを示していて、500は中くらいの太さです。このフォントはCSSで指定して使います。例えば、font-family: 'Teko', sans-serif;と指定すると、そのフォントでテキストが表示されます。

`& > div` の意味

& (アンパサンド) の役割:
- & は、現在の親セレクタを参照するために使います。たとえば、SassやLessで親要素のスタイルの中に書いていると、その親のセレクタを指すことになります。
> の意味:
- > は「直接の子要素」を指定するセレクタです。つまり、親セレクタのすぐ下にある子要素だけを対象にします。
div の意味:
- div はそのままHTMLの<div>要素を指します。

.parent {
  color: blue;
  
  & > div {
    color: red;
  }
}

.parent は、クラスが parent の要素全体に適用されます。
& > div は、 .parent の直接の子要素である <div> に適用されます。

これを通常のCSSに変換すると、次のようになります。

.parent {
  color: blue;
}

.parent > div {
  color: red;
}

`height: 300vh;`

height: 300vh; は、要素の高さを「ビューポート高さの300倍」に設定するという意味です。ここで「ビューポート」というのは、ブラウザの表示領域のことです。

`height: 300vh;` の大きさ

vhの単位: vh は「viewport height（ビューポートの高さ）」の略で、ビューポートの高さの1%を指します。例えば、もしビューポートの高さが1000ピクセルなら、1vhは10ピクセルになります。
300vhの意味:
- height: 300vh; だと、ビューポートの高さの300倍という意味です。
- つまり、もしビューポートの高さが1000ピクセルだとすると、300倍で30,000ピクセルの高さになります。

具体的な例

スマホの画面: スマホの画面が例えば800ピクセルの高さだとしたら、300vh はその800ピクセルの300倍なので、240,000ピクセルの高さです。
パソコンの画面: パソコンの画面が例えば900ピクセルの高さだとしたら、300vh はその900ピクセルの300倍なので、270,000ピクセルの高さです。

1. ルート要素＆文書メタデータ

文書の基本構造やメタデータに関するタグ。

html /* HTML文書であることを示す */
head /* 文書のヘッダ情報を表す */
title /* 文書にタイトルをつける */
link /* リンクする外部リソースを指定する */
meta /* その文書に関する情報（メタデータ）を指定する */
style /* スタイルシートを記述する */

2. セクション

文書のセクションや構造を示すタグ。

body /* 文書の本体を表す */
header /* ヘッダであることを示す */
footer /* フッタであることを示す */
article /* 記事であることを示す */
section /* 一つのセクションであることを示す */
nav /* ナビゲーションであることを示す */
aside /* 余談・補足情報のセクションであることを示す */
address /* 連絡先を示す */

3. グルーピングコンテンツ

コンテンツをグループ化するタグ。

p /* ひとつの段落（パラグラフ）であることを表す */
ol /* 順序のあるリストを表示する */
ul /* 順序のないリストを表示する */
li /* リストの項目を記述する */
dl /* 定義・説明リストを表す */
dt /* 定義・説明される言葉を表す */
dd /* 定義用語や言葉の説明をする */
div /* ひとかたまりの範囲として定義する */
main /* メインコンテンツであることを示す */
pre /* 半角スペースや改行をそのまま表示する */
blockquote /* 引用・転載セクションであることを表す */
figure /* 図表であることを示す */
figcaption /* 図表のキャプションを示す */

4. テキストレベルセマンティクス

テキストの意味やスタイルに関するタグ。

a /* ハイパーリンクを指定する */
span /* ひとつの範囲として定義する */
br /* 改行する */
time /* 日付や時刻を正確に示す */
strong /* 強い重要性を表す */
em /* 強勢する（アクセントを付ける）箇所を表す */
q /* 引用句・引用文であることを表す */
s /* すでに正確ではなくなった内容を表す */
wbr /* 改行しても良い位置を示す */
cite /* 作品のタイトルを表す */
code /* プログラムなどのコードであることを示す */
ruby /* ルビをふる */
rb /* ルビをふる文字を指定する（IE用） */
rt /* ルビのテキストを指定する */
rtc /* ルビテキストの集まりを指定する */
rp /* ルビを囲む記号を指定する */
small /* 免責・警告・著作権などの注釈や細目を表す */

5. 埋め込み型コンテンツ

画像やメディアなどの埋め込みコンテンツに関するタグ。

img /* 画像を表示する */
picture /* レスポンシブ・イメージを実現する */
source /* 動画や音声などのURLや種類を指定する */
iframe /* インラインフレームを作る */
video /* 動画を再生する */
audio /* 音声を再生する */
map /* イメージマップを作成する */
area /* イメージマップのハイパーリンク領域を設定する */
svg /* コードを記載して画像を描画する */

6. 表データ

テーブル（表）に関連するタグ。

table /* テーブル（表）を作成する */
tr /* テーブル（表）の横一行を定義する */
th /* テーブル（表）の見出しセルを作成する */
td /* テーブル（表）のデータセルを作成する */
caption /* テーブル（表）にキャプションをつける */
colgroup /* 表の縦列をグループ化する */
col /* 表の縦列の属性やスタイルを指定する */
tbody /* テーブル（表）のボディ部分を定義する */
thead /* テーブル（表）のヘッダ部分を定義する */
tfoot /* テーブル（表）のフッタ部分を定義する */

7. フォーム

フォーム関連のタグ。

form /* 入力・送信フォームを作る */
input /* フォームを構成する様々な入力部品を作成する */
label /* フォーム部品と項目名（ラベル）を関連付ける */
button /* ボタンを作成する */
select /* セレクトボックスを作成する */
option /* セレクトボックスや入力候補リストの選択肢を指定する */
textarea /* 複数行のテキスト入力欄を作成する */

8. インタラクティブ

ユーザーとのインタラクションを提供するタグ。

details /* 備考や操作手段などの詳細情報を折りたたみコンテンツで示す */
summary /* detailsの内容の要約を示す */

9. スクリプティング

JavaScriptなどのスクリプトを埋め込むタグ。

script /* 文書にJavaScriptなどのスクリプトを組み込む */
canvas /* 図形を描く */

<span></span>

<span> はHTMLのタグの一つで、ウェブページを作るときによく使われます。

1. `<span>` って何？

<span> は「インライン要素」と呼ばれるものの一種で、小さな範囲のテキストや要素を囲むために使われます。
特に意味は持たないタグなので、デザインやスクリプトで特定の部分を操作したいときに使います。

2. 何のために使うの？

span を使うと、テキストの一部だけに色を付けたり、特定の部分だけを装飾したりすることができます。
例えば、テキストの一部分にだけ強調表示をしたいときや、JavaScriptで特定の部分を操作したいときに便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>spanの例</title>
    <style>
        .highlight {
            color: red;  /* 文字色を赤に */
            font-weight: bold;  /* 太字に */
        }
    </style>
</head>
<body>
    <p>この文章の中で、<span class="highlight">重要な部分</span>だけを強調しています。</p>
</body>
</html>

4. このコードがすることは？

上の例では「重要な部分」というテキストを <span> で囲んでいます。
CSSで .highlight というクラスを定義し、その部分だけ赤色で太字にして強調表示しています。

5. ポイント

<span> はインライン要素なので、他のテキストと同じ行の中に表示されます。
<div> はブロック要素で、行全体を占めるのに対して、<span> は行内で部分的に使えるのが特徴です。
<span> 自体には特別な意味はなく、使うときは主にCSSで装飾を加えたり、JavaScriptでその部分を操作したりします。

6. どんなときに便利？

文章の中で特定のキーワードだけを目立たせたいとき。
ウェブページの小さな部分を装飾したいけど、新しい行を作りたくないとき。
JavaScriptで特定の部分だけをクリックできるようにしたり、操作したりしたいとき。

CSS

よく使うCSS

text-decoration・・・ 文字列に装飾線や点滅
text-indent・・・ 文章のインデント幅
letter-spacing・・・ 文字間隔
line-height・・・ 行の高さ

レスポンシブデザインを実装できる

参考サイト

CSS font-sizeの単位とレスポンシブに最適remの使い方と指定方法！

Transition/Animation（CSSアニメーション）

参考サイト

CSSアニメーションを学ぼう（参考：https://eclair.media/archives/303）
CSSアニメーションを使いこなすために知っておきたい5つのこと
qiita
https://photoshopvip.net/91115
CSS3のtransitionでカッコイイ動きの作り方！

reset.css

reset.css

2024年、現在の環境に適したリセットCSSのまとめ

flexboxが使える

参考サイト

CSS Flexboxの使い方｢図解付き｣で解説する横並びレイアウト

`float` 要素を右または左へ寄せて配置

`clear`・・・要素の回り込み（float）を解除

一般的なCSSプロパティの記述順

1. 位置と表示

要素の配置や表示方法を決定するプロパティ。

position
top, right, bottom, left
z-index
display
visibility
float
clear
vertical-align
overflow, overflow-x, overflow-y
bottom
left
right

2. ボックスモデル

要素の大きさや間隔に関連するプロパティ。

width, height
max-width, max-height
min-width, min-height
margin, margin-top, margin-right, margin-bottom, margin-left
padding, padding-top, padding-right, padding-bottom, padding-left
border, border-top, border-right, border-bottom, border-left
border-radius
box-sizing

3. フォント・テキスト・文字色

テキストの表示に関連するプロパティ。

color
font, font-family, font-size, font-style, font-weight
text-align
text-decoration
text-indent
letter-spacing
line-height
text-overflow /* 要素からはみ出した文字を省略する */
white-space /* テキスト内の空白、タブ、改行の表示の仕方を指定する */
word-break /* 文章の改行の仕方について指定する */
writing-mode /* 文字表記の方向（縦横）を指定する */
font-feature-settings・・・ OpenTypeフォント機能の利用について、有効/無効を指定する
font-kerning・・・欧文フォントにカーニングを適用する
font-stretch・・・文字フォントの横幅の広さを指定する
font-variant・・・文字フォントの表示に関するサブプロパティの値をまとめて指定する
font-variant-caps・・・スモールキャップス（small caps）などの、文字フォントのグリフ（字形）を指定する
font-variant-ligatures・・・隣り合った文字フォントの合字（リガチャ）を指定する
font-variant-numeric・・・数字の表示形式を指定する
text-decoration-color・・・文字の装飾線の色を指定する
text-decoration-line・・・文字の装飾線の位置を指定する
text-decoration-style・・・文字の装飾線の種類を指定する
text-emphasis・・・要素内のテキストに付与する強調マークに関する指定を行う
text-emphasis-color・・・要素内のテキストに付与する強調マークの色を指定する
text-emphasis-position・・・要素内のテキストに付与する強調マークの位置を指定する
text-emphasis-style・・・要素内のテキストに強調マークを付与する
text-transform・・・テキストの大文字表示・小文字表示を指定する

「文字揃え・段落の振る舞い」

direction・・・文字表記の方向（左右）を指定する
line-break・・・要素内での行末や行頭の禁則処理の厳密さを指定する
unicode-bidi・・・文字表記の方向（左右）を指定する
word-spacing・・・単語の間隔を指定する

4. 背景と装飾

要素の背景や装飾に関連するプロパティ。

background, background-color, background-image
background-position, background-repeat, background-size
background-attachment /* 背景画像の固定・移動を指定する */
box-shadow
border-radius

5. 外枠（ボーダー・アウトライン）

要素のボーダーやアウトラインに関連するプロパティ。

border, border-top, border-right, border-bottom, border-left
border-radius
border-color
border-style
border-width, border-top-width, border-right-width, border-bottom-width, border-left-width
border-image
border-top-color, border-top-style, border-top-width
border-bottom-color, border-bottom-style, border-bottom-width
border-left-color, border-left-style, border-left-width
border-right-color, border-right-style, border-right-width
outline
border-image-outset・・・ボーダーイメージエリアを広げる
border-image-repeat・・・ボーダー（枠線）に指定された画像の繰り返し方法を指定する
border-image-slice・・・ボーダー（枠線）に指定された画像の使用範囲を指定する
border-image-source・・・ボーダー（枠線）に使用する画像ファイルを指定する
border-image-width・・・画像ボーダーの太さを指定する
outline-color・・・アウトラインの色を指定する
outline-offset・・・アウトラインのオフセット値を指定する
outline-style・・・アウトラインのスタイルを指定する
outline-width・・・アウトラインの太さを指定する

6. カラム・レイアウト関連

Flexboxやグリッドレイアウトに関連するプロパティ。

flex, flex-direction, flex-wrap
align-items
justify-content
align-content /* flexコンテナ内の縦に余白がある場合にflexアイテムの並べ方を指定する */
columns /* カラム幅とカラム数を指定する */
flex-basis /* flexbox内のアイテムの固定幅を指定する */
flex-flow /* flexbox内のアイテムの並び順と折り返しの指定をまとめて行う */
flex-grow /* flexbox内のアイテムの伸びる倍率を指定する */
flex-shrink /* flexbox内のアイテムの縮む倍率を指定する */
order /* flexbox内のボックスの配置順序を指定する */
align-self・・・ flexコンテナ内にあるflexアイテムの位置揃えを個別に指定する
column-count・・・カラム数を指定する
column-fill・・・カラム同士の高さ（長さ）を揃えるかどうかを指定する
column-rule・・・カラムの区切り線のスタイル・幅・色を指定する
column-rule-color・・・カラムの区切り線の色を指定する
column-rule-style・・・カラムの区切り線のスタイルを指定する
column-rule-width・・・カラムの区切り線の幅を指定する
column-width・・・カラム幅を指定する

7. リスト（list）関連

リストの表示に関連するプロパティ。

list-style
list-style-image・・・リストマーカーに画像を指定する
list-style-position・・・リストマーカーの表示位置を指定する
list-style-type・・・リストマーカーの種類を指定する

8. 内容の挿入・置換

疑似要素で使用されるコンテンツ挿入に関するプロパティ。

content
counter-increment /* contentで挿入されたカウンタの値を進める */
counter-reset /* contentで挿入されたカウンタの値をリセットする */

9. アニメーションとトランジション

アニメーションやトランジション効果に関連するプロパティ。

animation
animation-delay /* アニメーションが開始するタイミングを指定する */
animation-direction /* アニメーションの再生方向を指定する */
animation-duration /* アニメーションの再生一回分の時間の長さを指定する */
animation-fill-mode /* アニメーションが再生されていない時にどのような状態で待機するかを指定する */
animation-iteration-count /* アニメーションの繰り返し回数を指定する */
animation-name /* アニメーションの名前を定義する */
animation-play-state /* アニメーションを再生させるか一時停止させるか指定する */
animation-timing-function /* アニメーションの再生タイミングに変化を付ける */
transition
transition-delay /* 時間によって変化するトランジション効果の要求が発生してから実際に開始するまでの時間を指定する */
transition-duration /* 時間によって変化するトランジション効果が開始してから終了するまでの時間を指定する */
transition-property /* 時間によって変化するトランジション効果の対象となるプロパティを指定する */
transition-timing-function /* 時間によって変化するトランジション効果の変化に緩急を指定する */

10. 変形・トランスフォーム

要素を変形させるプロパティ。

transform
transform-origin /* 要素を変形させる際の基準点を指定する */
transform-style /* 要素を変形させる際の基準点を指定する */
backface-visibility・・・要素の裏面を見られるようにするかどうかを指定する
perspective・・・子要素に対して遠近効果を指定する
perspective-origin・・・ perspectiveで指定した遠近投影の基点となる位置を指定する

11. その他のプロパティ

特殊な効果やインタラクションに関連するプロパティ。

cursor

`::before` と `::after`

CSS（カスケーディングスタイルシート）で使われる疑似要素です。

1. ::before と ::after って何？

::before と ::after は、それぞれ指定した要素の「前」と「後ろ」に何かを追加するためのものです。
例えば、「ボタン」の前にアイコンを追加したり、リンクの後ろに矢印を表示したりすることができます。

2. どうやって使うの？

これらはCSSで定義します。HTML側では何も追加する必要はありません。
一般的に content プロパティと一緒に使います。content は、表示するテキストやアイコン、画像を指定します。

4. このコードがすることは？

上記の例では、クラスが button のボタンの「前」にロケットアイコンが、「後ろ」に矢印アイコンが表示されます。
::before はボタンの前に、::after はボタンの後ろにそれぞれコンテンツを追加してくれます。

5. どんなときに便利？

Webサイトをデザインする際、追加の装飾やちょっとしたアイコンなどをHTMLを書き換えずに加えたいときに便利です。
また、サイトの見た目を調整するときに、コードを簡潔に保てるので、メンテナンスがしやすくなります。

6. 注意点

::before と ::after はブロック要素やインライン要素で使えますが、必ずしも全ての要素で効果的に機能するわけではないので、動作を確認することが重要です。
使う際には、display プロパティ（例えば block や inline-block など）を設定して、見た目を整えることも多いです。

`rem`と`em`

どちらもフォントサイズや要素の幅、高さ、マージン、パディングなどに使える相対単位で、相対的にサイズを指定できるところが便利です。相対単位というのは、他の要素のサイズに基づいて決まる単位のことです。

CSSのremとemは、要素のサイズを指定するときに使う単位です。それぞれの特徴を高校生にもわかりやすく説明しますね！

`rem`（ルートエム）

remとは？
remは「root em」の略で、ページのルート（最初の）要素、つまり<html>のフォントサイズを基準にしてサイズを決める単位です。
使い方:
デフォルトでは、ブラウザの標準フォントサイズは16pxです。たとえば、1remはデフォルトで16pxに相当します。
特徴：
ページ全体で一貫したサイズを保ちやすく、メディアクエリなどでフォントサイズを変更しても、remの値はその変更に対応して自動的に調整されます。

html {
    font-size: 16px; /* ルートのフォントサイズが16px */
}
.example {
    width: 2rem; /* 16px × 2 = 32px */
}

`em`（エム）

emは、親要素のフォントサイズに基づく単位です。つまり、その要素が入っている親要素のサイズを基準にして決まります。

.parent {
    font-size: 20px; /* 親要素のフォントサイズ */
}
.child {
    font-size: 1.5em; /* 20px × 1.5 = 30px */
}

特徴:
親要素のフォントサイズに依存するため、入れ子が深くなるとサイズがどんどん大きくなったり小さくなったりすることがあります。例えば、.parentにfont-size: 20px;を設定し、その中の.childがfont-size: 1.5em;であれば、.childのフォントサイズは30pxになります。

どちらを使うべきか？

remが向いている時:
全体的に一貫したサイズを保ちたいとき、またはベースフォントサイズに応じて調整したいときに便利です。
emが向いている時:
親要素のサイズに基づいて柔軟に調整したいときに使います。ただし、計算が複雑になることもあるので注意が必要です。

`transform-origin: top center;`

CSSで要素を変形（回転、拡大縮小、移動など）するときに、どの位置を基準にして変形するかを決めるプロパティです。

意味: このプロパティは、変形の基準点を「要素の上端の中央」に設定します。つまり、要素の変形（例えば回転やスケール）が「上の真ん中」を中心に行われるようにするということです。
具体的に言うと:
- top は要素の「上端」を指します。
- center は要素の左右の「中央」を指します。

どう使われるのか

例えば、要素を回転させる場合、デフォルトでは要素の中心を基準に回転します。しかし、transform-origin: top center; を指定すると、要素の上端の中央を軸にして回転します。

イメージしやすい例

回転: 鉛筆を立てて、上の消しゴム部分を指で押して回すようなイメージです。消しゴム部分が回転の中心になるので、鉛筆の下側は大きく動きます。
拡大縮小: 要素が拡大する際に、上の真ん中を固定して左右や下方向に大きくなったり小さくなったりします。

opacity: 0; は、CSSで要素の透明度を設定するためのプロパティです。このプロパティの使い方を高校生にもわかりやすく説明しますね。

css.map ファイルは、CSSのデバッグを便利にするための「地図（マップ）」のような役割を持つファイルです。これを高校生にもわかりやすく説明しますね。

`css.map` とは？

役割: css.map ファイルは、元々書いたCSS（やSassやLESSなどのプリプロセッサで書いたスタイル）と、実際に使われているCSSファイルとの対応関係を示す「地図」のようなファイルです。
目的: ウェブブラウザの開発者ツールでデバッグを行う際に、どのCSSファイルのどの行が現在のウェブページの表示に影響しているかを分かりやすくしてくれます。

どうして必要なのか？

プリプロセッサを使っている場合: SassやLESSなどのCSSプリプロセッサを使っていると、書いたコードがそのままではなく、変換されて別のCSSファイルとして出力されます。このとき、変換されたファイルのコードをデバッグするのは難しいです。css.map があれば、開発者ツールで元のコードがどこに対応しているかがすぐに分かります。
利便性: これがあると、例えば「どのファイルのどの行のスタイルがこの要素に適用されているのか？」という疑問に答えやすくなります。

イメージしやすい例

地図アプリと住所: 例えば、地図アプリで「今どこにいるのか？」を探すのに近いです。css.map があると、CSSファイルのどの部分が実際のウェブページに使われているのかという「場所」を教えてくれます。

css.map は、CSSのデバッグをしやすくするための「道しるべ」です。これがあると、ウェブサイトを作る際に書いた元のコードと実際の表示がどのようにつながっているのかが分かりやすくなります。簡単に言うと、どのスタイルがどこで使われているのかを教えてくれる「案内役」ですね。

`transform: rotateZ(90deg);` の意味

意味: transform は要素の変形（回転、拡大縮小、移動など）を行うプロパティです。
rotateZ(90deg) は、Z軸（画面に対して垂直に突き出している軸）を中心に90度回転させるという意味です。

具体的にはどうなるのか

90度回転: rotateZ(90deg) を使うと、要素が時計回りに90度回転します。
回転の軸: Z軸を基準に回転するので、画面に対して「平面上で回る」ように見えます。想像してみると、本のページをめくるときに本を回すのと同じ動きです。

イメージしやすい例

時計の針: 時計の針が1時間分動くと90度回転するのと同じです。
スマホの画面: スマホの画面を横向きにする感じで、上が右に移動して画面が横に倒れるイメージです。

`opacity: 0;` の意味

意味: opacity は要素の透明度を調整するプロパティです。値は0から1の範囲で指定し、0が完全に透明、1が完全に不透明（つまり見える）です。
opacity: 0; とは:
- opacity: 0; は、要素を完全に透明にします。つまり、その要素は画面上には見えなくなりますが、要素自体は存在しており、配置もそのままです。

`perspective`

3D効果を使って要素に奥行きを持たせるためのプロパティです。まるで、物体を遠近法で見るように、手前のものが大きく、奥のものが小さく見えるように表現。

1. `transform-style: preserve-3d;`

このプロパティは、3D空間での子要素の見え方を制御します。

意味: transform-style: preserve-3d; を使うと、親要素の中にある子要素も3D効果が反映されるようになります。簡単に言うと、親と子の関係が3D空間でもちゃんと保たれる、ということです。
例: 親要素が回転するだけではなく、その中にある子要素も一緒に3Dで見えるようにしたい場合に使います。

2. `perspective: 300px;`

このプロパティは、3D効果をつけたときの「遠近感」を設定します。

意味: perspective: 300px; は、「カメラの距離が300ピクセル離れている」という意味です。数字が小さいほど、要素が手前に飛び出して見え、大きいほど奥行きが浅くなります。
例: 例えば、perspective: 300px; を使うと、奥行き感が強くなり、手前のものが大きく、奥のものが小さく見えます。3Dの映画でメガネをかけると物が飛び出して見えるのと似ています。

使い方

perspective: 1000px;: この場合、「カメラ」が1000ピクセル先にあるということです。値が小さくなると視点が近くなり、より強い遠近感が出ます。
値が大きくなると視点が遠くなり、遠近感が弱まります。

コード例

以下の例では、2つの四角形を回転させ、perspectiveの効果を見せます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSS Perspectiveの例</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 50px auto;
            perspective: 500px; /* ここで遠近感を設定 */
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: auto;
            transform-style: preserve-3d; /* 3D効果を保持 */
            transform: rotateY(45deg); /* Y軸方向に45度回転 */
        }
    </style>
</head>
<body>
    <h2>Perspectiveを使った3D効果</h2>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

どう見えるか？

perspective: 500px; の設定によって、箱が手前にあるように見えます。まるで、真正面ではなく斜めから見ているかのような効果です。
値を小さくすると（例: perspective: 200px;）、箱がより劇的に手前に迫って見えます。
値を大きくすると（例: perspective: 1000px;）、遠近感が弱まり、ほぼ平面的に見えます。

重要なポイント

perspectiveは親要素に設定する
遠近感を持たせたい要素を囲む親要素に対してperspectiveを設定します。
奥行きがある動きを作る
rotateX, rotateY, rotateZのような3D変形を子要素に対して行うことで、perspectiveの効果が現れます。
単位はピクセル（px）
値はピクセル単位で設定し、0を設定すると遠近感が消えます（すべて平面になります）。

`z-index`

CSSのz-indexは、要素が重なったときにどれが前に表示されるかを決めるプロパティです。z-indexは、要素の「重なり順」を決めるためのプロパティです。要素を紙に例えると、どの紙が一番手前に見えるかを指定するようなものです。

使い方のポイント

z-indexは、positionプロパティがrelative, absolute, fixed, または stickyに設定されている要素に対して有効です。
数字が大きいほど前に表示され、小さいほど後ろに表示されます。
z-indexの値は正の数、負の数、または0（ゼロ）に設定できます。

基本的な例

z-index: 0;: 基本の位置。特に前でも後ろでもない状態。
z-index: 1;: 他の要素よりも前に表示される。
z-index: -1;: 他の要素の後ろに表示される。

応用例

サイトのナビゲーションバーやポップアップメニュー、モーダルウィンドウを前に出したいときによく使います。たとえば、ポップアップがページの他の要素に隠れてしまうのを防ぐために、z-indexを高く設定します。

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100; /* 他の要素よりも前に表示 */
    background-color: white;
    padding: 20px;
    border: 1px solid black;
}

overflow

CSSのoverflowプロパティは、要素の中に収まりきらない内容があるときに、どう表示するかを指定するプロパティです。

overflowを使うと、要素の中に収まらないコンテンツをどうするかを決めることができます。たとえば、テキストや画像が要素のサイズを超えてしまう場合に、隠したり、スクロールバーを表示したりできます。

`overflow: visible;`（ビジブル）

特徴: これはデフォルトの設定です。内容がはみ出しても、そのまま表示されます。
どうなる？: ボックスの外に内容が出てしまっても、隠れずに見える状態です。
例: 特に調整せず、要素がはみ出ても気にしないとき。
イメージ: ノートの端からはみ出したメモ用紙のように、普通に見えています。

.box-visible {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: visible;
}

`overflow: hidden;`（ヒドゥン）

特徴: 内容がはみ出しても、その部分は見えなくなります。
どうなる？: ボックスの外にはみ出した部分が表示されず、切り取られます。
例: デザインの見た目を整えるために、はみ出した内容を見せたくないとき。
イメージ: 引き出しの中にしまって、はみ出している部分は見えない状態。

.box-hidden {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
}

`overflow: scroll;`（スクロール）

特徴: はみ出した内容がある場合、スクロールバーが表示されます。
どうなる？: 内容が多すぎる場合にスクロールバーを使って中身を見られるようになります。
例: テキストが多いエリアや、小さいスペースに情報をたくさん表示したいとき。
イメージ: ノートの端にページが足りなくなったときに、スクロールして全部見られる感じ。

.box-scroll {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: scroll;
}

`overflow: auto;`（オート）

特徴: 内容がはみ出した場合にのみ、スクロールバーが表示されます。
どうなる？: 必要に応じてスクロールバーが表示されるので、通常は表示されず、はみ出した場合のみ使われます。
例: ウィンドウのサイズに応じて、スクロールバーを出すかどうか自動で決めたいとき。
イメージ: 自動ドアのように、必要なときだけ開くスクロールバー。

.box-auto {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: auto;
}

position

参考サイト

CSSのpositionを総まとめ！absoluteやfixedの使い方は？

CSSのpositionプロパティは、ウェブページの要素をどこに表示するかをコントロールするためのものです。

`position: static;` （スタティック。あんまり使わない）

特徴: これがデフォルト（標準）の設定です。
どうなる？: 要素は通常のフロー（順番）に従って表示されます。位置を特別に変更することはできません。
例: 普通の段落や見出しなど、特別な位置指定をしない場合。
イメージ: 本の中で文章がページの上から下に並んでいるような感じ。

`position: relative;` （相対位置）

特徴: 通常の位置（static の位置）を基準にして、少しだけずらしたいときに使います。
どうなる？: 自分の元の位置から、指定しただけの距離だけ動きます（上下左右に）。
例: ほんの少しズラして見た目を調整したいとき。
イメージ: ページに印刷された文章を少しずらして貼り直す感じ。

.relative-box {
    position: relative;
    top: 20px;   /* 元の位置から20px下に移動 */
    left: 10px;  /* 元の位置から10px左に移動 */
}

`position: absolute;` （絶対位置）

特徴: 親要素（通常は最も近いrelativeまたはabsoluteの位置指定を持つ要素）を基準に、絶対的に位置を指定します。
どうなる？: 親要素の指定位置から動かされ、ページの通常のフローから外れます。
例: ツールチップやモーダルウィンドウなど、固定の位置に置きたいもの。
イメージ: 部屋の中で家具を自由に配置する感じ。部屋（親要素）が基準。

.absolute-box {
    position: absolute;
    top: 50px;   /* 親要素の上から50pxの位置 */
    right: 20px; /* 親要素の右から20pxの位置 */
}

`position: fixed;` （固定位置）

特徴: ブラウザの表示領域（ウィンドウ）を基準に、絶対位置で配置します。
どうなる？: ページをスクロールしても動かず、常に固定された場所に表示されます。
例: ヘッダーやサイドバー、戻るボタンなど、常に同じ位置に表示したいもの。
イメージ: 画面に張り付いたポストイットのように、スクロールしても動かない。

.fixed-box {
    position: fixed;
    bottom: 10px; /* 画面の下から10pxの位置 */
    left: 10px;   /* 画面の左から10pxの位置 */
}

`position: sticky;` （スティッキー）

特徴: スクロールに応じて動きますが、指定された位置に達すると止まります。
どうなる？: スクロールしている間は動きますが、指定された位置に達するとそこにくっついて止まります。
例: ヘッダーや重要なナビゲーションがスクロールしても上部に固定されているとき。
イメージ: ページの上部に貼り付くステッカーのような動き。

`border`

borderは、HTMLの要素（例えばボタンや箱のようなもの）の周りに線を引くためのCSSプロパティです。ボーダーを使うと、要素がはっきりと目立つようになります。

`border`の書き方

borderを使うときには、以下の3つの情報を指定します。

太さ（幅）: ボーダーの線の太さを指定します。例えば、1px、2pxなど。
スタイル: ボーダーのデザインを指定します。例えば、solid（実線）、dashed（破線）、dotted（点線）など。
色: ボーダーの色を指定します。例えば、red（赤）、#000（黒）、rgb(0, 0, 255)（青）など。

.box {
  border-top: 2px solid red;    /* 上 */
  border-right: 3px dotted blue;  /* 右 */
  border-bottom: 1px dashed green; /* 下 */
  border-left: 4px double purple;  /* 左 */
}

`width`（幅）と `height`（高さ）

width（幅）: 要素の横のサイズを指定します。
height（高さ）: 要素の縦のサイズを指定します。

この2つを使うことで、ボックスや画像、テキストのエリアの大きさを自由にコントロールできます。

基本的な使い方

これらのプロパティは、ピクセル（px）、パーセント（%）、ビュー幅（vw）、または他の単位で指定できます。例えば、

.box {
    width: 200px;   /* 幅を200ピクセルに設定 */
    height: 100px;  /* 高さを100ピクセルに設定 */
}

単位について

ピクセル（px）
- 画面上の点の数で指定します。
- 例: width: 150px; は、150ピクセルの幅を意味します。
- イメージ: 定規で計るような感覚で、固定のサイズを設定します。
パーセント（%）
- 親要素に対する割合でサイズを指定します。
- 例: width: 50%; は、親要素の幅の50%のサイズになります。
- イメージ: コップの中の水のように、親の大きさに応じて変わる柔軟なサイズ。
ビュー幅（vw）とビュー高さ（vh）
- ビューポート（画面の表示領域）の幅と高さに基づいてサイズを指定します。
- 例: width: 50vw; は、画面幅の50%のサイズを意味します。
- イメージ: 画面の大きさに合わせて変わるスライムのように、画面サイズに応じてサイズが変わります。

width: 80%; は、ウェブページの要素の横幅を指定するためのCSS（カスケーディングスタイルシート）という言語の一部です。これを使うことで、ウェブページの見た目を整えることができます。

意味: width: 80%; は「この要素の幅を、親要素の幅の80%にする」という指示です。
親要素: 親要素とは、今設定しようとしている要素を囲んでいる大きな要素のことです。

例えば、親要素がウェブページ全体だった場合、width: 80%; はそのページの幅の80%のサイズに要素を設定するということになります。

具体例

もし、親要素の幅が1000ピクセルなら、

width: 80%; と指定すると、要素の幅は 1000 ピクセル × 80% = 800 ピクセル になります。

簡単に言えば、width: 80%; は親の幅に対してどれくらいの幅にするかをパーセンテージで決める設定です。この設定を使うと、ブラウザの画面サイズが変わっても要素の幅が自動で調整されるので、レスポンシブなデザインを作るときに便利です。

`auto` と `max-width` / `max-height`

auto: 自動的に内容に合わせてサイズを決めます。たとえば、画像がその本来のサイズで表示されるときなどに使います。
max-width / max-height: 要素の最大幅や最大高さを設定します。
例: max-width: 100%; は、要素が親要素の幅を超えないようにします。これにより、画面サイズに合わせて自動調整されるので、レスポンシブデザイン（スマホやPCで見やすいデザイン）に使われます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>WidthとHeightの例</title>
    <style>
        .box {
            width: 200px;   /* 幅を200pxに設定 */
            height: 100px;  /* 高さを100pxに設定 */
            background-color: lightblue;  /* 背景色を水色に設定 */
            border: 1px solid black;  /* 黒い枠線を追加 */
        }
    </style>
</head>
<body>
    <div class="box">このボックスの幅は200pxで、高さは100pxです。</div>
</body>
</html>

display

CSSのdisplayプロパティは、ウェブページで要素をどのように表示するかを決める重要なプロパティです。

1. `display: block;`

特徴: 要素は「ブロック要素」として表示されます。
どうなる？: 要素が全幅を占め、他の要素はその下に配置されます（改行が入る感じ）。
例: 見出し（<h1>〜<h6>）、段落（<p>）、<div> など。
イメージ: 本のページの章や段落のように、全体の幅を使って独立して並びます。

2. `display: inline;`

特徴: 要素は「インライン要素」として表示されます。
どうなる？:他のインライン要素と横並びになり、幅や高さを指定できません。
例: 文字（<span>）、リンク（<a>）、画像（<img>）など。
イメージ: 文章中の文字や単語のように、横にずらっと並びます。

3. `display: inline-block;`

特徴: 「インライン」の特徴（横に並ぶ）と、「ブロック」の特徴（幅と高さを指定できる）を持つ。
どうなる？: 横並びになりながら、要素のサイズも自由に調整できます。
例: ボタンやナビゲーションメニューでよく使われます。
イメージ: ボタンが横に並んでいるけど、それぞれの大きさやデザインが設定できる感じ。

`display: inline-block;` とは？

display: inline-block; は、ウェブページの要素の表示方法を指定するCSSのプロパティです。

「inline」 と 「block」 という2つの特徴を持っています。
「inline」 は、要素が横に並んで表示されることを意味します。例えば、文字やアイコンが続けて並ぶように見える状態です。
「block」 は、要素が上下に並び、幅や高さを自由に設定できることを意味します。

じゃあ、`inline-block` って何？

「inline」 のように横に並びつつも、「block」 のように幅や高さを指定できます。
簡単に言うと「横に並びつつ、ボックスの大きさも自由に決められる」状態です。

具体例：

想像してみてください、3つのボタンを横に並べたいとします。しかし、それぞれのボタンの大きさやマージン（余白）を調整したい。display: inline-block; を使うと、ボタン同士が横に並びつつ、ボタンのサイズや位置を自由に設定できます。

例えば：

<style>
  .button {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: blue;
    color: white;
    text-align: center;
    line-height: 50px;
    margin: 5px;
  }
</style>

<div class="button">Button 1</div>
<div class="button">Button 2</div>
<div class="button">Button 3</div>

4. `display: flex;`

特徴: フレックスボックスというレイアウト方式を使って、子要素を自由に配置できます。
どうなる？: 縦横の整列が簡単で、レスポンシブ（画面サイズに応じて変化する）なデザインが得意です。
例: ナビゲーションバーやカードレイアウトなど、複雑な配置に使います。
イメージ: 頭の中で並べたいようにブロックやアイテムを自由自在に配置できるゲームのようなもの。

5. `display: grid;`

特徴: グリッドレイアウトシステムを使って、ページを行と列で整理して配置します。
どうなる？: フレックスボックスよりも複雑なレイアウトが可能で、ウェブページ全体のレイアウトにも向いています。
例: ギャラリーや複雑なウェブページの全体レイアウト。
イメージ: チェス盤のようにマス目で整理されたスペースに、パーツを配置していく感じ。

6. `display: none;`

特徴: 要素をページ上に表示しません。
どうなる？: その要素はあたかも存在しないように扱われます（画面にも表示されず、スペースも取らない）。
例: モーダルウィンドウの中身や、条件付きで表示されるコンテンツ。
イメージ: 忍者のように隠れて見えないけど、コードには存在しています。

`justify-content`

justify-contentは、CSSで要素（特にFlexboxやGridの中のアイテム）の横方向の配置を決めるプロパティ。

具体的な使い方

例えば、Flexboxを使って横に並んだアイテムがあったとします。そのアイテムの並び方を調整するのがjustify-contentです。

flex-start
アイテムを左寄せにします。
flex-end
アイテムを右寄せにします。
center
アイテムを中央に寄せます。
space-between
アイテムの間に均等なスペースを入れ、端に寄せます。
space-around
アイテムの周りに均等なスペースを入れます（両端も少しスペースができます）。
space-evenly
アイテム間のスペースを全て均等にします。

`align-items`

align-itemsは、CSSでFlexboxやGridの中のアイテムを縦方向にどう配置するかを決めるプロパティです。つまり、アイテムが上下にどう揃うかを調整します。

例えば、Flexboxで縦に配置されたアイテムの並び方を調整したいときに使います。以下のような配置方法があります：

flex-start
アイテムをコンテナの上に揃えます。
flex-end
アイテムをコンテナの下に揃えます。
center
アイテムをコンテナの中央に揃えます。
baseline
テキストのベースライン（文字の底辺）を揃えます。テキストがある場合に便利です。
stretch（デフォルト）
アイテムがコンテナの高さに合わせて伸びます。

`@keyframes`

@keyframes sk-bouncedelay {
    0% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
    80% {
        transform: scale(0);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes は、アニメーションの動きを定義するためのCSSのルールです。
これを使うと、要素に「どんな動きをするか」を指示できます。

アニメーションの名前

sk-bouncedelay という名前のアニメーションを作っています。
この名前は、あとでCSSで使って、どの要素にこのアニメーションを適用するかを指定します。

アニメーションの動き

アニメーションは、時間の経過に応じて要素がどう変化するかを、いくつかのステップに分けて指示します。このコードでは、4つのステップ（0%、40%、80%、100%）で定義されています。

各ステップの説明:

0%（アニメーションの最初）
- transform: scale(0); とありますが、これは「要素を小さくして、見えなくする」ことを意味します。
40%（アニメーションの40%の時点）
- transform: scale(1); になっています。これは、「要素が元の大きさに戻る（大きくなる）」ことを意味します。
80%（アニメーションの80%の時点）
- 再び transform: scale(0); になっています。要素はもう一度小さくなって見えなくなります。
100%（アニメーションの終わり）
- 最後も transform: scale(0); で、小さいままです。

アニメーションの動きのイメージ

このアニメーションは、要素が「小さくなったり大きくなったりする」動きです。
具体的には、最初は小さく（見えない状態）、途中で一度大きくなって、また小さくなるという動きを繰り返します。

ポイント

scale(0) は小さい状態（見えない）で、scale(1) は元のサイズです。
アニメーションの進行に合わせて、要素が指定されたタイミングで変化します。
0% から 100% までの間にどんな動きをするかを細かく制御できるのが @keyframes の強みです。

`object-fit`

See the Pen
Untitled by 片山勇大 (@sdsuqpzt-the-selector)
on CodePen.

使用方法

index.html: 画像とコントロール用のセレクトボックスがあり、ユーザーがobject-fitの異なる値を選ぶことができます。
styles.css: 画像の初期設定としてobject-fit: fill;を適用しています。コンテナのサイズを固定し、object-fitの効果が分かりやすいように設定しています。
script.js: ユーザーがセレクトボックスでobject-fitの値を変更すると、その値が画像に適用されるようにしています。

`object-fit`の値の説明

fill: 画像がコンテナを完全に埋めるようにリサイズされます（デフォルト）。
contain: 画像のアスペクト比を保ちながら、コンテナに収まるようにリサイズされます。
cover: 画像のアスペクト比を保ちながら、コンテナを覆うようにリサイズされます。
none: 画像のサイズは変更されず、元のサイズのまま表示されます。
scale-down: noneまたはcontainのうち、画像が小さく表示される方を選びます。

Sass（SCSS記法が主流となっている）

Sass参考サイト

@mixin

CSS（Sass）というCSSの拡張言語で書かれたもので、アニメーションを簡単に設定するための「ミックスイン」です。ミックスインは、CSSのプロパティをまとめて使いやすくするためのテンプレートのようなものです。

1. `@mixin` って何？

@mixin は、Sassで使うことができる便利な機能です。
ミックスインを使うと、CSSのコードをまとめておいて、必要なときに再利用できます。プログラムの「関数」みたいなものだと思ってください。

2. このミックスインの目的

このミックスイン animation は、CSSのアニメーションを簡単に設定するためのものです。
いくつかのアニメーションの設定をまとめて使うことができるようになっています。

3. 各パラメータの説明

このミックスインには、いくつかのパラメータがあります。それぞれがアニメーションの設定項目に対応しています。

$name
- アニメーションの名前（どのアニメーションを使うか）。
$duration
- アニメーションが何秒かけて再生されるか（デフォルトは 1s、つまり1秒）。
$timing-function
- アニメーションの速さの変化の仕方（デフォルトは ease で、ゆっくり始まって速くなり、またゆっくり終わる）。
$delay
- アニメーションを始める前の待ち時間（デフォルトは 0s）。
$iteration-count
- アニメーションが何回繰り返されるか（デフォルトは 1 回）。
$direction
- アニメーションがどの方向に再生されるか（デフォルトは normal、通常の方向）。
$fill-mode
- アニメーションが終わった後に、要素がどう見えるか（デフォルトは forwards、アニメーションの最後の状態を保持）。

これがどうなるか

.my-element クラスに対して、sk-bouncedelay というアニメーションが2秒かけて再生されます。
アニメーションは「ゆっくり始まり、速くなり、またゆっくり終わる」動き方で、0.5秒の待ち時間があります。
このアニメーションは無限に繰り返され、再生のたびに逆方向（行ったり来たり）します。
アニメーションが終わった後も、最後の状態がそのまま残ります。

アニメーションのプロパティ設定のためのショートカット

このミックスインでは、アニメーションのプロパティをまとめて設定するショートカットになっています。
書くべきプロパティが多いときに、何度も同じコードを書く手間を省くことができます。

注意点

コード内の animation: { ... } は、少し正確なCSSではない形になっているので、修正が必要です。正しい形式は、例えば animation-name: $name; などです。
正しく書くと次のようになります。

@mixin animation(
  $name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards
) {
  animation-name: $name;
  animation-duration: $duration;
  animation-timing-function: $timing-function;
  animation-delay: $delay;
  animation-iteration-count: $iteration-count;
  animation-direction: $direction;
  animation-fill-mode: $fill-mode;
}

`@use`

@use は、Sassで他のファイルを「読み込む」ためのものです。
他のファイルにあるCSSのコードやSassの機能（ミックスインや変数など）を使うことができます。

どうして `@use` を使うの？

コードをもっと整理して書けるようにするためです。
一つのファイルにすべてのスタイルを書くと、後で見直すのが大変になりますよね。@use を使うと、スタイルを複数のファイルに分けて管理できるので、見やすくなります。

`@use` の使い方

例えば、ファイルを次のように使い分けます。

// _colors.scss
$primary-color: blue;
$secondary-color: green;

// styles.scss
@use 'colors';

body {
  background-color: colors.$primary-color;
}

h1 {
  color: colors.$secondary-color;
}

ファイル`_colors.scss`

このファイルには、色に関する変数が定義されています。

4. `@use` の特徴

名前空間: @use では、読み込んだファイルの内容は「名前空間」によって分けられます。上の例では、colors.$primary-color のように colors という名前空間を使って変数にアクセスしています。
管理が簡単: 名前空間を使うことで、同じ名前の変数があっても混乱せずに管理できます。
再利用: 一度定義したスタイルや変数を、何度でも、どこでも再利用できるので効率的です。

5. なぜ `@import` じゃないの？

以前は @import が使われていましたが、@use の方が新しくて、いくつかの利点があります：

パフォーマンスの向上: @import はファイルを何度も読み込むことがあるのに対して、@use は一度だけ読み込みます。
名前の衝突を防ぐ: @use は名前空間を使うので、変数やミックスインの名前がかぶっても大丈夫です。

6.まとめ

@use はSassで他のファイルを読み込むための便利な機能です。
名前空間を使って整理されたコードが書けるので、大きなプロジェクトでもスタイルがごちゃごちゃにならずにすみます。
パフォーマンスが良く、名前の衝突も防いでくれるので、より良い管理が可能です。

JavaScript

ハンバーガーメニュー

参考サイト

https://zenn.dev/hideki_climax/books/0e124eb17a67b3/viewer/7c10b9

スライドショー

参考サイト

タブメニュー

参考サイト

モーダルウィンドウ

参考サイト

ドロップダウンメニュー

参考サイト

スクロールアニメーション

参考サイト

スムーススクロール

参考サイト

アコーディオンメニュー

参考サイト

https://eclair.media/archives/495

サイトのナビゲーションとは？

サイトのナビゲーションとは、ウェブサイトの中で、訪問者が目的のページや情報にスムーズにたどり着けるように手助けする案内システムです。リンクやボタンを使って、ページ間を移動する道しるべのような役割を果たします。

ナビゲーションの例:

上のメニューや横のメニューにある「ホーム」「ブログ」「お問い合わせ」などのリンク。
記事の終わりにある「次へ」や「前へ」といったリンク。

グローバルナビゲーションとの違い

グローバルナビゲーションとは、サイト全体で共通して表示されるナビゲーションメニューです。サイト内のどのページにいても同じメニューが表示されるので、サイトのどこからでも主要なページに簡単にアクセスできます。

グローバルナビゲーションの特徴:

全ページ共通: サイトのどのページを開いても同じメニューが表示される。
主なページにアクセス: ホーム、サービス、会社情報、ブログ、コンタクトなど、サイトの重要なページがリンクされている。
通常ヘッダーに表示: グローバルナビゲーションは、ページの上部（ヘッダー）に配置されていることが多い。

グローバルナビゲーションの例:

サイトの上部に表示されている「ホーム」「サービス」「お問い合わせ」などのリンクを含むメニュー。どのページにいても、このメニューを使って他のページにすぐ移動できる。

違いを簡単に説明すると:

グローバルナビゲーション: サイト全体に共通して表示され、常に同じメニューがある主要なリンクの集まり

サイトのナビゲーション: ページの移動を助ける案内システム全般。

`addEventListener`

addEventListener は、ある要素に「イベント」が発生したときに特定の動作をさせるための命令です。想像してみてください。ボタンをクリックすると、アラートが表示されるようにしたい場合です。

// ボタン要素を取得します。
const button = document.querySelector('button');

// ボタンがクリックされたときに動作させたい内容を定義します。
button.addEventListener('click', function() {
  alert('ボタンがクリックされました！');
});

addEventListener は「リスナー（耳）」のようなものです。ボタンがクリックされる「音」を聞いて、クリックされたときに設定された動作（ここではアラートの表示）を行います。

`removeEventListener`

一方、removeEventListener は、「リスナー」を解除する命令です。つまり、イベントが発生しても反応しないようにすることができます。

// 同じボタン要素を取得します。
const button = document.querySelector('button');

// まずはリスナーを定義して追加します。
function showAlert() {
  alert('ボタンがクリックされました！');
}

button.addEventListener('click', showAlert);

// あとでリスナーを削除します。
button.removeEventListener('click', showAlert);

このコードでは、showAlert という関数を addEventListener に渡して、ボタンがクリックされたときにアラートを表示するようにしています。しかし、その後で同じ showAlert 関数を使ってremoveEventListener を呼び出しているので、ボタンをクリックしてももう何も起こりません。

ポイント

addEventListener：リスナーを追加して、イベントが起こったときに特定の処理を行うようにする。
removeEventListener：リスナーを解除して、イベントが起こっても何も反応しないようにする。

`this`

thisは、関数の中で使われる特別なキーワードで、「その関数がどのオブジェクトから呼び出されたか」を指し示します。つまり、関数が「誰の中で」動いているかを教えてくれるものです。

`this`が何を指すかは状況による

thisが何を指すかは、次の4つのケースで決まります。

(1) グローバル環境での`this`

もし関数が何のオブジェクトにも所属していない状態（グローバルスコープ）で呼ばれた場合、thisはwindowオブジェクト（ブラウザの場合）またはglobalオブジェクト（Node.jsの場合）を指します。

(2) メソッドとしての`this`

オブジェクトのメソッド（オブジェクト内の関数）として呼ばれた場合、thisはそのオブジェクトを指します。

const student = {
  name: 'Yudai',
  greet: function() {
    console.log(this.name); // 'Yudai'
  }
};

student.greet(); // thisはstudentを指す

(3) コンストラクタ関数内の`this`

新しいオブジェクトを作るための関数（コンストラクタ関数）で使うと、thisは新しく作られるオブジェクトを指します。

function Student(name) {
  this.name = name;
}

const yudai = new Student('Yudai');
console.log(yudai.name); // 'Yudai'

なぜ`this`があるのか？

thisを使うことで、同じ関数でも色んなオブジェクトで使い回せる柔軟なプログラムが書けます。例えば、複数のキャラクターがいるゲームを作るときに、同じattack関数でもthisを使ってそれぞれのキャラクターの攻撃力を反映できる、といった具合です。

まとめ

thisは「どのオブジェクトが関数を呼び出したか」を指す。
状況によってthisが何を指すかが変わる。
グローバル、メソッド、コンストラクタ、明示的な設定の4つのケースで使われる。

WordPress

参考サイト

WordPressとは？テーマの構造とテンプレート仕組み

メニュー

  register_nav_menus([
    'global_nav' => 'グローバルナビゲーション',
    'footer_nav' => 'フッターナビゲーション',
  ]);
});

function my_theme_setup() {
    register_nav_menus([
        'global_nav' => 'グローバルナビゲーション',
        'footer_nav' => 'フッターナビゲーション',
    ]);
}
add_action('after_setup_theme', 'my_theme_setup');

このコードは、WordPressテーマ内でカスタムナビゲーションメニューを登録するために使用されます。具体的には、「グローバルナビゲーション」と「フッターナビゲーション」という2つのナビゲーションメニューを登録しています。

詳細な説明

register_nav_menus():
- WordPressの関数で、複数のナビゲーションメニューの位置をテーマ内で定義（登録）します。これにより、テーマの管理画面でカスタムメニューを作成し、それを指定した場所（グローバルナビゲーションやフッターナビゲーションなど）に表示できるようになります。
配列 [ 'global_nav' => 'グローバルナビゲーション', 'footer_nav' => 'フッターナビゲーション' ]:
- この部分は、ナビゲーションメニューの名前（キー）とそのラベル（値）を指定しています。
  - 'global_nav': テーマ内で使用する「グローバルナビゲーション」を示す識別子（キー）。
  - 'グローバルナビゲーション': ダッシュボード上で表示されるラベル。
  - 'footer_nav': テーマ内で使用する「フッターナビゲーション」を示す識別子（キー）。
  - 'フッターナビゲーション': ダッシュボード上で表示されるラベル。

動作

このコードを functions.php ファイルに追加すると、WordPress管理画面の「外観」→「メニュー」設定画面に、「グローバルナビゲーション」と「フッターナビゲーション」というメニューの場所（メニュー位置）が追加されます。
ユーザーは、カスタムメニューを作成し、それらのメニューを「グローバルナビゲーション」や「フッターナビゲーション」に割り当てることができます。

結果

global_nav は、主にヘッダーやサイト全体の主要ナビゲーションバーに使用されるメニュー。
footer_nav は、主にフッター部分に表示されるメニュー。

これにより、異なる場所に異なるメニューを配置し、サイトのナビゲーションを管理することが可能になります。

メニューIDを取得する

$menu_name = 'global_nav' ;
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);

このコードは、WordPressで「グローバルナビゲーション」（global_nav）メニューのIDを取得し、そのメニューに含まれるアイテムを取得するための手順を示しています。具体的には、テーマ内で指定したナビゲーションメニューの位置からメニュー項目を取得し、それを操作したり表示したりするために使用します。

コードの説明

$menu_name = 'global_nav';:
- ここでは、メニューの名前を指定しています。例えば、「グローバルナビゲーション」というメニューにアクセスするための名前です。
$locations = get_nav_menu_locations();:
- この部分は、テーマに登録されているすべてのメニューの「位置」を取得しています。「位置」というのは、メニューがどこに表示されるか（例えば、ヘッダーやフッターなど）の情報です。
$menu = wp_get_nav_menu_object($locations[$menu_name]);:
- $locations[$menu_name] では、global_nav という名前のメニューのIDを取得しています。IDは、そのメニューを特定するための数字のようなものです。
- wp_get_nav_menu_object() という関数は、そのIDを使ってメニューの詳しい情報を手に入れます。メニュー名やメニューがどんな内容なのかがわかります。
$menu_items = wp_get_nav_menu_items($menu->term_id);:
- この行では、メニューに含まれているアイテム（リンクなど）を取得しています。$menu->term_id は、上で取得したメニューのIDです。それを使って、メニューの中にあるすべての項目（リンクなど）を手に入れ、それを$menu_items という変数に保存します。

例えるなら

例えば、学校で使うプリントの束があるとします。

$menu_name = 'global_nav'; は、「この束には何が入っているかの名前」を指定することです。
$locations = get_nav_menu_locations(); は、「プリントがどこにあるか（机の上、棚の中など）」を探します。
$menu = wp_get_nav_menu_object($locations[$menu_name]); は、「そのプリントの束を取ってきて、詳しく中身を確認」することです。
$menu_items = wp_get_nav_menu_items($menu->term_id); は、「束の中に入っているすべてのプリントを取り出す」ことです。

このようにして、指定したメニューに含まれるリンクや項目を取得して、サイトに表示するために使います。

まとめると

このコードの流れは以下の通りです:

global_nav というメニュー位置に対応するメニューIDを取得する。
そのメニューIDに基づいて、メニューに含まれる全てのメニュー項目（リンク）を取得する。

使用例:

このコードの後に、例えば以下のようにしてメニュー項目を表示することができます。

<?php
if ($menu_items) {
    foreach ($menu_items as $item) {
        echo '<li><a href="' . $item->url . '">' . $item->title . '</a></li>';
    }
}
?>

`singular.php`

singular.php は、WordPressのテーマファイルの一部であり、主に「個別の投稿ページ」や「個別のカスタム投稿タイプページ」を表示するために使用されるテンプレートファイルです。single.php に似ていますが、カスタマイズ性を高めるために使われます。

具体的には、次のような特徴があります：

個別の投稿ページの表示: singular.php は、標準の投稿（ブログ記事）やカスタム投稿タイプ（例えば、ポートフォリオ、商品情報など）を表示するために使われます。
カスタム投稿タイプにも適用: single.php ではなく singular.php を使用することで、すべての個別の投稿タイプ（標準投稿とカスタム投稿タイプ）のページを共通のレイアウトで表示することができます。
テーマの階層構造における役割: WordPressのテンプレート階層では、特定の投稿タイプに対するテンプレートファイルが見つからない場合、singular.php が次の候補として利用されます。例えば、single-product.php が存在しない場合に singular.php が使用されます。
汎用性と一貫性: singular.php を使用することで、サイト全体で一貫したスタイルを保ちながら、異なる投稿タイプのページを表示することができます。
single.phpとの違い: single.php は主に「投稿」タイプの個別ページ用ですが、singular.php はすべての個別投稿タイプに対応するため、single.php よりも汎用性があります。

簡単に言うと、singular.php は個別の投稿を表示するための汎用的なテンプレートで、カスタム投稿タイプを含むすべての投稿ページを一貫したデザインで表示したいときに便利です。

single.php は、WordPressテーマのテンプレートファイルの一つで、主に「個別の投稿ページ」（ブログ記事など）を表示するために使用されます。このテンプレートは、投稿タイプが「post」である標準の投稿を表示するときに用いられます。

主な特徴と役割:

個別の投稿ページの表示: single.php は、標準の投稿タイプ（ブログ記事）を表示するためのデフォルトテンプレートです。投稿ごとに異なるレイアウトやスタイルを設定したい場合に、このファイルを編集します。
テンプレート階層の一部: WordPressのテンプレート階層において、single.php は個別投稿ページを表示するための最も基本的なテンプレートです。特定のカスタム投稿タイプがある場合は、single-{post-type}.php（例: single-product.php）が優先されますが、該当するテンプレートが見つからない場合は single.php が使用されます。
カスタム投稿タイプの表示: カスタム投稿タイプを持っている場合、WordPressはまず single-{post-type}.php を探しますが、見つからない場合は single.php を使用してその投稿を表示します。
シングルページのカスタマイズ: single.php をカスタマイズすることで、各投稿ページの見た目や内容を自由に変更できます。例えば、投稿のタイトル、コンテンツ、メタ情報（著者、投稿日など）の表示方法を編集できます。
singular.php との違い: single.php は主に「投稿」タイプの個別ページ用ですが、singular.php はすべての個別投稿タイプに対応する汎用的なテンプレートです。single.php の方がより特定の用途に使われます。

まとめると、single.php はWordPressの投稿タイプ「post」の個別ページを表示するためのテンプレートで、ブログ記事のレイアウトやスタイルをカスタマイズしたい場合に使用します。

page.php は、WordPressのテーマテンプレートファイルの一つで、「固定ページ」を表示するために使われるテンプレートです。固定ページは、ブログ記事とは異なり、主に静的なコンテンツ（例: 「会社概要」「お問い合わせ」「プライバシーポリシー」など）を表示するためのページです。

`page.php` の役割と特徴:

固定ページ専用テンプレート: page.php は固定ページ（ページ投稿タイプ「page」）を表示する際のデフォルトテンプレートです。このファイルを編集することで、サイトのすべての固定ページのデザインやレイアウトを変更できます。
テンプレート階層での位置づけ: WordPressのテンプレート階層では、固定ページを表示するためにまず page-{slug}.php（例: page-contact.php）や page-{ID}.php（例: page-5.php）を探しますが、それらが見つからない場合に page.php が使用されます。これにより、特定の固定ページ専用のデザインを作ることができますが、そういった個別テンプレートがない場合は、page.php にフォールバックします。
カスタムテンプレートのサポート: 固定ページごとに異なるデザインが必要な場合、WordPressではカスタムページテンプレート（例: template-about.php）を作成してページ編集画面から選択することができますが、page.php はあくまで基本的な固定ページのレイアウトを担当します。
投稿との違い: 固定ページは通常、ブログの投稿（記事）とは異なるコンテンツで、カテゴリーやタグといった投稿用の分類がない場合が多いです。そのため、page.php は投稿のための single.php とは異なり、より静的でシンプルなページ向けに設計されています。

まとめると、page.php はWordPressの「固定ページ」を表示するためのテンプレートで、主に静的なコンテンツ用のページのレイアウトを管理するために使われます。

home.php は、WordPressテーマのテンプレートファイルの一つで、「ブログのホームページ」を表示するために使用されます。具体的には、ブログ投稿一覧（最新の記事一覧）を表示するページ用のテンプレートです。

`home.php` の役割と特徴:

ブログ投稿一覧ページの表示: デフォルトでは、WordPressのトップページがブログの投稿一覧（最新記事）になっています。このページをカスタマイズするために使われるのが home.php です。
テンプレート階層での位置づけ: WordPressのテンプレート階層では、トップページを表示するテンプレートとしてまず front-page.php を探します。それが見つからない場合、home.php が使われます。home.php がない場合は、index.php がフォールバックとして使われます。
フロントページと区別: home.php は「ブログのホームページ」を表示するもので、固定ページをフロントページに設定している場合は使われません。この場合、front-page.php が優先されます。home.php はブログの投稿一覧ページ専用です。
表示内容のカスタマイズ: home.php をカスタマイズすることで、ブログのトップページのレイアウトや表示スタイルを変更できます。例えば、各記事のサマリー、サムネイル画像、日付、カテゴリー情報など、一覧ページに表示する内容を自由に設定できます。
使い方の柔軟性: home.php が存在することで、通常の固定ページや投稿とは異なる独自のデザインをブログのトップページに適用することができ、訪問者に対して一貫性のある投稿一覧表示を提供できます。

まとめると、home.php はWordPressのブログ投稿一覧ページ（ホームページ）を表示するためのテンプレートで、最新の記事をユーザーに見せるためのページデザインを管理します。

archive.php は、WordPressのテーマテンプレートファイルの一つで、「アーカイブページ」を表示するために使用されます。アーカイブページとは、特定のカテゴリ、タグ、日付、著者などに基づいてグループ化された投稿一覧を表示するページのことです。

`archive.php` の役割と特徴:

アーカイブページの表示: archive.php は、カテゴリーページ、タグページ、日付別アーカイブページ（例: 月別、年別）、著者別アーカイブページなど、さまざまなアーカイブページを表示するための汎用テンプレートです。
テンプレート階層での位置づけ: WordPressのテンプレート階層において、特定のアーカイブに対応する専用のテンプレート（例: category.php、tag.php、author.php など）が見つからない場合に archive.php が使用されます。これにより、すべてのアーカイブページに共通のレイアウトを適用できます。
特定のアーカイブテンプレートとの関係:
- カテゴリアーカイブ → category.php
- タグアーカイブ → tag.php
- 著者アーカイブ → author.php
- 日付アーカイブ → date.php
- カスタム投稿タイプアーカイブ → archive-{post-type}.php（例: archive-product.php）
これらの専用テンプレートがない場合、archive.php が適用されます。
表示内容のカスタマイズ: archive.php をカスタマイズすることで、アーカイブページのレイアウトやスタイルを自由に変更できます。たとえば、各投稿のタイトル、サマリー、サムネイル画像、投稿日など、一覧表示する内容を調整することができます。
汎用性: archive.php は、特定のアーカイブ専用テンプレートがない場合にすべてのアーカイブページに使われるため、テーマ全体で一貫性のあるデザインを提供できます。

まとめると、archive.php はWordPressのカテゴリ、タグ、著者、日付などのアーカイブページを表示するための汎用テンプレートで、特定のアーカイブタイプに専用テンプレートがない場合に使用されます。

home.php は、WordPressテーマのテンプレートファイルの一つで、主に「ブログ投稿一覧ページ」を表示するために使用されるテンプレートです。ブログのトップページとして設定されている場合に利用され、最新の記事一覧を表示する役割を担います。

`home.php` の役割と特徴:

ブログ投稿一覧ページの表示: home.php は、最新のブログ記事一覧を表示するページ用のテンプレートです。例えば、ブログのホームページとして最新記事を表示したいときにこのテンプレートが使われます。
テンプレート階層での位置づけ:
- WordPressではトップページ用にまず front-page.php を探します。
- front-page.php が存在しない場合、次に home.php が使われます。
- home.php がない場合は、最も基本的なテンプレートである index.php がフォールバックとして使用されます。
フロントページとブログページの違い:
- home.php は「ブログの投稿一覧ページ」を表示するためのものです。
- 一方、WordPressの設定で固定ページをトップページ（フロントページ）に設定している場合は front-page.php が優先され、home.php は使われません。
- home.php はあくまで投稿一覧を表示するためのテンプレートであり、ブログ専用のトップページと考えられます。
表示内容のカスタマイズ: home.php を編集することで、ブログのトップページに表示される記事一覧のレイアウトやデザインをカスタマイズできます。例えば、各記事のサマリー、サムネイル画像、日付、著者情報などを表示したり、デザインを変更したりすることができます。
柔軟な使い方: home.php が存在することで、通常の投稿や固定ページとは異なる独自のデザインをブログのトップページに適用することができます。これにより、ブログ特有のデザインやレイアウトを簡単に設定できます。

まとめると、home.php はWordPressの「ブログ投稿一覧ページ」を表示するためのテンプレートで、主にブログサイトのホームページとして最新の投稿一覧を表示するために使われます。

taxonomy.php は、WordPressのテーマテンプレートファイルの一つで、「カスタムタクソノミーアーカイブページ」を表示するために使用されます。タクソノミーとは、投稿をグループ化するための分類方法で、カテゴリやタグのようなものです。カスタムタクソノミーは、これらに加えて独自に作成した分類です。

`taxonomy.php` の役割と特徴:

カスタムタクソノミーの表示: taxonomy.php は、カスタムタクソノミーに属する投稿の一覧ページ（アーカイブページ）を表示するために使用されます。たとえば、「商品タイプ」や「イベントカテゴリー」などのカスタムタクソノミーを作成した場合、そのタクソノミーに属する投稿を一覧で表示するために taxonomy.php を使います。
テンプレート階層での位置づけ:
- WordPressのテンプレート階層では、特定のタクソノミーの専用テンプレート（例: taxonomy-{taxonomy}.php、taxonomy-{taxonomy}-{term}.php）が見つからない場合に taxonomy.php が使用されます。
- これにより、特定のタクソノミーごとに異なるテンプレートを持たない場合でも、すべてのカスタムタクソノミーアーカイブページを共通のデザインで表示できます。
カテゴリやタグとは異なる使い方:
- 標準のカテゴリやタグのアーカイブページには、それぞれ category.php や tag.php という専用のテンプレートがあります。
- taxonomy.php は、これらとは別にユーザーが作成したカスタムタクソノミー専用のアーカイブページを表示するために使われます。
表示内容のカスタマイズ: taxonomy.php をカスタマイズすることで、カスタムタクソノミーのアーカイブページのレイアウトや表示スタイルを自由に変更できます。例えば、各投稿のタイトルやサマリー、サムネイル画像など、一覧ページに表示する内容を設定できます。
汎用性: taxonomy.php は、カスタムタクソノミーごとの専用テンプレートがない場合に使用されるため、サイト全体で一貫したデザインを提供するのに役立ちます。

まとめると、taxonomy.php はWordPressのカスタムタクソノミーアーカイブページを表示するための汎用テンプレートで、特定のタクソノミーに属する投稿の一覧ページをカスタマイズして表示する際に使用されます。

attachment.php は、WordPressのテーマテンプレートファイルの一つで、「添付ファイルページ」を表示するために使用されます。添付ファイルページとは、WordPressでアップロードされたメディア（画像、PDF、動画など）の個別ページのことです。

`attachment.php` の役割と特徴:

添付ファイルページの表示: WordPressでは、メディアライブラリにアップロードしたファイルごとに専用のページ（添付ファイルページ）が自動的に作成されます。attachment.php はその添付ファイルページの表示に使われるテンプレートです。このページには、メディアのタイトル、説明、キャプション、ファイルのプレビュー（画像の場合は画像自体）が表示されます。
テンプレート階層での位置づけ:
- WordPressのテンプレート階層では、特定のメディアタイプに対する専用テンプレート（例: image.php、video.php、audio.php）がある場合、そちらが優先されます。
- これらのテンプレートが存在しない場合、attachment.php が使用されます。
- もし attachment.php もない場合、最終的に single.php または index.php がフォールバックとして使用されます。
メディアタイプに応じたテンプレートの使い分け:
- 画像用 → image.php
- 動画用 → video.php
- 音声用 → audio.php
- これらの専用テンプレートが存在しない場合に attachment.php が使用されます。
表示内容のカスタマイズ: attachment.php をカスタマイズすることで、添付ファイルページのレイアウトやデザインを変更できます。例えば、画像の場合はフルサイズの画像、ファイルの説明、著作権情報などを表示するように設定することができます。
利用シーンの注意点: 通常、添付ファイルページは多くのサイトであまり使われないことが多いですが、メディアファイルの個別ページを効果的に使いたい場合にはカスタマイズすることで価値を持たせることができます。

まとめると、attachment.php はWordPressのメディアファイルの個別ページ（添付ファイルページ）を表示するためのテンプレートで、各種メディアの詳細やプレビューを表示する際に使用されます。

single-post.php は、WordPressのテーマテンプレートファイルの一つで、**「単一の投稿ページ」**を表示するために使用されます。具体的には、ブログの各記事（投稿）の個別ページを表示する際に利用されます。

`single-post.php` の役割と特徴:

単一投稿ページの表示: single-post.php は、ブログの各記事の個別ページを表示するためのテンプレートです。これにより、記事のタイトル、本文、投稿者、投稿日、カテゴリー、タグなどが表示されます。
テンプレート階層での位置づけ:
- WordPressのテンプレート階層では、特定の投稿タイプ用に single-{post-type}.php というテンプレートファイルも利用できます。例えば、カスタム投稿タイプ「product」の場合は single-product.php というテンプレートが使われます。
- single-post.php は、投稿タイプが「post」である標準のブログ記事に対して使用されます。
- もし single-{post-type}.php が存在しない場合に single-post.php が使用されます。
デフォルトテンプレート:
- 特定のカスタム投稿タイプ用のテンプレートがない場合、single.php が使われます。single-post.php は、ブログ記事専用のデザインをカスタマイズしたい場合に使われます。
表示内容のカスタマイズ:
- single-post.php をカスタマイズすることで、ブログ記事のレイアウトやデザインを自由に変更できます。たとえば、記事の内容に加えて、著者プロフィール、関連記事、コメントセクションなどを追加することができます。
投稿専用:
- single-post.php は標準の投稿（ブログ記事）専用のテンプレートです。他の投稿タイプやページには適用されません。

まとめると、single-post.php はWordPressで個別のブログ投稿ページを表示するためのテンプレートで、記事の詳細情報や関連コンテンツを表示するために使用されます。

<?php wp_head(); ?> は、WordPressのテーマファイル内で使用する関数で、テーマの <head> セクションに必要なコードを挿入するために使います。これは、WordPressがテーマの <head> 内に動的に必要なコードを追加できるようにするための重要な部分です。

`<?php wp_head(); ?>` の役割と特徴:

WordPress機能の追加:
- wp_head() 関数は、WordPressがテーマの <head> セクションに必要なコードを挿入するためのフックです。これには、プラグインが追加するスタイルシートやスクリプト、メタ情報、その他の必要なコードが含まれます。
テーマファイル内の位置:
- 通常、wp_head() はテーマの header.php ファイルの <head> セクション内に記述します。これにより、WordPressがこの位置に自動的に必要な情報やコードを追加できるようになります。
プラグインとの互換性:
- プラグインは wp_head() フックを利用して、自動的にスタイルシートやJavaScriptファイルを <head> に追加することができます。これにより、プラグインが正しく機能するために必要なコードが挿入されます。
SEOやサイトの機能強化:
- SEOのためのメタタグや、Google Analyticsのトラッキングコード、その他の重要なスクリプトなどもこの関数を通じて追加されます。これにより、テーマの <head> セクションに必要な情報を簡単に管理できます。
注意点:
- wp_head() を忘れると、プラグインやテーマが正しく動作しない場合があります。特に、JavaScriptやCSSの追加、SEOメタタグの挿入などが行われなくなります。

まとめると、<?php wp_head(); ?> はWordPressテーマの <head> セクションに必要な動的なコードや情報を挿入するための関数で、プラグインの機能やテーマの正しい動作に必要な要素を管理する役割を果たします。

<?php wp_footer(); ?> は、WordPressのテーマファイル内で使用する関数で、テーマの <footer> セクションの閉じタグの直前に必要なコードを挿入するために使います。これにより、WordPressがサイトのフッター部分に動的に必要な情報やスクリプトを追加できます。

`<?php wp_footer(); ?>` の役割と特徴:

WordPress機能の追加:
- wp_footer() 関数は、WordPressがテーマの <footer> セクションの閉じタグ直前に必要なコードを挿入するためのフックです。これには、プラグインが追加するJavaScriptファイル、トラッキングコード、その他のスクリプトが含まれます。
テーマファイル内の位置:
- 通常、wp_footer() はテーマの footer.php ファイルの閉じ </body> タグの直前に記述します。これにより、WordPressがこの位置に自動的に必要な情報やスクリプトを追加できるようになります。
プラグインとの互換性:
- プラグインは wp_footer() フックを利用して、自動的にJavaScriptファイルやトラッキングコードを <footer> に追加することができます。これにより、プラグインが正しく機能するために必要なコードが挿入されます。
トラッキングコードの挿入:
- Google Analyticsやその他のトラッキングコード、カスタムスクリプトなどもこの関数を通じて追加されます。これにより、サイトのフッター部分で必要なスクリプトを管理できます。
注意点:
- wp_footer() を忘れると、プラグインやテーマが正しく動作しない場合があります。特に、必要なスクリプトが挿入されず、機能が正しく働かない可能性があります。

まとめると、<?php wp_footer(); ?> はWordPressテーマの <footer> セクションに必要な動的なコードやスクリプトを挿入するための関数で、プラグインの機能やサイトの正しい動作に必要な要素を管理する役割を果たします。

<?php the_time(get_option('date_format')); ?> は、WordPressでブログ記事の日付を表示するためのコードです。このコードは、記事が公開された日付を、WordPressの設定に従ったフォーマットで表示します。以下で、わかりやすく説明します。

このコードの意味と動作

記事の日付を表示する:
- このコードは、ブログ記事が公開された日付を表示するために使われます。たとえば、記事が「2024年9月13日」に公開された場合、その日付が表示されます。
日付のフォーマットを取得:
- get_option('date_format') の部分は、WordPressの管理画面で設定されている「日付の表示形式」を取得します。WordPressには日付を「Y年m月d日」や「m/d/Y」など、いろいろなフォーマットで表示する設定があります。この設定に従って、日付を自動的にフォーマットします。
例:
- もしWordPressの設定で「日付の表示形式」が「Y年m月d日」（例: 2024年9月13日）に設定されていれば、この記事の日付もそのフォーマットで表示されます。
- 別の設定で「F j, Y」（例: September 13, 2024）にしているなら、日付もそのように表示されます。
なぜ使うのか？:
- サイト全体で日付の表示形式を統一したい場合に便利です。もし管理画面で日付の形式を変更したら、テーマのコードをいじる必要なく、すべてのページで日付の形式が自動で更新されます。

高校生向けにまとめると:

<?php the_time(get_option('date_format')); ?> は、WordPressで記事が公開された日付を表示するためのコードで、管理画面で設定された日付の形式に従って表示されます。これにより、サイト全体の日付表示を簡単に管理できます。

<?php the_permalink(); ?> は、WordPressで記事やページのリンク（URL）を表示するためのコードです。このリンクは、各記事やページの「固定リンク」（パーマリンク）と呼ばれるもので、クリックするとその記事やページに移動できます。

`<?php the_permalink(); ?>` の意味と動作

記事やページへのリンクを表示:
- このコードを使うと、記事やページのURLが表示されます。例えば、あるブログ記事のURLが https://example.com/2024/09/13/sample-post だとすると、そのURLが表示されます。
リンク先を示すためのコード:
- Webページで、記事タイトルや「続きを読む」といったテキストをクリックするとその記事に飛べるのは、この the_permalink() のおかげです。HTMLのリンクタグ（<a> タグ）と組み合わせて使うことが多いです。
実際の使い方:
- 例えば、次のようなコードを書くと、記事のタイトルがリンクになり、クリックするとその記事ページに飛べます。phpコードをコピーする<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
- ここで <?php the_permalink(); ?> はリンク先のURLを、<?php the_title(); ?> は記事のタイトルを表示しています。
なぜ使うのか？:
- 記事やページにアクセスできるリンクを自動で生成するため、手作業でリンクを作る必要がなくなり、効率よくサイトを作ることができます。

高校生向けにまとめると:

<?php the_permalink(); ?> は、WordPressで記事やページへのリンク（URL）を表示するためのコードです。このコードを使うことで、記事タイトルや「続きを読む」といった部分をクリックして、その記事やページに飛べるリンクを簡単に作ることができます。

<?php echo get_template_directory_uri(); ?> は、WordPressのテーマファイルでテーマのフォルダのURL（ウェブ上のアドレス）を表示するためのコードです。簡単に言うと、サイトのデザインやレイアウトに使われている「テーマ」ファイルが保存されている場所のアドレスを取得して表示します。

このコードの意味と動作

テーマフォルダのURLを取得:
- get_template_directory_uri() は、今使っているテーマのフォルダのURLを取得します。例えば、サイトで「mytheme」というテーマを使っているなら、そのテーマがあるフォルダのURLを取得します。もしテーマのフォルダが https://example.com/wp-content/themes/mytheme/ だとしたら、そのURLを返します。
echo で表示:
- echo は、取得したURLを実際にページ上に表示するための命令です。これを使うことで、テーマフォルダのURLがその場所に表示されます。
よく使う場面:
- 画像やスタイルシート（CSSファイル）など、テーマに含まれているファイルの場所を指定するときに使います。たとえば、テーマの中にある画像を表示したい場合、次のように使います：phpコードをコピーする<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="ロゴ">
- このコードは、テーマフォルダの中の images フォルダにある logo.png という画像を表示します。
なぜ使うのか？:
- サイトに表示される画像やスタイルシートなどを正しい場所から読み込むために使います。これにより、テーマのフォルダの場所が変わったとしてもコードを変更する必要がなく、サイト全体で一貫した管理ができます。

高校生向けにまとめると:

<?php echo get_template_directory_uri(); ?> は、WordPressで使っているテーマファイルのフォルダのURL（アドレス）を表示するためのコードです。このURLを使うことで、テーマに含まれている画像やスタイルシートなどを正しい場所から表示できるようにします。

get_template_part() は、WordPressでテーマのテンプレートファイルを分割して、再利用可能な部分を呼び出すための便利な関数です。この関数を使うことで、コードの繰り返しを減らし、サイトのメンテナンスやカスタマイズを簡単に行うことができます。

`get_template_part()` の基本的な役割

テンプレートの部品を読み込む:
- WordPressのテーマファイルを作成するとき、例えばヘッダー、フッター、記事の表示方法など、複数のページで同じコードを使うことが多いです。get_template_part() は、こうしたコードの繰り返しを避けるために、テンプレートの部品（パーツ）を別のファイルに分けて、それを呼び出すために使います。
再利用可能なパーツ:
- 例えば、ブログ記事のリストの表示方法を content.php というファイルにまとめておき、そのファイルを get_template_part() で呼び出します。これにより、複数のページで同じ記事表示のコードを使いたいときに、同じファイルを読み込むだけで済むようになります。
例:phpコードをコピーする<?php get_template_part('content'); ?>
- このコードは、テーマフォルダ内にある content.php というテンプレートファイルを読み込みます。例えば、記事のタイトルや内容を表示するためのテンプレートが content.php に書かれているなら、どのページでもこのファイルを使うことができます。
ファイル名にバリエーションをつける:
- get_template_part() には、条件によって違うファイルを読み込む機能もあります。たとえば、通常の投稿とカスタム投稿タイプで異なるレイアウトを使いたい場合、次のように使用できます。
phpコードをコピーする<?php get_template_part('content', 'single'); ?>
- この場合、content-single.php というファイルが読み込まれます。ファイル名の部分にオプションの引数をつけることで、特定の用途に合わせたテンプレートを呼び出せます。
メリット:
- コードの管理が簡単: 何度も同じコードを書かなくても、1つのファイルにまとめておけば、それを呼び出すだけでOK。
- テーマのカスタマイズが簡単: 例えば、デザインを変更したいときに、呼び出しているテンプレートファイルを1か所変更すれば、全体に反映されます。

高校生向けにまとめると

get_template_part() は、WordPressのテーマで何度も使うコード（記事の表示方法など）を別のファイルにまとめて、そのファイルを呼び出すための関数です。これを使うと、同じコードを何度も書かなくても、サイト全体で一貫したデザインや機能を簡単に管理できます。

トップページのURLを取得

<?php echo esc_url( home_url( '/' ) ); ?>

インクルードタグ

header読み込み

<?php get_header(); ?>

footer読み込み

<?php get_footer(); ?>

sidebar.php読み込み

<!-- sidebar.phpを読み込む -->
<?php get_sidebar(); ?>

検索フォーム(searchform.php)の呼び出し

<?php get_search_form(); ?>

</head>直前

`<?php wp_head(); ?>` の役割と特徴:

WordPress機能の追加:
- wp_head() 関数は、WordPressがテーマの <head> セクションに必要なコードを挿入するためのフックです。これには、プラグインが追加するスタイルシートやスクリプト、メタ情報、その他の必要なコードが含まれます。
テーマファイル内の位置:
- 通常、wp_head() はテーマの header.php ファイルの <head> セクション内に記述します。これにより、WordPressがこの位置に自動的に必要な情報やコードを追加できるようになります。
プラグインとの互換性:
- プラグインは wp_head() フックを利用して、自動的にスタイルシートやJavaScriptファイルを <head> に追加することができます。これにより、プラグインが正しく機能するために必要なコードが挿入されます。
SEOやサイトの機能強化:
- SEOのためのメタタグや、Google Analyticsのトラッキングコード、その他の重要なスクリプトなどもこの関数を通じて追加されます。これにより、テーマの <head> セクションに必要な情報を簡単に管理できます。
注意点:
- wp_head() を忘れると、プラグインやテーマが正しく動作しない場合があります。特に、JavaScriptやCSSの追加、SEOメタタグの挿入などが行われなくなります。

<?php wp_head(); ?>

</body>直前

`<?php wp_footer(); ?>` の役割と特徴:

WordPress機能の追加:
- wp_footer() 関数は、WordPressがテーマの <footer> セクションの閉じタグ直前に必要なコードを挿入するためのフックです。これには、プラグインが追加するJavaScriptファイル、トラッキングコード、その他のスクリプトが含まれます。
テーマファイル内の位置:
- 通常、wp_footer() はテーマの footer.php ファイルの閉じ </body> タグの直前に記述します。これにより、WordPressがこの位置に自動的に必要な情報やスクリプトを追加できるようになります。
プラグインとの互換性:
- プラグインは wp_footer() フックを利用して、自動的にJavaScriptファイルやトラッキングコードを <footer> に追加することができます。これにより、プラグインが正しく機能するために必要なコードが挿入されます。
トラッキングコードの挿入:
- Google Analyticsやその他のトラッキングコード、カスタムスクリプトなどもこの関数を通じて追加されます。これにより、サイトのフッター部分で必要なスクリプトを管理できます。
注意点:
- wp_footer() を忘れると、プラグインやテーマが正しく動作しない場合があります。特に、必要なスクリプトが挿入されず、機能が正しく働かない可能性があります。

<?php wp_footer(); ?>

投稿の本文出力

<?php the_content(); ?>

CSS、JS、img読み込み(親テーマ)

<?php echo esc_url(get_template_directory_uri()); ?>/

CSS、JS、img読み込み(子テーマ)

<?php echo esc_url(get_stylesheet_directory_uri()); ?>/

サイトタイトル出力

<?php bloginfo( 'name' ); ?>

サイトキャッチフレーズ表示

<!-- サイトのキャッチフレーズを表示 -->
<?php bloginfo('description'); ?>

サイトのURLを表示

<!-- サイトのURLを表示 -->
<?php echo home_url(); ?>

カスタムロゴ出力

<!-- カスタムロゴを表示 -->
<?php the_custom_logo(); ?>

single.php (投稿個別ページ)

投稿タイトル出力

<?php the_title(); ?>

記事公開日時

<!-- 記事の公開日時を表示 -->
<?php the_time('Y-m-d'); ?>

記事カテゴリー

<!-- 記事のカテゴリーを表示 -->
<?php the_category( ' ' ); ?>

  <?php if(is_category()): ?>
            <h1>Category</h1>
  <?php else: ?>
            <h1>Tag</h1>
  <?php endif; ?>

if(is_category()):

この部分は、現在表示されているページが「カテゴリーページ」かどうかを確認しています。is_category()は、WordPressの条件分岐タグで、表示しているページがカテゴリーページの場合にtrueを返します。

<h1>Category</h1>

is_category()がtrueの場合、つまりカテゴリーページである場合、この部分が実行され、<h1>Category</h1>という見出しが表示されます。

else:

is_category()がfalseの場合、つまりカテゴリーページでない場合、次の部分が実行されます。この場合はタグページであることを想定しています。

<h1>Tag</h1>

elseブロック内で、タグページが表示される場合に<h1>Tag</h1>という見出しが表示されます。

endif;

if文の終了を示しています。

記事タグ

<!-- 記事のタグを表示 -->
<?php the_tags('', ''); ?>

記事内容表示

<!-- 記事の内容を表示 -->
<?php the_content(); ?>

作成者表示

<!-- 作成者を表示 -->
<?php the_author(); ?>

search.php (検索結果の表示ページ)

検索クエリを表示

<?php the_search_query(); ?>

検索クエリを取得

<?php get_search_query(); ?>

カスタム投稿タイプ

add_action('init', function(){
    register_post_type('item', [
        'label' => '商品',
        'public' => true
    ]);
});

この PHP コードは WordPress のカスタム投稿タイプを登録するものです。具体的に解説していきましょう。

add_action('init', function() { ... });

add_action() は WordPress のフック機能を使用するための関数です。
‘init’ フックに関数を追加しています。これは WordPress の初期化時に実行されます。
ここでは無名関数（クロージャ）を使用しています。

register_post_type('item', [ ... ]);

この関数は新しいカスタム投稿タイプを登録します。
第一引数 ‘item’ は、新しく作成するカスタム投稿タイプの名前（スラッグ）です。

配列の中身：

'label' => '商品': この投稿タイプの表示名を「商品」に設定しています。
'public' => true: この投稿タイプを公開（管理画面で編集可能で、フロントエンドでも表示可能）に設定しています。

このコードを実行すると、WordPress 管理画面に「商品」という新しい投稿タイプが追加され、通常の投稿と同じように商品情報を管理できるようになります。

カスタム投稿タイプの設定にはさらに多くのオプションがあります。例えば、アイコンの設定、サポートする機能（タイトル、エディタ、サムネイルなど）の指定、パーマリンク構造の設定などが可能です。これらについてさらに詳しく知りたい場合は、お知らせください。

サムネイル出力（アイキャッチ画像を表示する）

<?php the_post_thumbnail(); ?>

`the_post_thumbnail(array(32, 32));`

the_post_thumbnail(): この関数は、投稿やページに設定されているアイキャッチ画像を表示します。もし投稿にアイキャッチ画像が設定されていれば、その画像が表示されます。

`array(32, 32)`

array(32, 32): ここでは、サムネイル画像の幅と高さを指定しています。array(32, 32) という指定は、アイキャッチ画像を幅32ピクセル、高さ32ピクセルにリサイズして表示することを意味します。

例

<?php 
add_action('init', function() {
  add_theme_support('post-thumbnails');
});

1. `add_action('init', function() {...});`

add_action: WordPressの関数で、特定のタイミング（フック）で別の処理を追加するために使います。ここでは、WordPressのinitというタイミングで関数を実行するように指示しています。
'init': WordPressの「フック」と呼ばれるポイントで、init はWordPressが初期化される段階のことを指します。この段階で、カスタムコードを実行できるように設定しています。要するに、「WordPressが読み込まれたときに、これを実行してね」という合図です。
function() {...}: 無名関数（名前のない関数）を定義しています。この関数の中で、add_theme_support('post-thumbnails'); が実行されます。

2. `add_theme_support('post-thumbnails');`

add_theme_support: WordPressのテーマに対して、特定の機能を有効化するための関数です。テーマに新しい機能（サポート）を追加する役割を持ちます。
'post-thumbnails': これは、WordPressの「アイキャッチ画像」（サムネイル画像）をサポートするためのオプションです。このコードを実行することで、投稿やページにアイキャッチ画像を設定できるようになります。

add_theme_support('title-tag'); は、WordPressテーマにページの <title> タグのサポートを追加するための関数です。この関数を使うことで、WordPressが自動的に各ページに適切な <title> タグを生成し、ページタイトルを出力するようになります。

例

$id = get_post_thumbnail_id();
$img = wp_get_attachment_image_src($id);

`$id = get_post_thumbnail_id();`

get_post_thumbnail_id(): この関数は、投稿に設定されているアイキャッチ画像のIDを取得します。WordPressでは、すべての画像やメディアは「添付ファイル（アタッチメント）」としてデータベースに保存されていて、それぞれにIDが割り当てられています。
- $id: ここでは、そのアイキャッチ画像のIDを変数 $id に代入しています。このIDを使って、画像の情報を取得したり操作することができるようになります。

`$img = wp_get_attachment_image_src($id);`

wp_get_attachment_image_src($id): この関数は、指定したID（ここでは $id に入っているアイキャッチ画像のID）に基づいて、その画像のURLやサイズ（幅・高さ）などの情報を配列として返す関数です。
- $img: 返される情報を配列として $img という変数に保存しています。この配列には以下のような情報が含まれます。
  1. 画像のURL
  2. 画像の幅
  3. 画像の高さ

$img

$img[0]で0になる理由は、wp_get_attachment_image_src()関数が返す配列の構造にあります。この関数は、指定した画像の情報を配列として返します。

通常、wp_get_attachment_image_src($id)は以下のような配列を返します。

array(
  [0] => 画像のURL
  [1] => 画像の幅
  [2] => 画像の高さ
  [3] => 画像が正しいかどうかの真偽値 (オプション)
)

したがって、$img[0]は配列の最初の要素、つまり画像のURLを指します。

具体例

もし投稿に設定されているアイキャッチ画像が ID=123 の画像だった場合、以下のような処理が行われます。

get_post_thumbnail_id() でアイキャッチ画像のID（例えば 123）を取得します。
wp_get_attachment_image_src($id) でIDに対応する画像のURLやサイズ情報を取得します。例えば、次のような配列が $img に入ります。

esc_attr esc_html

esc_attrとesc_htmlは、WordPressで使用される安全性を高めるための関数です。これらの関数は、データをHTMLコードに出力する際に、特定の文字をエスケープ（無害化）することで、クロスサイトスクリプティング（XSS）攻撃などのセキュリティリスクを軽減します。

esc_attr():
- 属性値をエスケープするために使用されます。
- 主にHTML要素の属性値として出力する際に使用します。
- 例: <input type="text" value="<?php echo esc_attr($user_input); ?>">
esc_html():
- HTMLコンテンツをエスケープするために使用されます。
- 主にHTML要素の内容として出力する際に使用します。
- 例: <p><?php echo esc_html($user_comment); ?></p>

これらの関数は、特殊文字（<, >, &, “, ‘など）をHTMLエンティティに変換します。これにより、ユーザー入力やデータベースから取得したデータを安全に表示できます。

アイキャッチ画像があるかどうかを判定

<?php has_post_thumbnail() ?>

archive.php (アーカイブページ)

パーマリンク出力

<?php the_permalink(); ?>

記事抜粋(デフォルト110文字)

<?php the_excerpt(); ?>

ページネーション

<?php the_posts_pagination(); ?>

<?php next_post_link(); ?> はWordPressのテンプレートタグで、現在表示している投稿の「次の投稿」へのリンクを生成します。このタグを使うと、ユーザーが現在の投稿を読み終えた後に簡単に次の投稿に移動できます。

<?php next_post_link('%link', '次の投稿へ'); ?>

%link: リンク全体のプレースホルダーです。'次の投稿へ': リンクに表示するテキストです。

`<?php body_class(); ?>`

WordPressのテーマテンプレートファイルに使用されるPHP関数で、<body>タグに特定のクラス名を自動的に追加するために使います。

目的

body_class()関数は、ページや投稿の種類、テンプレート、その他の条件に基づいて<body>タグにクラスを追加します。これにより、CSSやJavaScriptで特定のページや投稿に対してスタイルや動作を調整することができます。

具体例

例えば、body_class()を使うと、次のようなクラスが自動的に<body>タグに追加されることがあります：

ページタイプに基づくクラス：home（ホームページ）、single（シングル投稿ページ）、page（固定ページ）
特定のテンプレートファイルに基づくクラス：page-template-default（デフォルトの固定ページテンプレート）、page-template-custom（カスタムテンプレート）
投稿やページのIDに基づくクラス：postid-42（IDが42の投稿）

`<?php wp_body_open(); ?>`

WordPressのテーマテンプレートで使用される関数で、<body>タグの直後に追加のコードを挿入するために使います。

目的

wp_body_open()関数の主な目的は、WordPressテーマの<body>タグの直後に、プラグインやテーマの開発者が追加したいコードを挿入するためのフックを提供することです。このフックは、HTMLの<body>タグが開いた直後に実行されるコードを挿入できるようにします。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <?php wp_body_open(); ?>

この例では、wp_body_open()が<body>タグの直後に呼ばれます。

具体例

トラッキングコードの追加： Google AnalyticsやFacebook Pixelのトラッキングコードなど、<body>タグが開いた直後に実行したいスクリプトを追加できます。
プラグインのフック：一部のプラグインは、このフックを使って特定のコードを<body>タグの直後に追加します。例えば、広告のコードやカスタムスクリプトなどが考えられます。

投稿日出力

<?php the_time(get_option('date_format')); ?>

`singular.php`

singular.php は、WordPressのテーマファイルの一部であり、主に「個別の投稿ページ」や「個別のカスタム投稿タイプページ」を表示するために使用されるテンプレートファイルです。single.php に似ていますが、カスタマイズ性を高めるために使われます。

具体的には、次のような特徴があります：

個別の投稿ページの表示: singular.php は、標準の投稿（ブログ記事）やカスタム投稿タイプ（例えば、ポートフォリオ、商品情報など）を表示するために使われます。
カスタム投稿タイプにも適用: single.php ではなく singular.php を使用することで、すべての個別の投稿タイプ（標準投稿とカスタム投稿タイプ）のページを共通のレイアウトで表示できます。
テーマの階層構造における役割: WordPressのテンプレート階層では、特定の投稿タイプに対するテンプレートファイルが見つからない場合、singular.php が次の候補として利用されます。例えば、single-product.php が存在しない場合に singular.php が使用されます。
single.phpとの違い: single.php は主に「投稿」タイプの個別ページ用ですが、singular.php はすべての個別投稿タイプに対応するため、single.php よりも汎用性があります。

簡単に言うと、singular.php は個別の投稿を表示するための汎用的なテンプレートで、カスタム投稿タイプを含むすべての投稿ページを一貫したデザインで表示したいときに便利です。

`single.php`

single.php は、WordPressテーマのテンプレートファイルの一つで、主に「個別の投稿ページ」（ブログ記事など）を表示するために使用されます。このテンプレートは、投稿タイプが「post」である標準の投稿を表示するときに用いられます。

主な特徴と役割:

個別の投稿ページの表示: single.php は、標準の投稿タイプ（ブログ記事）を表示するためのデフォルトテンプレートです。投稿ごとに異なるレイアウトやスタイルを設定したい場合に、このファイルを編集します。
テンプレート階層の一部: WordPressのテンプレート階層において、single.php は個別投稿ページを表示するための最も基本的なテンプレートです。特定のカスタム投稿タイプがある場合は、single-{post-type}.php（例: single-product.php）が優先されますが、該当するテンプレートが見つからない場合は single.php が使用されます。
カスタム投稿タイプの表示: カスタム投稿タイプを持っている場合、WordPressはまず single-{post-type}.php を探しますが、見つからない場合は single.php を使用してその投稿を表示します。
シングルページのカスタマイズ: single.php をカスタマイズすることで、各投稿ページの見た目や内容を自由に変更できます。例えば、投稿のタイトル、コンテンツ、メタ情報（著者、投稿日など）の表示方法を編集できます。
singular.php との違い: single.php は主に「投稿」タイプの個別ページ用ですが、singular.php はすべての個別投稿タイプに対応する汎用的なテンプレートです。single.php の方がより特定の用途に使われます。

`page.php`

WordPressのテーマテンプレートファイルの一つで、「固定ページ」を表示するために使われるテンプレート。

`home.php`

WordPressテーマのテンプレートファイルの一つで、主に「ブログ投稿一覧ページ」を表示するために使用されるテンプレートです。ブログのトップページとして設定されている場合に利用され、最新の記事一覧を表示する役割を担います。

ブログ投稿一覧ページの表示: home.php は、最新のブログ記事一覧を表示するページ用のテンプレートです。例えば、ブログのホームページとして最新記事を表示したいときにこのテンプレートが使われます。

テンプレート階層での位置づけ:

WordPressではトップページ用にまず front-page.php を探します。
front-page.php が存在しない場合、次に home.php が使われます。
home.php がない場合は、最も基本的なテンプレートである index.php がフォールバックとして使用されます。

フロントページとブログページの違い:

home.php は「ブログの投稿一覧ページ」を表示するためのものです。
一方、WordPressの設定で固定ページをトップページ（フロントページ）に設定している場合は front-page.php が優先され、home.php は使われません。
home.php はあくまで投稿一覧を表示するためのテンプレートであり、ブログ専用のトップページと考えられます。

柔軟な使い方: home.php が存在することで、通常の投稿や固定ページとは異なる独自のデザインをブログのトップページに適用することができます。これにより、ブログ特有のデザインやレイアウトを簡単に設定できます。

`archive.php`

WordPressのテーマテンプレートファイルの一つで、「アーカイブページ」を表示するために使用されます。アーカイブページとは、特定のカテゴリ、タグ、日付、著者などに基づいてグループ化された投稿一覧を表示するページ。

アーカイブページの表示: archive.php は、カテゴリーページ、タグページ、日付別アーカイブページ（例: 月別、年別）、著者別アーカイブページなど、さまざまなアーカイブページを表示するための汎用テンプレートです。
テンプレート階層での位置づけ: WordPressのテンプレート階層において、特定のアーカイブに対応する専用のテンプレート（例: category.php、tag.php、author.php など）が見つからない場合に archive.php が使用されます。これにより、すべてのアーカイブページに共通のレイアウトを適用できます。
特定のアーカイブテンプレートとの関係:
- カテゴリアーカイブ → category.php
- タグアーカイブ → tag.php
- 著者アーカイブ → author.php
- 日付アーカイブ → date.php
- カスタム投稿タイプアーカイブ → archive-{post-type}.php（例: archive-product.php）
これらの専用テンプレートがない場合、archive.php が適用されます。
表示内容のカスタマイズ: archive.php をカスタマイズすることで、アーカイブページのレイアウトやスタイルを自由に変更できます。たとえば、各投稿のタイトル、サマリー、サムネイル画像、投稿日など、一覧表示する内容を調整することができます。
汎用性: archive.php は、特定のアーカイブ専用テンプレートがない場合にすべてのアーカイブページに使われるため、テーマ全体で一貫性のあるデザインを提供できます。

`taxonomy.php`

タクソノミーとは、投稿をグループ化するための分類方法で、カテゴリやタグのようなものです。カスタムタクソノミーは、これらに加えて独自に作成した分類です。

カスタムタクソノミーの表示: taxonomy.php は、カスタムタクソノミーに属する投稿の一覧ページ（アーカイブページ）を表示するために使用されます。たとえば、「商品タイプ」や「イベントカテゴリー」などのカスタムタクソノミーを作成した場合、そのタクソノミーに属する投稿を一覧で表示するために taxonomy.php を使います。

テンプレート階層での位置づけ

WordPressのテンプレート階層では、特定のタクソノミーの専用テンプレート（例: taxonomy-{taxonomy}.php、taxonomy-{taxonomy}-{term}.php）が見つからない場合に taxonomy.php が使用されます。
これにより、特定のタクソノミーごとに異なるテンプレートを持たない場合でも、すべてのカスタムタクソノミーアーカイブページを共通のデザインで表示できます。

カテゴリやタグとは異なる使い方

標準のカテゴリやタグのアーカイブページには、それぞれ category.php や tag.php という専用のテンプレートがあります。
taxonomy.php は、これらとは別にユーザーが作成したカスタムタクソノミー専用のアーカイブページを表示するために使われます。

表示内容のカスタマイズ: taxonomy.php をカスタマイズすることで、カスタムタクソノミーのアーカイブページのレイアウトや表示スタイルを自由に変更できます。例えば、各投稿のタイトルやサマリー、サムネイル画像など、一覧ページに表示する内容を設定できます。

`attachment.php`

WordPressのテーマテンプレートファイルの一つで、「添付ファイルページ」を表示するために使用されます。

`single-post.php`

WordPressのテーマテンプレートファイルの一つで、「単一の投稿ページ」を表示。

特定のカスタム投稿タイプ用のテンプレートがない場合、single.php が使われます。single-post.php は、ブログ記事専用のデザインをカスタマイズしたい場合に使われます。

`<?php the_time(get_option('date_format')); ?>`

<?php the_time(get_option('date_format')); ?> は、WordPressで記事が公開された日付を表示するためのコードで、管理画面で設定された日付の形式に従って表示されます。これにより、サイト全体の日付表示を簡単に管理できます。

get_option('date_format') の部分は、WordPressの管理画面で設定されている「日付の表示形式」を取得します。

`<?php the_permalink(); ?>`

記事やページへのリンクを表示:
- このコードを使うと、記事やページのURLが表示されます。例えば、あるブログ記事のURLが https://example.com/2024/09/13/sample-post だとすると、そのURLが表示されます。
リンク先を示すためのコード
- Webページで、記事タイトルや「続きを読む」といったテキストをクリックするとその記事に飛べるのは、この the_permalink() のおかげです。HTMLのリンクタグ（<a> タグ）と組み合わせて使うことが多いです。
実際の使い方:
- 例えば、次のようなコードを書くと記事のタイトルがリンクになり、クリックするとその記事ページに飛べます。<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
- <?php the_permalink(); ?> はリンク先のURLを、<?php the_title(); ?> は記事のタイトルを表示しています。

高校生向けにまとめると

`<?php echo get_template_directory_uri(); ?>`

WordPressのテーマファイルでテーマのフォルダのURL（ウェブ上のアドレス）を表示するためのコードです。簡単に言うと、サイトのデザインやレイアウトに使われている「テーマ」ファイルが保存されている場所のアドレスを取得して表示します。

このコードの意味と動作

テーマフォルダのURLを取得:
- get_template_directory_uri() は、今使っているテーマのフォルダのURLを取得します。例えば、サイトで「mytheme」というテーマを使っているなら、そのテーマがあるフォルダのURLを取得します。もしテーマのフォルダが https://example.com/wp-content/themes/mytheme/ だとしたら、そのURLを返します。
echo で表示
- echo は、取得したURLを実際にページ上に表示するための命令です。これを使うことで、テーマフォルダのURLがその場所に表示されます。
よく使う場面
- 画像やスタイルシート（CSSファイル）など、テーマに含まれているファイルの場所を指定するときに使います。たとえば、テーマの中にある画像を表示したい場合、次のように使います：phpコードをコピーする<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="ロゴ">
- このコードは、テーマフォルダの中の images フォルダにある logo.png という画像を表示します。

`get_template_part()`

WordPressでテーマのテンプレートファイルを分割して、再利用可能な部分を呼び出すための便利な関数です。この関数を使うことで、コードの繰り返しを減らし、サイトのメンテナンスやカスタマイズを簡単に行うことができます。

`get_template_part()` の基本的な役割

テンプレートの部品を読み込む:
- WordPressのテーマファイルを作成するとき、例えばヘッダー、フッター、記事の表示方法など、複数のページで同じコードを使うことが多いです。get_template_part() は、こうしたコードの繰り返しを避けるために、テンプレートの部品（パーツ）を別のファイルに分けて、それを呼び出すために使います。
再利用可能なパーツ:
- 例えば、ブログ記事のリストの表示方法を content.php というファイルにまとめておき、そのファイルを get_template_part() で呼び出します。これにより、複数のページで同じ記事表示のコードを使いたいときに、同じファイルを読み込むだけで済むようになります。
例:phpコードをコピーする<?php get_template_part('content'); ?>
- このコードは、テーマフォルダ内にある content.php というテンプレートファイルを読み込みます。例えば、記事のタイトルや内容を表示するためのテンプレートが content.php に書かれているなら、どのページでもこのファイルを使うことができます。
ファイル名にバリエーションをつける:
- get_template_part() には、条件によって違うファイルを読み込む機能もあります。たとえば、通常の投稿とカスタム投稿タイプで異なるレイアウトを使いたい場合、次のように使用できます。
phpコードをコピーする<?php get_template_part('content', 'single'); ?>
- この場合、content-single.php というファイルが読み込まれます。ファイル名の部分にオプションの引数をつけることで、特定の用途に合わせたテンプレートを呼び出せます。

個人的な疑問（エラー解決）

大前提

エラーは友達（）
エラーメッセージを読む
一見複雑に見えるエラーメッセージも分解していけば読み解けることがほとんど
検索エンジンで調べる（英語で検索するのおすすめ）
言語やライブラリのリファレンスを参照する
デバッグツールを使う
「～起動しない」「～が表示されない」「～対処法」「～解消方法」と言ったキーワードで検索

スペルミス・誤字脱字

よくあるスペルミス

全角スペースを使っていないか
セミコロン；が抜けていないか
（）が多くないか、少なくないか
そもそも該当ページに入力せず、違うページに入力している

階層ミス

セレクタの優先順位が低くないか

（参考：https://web-camp.io/magazine/archives/104350#st-toc-h-7）

キャッシュが残っていないか

（参考：https://web-camp.io/magazine/archives/104350#st-toc-h-9）

CSSファイルのパーミッションを確認する

ブラウザの拡張機能を無効にする

質問テンプレ

回答されやすい

（例）
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

【実現したいこと】

【わからないことや発生している問題】

エラーメッセージを記載する

【該当のソースコード】

スクリーンショット（画面イメージ）があれば添付する
エラーコードなどを正確に記載する
エラーが出たプログラムコードの必要な部分を抜粋し、掲載する

【試したことや調べたこと】

【詳細】

OSや開発環境、関連プログラムのバージョンを明記する

質問場所

納品前

テスト環境を構築

デベロッパーツールを用いて、レスポンシブ時を含めたクロスブラウザテスト

納品作業

FTPツールを使ってレンタルサーバーにファイルをアップロード

ドメインの契約方法

ドメインの契約サイト

https://www.onamae.com/service/domainregist/

`.htaccess`（ドットエイチティーアクセス）

.htaccess（ドットエイチティーアクセス）は、Apacheウェブサーバーで使用される設定ファイルです。これを使うことで、ディレクトリごとにサーバーの動作を変更したり、カスタマイズしたりすることができます。以下に、わかりやすく解説します。

基本的な役割

ディレクトリごとの設定： .htaccessファイルは、特定のディレクトリ内に置かれ、そのディレクトリとそのサブディレクトリに対して適用される設定を含みます。これにより、サイト全体ではなく、部分的な設定が可能です。
サーバーの動作のカスタマイズ： サーバーの設定（例えば、リダイレクトやアクセス制限）をカスタマイズするために使います。

WEBデザイン備忘録

HTML

覚えておきたいHTML

Font Awesomeのリンク

Google Fontsのリンク

& > div の意味

height: 300vh;

height: 300vh; の大きさ

具体的な例

1. ルート要素＆文書メタデータ

2. セクション

3. グルーピングコンテンツ

4. テキストレベルセマンティクス

5. 埋め込み型コンテンツ

6. 表データ

7. フォーム

8. インタラクティブ

9. スクリプティング

<span></span>

1. <span> って何？

2. 何のために使うの？

4. このコードがすることは？

5. ポイント

6. どんなときに便利？

CSS

レスポンシブデザインを実装できる

Transition/Animation（CSSアニメーション）

reset.css

flexboxが使える

float 要素を右または左へ寄せて配置

clear・・・ 要素の回り込み（float）を解除

一般的なCSSプロパティの記述順

1. 位置と表示

2. ボックスモデル

3. フォント・テキスト・文字色

「文字揃え・段落の振る舞い」

4. 背景と装飾

5. 外枠（ボーダー・アウトライン）

6. カラム・レイアウト関連

7. リスト（list）関連

8. 内容の挿入・置換

9. アニメーションとトランジション

10. 変形・トランスフォーム

11. その他のプロパティ

::before と ::after

1. ::before と ::after って何？

2. どうやって使うの？

4. このコードがすることは？

5. どんなときに便利？

6. 注意点

remとem

rem（ルート エム）

em（エム）

どちらを使うべきか？

transform-origin: top center;

どう使われるのか

イメージしやすい例

css.map とは？

どうして必要なのか？

イメージしやすい例

transform: rotateZ(90deg); の意味

具体的にはどうなるのか

イメージしやすい例

opacity: 0; の意味

perspective

1. transform-style: preserve-3d;

2. perspective: 300px;

使い方

コード例

どう見えるか？

重要なポイント

z-index

使い方のポイント

基本的な例

応用例

overflow

overflow: visible;（ビジブル）

overflow: hidden;（ヒドゥン）

overflow: scroll;（スクロール）

overflow: auto;（オート）

`& > div` の意味

`height: 300vh;`

`height: 300vh;` の大きさ

1. `<span>` って何？

`float` 要素を右または左へ寄せて配置

`clear`・・・要素の回り込み（float）を解除

`::before` と `::after`

`rem`と`em`

`rem`（ルートエム）

`em`（エム）

`transform-origin: top center;`

`css.map` とは？

`transform: rotateZ(90deg);` の意味

`opacity: 0;` の意味

`perspective`

1. `transform-style: preserve-3d;`

2. `perspective: 300px;`

`z-index`

`overflow: visible;`（ビジブル）

`overflow: hidden;`（ヒドゥン）

`overflow: scroll;`（スクロール）

`overflow: auto;`（オート）

`position: static;` （スタティック。あんまり使わない）

`position: relative;` （相対位置）

`position: absolute;` （絶対位置）

`position: fixed;` （固定位置）

`position: sticky;` （スティッキー）

`border`

`border`の書き方

`width`（幅）と `height`（高さ）

`auto` と `max-width` / `max-height`

1. `display: block;`

2. `display: inline;`

3. `display: inline-block;`

`display: inline-block;` とは？

じゃあ、`inline-block` って何？

4. `display: flex;`

5. `display: grid;`

6. `display: none;`

`justify-content`

`align-items`

`@keyframes`

`object-fit`

`object-fit`の値の説明

1. `@mixin` って何？

`@use`

どうして `@use` を使うの？

`@use` の使い方

ファイル`_colors.scss`

4. `@use` の特徴

5. なぜ `@import` じゃないの？

`addEventListener`

`removeEventListener`

`this`

`this`が何を指すかは状況による