HTMLやCSSは、ウェブサイトを作るうえで欠かせないコンピューター言語です。本記事では、HTML,CSSとは何か、というところから実際にそれらを用いてご自身のパソコンのブラウザに表示するところまで解説します。
本記事で理解できること
HTMLとはなにか
CSSとは何か
HTMLとCSSを書いてみる
ブラウザに表示させる
HTMLとは文章を構造化するためのもの
HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ）の略で、ウェブページを作るために欠かせないマークアップ言語のひとつです。
ちょっと何言ってるか分からないですね．．．
マークアップ言語とは、タグを用いて文章を構造的につくるためのものです。
webサイトの目に見える部分を作っている根本的なところが、HTMLによって作られているんです。
webサイト使わない人なんていないよね。
つまりみんなHTMLと関係してるんだ！
説明されるよりも、見てみたほうが早いものです。今見ているページの文字の上で右クリックして、「ページのソースの表示」というところをクリックしてみてください。（検証でもいいです）
すると次のような画面になることと思います。
色んな文字が<>で囲まれているのを確認できますね。これがHTMLです。
なんだか難しい文字がたくさんあって、自分に理解できるか不安です．．．
慣れてくれば本を読んでるみたいに分かるようになるから大丈夫!
CSSとは見た目を整えるためのもの
CSSとはCascading Style Sheet（カスケーディング・スタイルシート）の略であり、ウェブサイトの見た目を整えるためのコンピューター言語です。
特定の文章の色を指定したり、文字の大きさを変えたり、配置や背景画像を設定したりと、レイアウトやデザインを変更します。
HTMLだけだと、ウェブページとして表示した時、以下の様に非常に単純な見た目になってしまいます。（Resultが実際のブラウザ上での表示と同じです）
See the Pen yLOMQGx by M2RnRT (@m2rnrt) on CodePen.
では、これにCSSで装飾してみましょう。次のものを見てください。(CSSのボタンを押してみると、どのようなCSSが追加されたかが見れます）
See the Pen WNwpYZE by M2RnRT (@m2rnrt) on CodePen.
文字のサイズや太さ、また背景の色が変わったことを確認できるかと思います。
CSSとはこのようにHTMLでマークアップされた文字を、装飾したり、変形したりとデザインができるようなコンピューター言語なのです。
実際にHTML、CSSを使ってみよう
説明だけでは実感は伴いません。というわけで実際に自身のパソコンでHTML,CSSを使ってみましょう。
HTMLを使ってブラウザ上に表示させてみる
まず、お手持ちのパソコンで、テキストエディタ―を開いてみてください。（Windowsの方は「メモ帳」、Macの方は「テキストエディット」というアプリが最初から入っていて、それを使うことができます。）
上の写真の様に、テキストエディタ―で書いてみてください。
タグについてはこちらの記事で詳しく解説しています。
タグは<>で表し、開始タグと終了タグの間に文字を入れるんだ。
また、中には終了タグを持たないタグも存在し、写真を挿入する<img>や改行する<br>などがその一例です。
タグの種類はたくさんありますが、今は雰囲気を掴むだけで大丈夫です。
次に、名前を付けて保存し、拡張子（名前の一番最後の部分）は .html にしましょう。
保存したら、そのファイルを開いてみてください。次の様にブラウザ上に表示されることと思います。
非常に簡単ですね。
CSSでレイアウトを整える
先ほどHTMLで表示した文字たちをCSSで整えてみましょう！
まず、先ほどのHTMLファイルと同じ場所にstyle.cssというファイルを作ってください。
同じフォルダの中に、並べて置いてみてください。
htmlファイルとcssファイルの位置関係が非常に重要で、ここをも違えると表示されません。
今度はHTMLファイルをテキストエディタ―で開き、編集します。<head></head>タグの中に、<link rel=”stylesheet” href=”style.css”>と追加してください。
relとはrelationの省略で、リンクとの関係性を検索エンジンに伝えるために記述するんだ。stylesheetっていうのはCSSのことです。
href(エイチレフ)はリンク先のパスを書きます。
これで準備が整いました。次に、CSSファイルをテキストエディタ―で開いてください。そして、次のように書いてみてください。
これを保存して、再び先ほどのHTMLファイルを開きなおしてみてください。するとこのように変化しているはずです。
良くわからなかった方はこちらからコードをコピペして試してみてください。（ただし、ファイルの名前と設置場所には気を付けてください。）
See the Pen PoNjWaP by M2RnRT (@m2rnrt) on CodePen.
まとめ
最後に、まとめに入りましょう。
HTMLとは、普段ウェブサイトで目にするものを作っていて、文章をタグによって構造化するものでした。
人間なら、文字の大きさや配置で、見出しや段落などの文章の構造がわかりますが、ブラウザや検索エンジンにはタグで教えてあげないと分かってくれないのです。
CSSは、HTMLで構造化された文章を、人間が見やすいようにレイアウトをきれいにしてあげる、ただそれだけです。
実は簡単で、慣れが必要なだけなので、日々継続してノウミソに覚えさせてしまいましょう(*´∇｀*)
