0から！サイト制作 〜 HTML+CSS　#1

この記事は、webサイトを自分で作れるようになるのに必要なHTMLとCSSを、全くのゼロから学んでいただくものです。

僕自身、HTMLもCSSもまったくなにも知らなくて、最近になってはじめて学んだクチ。
それでもいちおう、webサイトを自分でつくってネットにあげることができるようになったんです。それなりに、学んだり覚えたりしなければならないこともあるけど、少しずつ順を追って学んでいけば、あなたにも必ずできるようになります！

それで、僕が学んだことをみなさんと共有して、webサイトをつくれるようになってもらえたら楽しいかな、ということでこの記事、それとメルマガで伝えていこうと考えたわけです。

それなりにややこしいことなんかも出てくるけど、焦らずに少しずつ、試しながら理解していってもらえれば、誰でもできるようになっていきます。
僕も自分が学んだことを棚卸ししていくつもりでまとめながらお伝えしていくので、どうぞお付き合いください！

それから、このnoteでは有料記事としましたが、note上だけではなく僕からみなさんへ直接発信もしていけるようにメルマガにも取り組んでいきたいと思います。その登録者も募りたいので、登録してくださる方への特典としてこの記事と同じ内容をメルマガをつうじて配信していきます。
見ず知らずの発信者のメルマガへの登録には、ちょっとしたハードルもあることと思います。それをおして希望いただいた方へのお返しとして、サイトがつくれるようになっていく内容をお届けしていきます。こちらは無料にて受け取っていただけますので、ぜひご検討ください！

（メルマガご登録ページ） http://bit.ly/3zmAxcn

表示だけなら本当に誰でも、すぐできる！

そもそも、HTMLやCSSとは、コンテンツを「ブラウザ」をとおして表示させるための言語です。みなさんもネットはふだんから毎日使っていると思います。ブラウズという言葉が「閲覧する」という意味なので、ブラウザは（ネット上のコンテンツを）みせるためのものというわけです。
ネットをみるときには、ChromeやSafari、Edgeなんかのアプリを使っていることがおおいと思います。これがブラウザですね。

でも、ブラウザにはブラウザの「お作法」みたいなものがあって、ちゃんとルールにのっとって情報を伝えてあげないと、ブラウザもおもったとおりにはうまく表示させてくれないわけです。そのルールがHTMLであり、CSSだということ。
正確には、HTMLとCSSでは受け持つ役割がちがい、連携させながら使い分けをしていくのですが、詳しいことはややこしいのでおいおい説明していきますね。

まずはためしに、ほんとうに単純にWordで文章を打つみたいに、文字だけを打ち込んだテキストファイルを「***.html」というファイル名（拡張子をhtmlにすればそれでよし。それだけ）にして保存し、ブラウザで開いてみよう。
それでもいちおうちゃんと表示されます。こんな感じ。

でも、表示はできるんですがこれはただ映しただけって感じですよね…
せめて、改行ぐらいは入れて、できれば見出しは見出しっぽくしたり、読みやすく、また「それっぽく」したいのが人情というもの。
そのためには文章に、文字面だけではなく「意味づけ」をしてあげなければいけない。これを「文章構造」といいます。文章の中身であるテキスト情報に、この文章構造を与える機能を持つ言語（マークアップ言語）が、HTMLです。

先ほどの文字情報だけのファイルにちょっとだけ「タグ」づけしてあげて、再度ブラウザで表示し直してみたものが下の図です。