解説記事
ツールの使い方、技術の解説、開発で役立つTips——自分が「これ、知っておくと便利だな」と思ったことを、記事にまとめています。
キーワード別 演習付き解説（74本）
「HTML h1 書き方」「CSS 文字色 変える 方法」など、検索でヒットするロングテールキーワード対策。各記事に解説＋演習を完備。
-
HTMLコードの実行方法｜Hello World表示で演習の流れを体験
体験：実行してみよう — コードはすでに入っています。そのまま「実行」ボタンを押して、プレビューに「Hello World」と表示されることを確認してください。演習の流れを体験する問題です。
環境構築 -
HTML h1タグの書き方｜Hello World表示の完全ガイド
最初のHTML — 「Hello World」と表示するHTMLを書いてください。上で学んだh1タグを使います。
環境構築 -
HTML pタグで段落を追加する方法｜書き方と例
段落を追加 — 見出しの下に「はじめてのWebページです。」という段落を追加してください。pタグで囲みます。
環境構築 -
HTML ul liタグでリストを作る方法｜順序なしリストの書き方
リストを作る — 好きな果物3つをulとliでリストにしてください。下のひな形の___の部分を書き換えてください。
環境構築 -
HTML aタグでリンクを貼る方法｜hrefの書き方と例
リンクを貼る — 「Google」というテキストで、https://google.com へのリンクを作ってください。
環境構築 -
HTML imgタグで画像を表示する方法｜srcとaltの書き方
画像を表示 — https://placehold.co/200x100 の画像を表示してください。altは「サンプル画像」にします。
環境構築 -
HTML h1 h2 h3の見出し階層｜正しい使い方と例
見出しの階層 — 好きなテーマで、h1、h2、h3の3つの見出しを階層順に作ってください。（例：私のページ、好きな映画の紹介など）
HTML基礎 -
HTML ol liタグで番号付きリストを作る方法
番号付きリスト — 好きな手順やランキングをolとliで3ステップ書いてください。（例：料理の手順、好きなものランキングなど）
HTML基礎 -
HTML strongとemタグの使い方｜太字・斜体の意味的強調
strongとem — 「重要」をstrong、「強調」をemで囲んでください。
HTML基礎 -
HTML header main footerの使い方｜セマンティック構造
セマンティックHTML — header, main, footer を使った基本構造を作ってください。mainの中身は自由です。
HTML基礎 -
HTML navタグでナビゲーションを作る方法
ナビゲーション — navタグ内に3つのリンク（ホーム、about、contact）を作ってください。
HTML基礎 -
HTML divタグでグループ化する方法｜使い方と例
divでグループ化 — 2つの要素をそれぞれdivで囲んでください。中身は自由です。（例：カード、ブロックなど）
HTML基礎 -
HTML spanタグで一部を装飾する方法｜インライン要素
spanで一部を装飾 — 「赤い文字」の部分だけspanで囲んでください。
HTML基礎 -
HTML tableタグでテーブルを作る方法｜tr tdの書き方
テーブル — 2行2列のテーブルを作ってください。セルの内容は自由です。（例：A,B,C,D や 名前,年齢 など）
HTML基礎 -
HTML brタグで改行する方法｜使い方と注意点
改行 — 「1行目」と「2行目」をbrタグで改行してください。
HTML基礎 -
HTMLでリンクを新しいタブで開く方法｜target blank
新しいタブで開く — リンクをtarget="_blank"で新しいタブで開くようにしてください。
HTML基礎 -
CSSで文字色を変える方法｜colorプロパティ
文字色を変える — h1の文字色を青（blue）にしてください。
CSS基礎 -
CSSで背景色を指定する方法｜background-color
背景色 — bodyの背景色を#f5f5f5にしてください。
CSS基礎 -
CSSでpaddingで余白を付ける方法｜内側の余白
余白を付ける — pタグにpadding: 16px を付けてください。
CSS基礎 -
CSSで文字を中央寄せする方法｜text-align center
中央寄せ — h1を中央寄せにしてください。
CSS基礎 -
CSSでフォントサイズを指定する方法｜font-size rem
フォントサイズ — pのフォントサイズを1.2remにしてください。
CSS基礎 -
JavaScriptでconsole.logで出力する方法
コンソールに出力 — console.logで「Hello」と出力してください。
JavaScript基礎 -
JavaScriptで変数を宣言する方法｜constの使い方
変数を宣言 — nameという変数に好きな値を代入し、console.logで出力してください。
JavaScript基礎 -
JavaScriptで関数を定義する方法｜functionとreturn
関数を定義 — greetという関数を定義し、「こんにちは」を返してください。
JavaScript基礎 -
JavaScriptで配列を作る方法｜要素の追加方法
配列を作る — fruitsという配列に好きな要素を3つ入れて、console.logで出力してください。
JavaScript基礎 -
JavaScriptでオブジェクトを作る方法｜プロパティの書き方
オブジェクト — userというオブジェクトにnameとageを入れて、console.logで出力してください。値は自由です。
JavaScript基礎 -
HTMLでフォームを作る方法｜form inputの書き方
フォームの基本 — 名前入力欄と送信ボタンを持つformを作ってください。inputのnameは「name」に。
HTML応用 -
HTMLでlabelとinputを紐づける方法｜forとid
labelとinputの紐づけ — 「メール」というラベルと、id="email"のinputをforとidで紐づけてください。
HTML応用 -
HTMLのarticleとsectionの使い方｜違いと使い分け
articleとsection — articleタグ内にsectionを2つ作ってください。各sectionの内容は自由です。
HTML応用 -
HTMLのdata属性の使い方｜data-id data-name
data属性 — divにdata-id="123"とdata-name="test"を付けてください。
HTML応用 -
HTMLでチェックボックスを作る方法｜input checkbox
チェックボックス — 「同意する」というラベル付きのチェックボックスを作ってください。
HTML応用 -
CSSでボーダーを付ける方法｜borderの書き方
ボーダー — divに1pxの実線、色#cccのボーダーを付けてください。
CSS基礎 -
CSSで角を丸くする方法｜border-radius
角丸 — divの角を8px丸くしてください。
CSS基礎 -
CSSでクラスにスタイルを当てる方法｜class指定
クラスでスタイル — .highlightクラスを作り、背景色を黄色にしてください。そのクラスをpタグに付ける。
CSS基礎 -
CSSで幅を指定する方法｜widthの使い方
幅を指定 — divの幅を300pxにしてください。
CSS基礎 -
CSSでホバー効果を付ける方法｜a:hover
ホバー効果 — aタグにマウスを乗せたとき、文字色を赤にしてください。
CSS基礎 -
CSS Flexboxで横並びにする方法｜display flex
Flexboxで横並び — 3つのdivをFlexboxで横並びにしてください。
CSSレイアウト -
CSS Flexboxで中央寄せする方法｜justify-content align-items
中央寄せ — Flexboxでdivを画面中央（水平・垂直）に配置してください。
CSSレイアウト -
CSS Gridで3列レイアウトを作る方法
Gridで3列 — 親divをGridにして、子要素を3列に並べてください。
CSSレイアウト -
CSSのgapで間隔を付ける方法｜Flexbox・Grid
gapで間隔 — Flexboxの子要素間に16pxの間隔を付けてください。
CSSレイアウト -
CSSでレスポンシブにする方法｜メディアクエリ
レスポンシブ — 768px以上で2列、未満で1列になるようにしてください。
CSSレイアウト -
CSSでflex-wrapで折り返す方法
flex-wrap — Flexboxで子要素がはみ出したら折り返すようにしてください。
CSSレイアウト -
CSSのspace-betweenで両端寄せする方法
space-between — Flexboxで子要素を両端寄せ（間に均等スペース）にしてください。
CSSレイアウト -
CSS Gridでカードレイアウトを作る方法
カードレイアウト — 3つのカードをGridで横並びにし、各カードにpaddingとborderを付けてください。
CSSレイアウト -
JavaScriptのif文の書き方｜条件分岐の例
if文 — ageが18以上のとき「成人」、未満のとき「未成年」をconsole.logで出力してください。ageは20。
JavaScript基礎 -
JavaScriptのforループの使い方｜繰り返し処理
forループ — 1から5までをconsole.logで出力してください。
JavaScript基礎 -
JavaScriptのテンプレートリテラルの使い方
テンプレートリテラル — name変数（「太郎」）を使って「こんにちは、太郎さん」とconsole.logで出力してください。
JavaScript基礎 -
JavaScriptで配列の長さを取得する方法｜length
配列の長さ — arrの要素数をconsole.logで出力してください。arrは[1,2,3,4,5]。
JavaScript基礎 -
JavaScriptで配列の先頭要素を取得する方法
配列の先頭 — fruitsの最初の要素をconsole.logで出力してください。fruitsは['りんご','みかん','ぶどう']。
JavaScript基礎 -
JavaScriptのアロー関数の書き方｜引数を2倍する例
アロー関数 — doubleというアロー関数を定義し、引数を2倍して返してください。5を渡して10が出力されること。
JavaScript基礎 -
JavaScriptでオブジェクトのプロパティを取得する方法
オブジェクトのプロパティ — userオブジェクトのnameをconsole.logで出力してください。
JavaScript基礎 -
JavaScriptのmapの使い方｜配列を変換する方法
配列のmap — numbersの各要素を2倍した新しい配列を作り、console.logで出力してください。numbersは[1,2,3]。
JavaScript基礎 -
JavaScriptの三項演算子の使い方｜条件 ? 真 : 偽
三項演算子 — scoreが60以上なら「合格」、未満なら「不合格」を変数resultに代入し、console.logで出力。scoreは70。
JavaScript基礎 -
JavaScriptで文字列を結合する方法
文字列の結合 — firstNameとlastNameを結合して「山田 太郎」とconsole.logで出力してください。
JavaScript基礎 -
JavaScriptでDOM要素を取得する方法｜getElementById
要素を取得 — idが「msg」の要素を取得し、そのtextContentを「Hello」に変更してください。
DOM操作 -
JavaScriptでクリックイベントを追加する方法
クリックイベント — idが「btn」のボタンがクリックされたら、console.logで「クリック！」と出力してください。
DOM操作 -
JavaScriptでクラスを追加する方法｜classList.add
クラスを追加 — idが「box」の要素に「active」クラスを追加してください。
DOM操作 -
JavaScriptで新しい要素を作成して追加する方法
新しい要素を作成 — pタグを作り、テキストを「新規」にして、idが「container」の要素の子として追加してください。
DOM操作 -
JavaScriptのquerySelectorの使い方｜CSSセレクタ
querySelector — idが「list」のul内の最初のliを取得し、そのtextContentをconsole.logで出力してください。
DOM操作 -
JavaScriptのquerySelectorAllの使い方｜全要素取得
全要素を取得 — idが「list」のul内の全liを取得し、それぞれのtextContentをconsole.logで出力してください。
DOM操作 -
JavaScriptでinputの値を取得する方法｜value
inputの値を取得 — idが「name」のinputの値をconsole.logで出力してください。
DOM操作 -
JavaScriptで要素を削除する方法｜remove
要素を削除 — idが「remove-me」の要素をDOMから削除してください。
DOM操作 -
JavaScriptのイベントデリゲーションの使い方
イベントデリゲーション — idが「list」の要素のクリックイベントをリッスンし、クリックされたliのtextContentをconsole.logで出力してください。
DOM操作 -
JavaScriptでスタイルを変更する方法｜style
スタイルを変更 — idが「box」の要素の背景色を「lightblue」にしてください。
DOM操作 -
JavaScriptのfetchでデータを取得する方法
fetchで取得 — https://jsonplaceholder.typicode.com/posts/1 からデータをfetchし、titleをconsole.logで出力してください。
API連携 -
JavaScriptのfetchでエラーハンドリングする方法
エラーハンドリング — fetchで取得し、res.okがfalseなら「エラー」とconsole.log、trueならデータのtitleを出力してください。
API連携 -
JavaScriptのtry-catchで例外処理する方法
try-catch — fetchをtry-catchで囲み、エラー時はconsole.logでエラーメッセージを出力してください。
API連携 -
JavaScriptでfetchの配列データを表示する方法
配列データの表示 — https://jsonplaceholder.typicode.com/posts から取得し、先頭3件のtitleをconsole.logで出力してください。
API連携 -
JavaScriptで非同期の読み込み中表示をする方法
読み込み中表示 — fetchの前に「読み込み中」、成功後に「完了」をconsole.logで出力してください。
API連携 -
JavaScriptでTODO追加機能を実装する方法
TODO追加 — inputの値とボタンクリックで、ulにliを追加する処理を書いてください。
実践プロジェクト -
JavaScriptのlocalStorageの使い方｜保存と読み込み
ローカルストレージ保存 — key「name」でvalue「太郎」をlocalStorageに保存し、読み取ってconsole.logで出力してください。
実践プロジェクト -
JavaScriptのsetTimeoutの使い方｜遅延実行
タイマー — 3秒後に「時間です」とconsole.logで出力してください。
実践プロジェクト -
JavaScriptでカウンターを実装する方法
カウンター — ボタンクリックでカウントを1増やし、idが「count」の要素に表示してください。
実践プロジェクト -
JavaScriptのfilterの使い方｜配列を条件で抽出
フィルター — 配列[1,2,3,4,5]から3以上の数だけをfilterで抽出し、console.logで出力してください。
実践プロジェクト
技術解説・Tips
-
OpenClawセットアップ完全ガイド｜初心者向けにゼロから解説
OpenClawをWindows・Mac・Linuxにインストールし、Discord・Telegram・WhatsAppからAIエージェントを操作できるようにするまでの手順を初心者向けに解説。ワークスペースのカスタマイズ・日本語化・セキュリティ対策も網羅。
OpenClaw AIエージェント 環境構築 自動化 -
Base64デコードで日本語が文字化けする原因と対処法
JavaScriptのatob()で日本語をBase64デコードすると文字化けする原因と、TextDecoderを使った正しい解決方法を解説。
Base64 エンコード JavaScript エラー解決 -
ローカル開発でCORSエラーが出る原因と3つの回避策
localhost同士でCORSエラーが出る原因と、バックエンド設定・Proxy・ブラウザ拡張による回避策を解説。
CORS フロントエンド エラー解決 開発 -
JSONの「Unexpected token」エラー原因と対処法
JSON.parse()で出るSyntaxError Unexpected tokenエラーの原因と対処法。末尾カンマ、シングルクォート、コメントなどJSONの構文ルール違反を解説。
JSON エラー解決 フロントエンド -
JWTの中身を確認する方法｜改ざんが検知される仕組み
JWTはBase64エンコードされているだけで中身は丸見え。デコードして確認する方法と、署名で改ざんが検知される仕組みを解説。
JWT セキュリティ 認証 -
WebP変換で画質が落ちる原因と最適な設定
PNGやJPEGをWebPに変換すると画質が劣化する原因と、非可逆・可逆圧縮の使い分け、最適な品質設定を解説。
画像圧縮 WebP フロントエンド 最適化 -
ブログの SEO と JSON-LD 構造化データ入門
検索エンジン最適化と、Article スキーマをはじめとする JSON-LD 構造化データの設定方法を解説します。
SEO JSON-LD 構造化データ -
APIデバッグで使うツールの使い分け｜JSON整形・JWT・Base64のワークフロー
API開発・デバッグで使うツールの組み合わせ。JSON整形→JWTデコード→環境変数確認の流れ。実際のデバッグシーン別に、どのツールをいつ使うかを解説。
API デバッグ ワークフロー 開発 -
Base64とは？仕組みから使い方まで解説
Base64エンコーディングの仕組み、用途、デコード方法を解説。画像のData URI、Basic認証、APIでの使用例。Base64は暗号化ではない。
Base64 エンコード 開発 基礎 -
CORSエラーの対処法｜「Access-Control-Allow-Origin」で解決する
CORSエラーが発生したときの対処法。フロントから別オリジンのAPIを呼ぶとブロックされる理由。サーバー側でAccess-Control-Allow-Originを設定する方法。開発時の回避策も。
CORS API エラー フロントエンド -
.envファイルのベストプラクティス｜機密情報を安全に管理する
.envファイルの使い方、.gitignoreへの追加、環境ごとの切り替え、KEY=value形式の注意点。機密情報を安全に管理するための実践的なアドバイス。
.env 環境変数 セキュリティ 開発 -
Gitコマンドよく使う一覧｜初心者向けクイックリファレンス
Gitでよく使うコマンドを一覧でまとめ。init、add、commit、push、pull、branch、checkout、merge、stash、restore。日常的に使うコマンドをコピペで使える形で。
Git 開発 初心者 コマンド -
HTTPステータスコード一覧｜200・404・500の意味と対処法
HTTPステータスコードの意味を一覧で解説。200成功、201作成、400不正、401未認証、403禁止、404Not Found、500サーバーエラー。APIデバッグでよく見るコードと対処法。
HTTP API デバッグ Web -
JSON 整形ツールの使い方｜オンラインで安全に整形・圧縮
JSONを整形・圧縮する無料オンラインツールの使い方を解説。インデント調整、構文チェック、コピー機能まで。データ送信なしで安全。
JSON 開発ツール API 使い方 -
JWTのデバッグ方法｜トークンの中身を安全に確認する
JWT（JSON Web Token）をデコードして中身を確認する方法。Header、Payload、exp・subの確認。ローカル処理で安全にデバッグ。
JWT 認証 デバッグ API -
開発者ポートフォリオサイトを作る際のポイント
就職・フリーランス・副業など、開発者のポートフォリオサイトを効果的に作るための実践的なアドバイスです。
ポートフォリオ キャリア Web制作 -
Markdown記法チートシート｜コピペで使える一覧
Markdownの基本記法を一覧でまとめ。見出し、リスト、リンク、コードブロック、テーブル、強調。READMEやドキュメントでよく使う記法をすぐ参照できる。
Markdown チートシート ドキュメント 開発 -
URLエンコード（パーセントエンコーディング）の使い方
URLに特殊文字や日本語を含める際のエンコード方法。クエリパラメータ、パス、encodeURIComponentとの使い分け。実践的な例を交えて解説。
URL エンコード 開発 Web -
正規表現でよく使うパターン10選｜開発で役立つRegex
正規表現のよく使うパターンを10個紹介。メール、URL、数字、空白、改行など。コピペで使える実践的なRegex。用途・注意点付き。
正規表現 Regex 開発 パターン -
画像圧縮とWebP変換｜PageSpeed改善の基本
画像をWebPに変換してファイルサイズを削減する方法。画質と容量のバランス、ローカル処理の安全性。PageSpeedスコア改善に。
画像 WebP PageSpeed 最適化 -
Astro Content Collections でブログを構築する
AstroのContent Collectionsで型安全なブログを構築する手順。Markdownを書くだけでブログができ、frontmatterのtypoはビルド時に検出される。
Astro ブログ フロントエンド