💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2026年5月31日
結論
width で要素の幅を指定できます
div { width: 300px; }| 単位 | 特徴 | 使いどころ |
|---|---|---|
px | 固定値 | 固定幅のコンポーネント |
% | 親要素の割合 | レスポンシブ |
vw | ビューポート幅 | フルスクリーン |
width で幅を固定（高さは height）
・レスポンシブには % や vw を使う
🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
divの幅を300pxにしてください。
width: 300px;
divの幅を300pxにしてください。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
「幅を指定」は入門レベルのHTML/CSS/JS演習です。divの幅を300pxにしてください。 この課題は、ブラウザ内エディタでその場実行でき、正誤判定も自動で行われます。
widthで幅を指定します。 実務では同様のパターンがコードレビューやUI実装の現場で繰り返し登場します。
学習ロードマップ「css-basic」とセットで進めると、インプット→アウトプットの循環が作れます。演習#34はカテゴリ「css-basic」の中核スキルを固める位置づけです。
解答コードでは div, style などのHTMLタグが使われています。タグの入れ子と閉じタグの対応を確認しましょう。 CSSでは width、border などのプロパティが指定されています。セレクタとプロパティ名のスペルに注意してください。 解説: widthで幅を指定します。 ヒントの要点: width: 300px;
CSS基礎はデザイナーとの協業や、Tailwind/Bootstrapを使う前の土台です。色・余白・タイポグラフィはブランドサイトの統一感を決めます。
このページは「幅を指定」「css-basic」「入門」「div」「style」「width」「border」「element width」などのキーワードで検索される方に向けた、幅を指定の無料演習・解説です。