公開日：2015.05.04
更新日：
WEB入門前に、HTMLとCSSの基礎知識さらっとまとめ。
この記事の目次（クリックで項目へジャンプします）
HTMLやCSSを使ってコーディングする技術者をフロントエンドエンジニアやコーダーと呼びます。
コーディングをしたいけどHTMLやCSSってなんだか難しそう・・・、英語ばっかりで何書いているんだろう・・・まるでマトリックスの世界じゃないか。と思っている方多いのではないでしょうか。極めてゆこうとすると奥の深い世界ですが、さらっとどんなものなのか把握しておきたい。勉強する前にちら見しておきたいんだよね。という方もいるはず。
そこで今回はWeb制作に興味のある方や、基礎知識として知っておきたい方へ向けてHTMLやCSSについて書いてみました！
HTMLとは
Hyper Text Markup Languageを略してHTMLと言います。
現在インターネット上で公開されているWebサイトのほとんどがHTMLで作成されており、WEBサイトを構造する言語で、見出しや本文を決めたり画像を表示させたりとブラウザ上に様々なものを表示します。
HTMLはタグと言われるものを使い分ける事により、どのような役割で何を表示するのかを細かく決めることができます。例えば、文章や画像、リンクなどです。そしてタグにはclass属性とid属性を付与することができ、そこがCSSと大きく関わってくる部分となります。
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称HTML（エイチティーエムエル）とは、WEB上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。
WEBの基幹的役割を持つ技術の一つでHTMLでマークアップされたドキュメントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などの高度な表現力を持つ。
現在は、WHATWG?により仕様が作られ、それを元に?W3C?により勧告が行われるという流れになっている。W3C は、XML?ベースの規格である?XHTML?の勧告も行っている。
出典：Wikipedia
HTMLの基本構造
タグと言われるものを使い、画像や文章をどのような役割で表示するのかを決めます。HTMLには基本的な構造があり、どのWEBサイトもそれに則って記述されているのがほとんどです。
<!DOCTYPE html>
<html lang=”ja” dir=”ltr”>
<head>
</head>
<body>
ここはh1?h6の見出しや本文や画像など記入した情報全てがブラウザで表示されます。
</body>
</html>
このように基本的には<html>、<head>、<body>、で構成され、ブラウザ上に表示されるものは<body>?</body>の中に記述されているものが表示される様になっています。<head>?</head> に記述されているものはブラウザ上に表示されません。
headタグに入る主なタグとその役割
では、ブラウザ上に表示されない<head>?</head>の中には何を記述するのか。ページ上では見えないこの部分には、ページを表示する上で必要な事が記述されます。例えば検索結果に表示されるサイト名やサイトの説明文（デスクリプション）などもこの<head>?</head>のエリア内に記述されます。
必ず入れる、お決まりのタグがいくつか存在します。
文字コード
<meta charset=”UTF-8″ />
文字コードはShift-JISやUTF-8、ECU-JPが日本国内で多く使われています。
タイトルタグ
<title>ここにタイトル</title>
検索エンジンの検索結果に表示されたり、ブックマークした時のファイル名となります。ブラウザのタブにも表示されますよ。ちなみにタイトルがすっごく長かったりすると、検索結果に表示される時に最後あたりが「・・・」になるので、諸説ありますが文字数は27文字前後が良いとか言われています。
サイトの説明文
<meta name=”description” content=ここに説明文/>
検索結果でタイトルの下に表示されるWebサイトの説明文。このページがどんなページなのか、何のサイトなのかをここで記すことが出来ます。
bodyタグの中にはなにが入るのか
ブラウザ上に表示される<body>?</body>の中には様々なタグが用いられます。大抵の場合、これは使われるでしょうという！というのがこれら。
見出しを表示するには<h1>?<h6>
文章を表示する際には見出しも付けたいものです。例えばこの記事のタイトルも<h1>を使っています。大見出しには<h1>、以下の中見出しには<h2>?<h6>までを使うのが一般的。そして、<h1>は１ページに１つだけ使うのが良いとされています。（HTML5ではh1の複数利用が非推奨ではなくなりました）
文章を表示するには<p>
文章を表示するには段落は<p>タグ(paragraph)を用います。<p>タグで囲い、改行をする場合は<br>タグを書き込みます。
タグの利用例
<p>
ここに本文ここに本文ここに本文ここに本文
ここに本文ここに本文<br>
ここに本文ここに本文ここに本文ここに本文
</p>
リンクをはるには<a>タグ
<a href=”リンク先URL”>リンクへ飛びます</a>
文章や画像にリンクを貼る際にはアンカータグを使います。href属性でリンク先のURLを指定することが可能です。
画像を貼るには<img>
?<img src=”ファイル先URL”>
画像を貼るには<img>タグを使います。jpg、png、gifなどの画像ファイルをsrc属性で指定します。
ブロック要素とインライン要素
先ほどご紹介したタグですが、主に２つのグループに分類されます。
ブロック要素
文書構造の基本となる要素で1つのブロックとして判断される要素。
ブラウザ上で自動的に改行がされるので、わかりやすいかと思います。連続してブロック要素を記述していくと、縦に自動的に配置されていきます。
主なブロック要素
・<h1>?<h6>
・<div>
・<p>
・<table>
・<ul>
などがあります。
ブロック要素の中にはブロック要素とインライン要素の両方を織り交ぜて記述することができ、高さや横幅を指定することができる特徴を持っています。
インライン要素
ブロック要素の中の内容として判断される要素です。
行の一部と判断されるので、改行は入りません。続けて記述していくと改行されず、横にどんどん配置されていきます。配置されるスペースがなくなると、下の段にまた横並びに配置されていくようなイメージです。
主なインライン要素
・<img>
・<a>
・<span>
・<strong>
・<br>
などがあります。
インライン要素の中にはブロック要素を配置することは推奨されていません。基本的にはインライン要素の中には、別のインライン要素のみ記述します。ブロック要素と異なり、高さや横幅を指定することができません。
CSS
HTMLと組み合わせてWebサイトを制作する為の言語です。ほとんどのWebサイトが組み合わせて使っています。
HTMLは要素をタグで囲い表示・指示を出すのですが、その表示されたものに対してデザインやレイアウトの指示を細かく出すことが出来るのがCSSです。例えば画像や文章を左右に寄せたり、文字の色を変えたりと様々な指示を書き込めます。
Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML?や?XML?の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。
出典：Wikipedia
そして、そのCSSにはclass属性とid属性というものがあります。
class属性
class属性は重複して繰り返し使うことが出来ます。
同じ見た目にしたい文書などがある場合は同じclass名を付けると1つの指示が、全てのclassに適用されます。<タグ>で囲った要素に、class名を付ける事でCSSにより指示を出す箇所を指定するようなイメージです。
classを指定する書き方は<h1 class=”クラス名”>と書き、クラス名を付けていきます。（クラス名はアルファベットで記述する）
CSSのclass記述例
h1.クラス名{
font-size:10px;
}
id属性
class属性と異なり、重複してid名を付けることはできません。なのでheaderやfooterなどページ内に1つしか存在しない要素や、ページ内リンクに使います。オンリーワンな指示を書きたいときにはid属性で構いません。
指示を出す箇所を指定する書き方は<div id=”アイディー名”>と書きます。(アイディー名はアルファベットで記述する）
CSSのid記述例
h1#アイディー名{
font-size:10px;
}
Webサイトを構成しているHTMLやCSSについてちょっぴり理解していただけたでしょうか。一見難しそうでもルールさえ覚えてしまえばあなたにもコーディングできますよ！WEBの基礎知識として知っておきたい方も、さらっと確認しておくことで、仕事などでも活用できるとおもいます。
