# HTML・CSSの基本が1日でマスターできる速習カリキュラム
ウェブ開発の世界に飛び込みたいと考えている方、あるいはすでにIT業界にいるけれどHTML・CSSのスキルを磨きたいと思っている方のために、たった1日でHTML・CSSの基礎を身につけられる速習カリキュラムをご紹介します。朝から晩まで集中して取り組めば、ウェブサイト制作の基本スキルを習得することができます。
## 朝の部：HTMLの基礎（9:00-12:00）
第1時限：HTMLとは何か（9:00-10:00）
HTMLは「Hyper Text Markup Language」の略で、ウェブページの構造を定義するマークアップ言語です。まずはHTMLの役割とその重要性について理解しましょう。
– HTMLの歴史と進化
– HTML5の特徴と主要な変更点
– 文書型宣言（DOCTYPE）の意味
– 基本的なHTMLの構造（html, head, body）
“`html
こんにちは、世界！
これは私の最初のウェブページです。
“`
第2時限：基本的なHTMLタグ（10:00-11:00）
ウェブページの内容を構成する基本的なHTMLタグを学びます。
– 見出しタグ（h1〜h6）
– 段落タグ（p）
– リストタグ（ul, ol, li）
– リンクタグ（a）
– 画像タグ（img）
– 区切りタグ（div, span）
“`html
大見出し
中見出し
これは段落です。ここをクリックすると別のサイトに移動します。
- リストアイテム1
- リストアイテム2
“`
第3時限：セマンティックHTML（11:00-12:00）
意味を持つHTMLタグの使い方について学びます。
– header, nav, main, section, article, aside, footer
– figure, figcaption
– time, address
– SEOとアクセシビリティへの影響
“`html
ウェブサイトのタイトル
セクションの見出し
記事のタイトル
記事の内容…
“`
## お昼休憩（12:00-13:00）
休憩時間には、朝の部で学んだHTML知識を使って簡単なウェブページを作成してみましょう。自己紹介ページや趣味の紹介ページなど、自分の興味のあるテーマで実践してみることで理解が深まります。
## 午後の部：CSSの基礎（13:00-17:00）
第4時限：CSSとは何か（13:00-14:00）
CSSは「Cascading Style Sheets」の略で、HTMLで作成した構造に見た目やレイアウトを適用するための言語です。
– CSSの役割と重要性
– CSSの記述方法（インライン、内部、外部）
– セレクタ、プロパティ、値の関係
– カスケーディングとは何か
– 優先順位と継承の仕組み
“`css
/* 外部CSSファイルの例 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
h1 {
color: #0066cc;
text-align: center;
}
p {
margin-bottom: 1em;
}
“`
第5時限：基本的なCSSプロパティ（14:00-15:00）
テキストや背景などを装飾するための基本的なCSSプロパティを学びます。
– 色指定（color, background-color）
– フォント関連（font-family, font-size, font-weight）
– テキスト関連（text-align, text-decoration, line-height）
– 余白と境界線（margin, padding, border）
– 幅と高さ（width, height）
“`css
.highlight {
background-color: #ffff99;
padding: 10px;
border: 1px solid #999;
border-radius: 5px;
}
.button {
display: inline-block;
padding: 8px 16px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 4px;
}
“`
第6時限：レイアウトの基礎（15:00-16:00）
要素を画面上に配置するための様々な方法を学びます。
– ボックスモデルの概念
– 表示プロパティ（display）
– 配置プロパティ（position）
– フレックスボックスの基本
– グリッドレイアウトの基本
“`css
.container {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}
.column {
flex: 1;
padding: 20px;
background-color: #f5f5f5;
margin: 0 10px;
}
“`
第7時限：レスポンシブデザイン（16:00-17:00）
様々なデバイスやスクリーンサイズに対応するための技術を学びます。
– メディアクエリの基本
– ビューポートの設定
– モバイルファーストの考え方
– フレキシブルイメージとメディア
“`css
/* メディアクエリの例 */
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
.column {
margin: 10px 0;
}
h1 {
font-size: 24px;
}
}
“`
## 夕方の部：実践編（17:00-19:00）
第8時限：ミニプロジェクト（17:00-19:00）
1日で学んだHTML・CSSの