目次
1．HTMLとは
IT社会といわれる今、インターネットでは様々な情報を閲覧することができます。
そして、私たちが携帯やパソコンからウェブページを閲覧することができるのは、HTMLと呼ばれるウェブページを作成のための言語が存在するからです。
HTMLが存在するおかげで、私たちは気軽にインターネット上にウェブページを閲覧することができるし、作成して様々な人に閲覧させることもできます。
今回は、「今からHTMLについて学びたい！」「HTMLって何から始めればいいの？」と悩んでいる方のために、HTML・CSSについて簡単にまとめてみました。
また、以下文章ではHTML・CSSのことを”コーディング“と呼ぶことにします。
２．何を使ってどこにコーディングしたらいいの？？
まずはどこに書いて実行すればいいのか…。それは、“自由”です。
私がコーディングを始めたころは、Windows購入時にそのままついてくるメモ帳機能を使っていました。
しかし、コーディングに慣れてきて、“タグ”という概念を理解するようになると、タグと文章が同じ色で出てくるメモ帳に嫌気がさしてきます。
そんな時に、タグや文章を色別でわかりやすいように表示してくれるソフトが役に立ちます。
はじめのころ（まだ書くソースがそんなに長くない場合）は必要ないかもしれませんが、これから先もコーディングを続ける予定のある方は使ってみることをお勧めします。（私が使っているのはBracketsという無料ソフトです。)
こんな感じで色別に表示してくれる左のエディタは、同じ文章を書いている右のメモ機能よりも、かなり見やすいですよね。
そして、Bracketsはタグが足りない場合などにエラーまで出してくれます。
3．コーディングをする際に最も重要！！タグの概念を知る
次に、“タグ”について説明していきます。
タグは、たとえて言うなら仕切りのようなものです。
「タイトルはここからここまでですよ」、「本文はここからここまでですよ」、「マーカーを引くのはここからここまでですよ」というように、パソコンが読み取りやすいように仕切ってあげるようなイメージです。
上記の画像のタグ<>は基本すべて書く必要があります。しかし青枠で囲った部分に関しては、CSSを用いる際に使うので、今は必要ありません。
次に、コーディングをする際よく使うタグ8つを紹介していきたいと思います。
- 文字を改行する
- 〇〇〇</h1> 本文の中で1番大きな見出し
- 水平線を引く
- 〇〇〇</u> 下線を引く
- 〇〇〇</b> 太線にする
- 〇○○</center> 中央に寄せる
- 〇○○.jpg” > 画像の挿入
画像がhtmlファイルから見て違う階層（例えばimgフォルダ）にある時は、
<img src=”.img/〇○○.jpg” >となります。
イメージ的には以下の図の通りです。
- <a href= “URL”>〇○○</a> 他のサイトのリンクを貼りたいとき
こんな感じに反映してくれます。
そしたらファイルを保存します。保存する際、必ずファイル名を〇〇〇.htmlとしてください。
そして、保存したファイルをダブルクリックすれば、自分が作ったウェブページを閲覧することができます。（この段階では自分のパソコンでしか見ることができません。ほかのパソコンで見たいなら、サーバに上げる必要があります。）
次はウェブページに動きをつけるために、色や装飾をしていきたいと思います。
4．ウェブページに動きをつけよう！目を引くページにするために
文字に色を付けたり、大きさを変えたり、枠を書いたりするのには、CSSというHTMLで書いた文章を詳しく装飾するための言語を使います。
このCSSはHTMLのファイルに直接書き込むことも可能ですが、ごちゃごちゃして見えたり、ファイルが重くなったりするので、私はHTMLとCSSのファイルは分けて保存することをお勧めします。
分けて保存するには、cssを記述したhtmlとは別のファイルを作り、ファイル名を〇○○.cssにして、htmlのファイルのhead内に以下の画像の青枠の文を入れること。これだけの工夫ですっきりした見やすいファイルになります。
５．CSSの基本的な機能
CSSにはページ内の装飾や文字の大きさなどの記述を行います。cssを使えば、色のついた枠だったり、マーカー風に色を塗ったりすることができます。
また、様々な機能を持たせたcssのソースコードはインターネット上にいくらでも転がっています。例えば上の画像にある青い枠。
自分で考えて作ると何時間もかかるものが、ありがたいことにネットにはゴロゴロ転がっています。
コピペをするだけで使用可能なものも多いので、それを引っ張ってきて自分のウェブページに利用することが効率のいい策といえるでしょう。
なお、cssのファイルのほうではタグは必要ありませんが、機能ごとに｛｝の記号をつけることを忘れないようにしましょう。
まとめ
今回はhtmlとcssを用いたコーディングについて紹介させていただきました。
初回ということで、htmlやcssを始めるにあたっての環境づくりから説明したので、少し頭が痛くなってしまったかもしれません。
次回以降からはもう少し実践的なコーディングのやり方をご紹介したいと思います。
