/blog
記事一覧
HTML・CSS・JavaScriptの入門から、よくあるつまずきの解決まで。気になるテーマから読んでみてください。
52 件
- 01AIにコードを聞くときの、質問のしかた同じことを聞いても、返ってくる答えの質は聞き方で大きく変わります。学習の役に立つ聞き方と、初学者がやると危ない使い方を整理します。
- 02レイアウトが崩れる原因、上位3つ横にはみ出す、余白が思ったより広い、要素が重なる。崩れ方は色々でも、原因は数種類に集中しています。見つけ方とあわせてまとめます。
- 03JavaScriptが動かないときに見る3か所JavaScriptは、間違っていても静かに止まります。だからこそ手順が要ります。コンソール・読み込み・取得の3か所を順に見れば、原因はほぼ特定できます。
- 04画像が表示されないときのチェックリスト画像だけが出てこない。原因はほぼパスの問題ですが、見た目では分かりません。上から順に確かめれば数分で見つかる手順にまとめました。
- 05作ったページを公開するまでの流れ — 全体像をつかむ手元で作ったHTMLを、世界中から見られるようにするには何が必要か。ドメイン、サーバー、アップロードの関係を、道具の名前ごと整理します。
- 06VSCodeの最初の設定 — 入れておく拡張機能と、変えておく3項目インストールした直後の状態でも書けますが、最初に少しだけ整えておくと、ミスに気づける回数がまるで変わります。欲張らず、本当に効くものだけを挙げます。
- 07localStorage で覚えさせる — 閉じても消えないデータページを再読み込みすると入力が消えてしまう。localStorage を使うと、ブラウザに保存しておけます。仕組みと注意点を、動くもので確かめます。
- 08フォームの入力値を受け取る — value と入力チェック入力された文字をJavaScriptで受け取り、簡単なチェックをして表示する。ここまでできると、作れるものが一気に増えます。
- 09ブラウザの検証ツールを開く — 原因を自分で見つけられるようになる「なぜか動かない」を自力で解決できるかどうかは、この道具を使えるかで決まります。開き方と、最初に見る2つのタブだけ覚えれば十分です。
- 10関数の作り方 — 処理に名前を付けて使い回す同じ処理を何度も書いている、という状態を解消するのが関数です。作り方と、「引数」「戻り値」という2つの言葉を、実物で理解します。
- 11配列と繰り返し — 同じ処理を何度も書かない複数のデータをまとめて扱うのが配列、それを1つずつ処理するのが繰り返しです。この2つが分かると、コードの量が一気に減ります。
- 12ボタンを押したら動かす — イベントの基本「押したら開く」「押したら切り替わる」。Webページらしい動きの正体はイベントです。addEventListener の型を覚えて、開閉メニューまで作ってみます。
- 13if文と比較 — 「もし〜なら」を書けるようになる条件によって処理を分けるのが if 文です。書き方は単純ですが、= と == と === の違いでつまずきます。そこを重点的に説明します。
- 14変数と型 — const と let、どちらを使えばいいか変数は「値に名前を付けて箱に入れる」こと。let と const の使い分けと、文字と数値の違いでハマる場面までを、動かしながら押さえます。
- 15要素を取得する — querySelector の使い方JavaScriptで何かをするには、まず対象を見つける必要があります。その道具が querySelector です。CSSのセレクタがそのまま使えるので、覚えることはほとんどありません。
- 16「レスポンシブ」とは — 1つのページで全部の画面に対応する考え方よく聞く言葉ですが、具体的に何をすることなのかは説明されないままです。仕組みと、実際に何を書くのかを、短くまとめます。
- 17スマホで表示がおかしいときの確認手順文字が極端に小さい、横に動く、はみ出す。スマホ特有の崩れには、原因の定番があります。上から順に確認すれば必ず見つかります。
- 18JavaScriptの読み込み方 — script タグを書く位置でつまずかないJavaScriptが動かない原因の上位が、読み込む位置の問題です。script タグをどこに書くか、defer とは何かを、最初に押さえておきましょう。
- 19指定していないのに隙間ができる — 犯人は改行と初期値margin も padding も書いていないのに、なぜか隙間がある。この現象には、はっきりした原因が3つあります。知らないと一生悩みます。
- 20リンクが効かない・飛ばないときの原因5つ押しても何も起きない、404になる、同じページに戻ってくる。症状ごとに原因が違います。見分け方をまとめました。
- 21スマホ対応の第一歩 — メディアクエリの書き方と考え方画面幅によってレイアウトを変えるのがメディアクエリです。書き方は簡単ですが、順番と考え方を間違えると効かなくなります。まずは1か所から始めましょう。
- 22フォントが変わらないときに確認する4つのことfont-family を書いたのに、見た目が変わらない。原因は「そのフォントが端末に無い」か「指定が届いていない」のどちらかです。切り分け方から説明します。
- 23hover と focus — 「押せそう」を伝える状態のスタイルリンクやボタンは、見た目が変わることで「押せる」と伝わります。マウス以外で操作する人のための focus まで含めて、セットで覚えましょう。
- 24Flexboxで横並びにする — 最初に覚える3つのプロパティ横並びはCSSの最初の山場です。Flexboxはプロパティが多く見えますが、入り口で必要なのは3つだけ。並び方が変わる様子を動かしながら確かめます。
- 25transition でなめらかに変化させる — 1行で印象が変わるホバーで色が「パッ」と変わるか「ふわっ」と変わるか。この差を作るのが transition です。書き方はほぼ1行。やりすぎない基準も添えます。
- 26CSS Grid 入門 — カードを格子状に並べる最短ルートFlexboxが「並べる」なら、Gridは「区画を作る」道具です。カード一覧の定番の書き方を、たった3行で作れるところまで案内します。
- 27CSSが反映されないときに確認する5つのこと書いたCSSがブラウザに反映されない——初心者が最初につまずく定番トラブルです。原因になりやすい5つのポイントを、上から順に確認していきましょう。
- 28position 入門 — 重ねる・貼り付けるための4つの値バッジを右上に置く、ヘッダーを上に固定する。この手の表現に使うのが position です。混乱しやすい absolute の基準も、動かしながら整理します。
- 29px・rem・%・vw の使い分け — 迷ったら何を使うか単位が多すぎて選べない。実務で使うのは4つだけで、しかも用途はほぼ決まっています。「なぜ rem を使うのか」まで含めて説明します。
- 30余白の考え方 — margin と padding を使い分ける見た目が素人っぽくなる原因の多くは余白です。margin と padding の違い、そして「どちらで空けるべきか」の判断基準を、実際に動かして確かめます。
- 31画像の見せ方を整える — 潰れる・はみ出すを止める2行写真の縦横比がおかしくなる、画面からはみ出す。この2つは、たった2行で解決します。object-fit を知っているかどうかで仕上がりが変わります。
- 32影の付け方 — box-shadow の4つの数字の意味コピペで使いがちな box-shadow。4つ並ぶ数字の意味が分かれば、自分で自然な影を作れます。やりすぎた影が古く見える理由も説明します。
- 33文字を読みやすく整える — サイズ・行間・色の決め方文字の指定は種類が多く、どれをどう決めればいいか迷います。実務で使うのは実質4つだけです。読みやすさが変わる基準値とあわせて確かめます。
- 34枠線と角丸 — border と border-radius の書き方枠線は3つの値を並べるだけ。角丸は数字ひとつ。単純なのに、指定する場所を間違えるとレイアウトがずれます。その理由まで含めて確かめます。
- 35背景の付け方 — 色・画像・グラデーションの基本background は指定できることが多く、覚えるのが大変に見えます。実際に使うのは4つだけ。背景画像がずれる・繰り返される問題もここで解決します。
- 36CSSの当て方とセレクタの基本 — どこに、何を指定するかCSSは「どこに」「何を」の2つだけでできています。その「どこに」を決めるのがセレクタです。書き方3種類と、初心者が使う範囲のセレクタをまとめます。
- 37CSSでの色の指定 — #ffffff の6文字が意味するものcolorに書く謎の6文字。あれは「赤・緑・青をどれだけ混ぜるか」の指定です。仕組みが分かると、色を自分で微調整できるようになります。
- 38相対パスと絶対パス — 「どこから見た住所か」の違い画像が出ない、CSSが読み込まれない。原因の大半はパスです。../ の意味さえ分かれば、迷子にならなくなります。フォルダの図で1から説明します。
- 39div と span はいつ使う？ — 迷ったときの判断基準とりあえず div で囲む、という書き方から抜け出すための記事です。div と span の違い、そして「div を使わないほうがいい場面」を、実際に並べて確かめます。
- 40「ブロック要素」と「インライン要素」— 幅と改行の正体「なぜか横に並ばない」「幅を指定しても効かない」。この2大つまずきの答えが、この言葉の違いです。図でも説明でもなく、実際に動かして体で覚えます。
- 41読みやすいコードの書き方 — インデントと命名の作法動けばいい、で書いていると、1週間後の自分が読めなくなります。今日から使える、たった3つの習慣にしぼって紹介します。
- 42箇条書きの書き方 — ul・ol・li の関係を1回で覚えるリストは実務でいちばん多く書くタグのひとつです。ul と ol の使い分け、そして「liの直下に何を置けるか」を押さえておくと、あとでレイアウトが崩れにくくなります。
- 43フォームの作り方の基本 — input と label をセットで書く問い合わせフォームは、入力欄を並べるだけでは不十分です。label を正しく結びつけるかどうかで、使いやすさが大きく変わります。最小構成から組み立てます。
- 44表（table）の書き方 — 3つのタグの入れ子を覚えるだけ表はタグが多くて難しそうに見えますが、覚えるのは「表・行・マス」の3つだけです。入れ子の順番さえ間違えなければ、必ず組めます。
- 45リンクと画像の書き方 — a と img でつまずくのは属性タグ自体は短いのに、なぜかリンク先に飛ばない・画像が出ない。原因のほとんどは属性の書き方です。書き方の型と、崩れたときの見え方をまとめて確かめます。
- 46HTMLで記号が消える・崩れるとき — 特殊文字とエスケープ文章に < を書いたら、そこから先が消えた。コピペしたコードが表示されない。原因は「HTMLにとって意味のある文字」を、そのまま書いてしまったことです。
- 47意味のあるタグを使う — header・main・footer の使いどころすべて div でも動きます。それでも header や main を使う理由は「読む相手が人間だけではない」から。使い分けの基準を、迷わない形にまとめます。
- 48「タグ」「要素」「属性」の違い — 検索する前に知っておく3語入門書でも解説記事でも当たり前のように出てくる3つの言葉。区別があいまいなままだと、検索しても答えにたどり着けません。1つのコードで並べて確かめます。
- 49見出しタグ h1〜h6 の使い方 — 大きさで選ぶと失敗するh1が大きくてh6が小さい。そう覚えると必ずつまずきます。見出しは大きさではなく「階層」で選ぶもの。その理由と正しい順番の付け方を、実際に並べて確かめます。
- 50HTMLの骨組みを1行ずつ読む — 最初のファイルに何を書くかHTMLファイルの先頭に並ぶ、呪文のような数行。コピペで済ませがちなあの部分が何をしているのかを、1行ずつ確かめていきます。その場で書き換えて動かせるデモつきです。
- 51HTML・CSS・JavaScriptの役割の違いを、動かして理解する「HTMLが骨、CSSが服、JavaScriptが動き」という説明はよく聞きますが、いまひとつピンと来ない。3つを1つずつ足していくデモで、それぞれが何をしているのかを目で確かめます。
- 52Web制作、何から学べばいい？ — 最初の3か月の地図入門記事も動画も山ほどあるのに、どれから手を付ければいいのか分からない。学び始めでいちばん多いこの迷いに、順番と「やらなくていいこと」で答えます。