6日でできる 新HTML入門
「6日でできる 新HTML入門」とは
「6日でできる 新HTML入門」は、月曜日から土曜日までの6日間で、HTMLとCSSの基礎から実用的なWebページの作り方までを順番に学べる、初心者向けの学習講座です。HTMLやCSSに初めて触れる方でも取り組みやすいように、ファイルの作成方法やブラウザでの表示確認といった基本から、少しずつ学習を進めていきます。
前半では、HTMLを使って見出し、段落、文字、画像、リンクなどをページに表示する方法を学びます。その後、CSSの基本に進み、文字の大きさやフォントなどを変更しながら、ページの見た目を整えていきます。
中盤では、文字色、背景色、枠線、余白、角丸、影、半透明など、CSSによるさまざまなデザインに挑戦します。divタグやspanタグによるグループ化、画像と文章の回り込み、リンクの状態に応じた装飾も学びます。
後半では、表やリストを使った情報整理から、Webサイト全体のページレイアウトへと進みます。さらに、外部CSSファイル、インラインフレーム、フォームなど、実際のWebサイトでもよく使われる機能を取り入れます。
6日間の学習を終えるころには、文章や画像を並べるだけでなく、情報を見やすく整理し、デザインを加えたWebページを自分で作れるようになります。日曜日は復習や休憩に使い、翌週から新しい分野へ挑戦できる学習シリーズです。
【前半：Day0–2】HTMLとCSSの基本を学ぼう
前半では、Webページ制作を始めるための準備を整え、HTMLの基本からCSSの入り口までを学びます。まずDay0では、HTMLとCSSがそれぞれどのような役割を持つのかを確認し、テキストエディターやブラウザなどの制作環境を準備します。
Day1では、HTMLファイルを作成してブラウザに表示し、改行、見出し、段落、文字装飾、画像などの基本的なタグを使います。自分が記述したHTMLが画面に表示される流れを体験しながら、Webページの構造を理解していきます。
Day2では、同じページ内の指定位置や別ページ、外部サイトへ移動するリンクを作成します。後半ではCSSの基本的な書き方を学び、文字の大きさやフォントなどを変更します。前半を終えるころには、HTMLでページの内容を作り、CSSで簡単なデザインを加えられるようになります。
【中盤：Day3–4】CSSでページをデザインしよう
中盤では、CSSのさまざまな機能を使い、Webページの文字、背景、枠線、余白、配置などを本格的に整えていきます。Day3では、文字の色、行間、文字間隔、インデントなどを設定し、文章を読みやすく見せる方法を学びます。
背景色や背景画像を加えると、ページ全体や各要素の印象を大きく変えられます。また、要素の幅と高さ、枠線、内側の余白、外側の余白を指定し、情報をすっきりと整理する方法にも取り組みます。
Day4では、角丸、影、半透明などを使い、ボックスや画像にやわらかな装飾を加えます。divタグとspanタグによるグループ化、floatとclearを使った回り込み、リンクにマウスポインターを重ねたときのデザインも学びます。CSSを組み合わせ、まとまりのある見やすいページを作る段階です。
【後半：Day5–6】実用的なWebページを完成させよう
後半では、これまでに学んだHTMLとCSSを組み合わせ、より実用的なWebページを作ります。Day5では、料金表や予定表などに利用できる表の作成方法を学びます。行と列を作る基本タグだけでなく、見出しセル、行や列のグループ化、セルの結合にも取り組みます。
CSSを使って表の枠線、背景色、文字の位置、余白などを整え、情報を読み取りやすくします。さらに、番号付きリストや箇条書きリストを作り、項目の整理やナビゲーションメニューとして活用します。
Day6では、ページをヘッダー、ナビゲーション、メインコンテンツ、サイド部分、フッターなどに分け、Webサイトらしいレイアウトを作成します。外部CSSファイル、インラインフレーム、フォームについても学び、ユーザーが閲覧するだけでなく、入力や選択ができるページへ仕上げます。
Day0：Web制作の準備
Day0では、6日間の学習を始める前に、Webページが表示される基本的な仕組みを確認します。HTMLは、見出し、文章、画像などの内容と構造を作るための言語です。一方のCSSは、文字の色や大きさ、余白、配置など、ページの見た目を整えるために使います。
学習では、HTMLファイルを作成するためのテキストエディターと、完成したページを表示するブラウザを使用します。ファイル名や拡張子の付け方、画像を保存するフォルダーの作り方なども確認しておきましょう。
HTMLとCSSの役割や制作の流れをあらかじめ知っておくと、これから登場するタグやCSSの設定を理解しやすくなります。焦らず学習を進めるために、必要な環境と基本知識を整える準備の章です。
| 01 HTMLと作成手順 |
Day1：HTMLでページを作ろう
Day1では、HTMLファイルを作成し、ブラウザにWebページを表示するまでの手順を学びます。最初にHTMLタグの基本的な書き方を確認し、開始タグと終了タグで内容を囲む仕組みを理解します。
続いて、改行、見出し、段落を使い、文章を読みやすく整理します。見出しには内容の重要度に応じた段階があり、適切に使い分けることで、ページの構造が分かりやすくなります。
文字を太くする、斜体にする、上付き文字や下付き文字にするといった装飾方法にも挑戦します。最後に画像をページへ掲載し、画像ファイルの場所や代替テキスト、大きさの指定方法を確認します。文字と画像を組み合わせ、基本的なWebページを作成する章です。
| 02 タグの基本と改行 | 03 見出しと段落 |
| 04 文字の装飾 | 05 画像の表示とimgタグの使い方 |
Day2：リンクとCSSの基本
Day2では、Webページ同士をつなぐリンクの作成方法を学びます。別のHTMLファイルへ移動するリンク、外部サイトを開くリンク、同じページ内の指定位置へ移動するリンクなど、目的に応じた設定方法を確認します。
文字だけでなく、画像をクリックできるリンクとして利用する方法にも取り組みます。リンクを使いこなすことで、複数のページを行き来できるWebサイトを作れるようになります。
後半では、Webページの見た目を整えるCSSの学習を始めます。CSSの基本的な書き方や、デザインを適用する場所を指定するセレクターを学びます。文字の大きさやフォントの種類を変更し、HTMLだけで作ったページを読みやすく整えながら、HTMLとCSSの役割の違いを理解します。
| 06 リンクの作り方とaタグの基本① | 07 リンクの作り方とaタグの基本② |
| 08 CSSの基本① | 09 CSSの基本② |
| 10 文字書式のCSS① |
Day3：文字・背景・余白の設定
Day3では、CSSによる文字書式の設定をさらに詳しく学びます。文字の色、行間、文字間隔、インデント、文字の配置などを調整し、文章を読みやすく見せる方法を確認します。色の名前やカラーコードを使った色指定にも取り組みます。
続いて、Webページ全体や各要素に背景色や背景画像を設定します。背景を工夫すると、見出しや案内欄などを目立たせ、ページの雰囲気を変えることができます。
さらに、要素の幅と高さ、枠線の太さや種類、色を指定します。内側の余白であるpaddingと、外側の余白であるmarginの違いも大切なポイントです。要素の大きさと余白の関係を理解し、窮屈さのない整ったデザインを作れるようにします。
| 11 文字書式のCSS② | 12 CSSによる色指定 |
| 13 CSSによる背景色の指定 | 14 サイズ指定とCSSによる枠線 |
| 15 CSSによる余白の指定 |
Day4：装飾と要素の配置
Day4では、CSSを使ってWebページのデザインをさらに豊かにします。ボックスや画像の角を丸くする方法、要素の周囲に影を付ける方法、背景や要素を半透明にする方法を学びます。
また、divタグとspanタグを使い、複数の要素や文章の一部をグループとしてまとめます。divタグは比較的大きなまとまりを作るとき、spanタグは文章の一部分だけにデザインを設定するときに便利です。
画像の横に文章を配置する回り込みと、回り込みを解除するclearの使い方にも取り組みます。後半では、通常時、訪問後、マウスポインターを重ねたときなど、リンクの状態に応じたデザインを設定します。最後に、これまで学んだCSSを整理し、効率よく指定する方法を確認します。
Day5：表とリストの活用
Day5では、情報を行と列に分けて整理できる表の作成方法を学びます。表全体、行、見出しセル、データセルを作るタグを使い、料金表、予定表、商品一覧などを作成します。
CSSを利用して表の枠線を整え、セルの背景色、文字の位置、内側の余白などを設定します。見出しとデータの違いが分かるようにデザインすると、内容を読み取りやすい表になります。
さらに、表の見出し部分や本文部分をグループに分ける方法、複数のセルを横方向や縦方向に結合する方法にも挑戦します。後半では、番号付きリスト、箇条書きリスト、階層を持つリストを作成します。情報の一覧だけでなく、Webサイトのナビゲーションメニューとして活用する方法も学びます。
Day6：ページレイアウトの完成
Day6では、6日間で学んだHTMLとCSSを組み合わせ、Webサイトらしいページレイアウトを作成します。ページをヘッダー、ナビゲーション、メインコンテンツ、サイド部分、フッターなどに分け、それぞれの役割を意識しながら配置します。
また、CSSを外部ファイルとして保存し、複数のHTMLページで共通して利用する方法を学びます。外部CSSを利用すると、ページごとに同じデザインを書く必要がなくなり、修正や管理もしやすくなります。
さらに、別のWebページをページ内に表示するインラインフレームを作成します。最後に、文字入力欄、選択項目、チェック項目、送信ボタンなどを配置したフォームを作ります。これまでの学習内容を組み合わせ、見やすく操作しやすいWebページへ仕上げます。