HTML基礎知識

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

まず、そもそもHTMLとCSSとjsはどのような関係なのかをはっきりさせます。

HTML
文章構造を表すための言語。これはタイトルだよ、これは段落だよーなど。
CSS
見た目を補完するための言語
JS
動きやサーバとの通信を担当する言語

ざっくりいうとこんな感じです。どうやって使うかはさておき意味だけはそのまま感覚で理解できそうですね。

HTMLとCSSのちょっとした歴史背景

htmlタグにはそれぞれ意味があります。例えば<h1>タグであれば、「そのページのもっとも重要なタイトル」という意味が有ります。
この意味を正しく理解し、正しくhtmlタグを使うべきです。

というのも、もともとHTMLにはスタイルシートを使う文化があまりありませんでした。
通信回線が遅い時代、どれだけ内容をスリムに軽くできるか!?ということにみんな心血注いでいたからです。
でも問題は基本的には有りませんでした。前回説明したように、htmlタグそのものに存在するスタイルシートがhtmlタグの役割を「補完」していたのです。

たとえばタイトルを表す<h1>〜<h6>までのタグは、数字が小さい方が重要度が高いタイトルだよという意味があります(厳密に言うと現在では少し違いますが、概ねそう理解してください)。
ですので、<h3>よりも<h2>が、<h2>よりも<h1>のテキストが、より大きい文字で表現されるスタイルがあらかじめHTMLにセットされています。というか、ブラウザがそれぞれそうなるように決めています。

しかし、通信回線の高速化に伴い、みんなcssを別に書いて、ウェブサイトに色々個性持たせるようになってきました。そこで邪魔になったのがブラウザが付与するスタイルです。
なにせ、ブラウザが変わるごとに見た目が全然違うウェブサイトになってしまうので、これではデザインが正しく反映できません。
なのでじゃあ全部文字サイズそろえてマージンもパディングも何もかも無しにしてしまえ!イチから作る!という方法が主流になったわけですね。
前回も触れましたがこれがreset.cssの役割ということです。

「ということは、文字を大きくしたいときは<h1>タグを使えばいいんだな!」という考え方は完全にNGです。
なぜなら<h1>タグはそのページで最重要なタイトルを表すときに使うべきタグと決まっているからです。
ですのでまずはhtmlで文章構造をざーっと構築していきます。それに、CSSで肉付けしていくと言う感じの作り方がよいかもしれません。これは好き好きですが。

HTMLタグの意味を理解し、正しい構造で構築することを、「セマンティック」なウェブサイトという言い方をします。
そしてHTMLをセマンティックに組むことで、構造が検索エンジンにより正確に伝わり検索順位にモロに反映しますので大変重要です。また、センスが問われます。

HTMLが文章構造を司るのに対し、CSSは見た目を補完するだけのものと考えて完全に大丈夫です。なので<body>〜</body>タグ内にしか使いません。
CSSがある程度めちゃくちゃでもhtmlの構造ほど検索結果には影響はないでしょう。(厳密には影響有りますがそれはスパムの話として別エントリーにします)

これを踏まえて、htmlとcssをどのように紐づけていくかを解説していきます。(とりあえずjsには触れません)
CSSとHTMLを繋げる方法として4つだけルールを覚えてください。

CSSとHTMLを繋げる方法1 : ページに読み込む

前回のエントリーのテンプレートを見ると、<head>内に

HTML


<link rel="stylesheet" href="./common/css/reset.css" type="text/css">

という記述が有りました。単純にこれでHTML内にCSSを「読み込んでいる」ということになります。
これでcssを使う準備ができました。

CSSとHTMLを繋げる方法2 : htmlタグを直接指定してCSSを書く

スタイルシート(説明してなかったけどCSSのこと)の中に、以下のように書いてあります。layout.cssです。

HTML


body { background-color:#fff;}

これは、<body>のバックグラウンドカラーを白にするというcssです。
これをcssに書いていると、方法1のやり方でページにスタイルシートを読み込ませるだけで反映します。

同様にどんなhtmlタグにもこのように直接指定ができます。ただし、<p>タグのような何回も使うものにcssを当てるときは注意が必要です。
あるところではグレーの文字、あるところでは白の文字というようになってくるはずなので、直接指定すると上書きしてあげなければならなくなります。この辺の作法は別途CSSの使い方でまとめます。

とにかくHTMLタグに直接スタイルを当てることができると覚えてください。

CSSとHTMLを繋げる方法3 : htmlタグにclassをつける

/index.html


		<article class="box">
			<h3 class="title2">.title2</h3>
			<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
		</article>
		<article class="box red">
			<h3 class="title2">.title2</h3>
			<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
		</article>
		<article class="box">
			<h3 class="title2">.title2</h3>
			<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
		</article>

template ver.1のindex.htmlに、このような箇所があります。
<article>タグに、「class=”XXX”」という表記が有りますが、これがclassです。そのままですね。
これに対し、style.cssでは

/common/css/style.css


.section .box { padding:20px; border-radius:10px; background:#fff; color:#000; margin-bottom:20px;}

というcssの記述があります。
この「.section .box」というのは、「sectionというクラスが付いているタグの中にある、boxというクラスの付いたHTMLタグ全部」という意味です。
つまり、classはCSSでは「.」で表すと言うことですね。

ためしに、cssに

/common/css/style.css


.section .box { padding:20px; border-radius:10px; background:#fff; color:#000; margin-bottom:20px;}
.section .box.red p { color:#f00;}

と書いて、保存してindex.htmlをブラウザで見てみてください。classに.redが付与されたHTMLのテキストが赤になったはずです。
この「.section .box.red p」というのは、「sectionというクラスが付いているタグの中にある、boxとredというクラスの付いたタグの中にあるpタグ全部」という意味です。なので<p>のテキストが赤になりました。

CSSとHTMLを繋げる方法4 : htmlタグにidをつける

前回少し触れましたが、classと同じように、「id」というものがあります。これはほぼclassと同じ挙動です。
書き方は、

/index.html


<header id="header">
	<div class="logo"><img src="./common/images/logo.png" alt="LOGO"></div>
	<p>〜 テンプレート ver.1 〜</p>
</header>

となります。classではなくidを使うだけです。
cssでは「.」がclassだったのに対し、idは「#」で表します。

/index.html


#header { background:#ccc; z-index:1; padding:20px; position:fixed; width:100%; top:0; left:0; height:100px;}
#header .logo { width:100px; height:60px; margin-right:30px; display:inline-block; vertical-align:middle;}
#header p { font-size:1.4rem; display:inline-block; vertical-align:middle;}

classとidの違いとしては、idは使用制限があると言うことで、ページ内で同じIDは1回しか使えないと言うことです。
なので、ヘッダーやフッターなど、ページで絶対に一回しか使わないようなところに使用します。
というか使用しなくても大丈夫なので使用しないという選択をとる人も増えてきています。でもidの方がレスポンスが早いらしく、使えるところだけは使ってもいいと思います。その程度です。

まとめ

このページでは、少しcssの使い方に触れましたが、基本的なルールの方を理解してもらえればと思います。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*