Java
Java | 基礎文法：ステップ実行
Web
CSS CSS Tips | 超実務コアCSSテクニック：UIパーツ － ローディングスピナーCSSのみ
ローディングスピナーは「処理中だよ」とユーザーに安心感を伝える UIローディングスピナーは、 「今、裏側で処理しているから少し待ってね」 という状態を視覚的に伝えるための UI パーツです。CSSだけ...
CSS CSS Tips | 超実務コアCSSテクニック：UIパーツ － モーダルCSSのみ実装
モーダルは「画面の主役を一時的に切り替える」UIパーツモーダルは、ユーザーの視線と操作を一時的に“ひとつの領域”へ集中させるための UI です。 CSSだけで実装する場合は、 チェックボックス（または...
CSS CSS Tips | 超実務コアCSSテクニック：UIパーツ － ツールチップCSSのみ
ツールチップは「補足情報を、邪魔せず、そっと添える」UIパーツツールチップは、ボタンやアイコンの近くに ふわっと現れる説明文。 ユーザーの操作を邪魔せず、必要なときだけ情報を出すのが役割です。CSSだ...
CSS CSS Tips | 超実務コアCSSテクニック：UIパーツ － トグルスイッチCSSのみ
トグルスイッチは「ON/OFF を直感的に伝える」UIパーツチェックボックスやラジオボタンよりも、 トグルスイッチは “状態の変化が視覚的に分かりやすい” のが最大の強み。CSSだけで作る場合は、 非...
CSS CSS Tips | 超実務コアCSSテクニック：UIパーツ － ラジオボタンカスタム
ラジオボタンカスタムは「選択状態を“気持ちよく”伝える」UIテクニックラジオボタンは 「複数の中から1つだけ選ぶ」 という重要な役割を持つ UI パーツ。 だからこそ、選択状態がひと目で分かり、押しや...
CSS CSS Tips | 超実務コアCSSテクニック：UIパーツ － チェックボックスカスタム
チェックボックスカスタムは「見た目を変えても、意味はそのまま」にする UI テクニックチェックボックスはフォームの中でも“意味が強い”パーツなので、 見た目を変えても、チェックできる・外せる・状態が分...
CSS CSS Tips | 超実務コアCSSテクニック：UIパーツ － プレースホルダー装飾
プレースホルダー装飾は「入力前のガイド」を美しく・分かりやすくするテクニックプレースホルダー（placeholder）は、 「何を入力すればいいか」 を示す大事な UI の一部です。しかし、デフォルト...
CSS CSS Tips | 超実務コアCSSテクニック：UIパーツ － 入力フォームフォーカス装飾
入力フォームのフォーカス装飾は「入力しやすさ」と「安心感」を作る UI の要フォームはユーザーが“手を動かす場所”なので、 フォーカスした瞬間に 「ここに入力していいんだ」 と伝える視覚的サインが必要...
CSS CSS Tips | 超実務コアCSSテクニック：UIパーツ － 立体ボタン設計
立体ボタンは「影・光・奥行き」で“触れる質感”を作る UI テクニック平面的なボタンより、立体ボタンは 「押せそう」「触れそう」 という感覚を強く伝えます。 そのために必要なのは、 影（box-sha...
CSS CSS Tips | 超実務コアCSSテクニック：UIパーツ － ボタンホバーアニメ
ボタンホバーアニメは「クリック前のワクワク」をデザインするボタンって、ただ押せればいいパーツじゃなくて 「ここを押すと何かが始まる」という期待を伝える場所でもあります。ホバーアニメーションは、 その“...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － アクセシブル配色設計
アクセシブル配色設計は「誰にとっても読める・分かる色設計」のことおしゃれな配色と、アクセシブルな配色は別物です。アクセシブル配色設計は、「見えにくい人・色の区別がつきにくい人・小さい画面で見る人」も含...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － opacityと透明の違い
opacity と「透明色（rgba/transparent）」は“似ているようで全く違う”初心者が必ずつまずくポイントが opacity と rgba の透明度の違い です。どちらも「透明にする」よ...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － currentColor活用
currentColor は「その要素の文字色を再利用するためのキーワード」currentColor は、「この要素に今効いている color の値」を指す 特別な色キーワード です。一言でいうと、“...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － mix-blend-mode
mix-blend-mode は「下の色と“混ぜて描画する”」フォトショップ系テクニックmix-blend-mode は、要素の色を「そのまま上に乗せる」のではなく、下にある背景や要素の色と“合成して...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － filter応用
filter は「画像や要素に後からレタッチをかける」CSS版フォトショップfilter は、要素そのものにぼかし・明るさ・コントラスト・彩度・モノクロ・セピア…などの“画像加工フィルター” をかける...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － backdrop-filter
backdrop-filter は「要素の後ろにある背景だけをぼかす・加工する」魔法のようなプロパティ普通の filter は「要素そのもの」をぼかしますが、backdrop-filter は “要素...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － グラスモーフィズム
グラスモーフィズムは「背景をぼかした半透明カード」で“空気感”をデザインする技術ガラス越しに背景が見えるような、ふわっと透けて、光がにじむ UI 表現。それが「グラスモーフィズム（Glassmorph...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － グラデーションボーダー
グラデーションボーダーは「線そのものをデザインする」テクニックボーダーは本来「1色の線」ですが、グラデーションボーダーを使うと 枠そのものが装飾要素 になります。カード、ボタン、バッジ、セクションの囲...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － conic-gradient
conic-gradient は「円を中心に色が回転する」ちょっとトリッキーなグラデーションlinear-gradient が「線」、radial-gradient が「円の広がり」だとしたら、con...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － radial-gradient
radial-gradient は「光のにじみ・スポットライト」を作る背景テクニックlinear-gradient が「線」で色を変えるのに対して、radial-gradient は “円や楕円を中心...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － linear-gradient
linear-gradient は「色を滑らかにつなぐ」背景デザインの基本背景色をただ塗るだけではなく、色と色を自然につなげて“奥行き・光・立体感”を作る のが linear-gradient() で...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － rgba透明表現
rgba は「色に透明度を足す」ための最も基本で強力なテクニック背景色・ボタン・オーバーレイ・影・グラデーションなど、透明度を扱うデザイン では必ず使うのが rgba() です。初心者がつまずきやすい...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － prefers-color-scheme
prefers-color-scheme は「ユーザーの OS 設定に自動で合わせる」ための最強ダークモード技術ダークモード対応には「ユーザーがライト/ダークを選ぶ」「OS の設定に自動で合わせる」と...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － ダークモード対応
ダークモード対応は「色を切り替える」のではなく「テーマを切り替える」設計ダークモードは、単に背景を黒くするだけではありません。“ライトテーマ”と“ダークテーマ”という2つのテーマを切り替える設計 が本...
CSS CSS Tips | 超実務コアCSSテクニック：カラー・背景 － CSS変数（カスタムプロパティ）
CSS変数（カスタムプロパティ）は「色・余白・フォント」を“プロジェクト全体で統一”する最強の仕組みCSS変数（custom properties）は、「値に名前をつけて再利用できる」 という、デザイ...
C# バイブコーディングとセキュリティーについて
バイブコーディングの本質と現代開発における位置づけバイブコーディングとは、仕様や設計書に厳密に従うのではなく、直感や流れ、試行錯誤を重視してコードを書く開発スタイルである。とくにAIによるコード生成や...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － 見出しスケール設計
見出しスケール設計は「階層の意味 × 読みやすさ × デザインの一貫性」を作る技術見出し（H1〜H6）は、ただ大きさを変えるだけでは不十分です。階層の差が明確で、読みやすく、デザインとして美しいスケー...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － リンクデザイン設計
リンクデザインは「読みやすさ × 分かりやすさ × 美しさ」を同時に満たす設計リンクは UI の中で最も重要な要素のひとつ。どれがリンクか一瞬で分かること、読みやすく邪魔にならないこと、デザインとして...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-decoration応用
text-decoration は「線の種類・位置・色・太さ」を自由に操るプロパティリンクの下線だけでなく、強調・アクセント・装飾・UI 表現 まで幅広く使えるのが text-decoration の...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-align最適化
text-align は「文章の重心」を決めるプロパティ文章は“どこに揃えるか”だけで読みやすさや印象が大きく変わります。text-align を最適化すると、見出し・本文・UI ラベル・ボタン・カー...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － writing-mode
writing-mode は「文字の流れる方向」を変えるプロパティ横書き・縦書き・縦中横など、日本語特有のレイアウトにも対応できる強力な CSS 機能です。特に日本語サイトでは、縦書きの見出し・帯・サ...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － word-break制御
word-break は「単語のどこで折り返すか」をコントロールするプロパティテキストが枠からはみ出すとき、どこで折り返すか（または折り返さないか） を決めるのが word-break です。特に日本...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － white-space制御
white-space は「改行・空白・折り返し」をコントロールするタイポグラフィの基礎文章がどう折り返されるか、空白がどう扱われるかは 読みやすさ・レイアウトの安定性 に直結します。white-sp...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-overflow省略
text-overflow は「入りきらないテキストをどう見せるか」をコントロールするUI デザインでは、タイトル・カード・ボタン・リストなど、テキストが枠からはみ出す場面が必ず発生します。そのときに...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-transform活用
text-transform は「文字の見せ方を一瞬で変える」タイポグラフィのスイッチ大文字化・小文字化・単語の頭だけ大文字など、文章の“印象”を一瞬で変える強力なプロパティ が text-trans...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － letter-spacing最適化
letter-spacing（字間調整）は「読みやすさ」と「デザインの質」を決める重要パラメータ特に日本語は欧文よりも字面が大きく、フォントによっても見え方が大きく変わるため、適切な letter-s...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － clampで可変フォント
clamp() を使うと「画面幅に応じて自然に伸び縮みするフォントサイズ」が作れるしかも、最小値・理想値・最大値を 1 行でコントロールできるので、レスポンシブタイポグラフィの“最強ツール”と言ってい...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － remとemの使い分け
rem と em は「どこを基準にサイズが決まるか」が違うだけでも、この違いを理解すると タイポグラフィ設計が一気に安定 します。rem → ルート（html）のフォントサイズを基準にするem → そ...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － font-display制御
font-display は「Webフォントが読み込まれるまでの見え方」をコントロールする仕組みWebフォントは便利ですが、読み込みが遅いと文字が消える（FOIT） や 途中でフォントが切り替わる（F...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － Webフォント読み込み戦略
Webフォント読み込み戦略は「速さ・見え方・安定性」を同時に満たすための設計Webフォントはデザインの質を上げる強力な武器ですが、読み込みが遅いと 文字が一瞬消える（FOIT）、または 途中でフォント...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － フォントスタック設計
フォントスタック設計は「どの環境でも破綻しない文字の見え方」を作る技術フォントスタック（font-family の並び順）は、「ユーザーの環境にフォントが無いとき、どのフォントにフォールバックするか」...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － z-index設計
z-index は「どのレイヤーが手前に来るか」を決める番号z-index は、要素の「前後関係（レイヤーの順番）」を数字でコントロールするためのプロパティです。値が大きいほど手前、小さいほど奥に表示...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － position: sticky
position: sticky は「スクロールにくっつく、途中まで普通の要素」position: sticky は「最初は普通に流れの中にいるけど、ある位置までスクロールされたら、そこからは固定され...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － position: fixed
position: fixed は「画面に貼り付けて、スクロールしても動かさない」position: fixed は、要素を「画面（ビューポート）」に固定するためのプロパティです。スクロールしても、そ...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － position: absolute
position: absolute は「レイアウトの流れから抜けて、好きな場所に貼り付ける」position: absolute は、普通の要素と違って「文書の流れ（通常フロー）」から外れます。その...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － position: relative
position: relative は「その場にいながら、ちょっとだけズラす＆基準点になる」ものposition: relative は、ざっくり言うと普段どおりその場所に配置されるそこから top...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － レスポンシブカラム
レスポンシブカラムのゴールをまずイメージするレスポンシブカラムは、ざっくり言うとこういう動きです。スマホ：1カラム（縦一列）タブレット：2カラムPC：3〜4カラム「画面幅に応じてカラム数が変わるカード...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － 固定＋可変レイアウト
「固定＋可変レイアウト」とは何かをまずイメージで掴む固定＋可変レイアウトは、片方（または一部）の幅を「固定」、残りを「可変」にするレイアウトです。代表的な例はこうです。左：サイドバー 240px 固定...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － repeat関数
repeat 関数を理解すると「同じパターンのカラム・行」が一瞬で書けるrepeat() は CSS Grid 専用の関数で、「同じ定義を何回も書くのを省略するためのショートカット」 です。grid-...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － auto-fill / auto-fit
auto-fill / auto-fit を理解すると「カードが自動で詰まるグリッド」が作れるGrid の auto-fill と auto-fit は、「画面幅に応じてカードの数を自動で増減させたい...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － grid-template-areas
grid-template-areas を使うと「レイアウトの設計図」をそのまま CSS に書けるGrid の中でも grid-template-areas は、複雑なレイアウトを“文字で描く”ように...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － Grid 3カラム
Grid 3カラムを理解すると「カード一覧・3分割レイアウト」が一気に楽になる3カラムレイアウトは、カード一覧、サービス紹介、ブログ一覧などでめちゃくちゃよく使います。Flexbox でも組めますが、...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － Grid 2カラム
Grid 2カラムを理解すると「左右にきれいに分けるレイアウト」が一瞬で作れるCSS Grid の 2 カラムレイアウトは、「左に画像・右にテキスト」「左にラベル・右に入力欄」「2カラムのカード一覧」...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － gapプロパティ
gap を理解すると「要素間の余白管理」が一気にシンプルになるgap は、Flexbox や Grid で 「要素同士の間隔」だけをまとめて管理できるプロパティです。今まで margin-right ...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － flex-basis戦略
flex-basis を理解すると「初期幅の戦略」が一気に上手くなるflex-basis は Flexbox の中でも、「要素が最初にどれくらいの幅を取るか」を決めるプロパティです。flex-grow...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － flex-shrink制御
flex-shrink を理解すると「狭くなったときの振る舞い」をコントロールできるflex-shrink は、コンテナが狭くなったときに「どの要素をどれだけ縮めるか」を決めるプロパティです。flex...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － flex-grow活用
flex-grow を理解すると「余った幅の配分」が思い通りになるflex-grow は、Flexbox の中でも 「余ったスペースをどの子要素にどれだけ渡すか」 を決めるプロパティです。「このボック...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － align-items全パターン
align-items を理解すると「縦方向の揃え」が一気に気持ちよくなるalign-items は Flexbox の中で、「交差軸（メイン軸と直角の方向）の揃え方」を決めるプロパティです。横並びな...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － justify-content全パターン
justify-content を理解すると「横方向の配置」が思い通りになるjustify-content は Flexbox の中でも、「子要素を横方向にどう並べるか」を決める超重要プロパティです。...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － Flexbox縦並び
Flexbox 縦並びを理解すると「縦方向レイアウト」が一気に整理されるFlexbox は横並びだけじゃなく、縦方向のレイアウト（縦積み・上下の余白調整・フッターを下に押し下げる）にもめちゃくちゃ強い...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － Flexbox横並び
Flexbox 横並びを理解すると「並べる・揃える・余白を配る」が一気に楽になる横並びレイアウトは、ナビメニュー、カード一覧、ボタンの並びなど、どのサイトでも必ず出てきます。Flexbox を使うと、...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － 複数背景指定
複数背景指定を理解すると「1つの要素に何層ものデザイン」を重ねられるCSS の 複数背景指定（multiple backgrounds） は、1つの要素に 複数の背景画像・グラデーション・パターンを重...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － background-clip:text
background-clip:text を理解すると「文字にグラデーションを流し込む」表現ができるbackground-clip: text は、CSS の中でも“映えるデザイン”を作るための強力な...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － 背景クリッピング
background-clip（背景クリッピング）を理解すると「背景の見え方」を自在にコントロールできる背景クリッピング（background-clip）は、背景色や背景画像を“どこまで表示するか”を...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － outline活用
outline を使いこなすと「枠線とは違う強調」ができるoutline は border と似ていますが、ボックスモデルの外側に描画される“外枠”です。フォームのフォーカスリング、アクセシビリティ対...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － box-shadowパターン
box-shadow パターンを理解すると「立体感・奥行き・質感」が一気にプロレベルになるbox-shadow は、ただの影ではありません。UI の雰囲気・奥行き・軽さ・重さ・浮遊感をコントロールする...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － border-radius応用
border-radius 応用を理解すると「角のデザイン」で一気にプロっぽくなるborder-radius は「角を丸くする」だけじゃなく、カード・バッジ・吹き出し・ピル型ボタン・円形サムネイルなど...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － borderの省略記法
border の省略記法を理解すると「短く・正確に・読みやすく」書けるborder は CSS の中でも使用頻度が高いプロパティですが、省略記法（ショートハンド）を理解するとコード量が減り、意図が明確...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － line-heightセンタリング
line-height を使ったセンタリングは「テキストを縦方向に揃える」ための最もシンプルな方法line-height は本来「行の高さ」を決めるプロパティですが、単一行のテキストを縦方向に中央揃え...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － vertical-align
vertical-align を理解すると「インライン要素のズレ」が自在にコントロールできるvertical-align は名前だけ見ると「縦方向の中央揃え」に使えそうですが、実際は インライン要素・...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － object-position
object-position を理解すると「どこを切り取るか」をコントロールできるobject-position は、object-fit とセットで使うと真価を発揮するプロパティです。一言でいうと...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － object-fit
object-fit を理解すると「画像・動画が枠にきれいに収まる」デザインが作れるobject-fit は、画像や動画を「どのように枠に収めるか」をコントロールするプロパティです。縦横比がバラバラな...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － aspect-ratio活用
アスペクト比（aspect-ratio）を理解すると「どんな画面でも崩れない」レイアウトが作れるaspect-ratio は、ボックスモデルの中でも 画像・カード・動画枠・サムネイルなど、縦横比を固定...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － min-height / max-height
min-height / max-height を理解すると「高さが安定した UI」が作れるmin-height / max-height は、ボックスモデルの中でも 高さの伸び縮みをコントロールする...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － min-width / max-width
min-width / max-width を理解すると「伸び縮みするレイアウト」が自在に扱えるmin-width / max-width は、ボックスモデルの中でも レスポンシブ設計の核になるプロパ...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － overflow-x / y分離
overflow-x / overflow-y を分離してコントロールすると「横だけスクロール」「縦だけ切り取り」が自在になるoverflow は「要素の中身がはみ出したときの扱い」を決めますが、ov...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － overflow制御
overflow の仕組みを理解すると「はみ出し」「スクロール」「切り抜き」が自在に扱えるoverflow は 「要素の中身が、要素のサイズを超えたときどう扱うか」 を決めるプロパティです。ボックスモ...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － display:block / inline / inline-block
display:block / inline / inline-block を“動きの違いから理解する”display は 要素がどのように並び、どれだけの幅・高さを持つかを決める CSS の根本的な...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － paddingと高さの関係
padding と高さの関係を“正しく理解するとレイアウトが安定する”padding は「内側の余白」ですが、高さ（height）とどう関係するかを理解していないと、要素が思ったより大きくなったり、逆...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － margin相殺の理解
margin 相殺（マージンの重なり）を“直感で理解できるようにする”margin 相殺は、CSS のボックスモデルの中でも初心者が最もつまずきやすいポイントです。「なぜ margin が効かないの？...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － スコープ分離設計
box-sizing: border-box を“理解するとレイアウトが一気に安定する”box-sizing: border-box は、CSS レイアウトの中でも 最重要級のプロパティです。初心者が...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － スコープ分離設計
スコープ分離設計を“理解すると CSS が劇的に壊れにくくなる”スコープ分離とは、「スタイルが意図しない場所に影響しないように、適用範囲（スコープ）を明確に区切る設計」のことです。初心者がここを理解す...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － セレクタのネスト戦略
セレクタのネスト戦略を“構造から理解して、破綻しない CSS を書く”セレクタのネスト（入れ子構造）は、CSS 設計の中でも 「読みやすさ」と「保守性」を大きく左右する重要テーマ」です。初心者がここを...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － カスタムデータ属性設計
カスタムデータ属性（data-*）を“設計レベルで使いこなす”カスタムデータ属性（data-*）は、HTML 要素に 独自の意味や状態を持たせるための仕組みです。JavaScript との連携で使われ...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － contentの活用
疑似要素 content を“正しく・自在に使いこなす”ための実践ガイドcontent は、疑似要素 ::before と ::after を使うときに欠かせないプロパティです。初心者がここを理解する...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似要素 ::after
疑似要素 ::after を“自在に扱えるようになる”ための実践ガイド::after は、::before と並んで HTML を増やさずに装飾を追加できる最強の CSS テクニックです。名前の通り「...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似要素 ::before
疑似要素 ::before を“ちゃんと味方にする”::before は、「本物の要素の前に、もう1つ“見た目だけの要素”を生やす」ための仕組みです。HTML を増やさずに、アイコン・線・ラベル・装飾...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － グルーピングセレクタ
グルーピングセレクタを“正しく・効率的に”使いこなすグルーピングセレクタは、CSS の中でも 「複数のセレクタに同じスタイルをまとめて適用する」 とても便利な書き方です。初心者がここを理解すると、CS...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － !importantを使わない設計
!important を使わない CSS 設計を“根本から理解する”!important は CSS の中でも 最強の上書き手段ですが、便利な反面、使いすぎると CSS が壊滅的に管理しづらくなるとい...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － セレクタの詳細度管理
セレクタの詳細度（Specificity）を“感覚で理解する”ための実践ガイドCSS の詳細度（specificity）は、「どのスタイルが勝つか」 を決める CSS のルールです。初心者がここを理解...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 複数クラス指定
複数クラス指定を“正しく・美しく”使いこなす複数クラス指定は、CSS の中でも 最も頻繁に使う基本テクニックです。しかし、初心者ほど「どう組み合わせればいいのか」「どんな意味があるのか」で迷いがち。こ...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － :not の活用
:not() を“自在に使いこなす”ための実践ガイド:not() は CSS の中でも 「特定の要素だけ除外してスタイルを当てる」 という、非常に強力で柔軟な疑似クラスです。初心者がここを理解すると、...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － :nth-child の実践パターン
:nth-child を“自在に使いこなす”ための実践パターン集:nth-child() は CSS の中でも 「繰り返し要素をパターンで選択できる」 とても強力な疑似クラスです。初心者がここを理解す...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － :first-child と :last-child
:first-child と :last-child を“構造から理解する”:first-child と :last-child は、CSS の中でも 「並びの中で一番最初／最後の要素だけにスタイルを...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似クラス :active
疑似クラス :active を“気持ちよく理解する”:active は、ユーザーが 「クリックして押している瞬間」 を表す疑似クラスです。ボタンやリンクを押したときに、少し沈んだり色が変わったりする“...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似クラス :focus
疑似クラス :focus を“直感的に理解する”:focus は、フォーム入力やボタン操作など ユーザーが「今まさに触っている要素」 を示す疑似クラスです。特にアクセシビリティ（キーボード操作のしやす...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似クラス :hover
疑似クラス :hover を“気持ちよく使いこなす”ための基礎と実践:hover は CSS の中でも特に「動き」を感じられる楽しいセレクタです。マウスカーソルを乗せたときにスタイルを変えるための疑似...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 属性セレクタ活用
属性セレクタを“使いこなす”ための基礎と実践属性セレクタは、HTMLタグが持つ属性（class・id 以外も含む）を条件にしてスタイルを当てる方法です。初心者が理解すると CSS の表現力が一気に広が...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 子孫セレクタと直下セレクタ
子孫セレクタと直下セレクタを“本質から”理解するCSSの中でも、初心者がつまずきやすいのが 子孫セレクタ（スペース） と 直下セレクタ（>） の違いです。この2つを正しく理解すると、HTML構造を意識...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － クラスとIDの適切な設計
クラスとIDの適切な設計を“本質から”理解するクラス（.）とID（#）は、CSSの中でも特に「設計の質」が出る部分です。初心者のうちにここをしっかり押さえておくと、後々のCSSが劇的に書きやすくなりま...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 要素セレクタの使い分け
CSSの基本文法をざっくりつかむCSSは「どの要素に」「どんな見た目を」適用するかを書く言語です。セレクタ { プロパティ: 値; プロパティ: 値;}セレクタ { プロパティ: 値; プロパティ: ...
JavaScript decimal.js を使った「誤差ゼロ金額電卓」
機能概要単価・数量・税率を入力「計算する」ボタンで合計金額を表示decimal.js を使うため誤差ゼロ（0.1 + 0.2 問題なし）ダークモード切り替えボタン付きスマホ対応レスポンシブデザイン S...
JavaScript 配列メソッド 実践アプリ（HTML + JS）
配列メソッド実践アプリ（sort / splice / flat / find など） を ブラウザ上で自動採点できる練習ページ（HTML + JS） として作成します。配列メソッド 実践アプリ（HT...
JavaScript 無料で使えるAPI（2025年版）
無料で使える汎用API 一覧（2025年版）分野API名無料プラン概要主な用途登録要否備考🌦️ 天気OpenWeatherMap API月1,000回リクエスト無料現在・予報・過去の天気データ要登録（...
CSS 「いまさら聞けないSCSSとSASSの違い」完全初心者向け完全ガイド
いまさら聞けないSCSSとSASSの違い（結論から）結論から言うと、SCSSとSASSは同じ「Sass」というCSS拡張言語の記法違いです。SCSS：CSSに近い書き方（主流）SASS：インデントベー...
Web 脱Adobe | フォトショ・イラレ・プレミアの無料「最強代替ツール」4選
結論：Photoshop・Illustrator・Premiere Proの無料「最強代替ツール」は以下の4つです👇GIMP（画像編集：Photoshop代替）Inkscape（ベクター編集：Illu...
Web WebサイトとWebアプリとWebサービスの違い
Webサイトとは何か（まず一番シンプルな概念）Webサイトは「情報を見るための場所」です。インターネット上に公開されているページの集まりで、基本的にはユーザーは“閲覧する”ことが目的になります。例えば...
Web WordPress Tips | セキュリティ：外部APIキーの置き場所を wp-config に移動
そもそも「外部APIキー」とは何かまず前提をそろえましょう。外部APIキーというのは、Google MapsreCAPTCHA外部メールサービス（SendGrid など）決済サービス各種外部APIとい...
Web WordPress Tips | セキュリティ：投稿者権限の最小化
「投稿者権限の最小化」とは何をすることかまず言葉をほぐします。「投稿者権限の最小化」とは、“記事を書く人に、本当に必要な権限だけを与えて、それ以上は持たせないようにすること”です。WordPress ...
Web WordPress Tips | セキュリティ：管理者権限を乱用しない
「管理者権限を乱用しない」とはどういうことかWordPress でいう「管理者権限（Administrator）」は、サイトのほぼすべてを操作できる、いわば「神モード」です。テーマやプラグインのインス...
Web WordPress Tips | セキュリティ：プラグイン脆弱性の監視
なぜ「プラグイン脆弱性の監視」が超重要なのかまず一番大事なことから。WordPress サイトが乗っ取られる原因のかなり大きな割合は、「プラグインの脆弱性」です。理由はシンプルで、プラグインは機能が豊...
Web WordPress Tips | セキュリティ：ログイン通知を受信
「ログイン通知を受信する」とは何をしているのかまずイメージからいきましょう。「ログイン通知」とは、誰かがあなたの WordPress アカウントにログインしたときに、メールなどで知らせてもらう仕組みで...
Web WordPress Tips | セキュリティ：使用中テーマの脆弱性情報を定期チェック
なぜ「テーマの脆弱性情報」を定期チェックする必要があるのかまず一番大事な前提から。WordPress のセキュリティ事故のかなりの割合は、「WordPress 本体」ではなく「テーマやプラグイン」の脆...
Web WordPress Tips | セキュリティ：ブラウザキャッシュのセキュリティ対応
ブラウザキャッシュの「セキュリティ対応」とは何をすることかまず前提から整理します。ブラウザキャッシュ自体は「表示を速くするための仕組み」です。しかし、扱うページの内容によっては“セキュリティリスク”に...
Web WordPress Tips | セキュリティ：Content-Security-Policy 設定
Content-Security-Policy（CSP）は「サイトに読み込んでよいものを“ホワイトリスト化”する最強の防御壁」まず、CSP を一言でまとめると、「このページでは、どのスクリプト・画像・...
Web WordPress Tips | セキュリティ：X-XSS-Protection 設定
X-XSS-Protection は「ブラウザ側の簡易XSSフィルターのスイッチ」まず、X-XSS-Protection をざっくり一言でいうと、「ブラウザに備わっている“簡易的なXSSフィルター”を...
Web WordPress Tips | セキュリティ：X-Frame-Options 設定
X-Frame-Options は「フレームに入れていいかどうか」を決めるスイッチまず、X-Frame-Options を一言でいうと、「このページを、他のサイトの <iframe> や <frame...
Web WordPress Tips | セキュリティ：Mixed Content の修正
Mixed Content ってそもそも何？SSL を有効化してサイトを https:// で表示できるようにしても、ブラウザのアドレスバーに「保護されていません」「一部のみ安全」みたいな警告が出るこ...
Web WordPress Tips | セキュリティ：SSLを有効化
「SSLを有効化する」とは何をしているのかまず言葉をほぐします。「SSLを有効化する」というのは、ざっくり言うと、サイトのURLをhttp:// ではなく https:// で動かすようにするそのため...
Web WordPress Tips | セキュリティ：reCAPTCHA の利用
reCAPTCHA は「人間かボットかを見分けるフィルター」まず、reCAPTCHA を一言でいうと、「この操作をしているのは、本物の人間か？ それともボットか？」をチェックするためのフィルターです。...
Web WordPress Tips | セキュリティ：セキュリティプラグイン導入
セキュリティプラグインって、ざっくり何をしてくれるのかまずイメージからいきましょう。「セキュリティプラグイン」は、WordPress にとっての・見張り役（監視）・門番（ブロック）・健康診断（スキャン...
Web WordPress Tips | セキュリティ：ファイル変更監視を設定
「ファイル変更監視」って何をする仕組み？まずイメージからいきましょう。ファイル変更監視とは、ざっくり言うと、「サーバー上のファイルが、いつ・どこで・どう変わったかを記録し、怪しい変更があれば気づけるよ...
Web WordPress Tips | セキュリティ：ウイルススキャンを定期実施
なぜ WordPress に「ウイルススキャン」が必要なのかまず前提として、ここでいう「ウイルススキャン」は、PC に入れるウイルス対策ソフトと同じ発想を、サーバー上の WordPress ファイルや...
Web WordPress Tips | セキュリティ：不正ログインログを定期確認
なぜ「不正ログインログの定期確認」がセキュリティ対策になるのかまず大事な前提から。セキュリティは「設定して終わり」ではなく、「ちゃんと見続ける」ことで強くなります。強力なパスワード2段階認証ログイン試...
Web WordPress Tips | セキュリティ：REST API の匿名アクセス制限
REST APIって何をしているのかをイメージしようWordPress の REST API は、「ブラウザ以外のもの（アプリ・ツール・スクリプト）が、WordPress と会話するための窓口」です。...
Web WordPress Tips | セキュリティ：XML-RPCのアクセス制御
XML-RPCってそもそも何者？まず「XML-RPCって何？」からいきましょう。WordPress のルートにある xmlrpc.php というファイル、見たことありますよね。これはざっくり言うと、外...
Web WordPress Tips | セキュリティ：コアファイル書き込み権限の制限
「コアファイル書き込み権限の制限」とは何をすることかまず言葉をほぐします。ここでいう「コアファイル」は、WordPress 本体のファイルのことです。wp-admin/wp-includes/ルート直...
Web WordPress Tips | セキュリティ：WordPress バージョン情報を隠す
なぜ「WordPress バージョン情報を隠す」とセキュリティが上がるのかまず前提として、WordPress はデフォルトの状態だと「自分のバージョン番号」をけっこうあちこちでベラベラしゃべります。ペ...
Web WordPress Tips | セキュリティ：.htaccess で管理URLへのIP制限
管理URLへのIP制限って、ざっくり言うと何をするのか「.htaccess で管理URLへのIP制限」というのは、WordPress の管理画面（例：/wp-admin/ や /wp-login.ph...
Web WordPress Tips | セキュリティ：ディレクトリインデックスの無効化
ディレクトリインデックスってそもそも何？まず「ディレクトリインデックス」という言葉を、イメージでつかみましょう。ブラウザで、こんなURLを開いたとします。本来なら、ここには「index.php」や「i...
Web WordPress Tips | セキュリティ：データベース接頭辞を変更
データベース接頭辞ってそもそも何？WordPress は、記事やユーザー情報を「データベースのテーブル」に保存しています。そのテーブル名の先頭についているのが「データベース接頭辞（テーブルプレフィック...
Web WordPress Tips | セキュリティ：wp-config.php を保護
wp-config.php が「WordPress で一番大事なファイル」である理由まず前提から整理します。wp-config.php は、WordPress の「心臓部の設定ファイル」です。データベ...
Web WordPress Tips | セキュリティ：プラグインのコード編集を無効化
なぜ「プラグインのコード編集」を止めることがセキュリティになるのかWordPress には、管理画面から直接プラグインの PHP ファイルを編集できる機能があります。プラグイン → プラグインファイル...
Web WordPress Tips | セキュリティ：使わないプラグイン削除
なぜ「使わないプラグイン削除」がセキュリティ対策になるのかテーマのときと同じで、プラグインも中身はすべて PHP コードです。そして重要なのは、「有効化していなくても、サーバー上にファイルがある限り“...
Web WordPress Tips | セキュリティ：使わないテーマ削除
なぜ「使わないテーマ」を消すことがセキュリティになるのかWordPress のテーマは、「見た目を変えるためのテンプレート」ですが、中身は普通に PHP コードです。つまり、有効化していないテーマでも...
Web WordPress Tips | セキュリティ：強力なパスワードを必須化
なぜ「強力なパスワードを必須化」しないと危ないのかWordPress のセキュリティで、一番最初に守るべき場所は「ログイン画面」です。ここが破られたら、記事の改ざん、マルウェア設置、ユーザー追加など、...
Web WordPress Tips | セキュリティ：ログイン試行回数制限を導入
「ログイン試行回数制限」って何をする仕組みかまずイメージからいきましょう。ログイン画面で、ユーザー名とパスワードを何度も間違えると、こうなりますよね。「一定回数間違えたので、しばらくログインできません...
Web WordPress Tips | 基本設定：ログインURL変更
なぜ WordPress の「ログインURL変更」を考えるのかWordPress のログインページは、初期状態だとほぼ必ず/wp-login.phpまたは/wp-admin/です。つまり、世界中の誰で...
Web WordPress Tips | 基本設定：2段階認証の利用
2段階認証ってそもそも何か2段階認証（2FA / 二要素認証）は、「ログインするときに“もう1つ”確認を挟む仕組み」です。今までは、ユーザー名（またはメールアドレス）パスワードこの2つだけでログインし...
Web WordPress Tips | 基本設定：投稿スラッグを英語で統一
そもそも「スラッグ」とは何かWordPress でいう「スラッグ」は、投稿や固定ページの URL の“最後の部分”にあたる文字列です。例えば、こんな感じです。この wordpress-tips の部分...
Web WordPress Tips | 基本設定：メディアライブラリの年/月フォルダを整理
「年/月フォルダ」って何をしている設定なのかWordPress で画像やPDFをアップロードすると、サーバーの中では/wp-content/uploads/2016/02/のように、「年/月」ごとのフ...
Web WordPress Tips | 基本設定：フッターテキストを整理
なぜ「フッターテキスト」を整理するだけでサイトが締まるのかフッターは、ページの一番下にある細長いエリアです。「おまけ」のように見えますが、実はサイト全体の“締め”を担当している、とても重要な場所です。...
Web WordPress Tips | 基本設定：メニューの表示順序管理
なぜ「メニューの表示順序」をちゃんと決めるべきなのかナビゲーションメニューは、ユーザーがサイトの中を移動するときの「地図」です。どのページを一番左（＝一番目立つ位置）に置くか、どれを右側に追いやるかで...
Web WordPress Tips | 基本設定：投稿フォーマットは使わないなら非表示
投稿フォーマットってそもそも何かWordPress の「投稿フォーマット」は、同じ「投稿」でも“種類”を分けて見せ方を変えるための仕組みです。標準だと、例えばこんな種類があります。標準（standar...
Web WordPress Tips | 基本設定：タグ濫用を避けるため方針を決める
まず「タグは何のためにあるか」を言語化しようタグは、WordPress で記事に「キーワードラベル」を付ける仕組みです。カテゴリが「大きな分類（本棚）」だとしたら、タグは「本に貼る付箋・キーワード」の...
Web WordPress Tips | 基本設定：日付アーカイブを無効化
日付アーカイブってそもそも何かWordPress には「日付アーカイブ」という仕組みがあります。/2015/01/ や /2015/01/15/ のような URL で、その年月・その日付に公開された記...
Web WordPress Tips | 基本設定：日付アーカイブを無効化
日付アーカイブってそもそも何かWordPress には「日付アーカイブ」という仕組みがあります。/2024/01/ や /2024/01/15/ のような URL で、その年月・その日付に公開された記...
Web WordPress Tips | 基本設定：著者アーカイブを無効（必要ない場合）
著者アーカイブってそもそも何かWordPress には「著者アーカイブ」という仕組みがあります。/author/ユーザー名/ のような URL で、そのユーザーが書いた記事だけを一覧表示するページのこ...
Web WordPress Tips | 基本設定：カテゴリ「未分類」をリネーム
なぜ「未分類」をそのままにしてはいけないのかWordPress をインストールすると、最初から「未分類」というカテゴリが 1 つだけ用意されています。そして、カテゴリを何も選ばずに投稿すると、その記事...
Web WordPress Tips | 基本設定：サンプル投稿・サンプルコメントを削除
なぜ「サンプル投稿・サンプルコメント」を真っ先に消すべきなのかWordPress をインストールした直後、必ず入っているのが「Hello world!」というサンプル投稿と、その下に付いているサンプル...
Web WordPress Tips | 基本設定：自動更新の通知設定
「自動更新」と「通知」は別物だと理解するまず整理したいのは、WordPress には「自動更新」と「自動更新されたことを知らせる通知」という、二つのレイヤーがあるということです。自動更新WordPre...
Web WordPress Tips | 基本設定：自動保存の間隔を調整
自動保存は「命綱」だけど、デフォルトがベストとは限らないWordPress の「自動保存」は、投稿画面で記事を書いているときに、一定間隔ごとに下書き状態を自動で保存してくれる仕組みです。ブラウザが落ち...
Web WordPress Tips | 基本設定：投稿リビジョン数を制限
投稿リビジョンとは何かWordPress の「投稿リビジョン」は、記事を更新するたびに自動保存される「過去バージョンの履歴」です。1 回保存するごとに、その時点の本文・タイトル・カスタムフィールドなど...
Web WordPress Tips | 基本設定：REST API を制限する
REST API は何をしているのかWordPress の REST API は、「/wp-json/〜」という URL で、サイトのデータにアクセスしたり操作したりできる仕組みです。記事一覧を JS...
Web WordPress Tips | 基本設定：XML-RPC を不要なら無効化
XML-RPC は何をする機能なのかXML-RPC は、WordPress が「外部アプリからのリモート操作」を受け付けるための古いインターフェースです。xmlrpc.php というファイルに対して、...
Web WordPress Tips | 基本設定：サイトヘルスを定期チェック
サイトヘルスとは何を教えてくれる機能かWordPress の「サイトヘルス」は、その名の通り「このサイトはいま健康か？どこか具合が悪いところはないか？」を自動でチェックしてくれる診断ツールです。PHP...
Web WordPress Tips | 基本設定：サイトの言語パックを定期更新
言語パックってそもそも何者かWordPress の「言語パック」は、管理画面やテーマ・プラグインの「日本語表示」を実現している“翻訳データのセット”です。メニュー名、ボタンのラベル、エラーメッセージ、...
Web WordPress Tips | 基本設定：アップロード上限サイズを確認
アップロード上限サイズとは何かWordPress の「アップロード上限サイズ」は、「1 回のアップロードでサーバーに送れるファイルの最大サイズ」を意味します。画像、PDF、動画、ZIP など、メディア...
Web WordPress Tips | 基本設定：メディアサイズを必要最小限に調整
「メディアサイズ設定」は何を決めるところかWordPress の「設定 → メディア」には、画像サイズを決める項目があります。ここで設定するのは、「画像をアップロードしたときに、自動で何パターンのサイ...
Web WordPress Tips | 基本設定：ピンバックを無効化
ピンバックとは何かをまず整理しようWordPress の「ピンバック」は、一言でいうと「ブログ同士の自動リンク通知」です。あなたの記事から別の WordPress サイトの記事にリンクを貼ると、その相...
Web WordPress Tips | 基本設定：コメント機能を不要なら停止
コメント機能は「インタラクションの窓口」だけど義務ではないWordPress のコメント機能は、本来「読者と対話するための窓口」です。記事の下にあるコメントフォームから、質問や感想、フィードバックを受...
Web WordPress Tips | 基本設定：ニックネームを変更して投稿者名を安全に設定
「ニックネーム」と「投稿者名」は何が違うのかWordPress には「ログインユーザー名」とは別に、「ニックネーム」「ブログ上の表示名（投稿者名）」という概念があります。ここをちゃんと理解しておくと、...
Web WordPress Tips | 基本設定：タイムゾーンを正しい国に設定
タイムゾーン設定とは何を決めるものかWordPress の「設定 → 一般」にあるタイムゾーンは、「このサイトは、どこの国・地域の時間を基準に動くか」を決める設定です。記事の公開日時、予約投稿の時刻、...
Web WordPress Tips | 基本設定：週の始まりを業務に合わせて変更
「週の始まり」設定は何を変えるものかWordPress の「設定 → 一般」にある「週の始まり」は、その名の通り「カレンダー上でどの曜日を一週間のスタートとみなすか」を決める項目です。管理画面の投稿一...
Web WordPress Tips | 基本設定：メールアドレスに管理者用の共有しないアドレスを設定
一般設定の「メールアドレス」は何者かWordPress の「設定 → 一般」にあるメールアドレスは、単なる連絡先ではなく「サイト管理者のための公式窓口」です。ここに設定したアドレス宛てに、WordPr...
Web WordPress Tips | 基本設定：サイトアドレス(URL)とWordPressアドレス(URL)を一致させる
サイトアドレス(URL)とWordPressアドレス(URL)とは何かWordPressの「設定 → 一般」には「WordPress アドレス (URL)」と「サイトアドレス (URL)」という、よく...
Web WordPress Tips | 基本設定：パーマリンク設定を「投稿名」に変更
パーマリンク設定とは何かをまず整理しようパーマリンクは、記事ごとに割り当てられる「ページの住所（URL）」のことです。例えば というURLなら、ドメインの後ろの hello-world の部分が、その...
Web WordPress Tips | 基本設定：一般設定でサイトタイトルとキャッチフレーズを最適化
一般設定の「サイトタイトル」と「キャッチフレーズ」とは何かWordPressの「一般設定」にある「サイトのタイトル」と「キャッチフレーズ」は、ブログやサイトの“名札”と“ひとこと自己紹介”のようなもの...
Web WordPress | WordPressの投稿時にアイキャッチ画像を自動設定する方法（YouTube対応）
以下は WordPressの投稿時にアイキャッチ画像を自動設定する方法（YouTube対応） です。通常投稿＋YouTube動画URLが含まれる場合に自動でサムネイルを取得する実務向け構成で説明します...
PHP WordPress | 「投稿日（公開日）」を基準にして期間を区切って記事一覧を表示する方法
例えば「今週の記事一覧」「2014年10月の記事一覧」「2014年11月1日〜11月10日の記事一覧」といった形です。方法1: WP_Query で日付範囲を指定するfunctions.php やテン...
PHP WordPress | 記事の公開日付や更新日付を取得する方法
WordPress では記事の 公開日付 や 更新日付 をテンプレートタグで簡単に取得できます。テーマの投稿ループ内でよく使われる方法を整理します。公開日付を取得する方法1. 出力する（echo）<?...
PHP WordPress | 記事を抜粋表示する関数the_excerpt()の使い方とカスタマイズ
まとめthe_excerpt() は WordPress の投稿本文を短く要約して表示するための関数です。記事一覧やアーカイブページでよく使われ、抜粋文字数や末尾の「」などをカスタマイズできます。th...
Web Web | レスポンシブデザインで右側に謎の空白ができたときの解決策
右側に謎の空白ができる原因は「要素が画面幅をオーバーしている」ことがほとんどです。解決策は、幅指定・余白・overflow設定を見直すことです。主な原因と解決策1. 要素の幅が100%を超えている原因...
Web HTMLで使える特殊文字の一覧表と文字コード
公式の完全一覧（HTML5 の named character references） は WHATWG の仕様に掲載されています（ページ中に全ての名前、対応 Unicode コードポイント、表示例が...