左右の余白を文章の方向に合わせる：inline-startで読み始めをそろえる
右から左へ読む案内で、強調線や余白だけが左に残っていませんか。同じCSSを使う二つの案内欄で、padding-inline-startとdirの関係を確かめ、左右固定の指定を残す条件も整理します。
#CSS #論理プロパティ #多言語
LEARN. MAKE. PUBLISH.
Web制作と開発の
学習ブログ
HTML・CSSの基礎から、JavaScript・TypeScript、React・Next.js、WebGL・WebGPUまで。制作で迷う場面を、コードと具体例から考えます。
FIRST STEP / はじめに読みたい
はじめてのホームページ制作。最初に決めておきたい5つのこと
コードを書く前に、誰に何を伝えるサイトなのかを整理する。目的・読者・情報・導線・公開後の確認を、一つずつ考えます。
記事を読むLEARNING PATH
一枚のページを、順番に仕上げる。
まずはホームページ制作のロードマップで全体を確認。今の段階から、解説を読んで無料レッスンへ進めます。
01 企画・情報設計
最初のページの範囲を決めるワイヤーフレームの優先順位情報設計のレッスン →02 HTML・CSS
見出しの順番を決めるスマートフォン表示を確かめるHTMLのレッスン →CSSのレッスン →03 JavaScript
コードの動きを説明するエラーの読み方フォームUIのレッスン →04 品質・公開・更新
キーボード操作を確かめる公開前の確認更新後の確認公開・運用のレッスン →
LATEST NOTES
記事一覧
変更の一部だけをコミットする：git add -pで二つの修正を分ける
同じCSSに文字色の修正と余白の試作が混ざったとき、ファイル名だけでは追加対象を分けられません。空の練習リポジトリで差分を選び、コミットに入る内容と手元に残る内容を照合します。
#Git #コミット #差分レビュー
Enterで送信するフォームを扱う：submitに入力確認の入口をそろえる
検索ボタンでは動くのに、別の送信経路で処理が抜けたり二重になったりする場合に。formのsubmitを入口にした完成例で、Enter、必須入力、空白だけの検索語、requestSubmitを比較します。
#フォーム #JavaScript #キーボード
更新したCSSが反映されないとき：配信された本文と304を照合する
CSSを保存しても古い表示のままなら、再読み込みを繰り返す前に配信内容を調べます。ローカルの再検証サーバーを使い、URL・ETag・応答本文から、キャッシュと更新漏れを切り分ける練習です。
#HTTP #キャッシュ #開発者ツール
カード幅でレイアウトを切り替える：コンテナークエリーの測る箱を決める
広い本文欄と細いサイドバーに同じカードを置くとき、画面幅だけでは配置を選べません。外側の幅を測り、内側のレイアウトを切り替える完成例で、境界と基本の一列表示を確かめます。
#HTML / CSS #CSS
イベント登録の重複を防ぐ：パネルを開き直す前にリスナーを解除する
パネルを開き直すたびに一回のクリックで処理が何度も走る場合は、登録の寿命を調べます。AbortControllerで前回の登録を解除し、連続操作と再表示の両方を試す練習です。
#JavaScript / TypeScript #JAVASCRIPT
React 状態管理の基本：入力とプレビューの値を共通の親で持つ
入力欄とプレビューがずれる原因を、状態の置き場所から調べます。共通の親が値を持つ小さなReactアプリを作り、入力・空欄・リセットを公開用ビルドでも確認します。
#React / Next.js #REACT
TypeScript unknownで受信データを検査する：型と実行時の確認を分ける
型を付けてもAPIから届く値が正しいとは限りません。unknownを入口に置き、名前と在庫数を確認して必要な値を作り直します。型検査と実行時の結果を別々に照合する練習です。
#JavaScript / TypeScript #TYPESCRIPT
WebGL canvasの解像度を合わせる：表示サイズと描画画素を分ける
CSSで広げたcanvasと、内部の描画領域は別のサイズです。WebGLで縦帯を描き、DPRの上限、親のサイズ変更、描画終了、利用できない環境での文章表示まで確認します。
#WebGL / WebGPU #WEBGL
z-indexが効かないとき：子の数字より親の重なり順を見る
z-indexを999にしても案内が隣の箱の後ろへ隠れる場合は、親の重なり順を調べます。架空の会場案内を使い、スタッキングコンテキストと切り抜きを区別し、変更する要素を選びます。
#HTML / CSS #z-indexが効かない
.gitignoreが効かないとき：追跡状態と除外規則を調べる
除外したはずのログがgit statusへ出続ける場合は、名前の書き方より先に追跡状態を確認します。空の練習リポジトリで、手元のファイルを残しながら追跡対象から外し、除外規則も検証します。
#制作の進め方 #.gitignoreが効かない
移行元と移行先の対応表を作る：旧URLの用件を残す判断
サイトのページを統合するとき、古いURLをすべてトップへ送っていませんか。架空の施設サイトを題材に、移転・統合・維持・廃止を仕分け、到着先に残す情報と確認条件を記した対応表を作ります。
#公開・運用 #移行元と移行先の対応表を作る
一定範囲の測定値を示す：meterの上限と判断の境目を分ける
容量の使用量を示す棒は、いっぱいになれば完了する進捗とは意味が違います。架空の画像保管庫でmeterを使い、上限・注意の境目・望ましい範囲を整理します。数値と説明が食い違う例も直します。
#HTML / CSS #一定範囲の測定値を示す
画面幅に合わせて画像素材を切り替える：pictureで構図を選ぶ
写真全体を縮めると、案内したい入口まで小さくなる場合に。架空の展示室の図を使い、pictureで全景と拡大図を切り替えます。素材の選択と表示幅を分け、境界の前後で確認する練習です。
#HTML / CSS #画面幅に合わせて画像素材を切り替える
利用者が迷う場所を観察する：答えを教えない課題と記録
作ったページの探しやすさを確かめたいのに、つい「右のメニューです」と教えていませんか。架空の施設案内を使い、操作を指定しない課題文、助言の記録、観察と解釈を分けたメモを作ります。
#制作の進め方 #利用者が迷う場所を観察する
省略した文字の確認方法を決める：一行の題名から全文を開く
長い題名を一行へ省略した後、全文を読める入口はありますか。架空の作品一覧を使い、CSSによる省略と開閉欄を組み合わせます。原稿を切る失敗や、マウスだけに頼る案内を直す練習です。
#CSS #省略表示
検索結果の表示順を守る：遅い以前の検索で上書きしない
検索語を変えたのに、古い検索の結果へ戻っていませんか。架空の資料検索で応答の順番を逆転させ、最新の呼び出しだけに表示更新を許す関数を作ります。古い失敗と空欄に戻す操作も確認します。
#JavaScript #非同期処理
取得失敗と0件を分ける：fetchの応答から一覧の状態を決める
読み込みエラーを空配列へ置き換えていませんか。架空の資料一覧で、HTTPの結果、JSONの読取り、データ形式を順に確認します。成功した0件と、取得できなかった状態を分ける関数を作ります。
#JavaScript #非同期処理
行内の小さなラベルの折り返しを選ぶ：外側と内側を分けて考える
文章中の「予約不要」が二行に分かれるとき、どこを一まとまりにすべきでしょうか。架空の案内文でinline-blockとwhite-spaceを区別し、長いラベルも欠けない設定を比べます。
#HTML / CSS #css-inline-block
上下のマージンが相殺される理由：兄弟と親子を分けて調べる
marginを二つ足したのに間隔が増えない、子の上余白が背景の外へ出る。架空の案内欄で上下のマージンの相殺を再現し、兄弟間の間隔と親の内側余白を分けて直します。
#HTML / CSS #css-margin-collapse
dialogでモーダルを開閉する：閉じる操作と戻る場所を確かめる
重なる箱が表示されるだけでは、モーダルの操作は完成しません。架空の資料室の案内を使い、dialogの開閉、閉じるボタン、Escape、呼び出し元へ戻るフォーカスを順に確かめます。
#HTML / CSS #html-dialog
食い違う原稿の確認先を決める：時刻の矛盾を掲載文へ確定する
二つの原稿で開始時刻が違うとき、更新日時だけで採用していませんか。架空の見学会を使い、対象と根拠をそろえ、決定者への質問、回答後の採用文、未回答の扱いを一件の記録にまとめます。
#制作の進め方 #食い違う原稿の確認先を決める
入力欄にautocompleteを指定する：氏名とメールの用途を照合する
氏名やメールの入力欄に、自動補完のための用途を指定します。架空の見学会を題材に、label・type・autocompleteの違い、候補が出ないときの切り分け、氏名を分割する場合の確認を説明します。
#アクセシビリティ #入力欄にautocompleteを指定する
localStorageに保存できないとき：例外処理と画面の更新を分ける
localStorageの保存先の取得や書き込みで例外が起きたときに。保存の成否と画面の表示を分けるJavaScript関数を作り、代役の保存先で取得失敗・書き込み失敗・不正な入力を再現します。
#JavaScript #localStorage #例外処理
今いるページをナビゲーションに示す：現在地とフォーカスを分ける
ナビゲーションの現在地が色だけになっていませんか。架空の資料室の三ページを使い、aria-currentと表示文を対応させます。複製時の印の残りと、Tab操作のフォーカスとの違いを確認する練習です。
#アクセシビリティ #今いるページをナビゲーションに示す
横に長い表のスクロール範囲を決める：本文を動かさず右端まで読む
表に合わせてページ全体が横へ広がっていませんか。架空の教材比較表を使い、表を囲む領域だけに横スクロールを設けます。幅を指定する場所、キーボードの入口、右端の情報を読めるかを確かめる練習です。
#CSS #表 #横スクロール
途中から続く番号付きリストを作る：説明を挟んだ手順をつなごう
手順の間に説明を挟んだら、次の番号が1へ戻っていませんか。架空の出品案内を使い、olのstartとliのvalueを比較します。リストを分ける判断と、項目を追加した後の番号の確認を練習します。
#HTML #番号付きリスト #手順の構造
URLの検索条件を読み取る：未指定・空欄・重複を分けて復元する
検索結果のURLを開き直したら、空の検索語まで初期表示へ戻っていませんか。架空の展示資料検索で、URLSearchParamsから未指定・空欄・重複を読み分け、復元する状態と期待結果を決める練習です。
#JavaScript #URLSearchParams #検索条件
リストのマーカー位置を整える：折り返す本文と丸印の場所を分ける
箇条書きが二行になると、本文の開始位置がずれていませんか。架空の植物交換会の持ち物案内を使い、insideとoutsideを比較します。丸印の場所を確保する余白と、項目間の余白も分けて確認します。
#HTML / CSS #リストのマーカー位置を整える
HTMLのlangで文章の言語を指定する：ページ全体と英文の範囲を分ける
日本語のページにひな形のlang="en"が残っていませんか。架空の展示室案内で、文書全体の言語と英語一段落の指定を分けます。親からの継承、指定範囲の広げすぎ、文字コードとの違いを確認する練習です。
#アクセシビリティ #HTMLのlangで文章の言語を指定する
progressで進み具合を示す：0件と割合不明の状態を分ける
進捗が分からないときに0%と表示していませんか。架空の資料整理画面で、全体量と完了量をそろえ、valueを省く状態と0を指定する状態を比較します。名前の関連付けと説明文も確認する練習です。
#アクセシビリティ #progressで進み具合を示す
Setで重複するタグを整理する：同じとみなす文字列の範囲を決める
タグの選択肢に同じ名前が何度も並ぶときに。架空の資料集でSetを使い、最初の順序を残した配列を作ります。前後の空白、異なる表記、オブジェクトの扱いを比べ、何を一つにしたかを確認します。
#JavaScript #Setで重複するタグを整理する
stickyが止まる範囲を調べる：親の高さとoverflowを見る
追従見出しが動かなかったり、途中で画面から消えたりするときに。架空の工房案内でstickyが止まる範囲を調べ、上端の指定、親の高さ、祖先のoverflowを一つずつ確認する手順を紹介します。
#CSS #sticky #スクロール
timeで日時を機械可読にする：表示とdatetimeを照合しよう
開催日時を日本語で書いたページに、機械が読める日時を添えます。架空の観察会を題材に、日付だけの値と時差付き日時を使い分け、表示だけを変更して属性が古く残る失敗を防ぐ確認手順を紹介します。
#HTML #time #日時
mapで表示用の文字列を作る：元データを残して一覧の文言をそろえる
一覧の名前へ所要時間や受付状態を付けたいときに。架空の体験講座データからmapで表示用の文字列を作り、全件に同じ規則を適用します。return漏れと元データの書き換えを、実行結果から確かめる練習です。
#JavaScript #map #配列
gapで項目の間隔をそろえる：項目同士と外周の余白を分けよう
折り返す一覧で、最後の項目だけ余白が余ったり、行ごとの間隔が変わったりしていませんか。架空の展示分類を題材に、親へgapを指定し、項目間と外周の余白を分けて調整します。
#HTML / CSS #gap
dlで用語と説明を組にする：見た目より先に対応を決めよう
用語集の名前と説明を、太字や改行だけで並べていませんか。架空の製本用語を使い、dl・dt・ddで対応を表し、説明の長さや表示の装飾が変わっても読む順番を保つ練習です。
#HTML / CSS #description
someで条件に合う要素の有無を調べる：trueとfalseで案内を選ぼう
一覧の中に一件でも該当するものがあるかを知りたいとき、someで真偽値を返せます。架空の点検項目を使い、未確認あり・すべて確認済み・項目なしを分けて案内を決める練習です。
#JavaScript #some
検索語の前後の空白をtrimで除く：空白だけの入力も先に分けよう
コピーした検索語が一致しないとき、前後に空白が付いていないか確かめます。架空の資料検索を題材に、trimの戻り値を使い、空白だけの入力と途中の空白を別々に扱う練習です。
#JavaScript #trim
期限を過ぎた案内の扱いを決める：終了後に残す情報を選ぼう
催しが終わった後も申し込みの案内が残っていませんか。架空の交換会を題材に、受付終了と開催終了を分け、残す記録、外す募集文、次の案内を整理する編集の練習です。
#公開・運用 #制作練習
練習用の原稿に長い名前を入れる：空欄と文章量を分けて試そう
短い仮の文章では整って見えるカードも、本番の原稿を入れると確認し直す箇所が見つかります。架空の作品一覧で、長い名前、長文、補足なしの原稿を用意し、一つずつ条件を変えて記録する練習です。
#学習ガイド #制作練習
Web制作の仕事の流れ：工程の間に渡すものを決めよう
工程の名前は分かっても、次へ何を渡せばよいか迷う初心者へ。架空の施設紹介ページを題材に、制作の各段階で残す資料と確認事項を結び、一つの変更を前の工程へ戻して考える練習です。
#制作の進め方 #制作練習
印刷すると不要なメニューを省く：紙に残す本文を先に決めよう
印刷した案内がメニューで埋まる場合は、紙で使う情報と画面だけの操作を分けます。架空の地域散策の案内を使い、print用のCSSと印刷プレビューで確かめる項目を紹介します。
#HTML / CSS #CSS
ダウンロード前にファイルの情報を伝える：資料名と形式を添えよう
「資料はこちら」だけでは、開く内容やファイル形式を判断しづらくなります。架空の見学会の配布資料を使い、リンクに含める情報と差し替え時の確認手順を整理します。
#デザイン #DESIGN
画像の説明をfigureとfigcaptionでまとめる：altとの役割を分けよう
画像の下の文章が、どの図の説明か分かりづらくなっていませんか。架空の展示台の図を例に、figureとfigcaptionでまとめ、代替テキストと画面に見せる説明を分ける手順を紹介します。
#HTML / CSS #HTML
クリックされた子要素から操作を探す：ボタン全体で同じ処理を呼ぼう
ボタンの文字は反応するのに、内側のアイコンを押すと処理が変わる場合は、参照している要素を調べます。架空の展示カードでtargetとcurrentTargetの違いを確かめる練習です。
#JavaScript #JAVASCRIPT
本文の行間を単位なしで指定する：子要素の文字サイズで比べよう
本文を大きくしたら行が詰まって見えるときは、親要素から引き継いだline-heightを確認します。架空の散策案内を使い、固定した値と単位なしの指定を同じ原稿で比べる練習です。
#HTML / CSS #css
入力欄の補足説明を関連付ける：項目名と入力のヒントを分けよう
入力欄のそばに注意文を置くだけで終えていませんか。架空の作品応募欄を使い、項目名と入力のヒントを分け、aria-describedbyで補足説明を関連付ける手順を紹介します。
#アクセシビリティ #form
findで見つからない結果を扱う：名前を読む前に分岐しよう
配列から一件を探した後、名前の表示でエラーになる場合は、見つからなかった結果を確認します。架空の音声ガイド一覧を題材に、findの戻り値を調べてから情報を読む手順を紹介します。
#JavaScript #js
ページ内リンクの見出しが隠れるとき：固定ヘッダーの下に余白を設ける
目次から移動した先の見出しが固定ヘッダーに隠れる場合は、スクロール時の余白を確認します。架空の展示案内を使い、scroll-margin-topを設定し、リンク先と画面幅を変えて確かめる手順を紹介します。
#CSS #ページ内リンク
CSSが効かないとき適用元を探す：色を変える前に上書きを確認する
CSSを書き直しても色が変わらないときは、指定の強さを足す前に適用元を調べます。架空の展示カードを使い、開発者ツールで宣言を比較し、変更する規則を絞る練習を紹介します。
#CSS #開発者ツール
detailsで補足を開閉する：開く前のラベルを具体的にする
短い補足を折りたたみたいとき、detailsとsummaryで開閉部分を作れます。架空の紙工作会を題材に、常に見せる情報と補足を分け、ラベルとキーボード操作を確認する手順を説明します。
#HTML #開閉UI
一覧が空のときの案内を書く：未登録と検索0件を分けて伝える
一覧が空でも、初めて利用する人と検索条件を絞りすぎた人では必要な案内が違います。架空の読書記録を題材に、空になった理由と次の操作を一組にし、文言と行き先を確認する練習を紹介します。
#文言設計 #一覧表示
配列を並べ替える前に元データを残す：元の順序と表示用の順序を分ける
sortを使うと、元の配列の順序も変わります。架空の作業時間の一覧を題材に、コピーしてから数値を並べ替える例を作り、元の順序・昇順・降順をそれぞれ確認します。
#JavaScript #配列
box-sizingで幅をそろえる：余白を足しても外側を広げない
同じwidthを指定したのに、余白を足した箱だけ大きくなる。架空の展示案内を題材に、content-boxとborder-boxの計算を比べ、枠線を含めた幅をそろえる方法を説明します。
#CSS #ボックスモデル
不具合の再現手順を書く：開始状態から結果までを残す
「メニューが変です」だけでは、同じ現象を確認できないことがあります。架空の資料館ページを題材に、開始状態、操作、期待した結果と実際の結果を分け、再現できる記録を作ります。
#不具合調査 #再現手順
ラジオボタンをfieldsetでまとめる：質問と選択肢の関係を残す
「午前」「午後」だけが並ぶと、何について選んでいるか分からなくなります。架空の体験会を使い、fieldsetとlegendで質問ごとにまとめ、nameとlabelの役割も分けて確認します。
#フォーム #fieldset #ラジオボタン
JavaScriptのfilterで一覧を絞る：二つの条件と0件を分ける
カテゴリを選ぶと一覧が空になる処理を、条件ごとに確認します。架空の貸出道具データを使い、カテゴリと貸出可否を組み合わせ、0件を空配列の長さで判定する練習です。
#JavaScript #filter #条件分岐
動きを減らす設定にCSSで対応する：静止した状態を基本にする
装飾のアニメーションを、動きを減らしたい人の設定に合わせて切り替えます。架空の展示案内を使い、静止した状態を先に作り、no-preferenceの場合だけ動きを加えるCSSを紹介します。
#CSS #アニメーション #アクセシビリティ
レビューで見てほしい点を伝える：感想ではなく判断を頼む依頼文
作品を送っても「よいと思います」で終わってしまう人へ。架空の見学会ページを題材に、目的、見てほしい場所、迷っている判断を短い依頼文にまとめる練習を紹介します。
#レビュー #依頼文
HTMLの表に見出しを付ける：行と列の意味をscopeで示す
表の数字は読めても、何の値か分からない状態を見直します。架空の工作室の時間割を使い、表の名前、行見出し、列見出しをHTMLで表し、数値との対応を確認する練習です。
#HTML #表 #アクセシビリティ
文字色と背景色を確認する：淡い案内文を数値で見直す
薄いグレーの説明文が読みにくいとき、文字を大きくする前に配色を確かめます。架空の読書室の案内を題材に、実際の文字色と背景色を一組として調べ、修正後も表示を点検する練習です。
#コントラスト #配色
カードの列数をCSS Gridで変える：一列から三列へ広げる
カードを三列にしたら、スマートフォンで一枚ずつが細くなってしまう。架空の体験講座一覧を使い、一列を基本にして広い画面で三列へ切り替えるCSSと確認手順を紹介します。
#CSS Grid #レスポンシブ
画像の容量を見直す：寸法と圧縮を一つずつ比べる
写真を軽くしたいけれど、どこまで小さくしてよいか迷う人へ。架空の陶芸作品一覧を題材に、元画像を残し、寸法と圧縮を別々に変えて、必要な細部と容量を比較する方法を紹介します。
#画像最適化 #圧縮
共有時のタイトルと画像を整える：OGPの指定を照合する
URLを共有したら別ページの名前や画像が出てしまう。架空の朗読会の案内を使い、Open Graphの情報を本文と照合し、公開HTMLの指定と共有先での表示を分けて確認する手順を紹介します。
#OGP #公開確認
更新後に確認する範囲を決める：変更点から確認先をたどる
一ページの修正でも、共通の部品や別ページの案内に影響することがあります。架空の貸しアトリエを題材に、変更内容、使われる場所、期待する結果を結び、更新後の確認表を作る練習です。
#更新手順 #確認表
Flexboxで文字がはみ出す原因と直し方：最小幅と折り返し
横並びのカードで長い英字だけが枠から出るときに。架空の資料名カードを使い、Flexboxの子要素の最小幅と文字の折り返しを分けて調べ、必要な内容を隠さずに表示する方法を紹介します。
#CSS #Flexbox #min-width #折り返し
見出しの順序を整える：h2とh3を内容の親子で選ぶ
小さく見せたいからh3を選んでいませんか。架空の楽器体験会を題材に、文章の親子関係から見出しレベルを決め、文字の大きさとは分けて構造を確認する方法を紹介します。
#見出しの順序を整える
学習メモを次の制作に使う：解決した条件を残す書き方
同じつまずきを調べ直してしまう初心者へ。架空の展示案内を題材に、起きたこと、変えたこと、確かめた条件を記録し、別のページでも使える学習メモへ整える方法を紹介します。
#学習メモを次の制作に使う
フィードバックを次の課題に変える：別の題材で確かめる方法
添削どおりに直せても、次の作品で同じ指摘を受ける人へ。架空の体験教室の案内を使い、指摘の理由を読み取り、別の原稿で確かめる短い練習課題に変える方法を紹介します。
#フィードバックを次の課題に変える
エラーメッセージの読み始め方：名前と発生場所を分ける
JavaScriptの赤いエラー表示で手が止まる人へ。架空の座席数を表示する短い例で、エラーの種類、変数名、発生場所を読み分け、一か所の修正を再確認する手順を紹介します。
#エラーメッセージの読み始め方
最初の制作物を小さくする：機能を減らす境界の決め方
作りたい機能を増やすうちに練習作品が進まなくなる初心者へ。架空の散歩会の案内を使い、残す情報、後へ送る機能、代わりの案内を分け、最初の一ページの範囲を決めます。
#最初の制作物を小さくする
未経験からWeb制作を仕事にするには：募集要件を作品と照合する
未経験からWeb制作の仕事を目指すとき、技術名の多さだけで応募先を選んでいませんか。募集要件を実際の作業へ読み替え、作品で示せること、質問したいこと、次に練習することを整理します。
#学習計画
Web制作の学習計画：中断しても戻れる一週間を組む
仕事や家庭の予定とWeb制作の学習を両立したい人へ。記入済みの週間計画と再開メモを例に、実際に使える時間、短い作業単位、中断時のメモを整理し、予定が崩れた週にも見直せる計画を作ります。
#学習計画
WebデザインとWeb制作の違い：スクールで作る成果物を比べる
WebデザインとWeb制作の違いを、学ぶ名称だけで判断しないために。画面案、動くページ、公開後の更新という成果物を分け、スクールの授業でどこまで制作するかを確認する比較方法を紹介します。
#学習計画
AIで作ったWebページを確認する：原稿・事実・操作の照合
生成された案を、そのまま公開していませんか。架空の映画会の原稿と修正前後の例を使い、日時、根拠のない実績、不要な予約案内を点検します。採用理由と未確認の操作を残すための手順です。
#AI活用
Web制作の副業の始め方：引き受ける範囲を決める準備
副業で制作を始めたい初心者へ。架空の依頼を使い、作業範囲、連絡できる時間、確認に使う時間を整理します。応募の前に、自分が説明できる範囲と未確認の作業を分ける練習です。
#学習計画
Web制作の独学とスクールを比較する：つまずいた後の進め方で選ぶ
独学かスクールかを、費用や意欲だけで決めないために。短い学習記録から、自分で調べられる範囲と人に確認したい点を分け、質問や添削が必要な場面を具体的にする方法を紹介します。
#スクール選び #比較
ホームページ制作のロードマップ：一枚のページで学ぶ順番を決める
HTML、CSS、JavaScriptをどこから学ぶか迷う初心者へ。一枚の案内ページを題材に、各段階で残す制作物と確認項目を決め、今取り組む練習を選ぶロードマップを紹介します。
#学習計画
Web制作スクールの料金相場を見る前に、総費用をそろえよう
Web制作スクールの金額を比較するとき、月額と受講総額を混ぜていませんか。公式料金の確認例と架空の計算を使い、含まれる費用・別途費用・継続費用を分けて比較する手順を説明します。
#スクール選び #比較
Web制作スクールの選び方：課題と添削から受講内容を確かめる
Web制作スクールの説明を読んでも、何ができるようになるか分からない人へ。課題、添削、質問条件を確認し、自分が作りたいものと受講内容を照合する比較メモを作ります。
#スクール選び #比較
別フォルダのページへ移れないとき、相対パスをたどり直そう
トップでは使えたリンクが、下層ページで開かない。架空の町歩き案内を例に、現在のURLとリンク先を並べ、同じ階層・一つ上・サイトの先頭からのパスを区別して直します。
#相対パス #リンク切れ
写真が出るたび本文が動くとき、画像の縦横サイズを指定しよう
画像を読み込んだ瞬間に、その下の文章がずれる状態を見直します。架空の染物工房の紹介を例に、画像の寸法とCSSの表示幅を分け、読み込み前に場所を確保する考え方を説明します。
#画像 #レイアウトシフト
写真の主役が切れたら、表示枠と切り抜き位置を見直そう
横長では見える作品が、縦長のカードで切れてしまう。架空の器の展示案内を題材に、写真全体を見せる場合と枠を埋める場合を分け、object-positionで残す側を調整する手順を紹介します。
#写真 #CSS
公式資料で迷ったら、一つの疑問に答える読み方を試そう
説明が長い公式資料を、最初から全部読もうとしていませんか。架空の絵本交換会の案内を例に、調べたい問いを絞り、用途・属性・注意点を照合して短い調査メモに残す方法を紹介します。
#調べ方 #公式資料
文字サイズがばらばらな案内を、三つの役割で整理しよう
大きな文字を増やしたのに、何から読めばよいか分からない。架空の朗読会の案内を使い、ページ名・節の見出し・本文を三段階で組み、長い文でも読めるか比べる練習です。
#文字サイズ #タイポグラフィ
「詳しくはこちら」を、行き先が分かるリンク文言に直そう
同じ「こちら」が並び、どれを押せばよいか分からない案内を見直します。架空の自転車修理店を例に、移動先の内容と次の行動を照らし合わせ、短く具体的なリンク文言を作ります。
#リンク文言 #UIデザイン
原稿と写真がそろわないとき、掲載情報の準備表を作ろう
画面を作り始めたのに、紹介文も写真も届かない。架空の木工教室サイトを例に、必要な素材をページ名より小さく分け、用意する人・確認する人・未確定事項が分かる準備表を作ります。
#原稿整理 #素材準備
作った人以外も更新できるように、引き継ぎメモを一枚作ろう
サイトの更新を別の人に渡すとき、ファイル名だけでは操作の判断が残ります。架空の貸し会議室の案内を例に、編集する場所、変更後の確認、迷ったときの連絡先を一枚にまとめます。
#引き継ぎ #更新手順
タブが全部同じ名前になったら、ページごとのtitleを直そう
複数ページを開くと、タブの名前が全部サイト名になってしまう。架空の古書店を例に、titleと本文の見出しを分け、各ページの内容を区別できる名前へ直す確認手順を紹介します。
#HTML #ページタイトル
「いい感じにして」を、制作前に確かめる三つの質問へ変えよう
曖昧な依頼から、すぐに色やレイアウトを決めていませんか。架空の花店サイトを題材に、困っている場面・届けたい人・次の行動を質問し、回答と制作者の仮説を分けて整理します。
#ヒアリング #要件整理
ページごとに違うボタンを、役割からそろえる方法
同じ予約への入口なのに、ページごとに色や形が違う。架空の貸しスタジオサイトを例に、操作の役割を棚卸しし、共通の見た目と例外を短いルールにまとめます。
#UIデザイン #ボタン #一貫性
コードを写して動いた後は、入力を変えて結果を予想しよう
写したコードを説明できるか確かめたい人へ。架空の写真展示のデータを使い、入力・条件・出力を言葉にし、予想と実行結果の違いから調べる箇所を絞る練習を紹介します。
#学習の進め方 #JavaScript #コードの読み方
入力すると項目名が消えるフォームを、labelで直そう
placeholderだけで項目名を示すフォームを見直します。架空の読書会の入力欄を例に、labelとidの対応、入力後の表示、ラベルを押したときの動きを確認します。
#HTML #フォーム #ラベル
サイトの修正が重なったら、利用者への影響で順番を決めよう
リンクの不具合と見た目の調整が同時に見つかったとき、何から直すか。架空の演奏会サイトを使い、影響・代替手段・再確認の観点から修正順を決める練習です。
#修正の優先順位 #公開前チェック
サイト制作が終わらないとき、完成条件を5つ書こう
「見やすくできたら完成」では、修正を終える判断が曖昧になります。架空の展示会サイトを例に、目的を確認可能な完成条件へ変え、未達と追加要望を分ける方法を紹介します。
#完成条件 #制作計画
更新前のバックアップ、戻す対象と確認手順を決めよう
サイト更新の前に、何を保存し、どの状態へ戻すかを整理します。架空の写真家サイトを例に、保存対象の選び方と復旧用メモの作り方を紹介します。
#バックアップ #更新手順
ワイヤーフレームで迷ったら、情報の順番を2案で比べよう
色を付ける前に、読者の疑問に沿って情報の順番を決めます。架空の陶芸体験ページを題材に、配置案を2つ作り、選んだ理由を説明する練習です。
#ワイヤーフレーム #情報の優先順位
デザインに迷ったら、まず余白をそろえてみる
文字の大きさや装飾を増やす前に、情報のまとまりを余白で伝える。見出し・本文・カードの間隔を考える練習です。
#余白 #情報設計
はじめてのホームページ制作。最初に決めておきたい5つのこと
コードを書く前に、誰に何を伝えるサイトなのかを整理する。目的・読者・情報・導線・公開後の確認を、一つずつ考えます。
#学習の進め方 #企画
リンクとボタン、見た目が同じでも役割は違う
ページを移動するならリンク、その場で操作するならボタン。迷いやすい使い分けを短いコード例で整理します。
#HTML #アクセシビリティ
ポートフォリオには、完成画面だけでなく制作の理由を書く
誰の課題に、どんな判断で応えたのか。目的・担当範囲・改善の過程を伝える、作品紹介の書き方です。
#ポートフォリオ #総合制作
公開する前に。フォームとリンクを最後まで確かめる
表示できることと、使えることは別。リンク先、入力エラー、通知メールまで、公開前の確認項目をまとめました。
#公開前チェック #フォーム
スマートフォン表示で確認したい、5つのポイント
画面幅を狭くして終わりにしない。文字、画像、リンク、横スクロール、入力フォームを順番に確認します。
#レスポンシブ #CSS
Tabキーで今どこにいるか、フォーカスの表示を直そう
マウスでは使えるのに、Tabキーで進むと現在位置が見えない。架空の施設案内を例に、消された枠を見直し、focus-visibleで表示を付け、順方向と逆方向の操作を確認します。
#アクセシビリティ #キーボード #フォーカス
画像のaltに何を書くか、ページでの役割から決めよう
すべての写真に詳しい説明を書くべきか迷ったら、画像の役割を確認します。架空の園芸教室を例に、情報を伝える写真、飾り、リンクの画像を分け、代替テキストを考える練習です。
#アクセシビリティ #画像 #alt
ボタンが反応しないとき、JavaScriptの読み込み順を確かめよう
HTMLにボタンがあるのにJavaScriptから見つからない。架空の工房案内を例に、ファイルの読み込み、idの一致、実行のタイミングを順に調べ、deferで直す手順を紹介します。
#JavaScript #defer #読み込み順
入力欄の数字で計算する前に、空欄と範囲を確認しよう
数字を入れたはずなのに結果がつながった文字になる。架空の工作会の材料数を例に、valueAsNumberで数値を読み取り、空欄・小数・範囲外を分けて扱う計算例を紹介します。
#JavaScript #数値入力 #入力チェック
入力した文字をそのまま表示する、textContentの使い方
入力欄の文字をページに表示する小さなプレビューを作ります。架空の展示作品名を題材に、HTMLとして解釈させない表示方法、空欄の扱い、更新する範囲の決め方を確認します。
#JavaScript #textContent #入力値
長いメニューを飛ばして本文へ進む、スキップリンクを作ろう
毎ページ同じメニューをTabキーで通る負担を減らすため、本文への入口を用意します。架空の地域資料館を例に、リンクと移動先の作り方、フォーカス移動まで含めた確認手順を紹介します。
#アクセシビリティ #スキップリンク #ページ構造
記事が見つかりませんでした
別のキーワードやカテゴリで探してみてください。