省略した文字の確認方法を決める：一行の題名から全文を開く
長い題名を一行へ省略した後、全文を読める入口はありますか。架空の作品一覧を使い、CSSによる省略と開閉欄を組み合わせます。原稿を切る失敗や、マウスだけに頼る案内を直す練習です。
#CSS #省略表示
CATEGORY / HTML / CSS
HTML / CSSの記事一覧
HTML / CSSについて学べるWeb制作スクール「0→1」の記事一覧。実践的な制作方法やポイントを分かりやすく解説します。
行内の小さなラベルの折り返しを選ぶ：外側と内側を分けて考える
文章中の「予約不要」が二行に分かれるとき、どこを一まとまりにすべきでしょうか。架空の案内文でinline-blockとwhite-spaceを区別し、長いラベルも欠けない設定を比べます。
#HTML / CSS #css-inline-block
上下のマージンが相殺される理由：兄弟と親子を分けて調べる
marginを二つ足したのに間隔が増えない、子の上余白が背景の外へ出る。架空の案内欄で上下のマージンの相殺を再現し、兄弟間の間隔と親の内側余白を分けて直します。
#HTML / CSS #css-margin-collapse
dialogでモーダルを開閉する：閉じる操作と戻る場所を確かめる
重なる箱が表示されるだけでは、モーダルの操作は完成しません。架空の資料室の案内を使い、dialogの開閉、閉じるボタン、Escape、呼び出し元へ戻るフォーカスを順に確かめます。
#HTML / CSS #html-dialog
横に長い表のスクロール範囲を決める：本文を動かさず右端まで読む
表に合わせてページ全体が横へ広がっていませんか。架空の教材比較表を使い、表を囲む領域だけに横スクロールを設けます。幅を指定する場所、キーボードの入口、右端の情報を読めるかを確かめる練習です。
#CSS #表 #横スクロール
途中から続く番号付きリストを作る：説明を挟んだ手順をつなごう
手順の間に説明を挟んだら、次の番号が1へ戻っていませんか。架空の出品案内を使い、olのstartとliのvalueを比較します。リストを分ける判断と、項目を追加した後の番号の確認を練習します。
#HTML #番号付きリスト #手順の構造
リストのマーカー位置を整える：折り返す本文と丸印の場所を分ける
箇条書きが二行になると、本文の開始位置がずれていませんか。架空の植物交換会の持ち物案内を使い、insideとoutsideを比較します。丸印の場所を確保する余白と、項目間の余白も分けて確認します。
#HTML / CSS #リストのマーカー位置を整える
stickyが止まる範囲を調べる：親の高さとoverflowを見る
追従見出しが動かなかったり、途中で画面から消えたりするときに。架空の工房案内でstickyが止まる範囲を調べ、上端の指定、親の高さ、祖先のoverflowを一つずつ確認する手順を紹介します。
#CSS #sticky #スクロール
timeで日時を機械可読にする：表示とdatetimeを照合しよう
開催日時を日本語で書いたページに、機械が読める日時を添えます。架空の観察会を題材に、日付だけの値と時差付き日時を使い分け、表示だけを変更して属性が古く残る失敗を防ぐ確認手順を紹介します。
#HTML #time #日時
gapで項目の間隔をそろえる：項目同士と外周の余白を分けよう
折り返す一覧で、最後の項目だけ余白が余ったり、行ごとの間隔が変わったりしていませんか。架空の展示分類を題材に、親へgapを指定し、項目間と外周の余白を分けて調整します。
#HTML / CSS #gap
dlで用語と説明を組にする：見た目より先に対応を決めよう
用語集の名前と説明を、太字や改行だけで並べていませんか。架空の製本用語を使い、dl・dt・ddで対応を表し、説明の長さや表示の装飾が変わっても読む順番を保つ練習です。
#HTML / CSS #description
印刷すると不要なメニューを省く：紙に残す本文を先に決めよう
印刷した案内がメニューで埋まる場合は、紙で使う情報と画面だけの操作を分けます。架空の地域散策の案内を使い、print用のCSSと印刷プレビューで確かめる項目を紹介します。
#HTML / CSS #CSS
画像の説明をfigureとfigcaptionでまとめる：altとの役割を分けよう
画像の下の文章が、どの図の説明か分かりづらくなっていませんか。架空の展示台の図を例に、figureとfigcaptionでまとめ、代替テキストと画面に見せる説明を分ける手順を紹介します。
#HTML / CSS #HTML
本文の行間を単位なしで指定する：子要素の文字サイズで比べよう
本文を大きくしたら行が詰まって見えるときは、親要素から引き継いだline-heightを確認します。架空の散策案内を使い、固定した値と単位なしの指定を同じ原稿で比べる練習です。
#HTML / CSS #css
ページ内リンクの見出しが隠れるとき：固定ヘッダーの下に余白を設ける
目次から移動した先の見出しが固定ヘッダーに隠れる場合は、スクロール時の余白を確認します。架空の展示案内を使い、scroll-margin-topを設定し、リンク先と画面幅を変えて確かめる手順を紹介します。
#CSS #ページ内リンク
CSSが効かないとき適用元を探す：色を変える前に上書きを確認する
CSSを書き直しても色が変わらないときは、指定の強さを足す前に適用元を調べます。架空の展示カードを使い、開発者ツールで宣言を比較し、変更する規則を絞る練習を紹介します。
#CSS #開発者ツール
detailsで補足を開閉する：開く前のラベルを具体的にする
短い補足を折りたたみたいとき、detailsとsummaryで開閉部分を作れます。架空の紙工作会を題材に、常に見せる情報と補足を分け、ラベルとキーボード操作を確認する手順を説明します。
#HTML #開閉UI
box-sizingで幅をそろえる：余白を足しても外側を広げない
同じwidthを指定したのに、余白を足した箱だけ大きくなる。架空の展示案内を題材に、content-boxとborder-boxの計算を比べ、枠線を含めた幅をそろえる方法を説明します。
#CSS #ボックスモデル
カードの列数をCSS Gridで変える：一列から三列へ広げる
カードを三列にしたら、スマートフォンで一枚ずつが細くなってしまう。架空の体験講座一覧を使い、一列を基本にして広い画面で三列へ切り替えるCSSと確認手順を紹介します。
#CSS Grid #レスポンシブ
Flexbox内の長い文字を収める：最小幅と折り返しを分ける
横並びのカードで長い英字だけが枠から出るときに。架空の資料名カードを使い、Flexboxの子要素の最小幅と文字の折り返しを分けて調べ、必要な内容を隠さずに表示する方法を紹介します。
#Flexbox内の長い文字を収める
見出しの順序を整える：h2とh3を内容の親子で選ぶ
小さく見せたいからh3を選んでいませんか。架空の楽器体験会を題材に、文章の親子関係から見出しレベルを決め、文字の大きさとは分けて構造を確認する方法を紹介します。
#見出しの順序を整える
写真が出るたび本文が動くとき、画像の縦横サイズを指定しよう
画像を読み込んだ瞬間に、その下の文章がずれる状態を見直します。架空の染物工房の紹介を例に、画像の寸法とCSSの表示幅を分け、読み込み前に場所を確保する考え方を説明します。
#画像 #レイアウトシフト
入力すると項目名が消えるフォームを、labelで直そう
placeholderだけで項目名を示すフォームを見直します。架空の読書会の入力欄を例に、labelとidの対応、入力後の表示、ラベルを押したときの動きを確認します。
#HTML #フォーム #ラベル
リンクとボタン、見た目が同じでも役割は違う
ページを移動するならリンク、その場で操作するならボタン。迷いやすい使い分けを短いコード例で整理します。
#HTML #アクセシビリティ
スマートフォン表示で確認したい、5つのポイント
画面幅を狭くして終わりにしない。文字、画像、リンク、横スクロール、入力フォームを順番に確認します。
#レスポンシブ #CSS
TRY A LESSON
読んだら、
少し作ってみよう。
課題とレビューで学ぶ、
15本の無料レッスン。