- 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
text-decoration
・・・ 文字列に装飾線や点滅text-indent
・・・ 文章のインデント幅letter-spacing
・・・ 文字間隔line-height
・・・ 行の高さ
レスポンシブデザインを実装できる
Transition/Animation(CSSアニメーション)
reset.css
destyle.css
1. ボックスモデルと境界線のリセット
*,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
min-width: 0;
}
全ての要素(*
)と疑似要素(::before
、::after
)に対して、ボックスモデルのサイズ計算をborder-box
に設定し、要素の枠線が幅に含まれるようにしています。加えて、デフォルトの境界線を「なし」に設定しています。
2.ドキュメント設定
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
line-height: 1.15;
→ 全てのブラウザで統一された行間を設定しています。-webkit-text-size-adjust: 100%;
→ iOSの画面回転時に自動的にフォントサイズが変更されるのを防ぎます。-webkit-tap-highlight-color: transparent;
→ iOSデバイスでリンクをタップした際のグレーのハイライトを無効化します。
3.要素のマージンをリセット
body {
margin: 0;
}
4.見出しのフォントと余白をリセット
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}
5.リストのスタイルをリセット
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
順序付きリスト(ol
)と順序なしリスト(ul
)のデフォルトの余白やインデント、リストのマーカー(list-style
)をリセットしています。
6.リンクやテキストのデフォルトスタイルをリセット
a {
background-color: transparent;
text-decoration: none;
color: inherit;
}
リンク(a
タグ)の背景色や下線をリセットし、親要素のカラー設定を引き継ぐようにしています。
7.テキストレベルの装飾
b,
strong {
font-weight: bolder;
}
b
やstrong
タグで囲まれたテキストのフォントウェイトを「より太く(bolder)」します。
8.インラインコードのフォント
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: inherit;
}
9.小さな文字サイズ
small {
font-size: 80%;
}
small
タグを使用した場合、文字サイズを通常の80%に設定しています。
10.上付き文字・下付き文字
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
sub
(下付き文字)とsup
(上付き文字)のデフォルトのフォントサイズと位置を調整し、親要素との行間を崩さないように設定しています。
CDN
CDNで読み込むとは、「コンテンツデリバリーネットワーク(Content Delivery Network, CDN)」を通じてファイルをウェブページに読み込むことを指します。CDNは、世界中に分散されたサーバー群を利用して、ユーザーがアクセスする際に最も近いサーバーからコンテンツ(例えば、CSSやJavaScriptなどのファイル)を配信する仕組みです。
CDNを使って読み込む具体例
例えば、CSSライブラリ「destyle.css」をCDNから読み込む場合、HTMLファイルの<head>
タグ内に以下のように書きます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.css">
CDNで読み込むとは、「コンテンツデリバリーネットワーク(Content Delivery Network, CDN)」を通じてファイルをウェブページに読み込むことを指します。CDNは、世界中に分散されたサーバー群を利用して、ユーザーがアクセスする際に最も近いサーバーからコンテンツ(例えば、CSSやJavaScriptなどのファイル)を配信する仕組みです。
CDNで読み込むメリット
- 高速化: ユーザーに最も近いサーバーからファイルが提供されるため、読み込み速度が速くなります。
- 信頼性の向上: 世界中に複数のサーバーが存在するため、特定のサーバーがダウンしても他のサーバーからコンテンツが配信され、安定性が増します。
- サーバー負荷の軽減: 自分のウェブサーバーではなく、CDN上のサーバーからファイルが配信されるため、自分のサーバーにかかる負荷を減らすことができます。
- キャッシュ: 多くのユーザーが同じCDNを使用している場合、既に他のサイトで使用したファイルがキャッシュされていることがあり、再度ダウンロードする必要がなくなります。
CDNを使って読み込む具体例
例えば、CSSライブラリ「destyle.css」をCDNから読み込む場合、HTMLファイルの<head>
タグ内に以下のように書きます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.css">
これにより、destyle.css
が自分のサーバーからではなく、CDN(この場合はjsDelivr)から読み込まれることになります。
CDNを使うと、特定のライブラリやフレームワークを簡単にインターネット上で共有されている最新のバージョンから素早く読み込むことができます。
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
プロパティは、ウェブページの要素をどこに表示するかをコントロールするためのものです。
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記法が主流となっている)
@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://unpkg.com/swiper@8/swiper-bundle.min.css
は、CSSファイルをCDN(Content Delivery Network)から読み込むURLです。このURLには以下の意味があります。
https://unpkg.com/
:unpkg
は、CDNサービスの一種で、NPM(Node Package Manager)に登録されているパッケージをインターネット上で簡単に配布できるようにするサービスです。これにより、NPMパッケージをインストールすることなく、URLから直接読み込んで使うことができます。
swiper@8
:- これは「Swiper」というライブラリのバージョンを指定しています。
@8
はバージョン8のパッケージを指しており、特定のバージョンのSwiperを利用するために書かれています。 - Swiperは、レスポンシブでタッチ対応のスライダー(カルーセル)ライブラリで、ウェブサイトにスライドショーやカルーセルを簡単に実装するために使用されます。
- これは「Swiper」というライブラリのバージョンを指定しています。
swiper-bundle.min.css
:- これは、Swiperのスタイルシート(CSSファイル)の名前です。
swiper-bundle
は、Swiperの全機能をまとめたCSSファイルであることを示しています。 min.css
は、このファイルが「minified(縮小版)」であることを示しています。これは、スペースや改行、不要なコメントが削除された、ファイルサイズを小さくしたバージョンで、読み込み速度を改善するために使われます。
- これは、Swiperのスタイルシート(CSSファイル)の名前です。
<script>
const swiper = new Swiper(".swiper", {
// Optional parameters
loop: true,
// If we need pagination
pagination: {
el: ".swiper-pagination",
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>
このスクリプトは、人気のあるスライダーライブラリ「Swiper.js」を使って、スライドショー機能を設定するためのコードです。以下は各部分の説明です。
1. const swiper = new Swiper(".swiper", { ... });
Swiper
クラスの新しいインスタンスを作成し、swiper
という変数に格納しています。.swiper
は、スライダー要素を指定するクラスセレクターです。このクラスが付与されたHTML要素に対してスライダー機能を適用します。
2. loop: true,
- スライドが最後まで到達したら、最初のスライドに自動的に戻るループ機能を有効にしています。
true
は「有効」を意味します。
3. pagination: { el: ".swiper-pagination" },
- スライダーにページネーション(インジケーターのようなもの)を追加します。
el
でページネーションを表示する要素のクラス(.swiper-pagination
)を指定しています。
4.navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
- スライダーのナビゲーションボタン(次へ、前へ)を設定しています。
nextEl
で「次のスライド」ボタン、prevEl
で「前のスライド」ボタンの要素を指定します。それぞれのボタンに.swiper-button-next
および.swiper-button-prev
というクラスが付与されている必要があります。
全体の動作
このコードは、指定されたHTMLの要素に対してスライドショー機能を実装します。スライドはループし、ページネーションとナビゲーションボタンが使用可能です。
その他疑問
.swiper-button-prev__origin{
position:absolute;
top: 0;
bottom: 0; /* 追加 */
left: 20px; /* 追加 */
margin-top: auto; /* 追加 */
margin-bottom: auto; /* 追加 */
z-index: 10;
width: 60px;
height: 60px;
}
このスタイル定義では、.swiper-button-prev__origin
という要素の位置やサイズ、中央揃えの方法が指定されています。それぞれのプロパティがどのように作用しているかを詳しく解説します。
1. position: absolute;
- 要素を絶対配置にします。これにより、通常のドキュメントフローから外れ、親要素(
position: relative;
などで位置指定された要素)に対して位置が指定されます。
2. top: 0;
と bottom: 0;
top: 0;
とbottom: 0;
によって、この要素は上下の両端にぴったりくっつくように配置されます。要素の高さはその親要素に依存するため、親の高さに応じて要素が上下に引き伸ばされることはありません。- これによって、要素は上下の位置を0に固定されるため、要素の高さに関係なく、上下のマージンが均等になる準備が整います。
3. margin-top: auto;
と margin-bottom: auto;
top: 0;
とbottom: 0;
を設定した状態で、margin-top: auto;
とmargin-bottom: auto;
を追加することで、要素を親要素の上下中央に配置します。auto
を使うことで、余白が自動的に計算され、上下の空きスペースが均等に割り振られます。その結果、要素が上下中央に揃います。
4. width: 60px;
と height: 60px;
- 要素の幅と高さをそれぞれ60pxに固定します。この指定がなければ、要素のコンテンツに応じてサイズが変動してしまう可能性があります。具体的には、ナビゲーションボタンの大きさを均一に保ち、クリックしやすくするために、この固定サイズが役立ちます。
結果としての効果
- この設定により、
.swiper-button-prev__origin
という要素は、親要素の上下中央に配置され、60px四方の正方形として表示されます。 position: absolute;
により自由に配置できる状態にし、top
とbottom
を0にすることで上下いっぱいに配置される準備をし、margin-top: auto;
とmargin-bottom: auto;
で要素を中央揃えにしています。
この配置は、スライドのナビゲーションボタンが常に上下中央に来て、一定のサイズで見やすく操作しやすい位置に保たれることを意図しています。
.swiper-slide-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.swiper-slide-image
に対して top: 0;
や bottom: 0;
などの位置指定をしない理由は、以下の点にあります。
1. width: 100%
と height: 100%
の指定が目的に合っているため
- このスタイルでは、スライド内の画像がスライド領域全体にフィットするように
width: 100%;
とheight: 100%;
を指定しています。width: 100%;
により、画像の幅が親要素(スライド)の幅に合わせられます。height: 100%;
により、画像の高さも親要素(スライド)の高さに合わせられます。
- このため、スライド全体を画像が占有する形で表示されるため、画像を上下や左右に揃えるための
top
やbottom
の指定は不要です。
2. object-fit: contain;
の効果
object-fit: contain;
は、画像の縦横比を保ちながら、画像全体が親要素内に収まるように配置されます。- これにより、画像が親要素の枠内で中央に収まり、縮小されて表示されます。親要素が長方形でも正方形でも、画像全体が見える形で表示されます。
top
やbottom
を指定する必要がないのは、このobject-fit
の指定によって、画像が自動的に縦横の位置を調整してくれるためです。
3. 画像自体の配置に関係がないため
- 画像はスライド全体を占めるように指定されているため、CSSで上下や左右の位置を細かく調整する必要がありません。
top
やbottom
などは、主に 絶対配置 (position: absolute;
) などで使われることが多く、要素を特定の場所に固定する目的で使用します。- しかし、ここではスライド内に画像がフルサイズで表示されることを目指しているので、こうした位置指定は不要です。
結論
.swiper-slide-image
は画像をスライド全体にうまく収めるためのスタイル設定です。画像自体の縦横比を保ちながら親要素内に収めるため、top
やbottom
などの位置指定をする必要がなく、サイズ指定とobject-fit: contain;
で適切に中央揃えや拡大縮小が自動的に行われるためです。
タブメニュー
モーダルウィンドウ
ドロップダウンメニュー
スクロールアニメーション
スムーススクロール
アコーディオンメニュー
サイトのナビゲーションとは?
サイトのナビゲーションとは、ウェブサイトの中で、訪問者が目的のページや情報にスムーズにたどり着けるように手助けする案内システムです。リンクやボタンを使って、ページ間を移動する道しるべのような役割を果たします。
ナビゲーションの例:
- 上のメニューや横のメニューにある「ホーム」「ブログ」「お問い合わせ」などのリンク。
- 記事の終わりにある「次へ」や「前へ」といったリンク。
グローバルナビゲーションとの違い
グローバルナビゲーションとは、サイト全体で共通して表示されるナビゲーションメニューです。サイト内のどのページにいても同じメニューが表示されるので、サイトのどこからでも主要なページに簡単にアクセスできます。
グローバルナビゲーションの特徴:
- 全ページ共通: サイトのどのページを開いても同じメニューが表示される。
- 主なページにアクセス: ホーム、サービス、会社情報、ブログ、コンタクトなど、サイトの重要なページがリンクされている。
- 通常ヘッダーに表示: グローバルナビゲーションは、ページの上部(ヘッダー)に配置されていることが多い。
グローバルナビゲーションの例:
サイトの上部に表示されている「ホーム」「サービス」「お問い合わせ」などのリンクを含むメニュー。どのページにいても、このメニューを使って他のページにすぐ移動できる。
違いを簡単に説明すると:
グローバルナビゲーション: サイト全体に共通して表示され、常に同じメニューがある主要なリンクの集まり
サイトのナビゲーション: ページの移動を助ける案内システム全般。
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
メニュー
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>';
}
}
?>
get_post_type()
get_post_type()
は、WordPressで使用される関数で、現在表示している投稿またはページの「投稿タイプ」(post type)を取得するために使います。
ordPressにはいくつかのデフォルトの投稿タイプがあり、たとえば以下のようなものがあります:
post
(投稿)page
(固定ページ)attachment
(メディアファイル)revision
(リビジョン)nav_menu_item
(メニューアイテム)
また、カスタム投稿タイプを定義することも可能です。
get_post_type()
を使うと、表示中のコンテンツがどの投稿タイプに属しているかを確認できます。この関数を使う場面として、特定の投稿タイプに対して異なる処理を行いたい場合や、条件分岐を使いたい場合などが考えられます。
if ( get_post_type() == 'post' ) {
// 通常の投稿の場合の処理
echo 'これは投稿です';
} elseif ( get_post_type() == 'page' ) {
// 固定ページの場合の処理
echo 'これは固定ページです';
} else {
// その他の投稿タイプの場合の処理
echo 'これはカスタム投稿タイプです';
}
この例では、表示中のコンテンツが「投稿」か「固定ページ」か、それともそれ以外のカスタム投稿タイプかを条件分岐で判定し、それに応じてメッセージを表示しています。
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のテーマテンプレートファイルの一つで、「固定ページ」を表示するために使われるテンプレートです。固定ページは、ブログ記事とは異なり、主に静的なコンテンツ(例: 「会社概要」「お問い合わせ」「プライバシーポリシー」など)を表示するためのページです。
show_in_rest
設定すると、WordPressの投稿タイプがブロックエディター(Gutenberg)で編集できるようになるのは、ブロックエディター自体がWordPress REST APIをベースに構築されているためです。
詳細な理由:
- ブロックエディター(Gutenberg)とREST APIの関係: ブロックエディターは、WordPress 5.0以降の標準エディターで、各コンテンツのブロックがREST APIを介してデータのやり取りを行います。つまり、ブロックエディターで操作されるデータ(タイトル、コンテンツ、メタデータなど)は、REST APIを通じて送受信されます。
show_in_rest
の役割:show_in_rest
をtrue
に設定すると、カスタム投稿タイプやカスタムフィールドなどがREST APIに対応します。ブロックエディターは、このREST APIを利用して投稿タイプやタクソノミー、カスタムフィールドのデータを処理するため、show_in_rest
が有効化されていないと、ブロックエディターで操作できません。- クラシックエディターとの違い: クラシックエディターは、REST APIを使用せずに投稿データを処理しているため、
show_in_rest
の設定がなくても動作します。しかし、ブロックエディターは完全にREST APIに依存しているため、APIに公開されていない投稿タイプやカスタムフィールドはブロックエディターで扱えません。
function create_custom_post_type() {
register_post_type('custom_post', array(
'label' => 'Custom Post',
'public' => true,
'show_in_rest' => true, // REST API に表示する設定
'supports' => array('title', 'editor', 'custom-fields'),
));
}
add_action('init', 'create_custom_post_type');
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
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のカテゴリ、タグ、著者、日付などのアーカイブページを表示するための汎用テンプレートで、特定のアーカイブタイプに専用テンプレートがない場合に使用されます。
<?php the_archive_title(); ?>
は、WordPressのテンプレートタグの一つで、アーカイブページのタイトルを表示するために使われます。
アーカイブページとは?
アーカイブページとは、特定の条件に基づいて投稿の一覧を表示するページです。例えば:
- カテゴリーアーカイブ:特定のカテゴリーに属する投稿の一覧ページ
- タグアーカイブ:特定のタグに属する投稿の一覧ページ
- 著者アーカイブ:特定の著者が書いた投稿の一覧ページ
- 日付アーカイブ:特定の日付や月、年に投稿された記事の一覧ページ
the_archive_title()
の役割
the_archive_title()
は、これらアーカイブページに応じた適切なタイトルを自動的に生成し、ページに表示するためのテンプレートタグです。例えば:
- カテゴリーアーカイブページの場合:
- “カテゴリー: カテゴリー名”
- タグアーカイブページの場合:
- “タグ: タグ名”
- 著者アーカイブページの場合:
- “著者: 著者名”
- 日付アーカイブページの場合:
- “年: 2024” や “月: 2024年9月” など
home.php
home.php
は、WordPressテーマのテンプレートファイルの一つで、主に「ブログ投稿一覧ページ」を表示するために使用されるテンプレートです。ブログのトップページとして設定されている場合に利用され、最新の記事一覧を表示する役割を担います。
- ブログ投稿一覧ページの表示:
home.php
は、最新のブログ記事一覧を表示するページ用のテンプレートです。例えば、ブログのホームページとして最新記事を表示したいときにこのテンプレートが使われます。 - テンプレート階層での位置づけ:
- WordPressではトップページ用にまず
front-page.php
を探します。 front-page.php
が存在しない場合、次にhome.php
が使われます。home.php
がない場合は、最も基本的なテンプレートであるindex.php
がフォールバックとして使用されます。
- WordPressではトップページ用にまず
- フロントページとブログページの違い:
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
が使用されます。 - これにより、特定のタクソノミーごとに異なるテンプレートを持たない場合でも、すべてのカスタムタクソノミーアーカイブページを共通のデザインで表示できます。
- WordPressのテンプレート階層では、特定のタクソノミーの専用テンプレート(例:
- カテゴリやタグとは異なる使い方:
- 標準のカテゴリやタグのアーカイブページには、それぞれ
category.php
やtag.php
という専用のテンプレートがあります。 taxonomy.php
は、これらとは別にユーザーが作成したカスタムタクソノミー専用のアーカイブページを表示するために使われます。
- 標準のカテゴリやタグのアーカイブページには、それぞれ
- 表示内容のカスタマイズ:
taxonomy.php
をカスタマイズすることで、カスタムタクソノミーのアーカイブページのレイアウトや表示スタイルを自由に変更できます。例えば、各投稿のタイトルやサマリー、サムネイル画像など、一覧ページに表示する内容を設定できます。 - 汎用性:
taxonomy.php
は、カスタムタクソノミーごとの専用テンプレートがない場合に使用されるため、サイト全体で一貫したデザインを提供するのに役立ちます。
まとめると、taxonomy.php
はWordPressのカスタムタクソノミーアーカイブページを表示するための汎用テンプレートで、特定のタクソノミーに属する投稿の一覧ページをカスタマイズして表示する際に使用されます。
taxonomy-{taxonomy}-{term}.php
WordPress のテーマテンプレートファイルの命名規則の一部で、特定の タクソノミー(分類)と ターム(分類内の項目)のアーカイブページを表示するためのテンプレートファイルです。
それぞれの要素の意味
taxonomy
:- これはテンプレートファイル名の固定部分で、タクソノミーのアーカイブページ用のテンプレートであることを示しています。
{taxonomy}
:- ここには、特定のタクソノミー名が入ります。例えば、カスタムタクソノミーで「ジャンル(genre)」を作成した場合、この部分には
genre
が入ります。
- ここには、特定のタクソノミー名が入ります。例えば、カスタムタクソノミーで「ジャンル(genre)」を作成した場合、この部分には
{term}
:- ここには、そのタクソノミーの特定のターム名(カテゴリやタグのような要素)が入ります。例えば、「ジャンル」タクソノミーの中に「映画」というタームがある場合、
term
の部分にはmovie
が入ります。
- ここには、そのタクソノミーの特定のターム名(カテゴリやタグのような要素)が入ります。例えば、「ジャンル」タクソノミーの中に「映画」というタームがある場合、
例
もし、「ジャンル(genre)」というカスタムタクソノミーがあり、その中に「映画(movie)」というタームがあるとします。この場合、WordPress のテーマフォルダに次のテンプレートファイルを作成することで、「映画」というタームに紐づいたアーカイブページをカスタマイズできます。
テンプレート階層
WordPress のテンプレート階層に従い、次の順番でテンプレートファイルが読み込まれます。つまり、特定のテンプレートファイルが存在しない場合、より汎用的なテンプレートが使われます。
- taxonomy-genre-movie.php: 特定のタクソノミー(genre)かつターム(movie)専用
- taxonomy-genre.php: 特定のタクソノミー(genre)専用
- taxonomy.php: 全タクソノミー共通
- archive.php: アーカイブ全般共通
- index.php: 最後のデフォルトテンプレート
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
がフォールバックとして使用されます。
- WordPressのテンプレート階層では、特定のメディアタイプに対する専用テンプレート(例:
- メディアタイプに応じたテンプレートの使い分け:
- 画像用 →
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
が使用されます。
- WordPressのテンプレート階層では、特定の投稿タイプ用に
- デフォルトテンプレート:
- 特定のカスタム投稿タイプ用のテンプレートがない場合、
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>
セクションに必要な情報を簡単に管理できます。
- SEOのためのメタタグや、Google Analyticsのトラッキングコード、その他の重要なスクリプトなどもこの関数を通じて追加されます。これにより、テーマの
- 注意点:
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が表示されます。
- このコードを使うと、記事やページのURLが表示されます。例えば、あるブログ記事のURLが
- リンク先を示すためのコード:
- Webページで、記事タイトルや「続きを読む」といったテキストをクリックするとその記事に飛べるのは、この
the_permalink()
のおかげです。HTMLのリンクタグ(<a>
タグ)と組み合わせて使うことが多いです。
- Webページで、記事タイトルや「続きを読む」といったテキストをクリックするとその記事に飛べるのは、この
- 実際の使い方:
- 例えば、次のようなコードを書くと、記事のタイトルがリンクになり、クリックするとその記事ページに飛べます。phpコードをコピーする
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
- ここで
<?php the_permalink(); ?>
はリンク先のURLを、<?php the_title(); ?>
は記事のタイトルを表示しています。
- 例えば、次のようなコードを書くと、記事のタイトルがリンクになり、クリックするとその記事ページに飛べます。phpコードをコピーする
- なぜ使うのか?:
- 記事やページにアクセスできるリンクを自動で生成するため、手作業でリンクを作る必要がなくなり、効率よくサイトを作ることができます。
高校生向けにまとめると
<?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
という画像を表示します。
- 画像やスタイルシート(CSSファイル)など、テーマに含まれているファイルの場所を指定するときに使います。たとえば、テーマの中にある画像を表示したい場合、次のように使います:phpコードをコピーする
- なぜ使うのか?:
- サイトに表示される画像やスタイルシートなどを正しい場所から読み込むために使います。これにより、テーマのフォルダの場所が変わったとしてもコードを変更する必要がなく、サイト全体で一貫した管理ができます。
高校生向けにまとめると
<?php echo get_template_directory_uri(); ?>
は、WordPressで使っているテーマファイルのフォルダのURL(アドレス)を表示するためのコードです。このURLを使うことで、テーマに含まれている画像やスタイルシートなどを正しい場所から表示できるようにします。
get_template_part()
は、WordPressでテーマのテンプレートファイルを分割して、再利用可能な部分を呼び出すための便利な関数です。この関数を使うことで、コードの繰り返しを減らし、サイトのメンテナンスやカスタマイズを簡単に行うことができます。
get_template_part()
の基本的な役割
- テンプレートの部品を読み込む:
- WordPressのテーマファイルを作成するとき、例えばヘッダー、フッター、記事の表示方法など、複数のページで同じコードを使うことが多いです。
get_template_part()
は、こうしたコードの繰り返しを避けるために、テンプレートの部品(パーツ)を別のファイルに分けて、それを呼び出すために使います。
- WordPressのテーマファイルを作成するとき、例えばヘッダー、フッター、記事の表示方法など、複数のページで同じコードを使うことが多いです。
- 再利用可能なパーツ:
- 例えば、ブログ記事のリストの表示方法を
content.php
というファイルにまとめておき、そのファイルをget_template_part()
で呼び出します。これにより、複数のページで同じ記事表示のコードを使いたいときに、同じファイルを読み込むだけで済むようになります。
- 例えば、ブログ記事のリストの表示方法を
- 例:phpコードをコピーする
<?php get_template_part('content'); ?>
- このコードは、テーマフォルダ内にある
content.php
というテンプレートファイルを読み込みます。例えば、記事のタイトルや内容を表示するためのテンプレートがcontent.php
に書かれているなら、どのページでもこのファイルを使うことができます。
- このコードは、テーマフォルダ内にある
- ファイル名にバリエーションをつける:
get_template_part()
には、条件によって違うファイルを読み込む機能もあります。たとえば、通常の投稿とカスタム投稿タイプで異なるレイアウトを使いたい場合、次のように使用できます。
<?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のテーマファイル内で使用する関数で、テーマの <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>
セクションに必要な情報を簡単に管理できます。
- SEOのためのメタタグや、Google Analyticsのトラッキングコード、その他の重要なスクリプトなどもこの関数を通じて追加されます。これにより、テーマの
- 注意点:
wp_head()
を忘れると、プラグインやテーマが正しく動作しない場合があります。特に、JavaScriptやCSSの追加、SEOメタタグの挿入などが行われなくなります。
<?php wp_head(); ?>
</body>直前
<?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(); ?>
投稿の本文出力
<?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 管理画面に「商品」という新しい投稿タイプが追加され、通常の投稿と同じように商品情報を管理できるようになります。
カスタム投稿タイプの設定にはさらに多くのオプションがあります。例えば、アイコンの設定、サポートする機能(タイトル、エディタ、サムネイルなど)の指定、パーマリンク構造の設定などが可能です。これらについてさらに詳しく知りたい場合は、お知らせください。
register_taxonomy
このコードは、WordPressでカスタムタクソノミー(分類)を登録するためのものです。register_taxonomy
関数を使って、genre
という名前のタクソノミーを item
というカスタム投稿タイプに追加しています。以下にそれぞれのパラメーターの意味を詳しく説明します。
1. register_taxonomy('genre', 'item', [...])
'genre'
:- これは新しいタクソノミーの識別子です。この識別子は、データベースやテーマ内でタクソノミーを参照する際に使います。
'item'
:- この部分は、タクソノミーを適用する投稿タイプを指定しています。この例では、
item
というカスタム投稿タイプにgenre
というタクソノミーが紐付けられています。これにより、item
投稿に対して「商品ジャンル」の分類を設定できるようになります。
- この部分は、タクソノミーを適用する投稿タイプを指定しています。この例では、
2. [ 'label' => '商品ジャンル', 'hierarchical' => true, 'show_in_rest' => true ]
この部分は、タクソノミーのオプションを設定しています。
'label' => '商品ジャンル'
:- 管理画面やテーマ上で表示されるタクソノミーの名前を設定しています。ここでは「商品ジャンル」として表示されます。
'hierarchical' => true
:- 階層構造を持つかどうかを指定します。
true
に設定されているので、このタクソノミーはカテゴリのように親子関係を持つことができます。例えば、親ジャンル「食品」の下に子ジャンル「スナック菓子」「飲み物」などを作ることが可能です。 - もし
false
に設定されていた場合、タグのようにフラットな構造になります。
- 階層構造を持つかどうかを指定します。
'show_in_rest' => true
:- この設定は、REST APIに対応させるかどうかを指定します。
true
に設定されていることで、genre
タクソノミーはWordPressのREST APIを通じて利用可能になり、ブロックエディター(Gutenberg)でも編集や操作ができるようになります。 - また、外部アプリケーションやAPIリクエストを通じて、
genre
タクソノミーに関連するデータを取得・操作できます。
- この設定は、REST APIに対応させるかどうかを指定します。
get_the_terms
<?php $terms = get_the_terms(get_the_ID(), 'genre'); ?>
<?php if($terms): ?>
<ul>
<?php foreach ($terms as $term): ?>
<li><a href="<?php echo get_term_link($term); ?>"?php echo esc_html($term->name); ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
このコードは、WordPressの投稿に関連付けられた特定のタクソノミー(genre
)のターム(分類項目)を取得し、それをリスト形式で表示するためのものです。以下に、コードの各部分が何をしているのか、わかりやすく解説します。
1. タクソノミーのタームを取得する部分
<?php $terms = get_the_terms(get_the_ID(), 'genre'); ?>
<?php if($terms): ?>
get_the_terms()
:
- この関数は、特定の投稿に関連付けられたタクソノミーのターム(分類項目)を取得します。
get_the_ID()
は現在の投稿のIDを取得します。'genre'
は、取得するタクソノミー(この場合は、カスタムタクソノミーのgenre
)の名前です。- 結果として、現在の投稿に関連付けられた「genre」タクソノミーのタームが
$terms
という変数に配列として保存されます。
if($terms)
:
$terms
にタームが存在する(つまり、投稿に関連付けられたタクソノミーのタームがある)場合のみ、次の処理が実行されます。- もし
$terms
が空(タームがない場合)だと、この部分のコードは実行されません。
2. タームをリスト表示する部分
<ul>
<?php foreach ($terms as $term): ?>
<li><a href="<?php echo get_term_link($term); ?>"><?php echo esc_html($term->name); ?></a></li>
<?php endforeach; ?>
</ul>
foreach ($terms as $term)
:
$terms
配列内の各タームに対して、1つずつ処理を行います。$term
は、各タームのオブジェクトを表します。
<li><a href="<?php echo get_term_link($term); ?>">
:
get_term_link($term)
: 各タームのリンクURLを生成します。これを<a>
タグのhref
属性に挿入し、そのタームのアーカイブページへのリンクが生成されます。
<?php echo esc_html($term->name); ?>
:
$term->name
は、タームの名前(例えば「アクション映画」など)を取得します。esc_html()
: HTML特殊文字をエスケープして、安全に出力します。
この部分は、各ターム名をリンク付きでリスト表示するためのコードです。
4. 結果としての表示
もしこのコードが実行された場合、例えば投稿に「アクション映画」「コメディ映画」という2つのタームが関連付けられていると、次のようなHTMLが出力されます
<ul>
<li><a href="https://example.com/genre/action-movie">アクション映画</a></li>
<li><a href="https://example.com/genre/comedy-movie">コメディ映画</a></li>
</ul>
サムネイル出力(アイキャッチ画像を表示する)
<?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を使って、画像の情報を取得したり操作することができるようになります。
- $id: ここでは、そのアイキャッチ画像のIDを変数
$img = wp_get_attachment_image_src($id);
wp_get_attachment_image_src($id)
: この関数は、指定したID(ここでは$id
に入っているアイキャッチ画像のID)に基づいて、その画像のURLやサイズ(幅・高さ)などの情報を配列として返す関数です。- $img: 返される情報を配列として
$img
という変数に保存しています。この配列には以下のような情報が含まれます。- 画像のURL
- 画像の幅
- 画像の高さ
- $img: 返される情報を配列として
$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
の方がより特定の用途に使われます。
まとめると、single.php
はWordPressの投稿タイプ「post」の個別ページを表示するためのテンプレートで、ブログ記事のレイアウトやスタイルをカスタマイズしたい場合に使用します。
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(); ?>
は、WordPressで記事やページのリンク(URL)を表示するためのコードです。このリンクは、各記事やページの「固定リンク」(パーマリンク)と呼ばれるもので、クリックするとその記事やページに移動できます。
<?php the_permalink(); ?>
- 記事やページへのリンクを表示:
- このコードを使うと、記事やページのURLが表示されます。例えば、あるブログ記事のURLが
https://example.com/2024/09/13/sample-post
だとすると、そのURLが表示されます。
- このコードを使うと、記事やページのURLが表示されます。例えば、あるブログ記事のURLが
- リンク先を示すためのコード
- Webページで、記事タイトルや「続きを読む」といったテキストをクリックするとその記事に飛べるのは、この
the_permalink()
のおかげです。HTMLのリンクタグ(<a>
タグ)と組み合わせて使うことが多いです。
- Webページで、記事タイトルや「続きを読む」といったテキストをクリックするとその記事に飛べるのは、この
- 実際の使い方:
- 例えば、次のようなコードを書くと記事のタイトルがリンクになり、クリックするとその記事ページに飛べます。
<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
という画像を表示します。
- 画像やスタイルシート(CSSファイル)など、テーマに含まれているファイルの場所を指定するときに使います。たとえば、テーマの中にある画像を表示したい場合、次のように使います:phpコードをコピーする
get_template_part()
WordPressでテーマのテンプレートファイルを分割して、再利用可能な部分を呼び出すための便利な関数です。この関数を使うことで、コードの繰り返しを減らし、サイトのメンテナンスやカスタマイズを簡単に行うことができます。
get_template_part()
の基本的な役割
- テンプレートの部品を読み込む:
- WordPressのテーマファイルを作成するとき、例えばヘッダー、フッター、記事の表示方法など、複数のページで同じコードを使うことが多いです。
get_template_part()
は、こうしたコードの繰り返しを避けるために、テンプレートの部品(パーツ)を別のファイルに分けて、それを呼び出すために使います。
- WordPressのテーマファイルを作成するとき、例えばヘッダー、フッター、記事の表示方法など、複数のページで同じコードを使うことが多いです。
- 再利用可能なパーツ:
- 例えば、ブログ記事のリストの表示方法を
content.php
というファイルにまとめておき、そのファイルをget_template_part()
で呼び出します。これにより、複数のページで同じ記事表示のコードを使いたいときに、同じファイルを読み込むだけで済むようになります。
- 例えば、ブログ記事のリストの表示方法を
- 例:phpコードをコピーする
<?php get_template_part('content'); ?>
- このコードは、テーマフォルダ内にある
content.php
というテンプレートファイルを読み込みます。例えば、記事のタイトルや内容を表示するためのテンプレートがcontent.php
に書かれているなら、どのページでもこのファイルを使うことができます。
- このコードは、テーマフォルダ内にある
- ファイル名にバリエーションをつける:
get_template_part()
には、条件によって違うファイルを読み込む機能もあります。たとえば、通常の投稿とカスタム投稿タイプで異なるレイアウトを使いたい場合、次のように使用できます。
<?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ツールを使ってレンタルサーバーにファイルをアップロード
ドメインの契約方法
.htaccess
(ドットエイチティーアクセス)
.htaccess
(ドットエイチティーアクセス)は、Apacheウェブサーバーで使用される設定ファイルです。これを使うことで、ディレクトリごとにサーバーの動作を変更したり、カスタマイズしたりすることができます。以下に、わかりやすく解説します。
基本的な役割
- ディレクトリごとの設定:
.htaccess
ファイルは、特定のディレクトリ内に置かれ、そのディレクトリとそのサブディレクトリに対して適用される設定を含みます。これにより、サイト全体ではなく、部分的な設定が可能です。 - サーバーの動作のカスタマイズ: サーバーの設定(例えば、リダイレクトやアクセス制限)をカスタマイズするために使います。