本講座の目的
本講座の目的は、HTMLとCSSを用いてWebページを作成する手順を解説することです。
この講座を進めていくことで、Webページがどのようにして作られているかを理解し、ITへの関心を持ってもらう第一歩目となってくれるのなら幸いです。
HTMLとCSSを用いますが、これらの言語の仕様の詳細を説明することが目的ではありません。言わば入門の入門です。もちろん間違ったことを説明するつもりはありませんが、あくまでWebページの作成方法についての基本を解説することが目的ですので、説明が極めて簡潔になっていたり、ベストプラクティスではない内容を説明する場合もあります。なお、発展編として、これらの言語の仕様を説明するページも作成中です。
ただ、「Webページが作れれば何でもいい」というつもりもありません。難易度を下げながらも、現代のHTMLマークアップとCSSスタイリングのエッセンシャルを取り入れた講座にしたいと考えています。
講座の記事一覧はこちらのページ、また、本ページの下部にも記載してあります。
対象者、具体的な内容、推奨環境など
対象者
- ✔️ IT、Webに関して何かしら関心がある人
- ✔ ️会社、学校等で少しばかりコンピューターを触っている人（ファイルやフォルダーの操作を不自由なくできればOK👌）
最終目標
この講座でHTMLとCSSを学び、最終成果物としてこちらのページを作成できるようになることが目標です。
この講座でHTMLとCSSを学び、サンプルWebサイトを作成するのが目標です。サンプルページは現在作成中ですが、トップページ＋ブログ記事ページの構成になっています。
また、理論的な部分を交えながらの解説ですので、ある程度の応用力もついているはずです。
この講座で解説するもの
- ✔ Webページの作成方法
- ✔️ HTMLとCSSの基本的な記述方法
- ✔️ セマンティックなマークアップ方法
- ✔️ Flexboxによるレイアウト方法
この講座で説明しないもの
- ❌️ HTMLやCSSの詳細な仕様
- ❌️ レスポンシブ対応方法
- ❌️ Webサイトのインターネットへの公開方法
- ❌️ SEO対策方法
OS
OSはWindows10を想定しています。これは私がWindows10を使って動作検証をしているためです。しかし、HTMLとCSSを学習するという内容的に、Windows8やWindows11を使用したとしても支障なく読み進められるはずです。同様に、MacOSやLinuxをお使いの方でも、ファイルの取り扱い方が分かっていれば問題なく済み進められるはずです。
ブラウザー
Webページの表示など、検証に使用するWebブラウザーはGoogle Chrome（以下、Chrome）を想定しています。
特に（大変心苦しいですが😅）、Internet Explorer（以下、IE）は対象外とします。IEを使用した場合、「あれ？ここに書いてある通りにならないぞ？」といった事が100%発生します（2021年現在、特に個人のPCでIEを使用している人はそうそういないと思いますが…）。
そしてこれは、Chrome以外のブラウザーを使用した時にも場合によっては起こりえます。ですので、この講座で学習する時はChromeを使用してあげてください。
Chromeのインストール方法は以下を参照してください。
Google Chrome をダウンロードしてインストールする - パソコン - Google Chrome ヘルプ
テキストエディター
使用するテキストエディターはVisual Stadio Code（以下、VSCode）を推奨します。
VSCodeは無料でありながら高速・高機能な素晴らしいテキストエディターです。エディターにこだわりがなく宗教上の理由がないのであれば、ぜひVSCodeを使用してみてください。
もちろん他のエディターでも支障のない内容になっていますが、VSCodeに関する便利なTipsなどを紹介することがあります。また、VSCodeのプラグインもちょくちょく紹介します。
VSCodeのインストール方法は以下を参照してください。
(ページ作成中)
[ポエム]このコンテンツを立ち上げた経緯
ある日、会社の同僚（IT担当ではない）に「ITとかに詳しくなるためには何を勉強したらいいですか？」と聞かれました。
多分その人は、「Windowsに詳しくなりたい」とか「Officeを使いこなせるようになりたい」とかではなくて、もっと漠然とITの仕組みや裏側に興味があって、そこを知りたがっているんだろうと感じました（違ってたらすみませんでした）。
結局、その人には1,500円くらいで買える「図解 ネットワーク」みたいな本を買って渡したんですが、では自分が勉強し始めたときはどうだったかと考えたのです。
最初に手を付けたのは、ITパスポート試験の勉強でした。確かその試験が開始されたくらいの年で、「こういうのを勉強したらちょっとは詳しくなれるかも」くらいの勢いでその資格を勉強し始めました。参考書を買って勉強したんですが、内容が簡単すぎるのと理論的な勉強が多く、手を動かして作業することに繋がるような内容ではありませんでした。
そしてその次に手をつけたのがHTMLとCSSでした。最初に、HTMLとCSSで簡単なWebサイトを作りました。そこから、掲示板を作りたくなってPHPとMySQLを触ったり、バージョン管理のためにGitを覚えて、自分の作ったページをインターネットに公開するためにレンタルサーバーを借りてLinuxを勉強しました。
サーバーサイドでJavaScriptが動くと知ってApacheから乗り換えてみたり、Webサイトをクラウドに移行したりもしました。ドメインを取得してHTTPS化する際、HTTPやTLS、DNSについて勉強し、ネットワークプロトコルについても再勉強しました。
何が言いたいかというと、HTMLとCSSってITの入門用の教材として最適なんじゃないか？ ということです。
プログラミング入門といえばJavaやPythonが候補にあがったりすると思うんですが、あれってソフトウェアをインストールしたり黒い画面でコマンドを打ってコンパイルしたりする必要があります（私ははるか昔の高校生くらいの時にJavaを勉強しようと思い立って環境構築で挫折した記憶があります）。
しかし、HTMLとCSSを始めるにあたっては環境構築をする必要はほとんどありません。PCに最初から用意されているWebブラウザーとテキストエディターだけで始められるのです。しかも、HTMLとCSSはおもちゃのようなプログラミング言語ではなく、Webでほとんど100%利用されている現役バリバリの技術です（そして、それはこれから先も変わらないでしょう）。
そして今回、「IT関係に興味はあるけど何からしたらいいのか分からない」「理論的な所からじゃなく、とにかく何か作ってみたい」という人に向けたWebページを作成する講座を立ち上げた、という訳です。
現在進行形で作成中ですので更新は遅いと思いますが、よければご覧ください。