6日でできる 新HTML&CSS入門

「6日でできる 新HTML＆CSS入門」とは

「6日でできる 新HTML＆CSS入門」は、Webサイトを作ったことがない方でも、基礎から順番に学べる入門カリキュラムです。学習を始める前のDay0では、インターネットやWebサーバの仕組みを知り、Visual Studio Code、Google Chrome、MAMPなど、Web制作に必要な環境を準備します。

Day1からは、Webページの骨組みを作るHTMLを学びます。文章やリスト、リンク、表、画像などを使い、ページに情報を分かりやすく配置する方法を身につけます。Day2では、CSSによる色や装飾の指定を学び、HTMLで作ったページの見た目を整えていきます。

中盤では、ボックスモデルや余白、枠線、要素のグループ化などを学び、本格的なレイアウト作りに進みます。さらに、パソコンだけでなく、タブレットやスマートフォンでも見やすく表示するレスポンシブWebデザインにも取り組みます。

後半では、フォーム、ログイン画面、Webフォント、SEO、SNS対応など、実際のWebサイトでよく使われる知識を学びます。最後は、WebアプリやCMSの基本を確認し、Bootstrapを使った効率的なページ制作やPHPプログラムの実行も体験します。

一度にすべてを覚える必要はありません。コードを少しずつ入力し、ブラウザで表示を確かめながら進めることで、Web制作の流れが自然に分かるようになります。6日間の学習を通じて、自分でWebページを作る楽しさを感じてみましょう。

【前半：Day0–2】Web制作の準備と基本

前半では、Webサイトを作るための準備を整え、HTMLとCSSの基本を学びます。Day0では、インターネット、ブラウザ、Webサーバの関係を確認し、Webページがどのような流れで表示されるのかを理解します。あわせて、コードを入力するVisual Studio Code、表示を確認するGoogle Chrome、パソコン内にWebサーバ環境を作るMAMPを導入します。

Day1では、HTML文書の基本構造を学び、リスト、リンク、表、画像などを使ってページの内容を組み立てます。Day2では、CSSを使って色や文字、表などのデザインを整えます。RGBや16進数による色の表現、要素名やクラスを使ったセレクタの指定も学習します。

この段階では、難しいデザインを作ることよりも、HTMLとCSSの役割の違いを理解することが大切です。入力したコードが画面にどのように反映されるかを一つずつ確認しながら、Web制作の基本操作に慣れていきましょう。

【中盤：Day3–4】レイアウトと画面幅への対応

中盤では、HTMLで作成した要素を見やすく配置し、Webページらしいレイアウトへ整えていきます。Day3では、要素の大きさや間隔を考えるうえで欠かせないボックスモデルを学びます。コンテンツ、パディング、ボーダー、マージンの違いを理解すると、文字や画像の周囲に適切な余白を設けられるようになります。

また、div要素によるグループ化、要素の回り込み、マージンの相殺など、レイアウトを作るときに起こりやすい問題についても確認します。擬似クラスを使い、マウスポインターを重ねたときに表示を変える方法も学びます。

Day4では、ヘッダー、ナビゲーション、メインコンテンツ、フッターなどを組み合わせ、ページ全体の構造を作ります。さらに、メディアクエリやフルードイメージを利用し、画面の幅に合わせてレイアウトや画像サイズが変化するレスポンシブWebデザインに取り組みます。

【後半：Day5–6】サイト制作と便利な技術

後半では、これまでに学んだHTMLとCSSを活用しながら、実際のWebサイトで役立つ機能や知識を身につけます。Day5では、利用者が文字や情報を入力できるフォームを作り、データを送信する基本的な仕組みを学びます。ログイン画面の作成や、Webフォントを利用した文字デザインにも取り組みます。

また、検索エンジンにページの内容を伝えるSEOの基本や、SNSでページが共有されたときに、タイトルや画像を適切に表示するための考え方も確認します。学んだ内容を組み合わせ、最後には小規模なWebサイトを制作します。

Day6では、Webアプリ、CRUD、CMSの基本を学びます。さらに、Bootstrapのグリッドシステムやボタン、フォーム、テーブルなどを使い、整ったページを効率よく作成します。PHPプログラムの実行も体験し、動きのあるWebサイト作りへの第一歩を踏み出します。

Day0：Web制作の環境づくり

Day0では、Web制作を始める前に、インターネットとWebページの基本的な仕組みを学びます。ブラウザから送られた要求をWebサーバが受け取り、HTMLなどのデータを返すことでページが表示される流れを確認します。HTMLとCSSの歴史や、文字化けを防ぐために必要な文字コードについても学習します。

後半では、コードを入力するVisual Studio Codeをインストールし、日本語化パックを追加します。さらに、ページの表示確認に使うGoogle Chromeと、パソコン内にWebサーバ環境を構築するMAMPを導入します。MAMPを起動して正常に動作することを確認できたら、学習の準備は完了です。

01 インターネットからHTMLが届くまで02 インターネットを支えるサーバ
03 Webサーバの役割とHTML04 HTMLとCSSの歴史と進化
05 HTMLで正しく文字を表示する方法06 Visual Studio Codeのインストール
07 VSCodeへ日本語化パックのインストール08 Chromeのインストール
09 MAMPのインストール10 MAMPの起動と動作確認

Day1：HTML文書の組み立て

Day1では、Webページの内容と構造を作るHTMLを学びます。最初に、DOCTYPE宣言、html要素、head要素、body要素など、HTML文書を構成する基本的な要素の役割を確認します。ページの設定を書く部分と、ブラウザに表示する内容を書く部分の違いを理解しましょう。

次に、ul要素やol要素を使ったリスト、a要素を使ったハイパーリンクを作成します。table要素による表の作成や、行や列をまたいで表示するセルの結合にも取り組みます。さらに、img要素を使った画像表示や、title属性によるツールチップの表示も学びます。タグの名前だけでなく、どのような情報に使うのかを意識することが大切です。

11 HTMLページの基本構成12 リストの種類と使い方
13 ハイパーリンクの記述14 テーブルの構造
15 セル結合とテーブルレイアウト16 画像タグと属性の使い方
17 title属性とツールチップ

Day2：CSSと色の表現

Day2では、HTMLで作ったページの見た目を整えるCSSを学びます。最初に、赤、緑、青を組み合わせて色を表現するRGBの仕組みや、16進数によるカラーコードを確認します。透明度を設定するアルファ値やアルファチャンネル、画像が画面に表示される基本的な仕組みにも触れます。

CSSでは、セレクタ、プロパティ、値からなる基本的な書き方を学びます。style属性を使った指定や、表の文字色、背景色、枠線などを変更する方法も実践します。要素名、ID、クラスなどのセレクタを使い分け、複数の要素へ同じスタイルをまとめて適用する方法も身につけます。

18 Webカラーの基本19 16進数の表現
20 画像が表示される仕組み21 アルファ値とアルファチャンネル
22 Webページを装飾するCSS23 スタイルシートの基本形
24 style属性で見た目を変えよう25 CSSでテーブルを見やすくする
26 さまざまなCSSセレクタ27 複数セレクタの基本

Day3：余白と配置の基本

Day3では、Webページのレイアウトに欠かせないボックスモデルを学びます。HTMLの各要素は、文字や画像を表示するコンテンツ、その周囲のパディング、境界線となるボーダー、外側の余白となるマージンから構成されています。それぞれの役割を理解すると、要素の大きさや間隔を調整しやすくなります。

また、ボーダーの種類や太さ、パディングの指定、上下のマージンが重なるマージンの相殺についても確認します。div要素を使ったグループ化や、画像の横に文章を配置する回り込みにも取り組みます。最後に擬似クラスを利用し、リンクや要素の状態に応じてデザインを変える方法を学びます。

28 ボックスモデルの基本29 ボーダーの線種と色
30 paddingとmarginの基本31 マージン相殺の仕組みと対策
32 divで要素をグループ化する33 floatで横並びにする方法
34 floatの問題点と対策35 擬似クラスと擬似要素の基本

Day4：レスポンシブなページ設計

Day4では、Webページ全体の構造を考えながら、実際のサイトに近いレイアウトを作ります。ヘッダー、ナビゲーション、メインコンテンツ、サイド領域、フッターなど、それぞれの役割を理解し、利用者が情報を見つけやすいページ構成を目指します。

後半では、パソコンやスマートフォンなど、異なる画面サイズに対応するレスポンシブWebデザインを学びます。メディアクエリを使うと、画面幅に応じて要素の並び方や大きさを変更できます。また、画像が表示領域からはみ出さないようにするフルードイメージも取り入れます。さまざまな端末で見やすく、使いやすいページに仕上げましょう。

36 Webサイトの基本レイアウト37 Webサイトの基本レイアウトを構築する
38 レスポンシブWebデザインの基本39 レスポンシブWebデザインの作成
40 レスポンシブWebデザインの作り方41 画面幅に合わせて画像を縮小する方法

Day5：フォームとサイト公開の知識

Day5では、お問い合わせ画面やログイン画面などで使われるフォームを学びます。テキスト入力欄、パスワード入力欄、選択項目、送信ボタンなどを組み合わせ、利用者が入力した情報を送信するための画面を作成します。これまでに扱っていない便利なHTMLタグについても確認します。

さらに、Webフォントを使って文字の印象を整える方法や、検索エンジンにページの内容を伝えるSEOの基本を学びます。SNSでページが共有されたときに、適切なタイトルや画像を表示するための設定にも触れます。最後は、HTML、CSS、レイアウト、レスポンシブ対応を組み合わせ、小規模なWebサイトを完成させます。

42 お問い合わせフォームの作り方43 さまざまなフォームタグ
44 ログイン画面の基本構造45 Webフォントの利用
46 SEOに強いHTMLの書き方47 SNS対応の基本
48 4ページ構成のWebサイト制作

Day6：BootstrapとWebアプリ入門

Day6では、利用者の操作に応じて内容が変わるWebアプリの基本的な仕組みを学びます。データを作成、読み取り、更新、削除するCRUDの考え方や、Webサイトの記事や画像を管理しやすくするCMSについても確認します。静的なWebページと、プログラムを利用する動的なWebサイトの違いを理解しましょう。

実践では、CSSフレームワークのBootstrapを使います。グリッドシステムによるレスポンシブレイアウトや、ボタン、フォーム、テーブルなどの部品を活用します。スペーシング用のクラスを使えば、余白も手軽に調整できます。最後にMAMP上でPHPプログラムを実行し、次のWebプログラミング学習につなげます。

49 動的Webページの仕組み50 LAMP環境とCRUD
51 Webサイト更新を簡単にするCMS52 Bootstrapの導入方法
53 Bootstrapグリッドの基本54 Bootstrapのボタンとフォーム
55 Bootstrapのテーブル56 Bootstrapのスペーシング
57 PHPで動的なWebページを作る