HTML基礎知識

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

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

HTML
文章構造を表すための言語。これはタイトルだよ、これは段落だよーなど。
テキストファイルの拡張子を.htmlにしてその中に書く。
CSS
見た目を補完するための言語。カスケーディングスタイルシートの略で、単にスタイルシートとも呼ぶ。
テキストファイルの拡張子を.cssにしてその中に書く。HTMLファイルに直接書いたりもできます。
Javascript(JSと略す)
動きやサーバとの通信を担当する言語。
テキストファイルの拡張子を.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)に読み込む

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

HTML


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

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

あとは.cssのファイル内に、CSSを書いていけば、ページにスタイルが反映します。
.cssを書く → ブラウザでHTMLをリロードする
でページに反映します。

cssの基本的な書き方ルール

htmlタグ名を直接指定してスタイルを書く。

スタイルシートの中に、以下のように書いてあります。layout.cssです。

HTML


body { background-color:#fff;}

これは、<body>のバックグラウンドカラーを白にするというcssです。
色はRGBで表記されています。rgb(255,255,255)でも同じ意味ですね。
ためしに書き換えてブラウザをリロードすると反映が確認できますので試してみてください。

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

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

htmlタグにclassをつけ、その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>のテキストが赤になりました。

htmlタグにidをつけ、その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の構成要素

selector(セレクタ)

上記にあげた、中括弧「{」の左側の部分のことを「セレクタ」と呼びます。
HTMLタグ、class、idなどです。実は、他にもいっぱいあるのですがある程度CSSがかけるようになったら覚えれば良いかと思います。

property(プロパティ)

中括弧「{」の右側にあるもののコロンよりも前半部分 (color:#f00;だったらcolorの部分)をプロパティと呼びます。
プロパティの後にはコロンをつけてその後の「値」と区切ります。

値(あたい)

中括弧「{」の右側にあるもののコロンよりも後半部分 (color:#f00;だったら#f00の部分)を値と呼びます。
値の後にはセミコロンをつけることで次のスタイルと区切ります、つまり一つのセレクタに対して複数の「プロパティ+値」のセットを書くことができます。(ちなみに最後のセミコロンは省略できます。)

セレクタ { プロパティ: ; プロパティ: ; プロパティ: ; }

つまり、

これの { これは:こうして ; これは:こうして ; これは:こうする! ; }

ですね。

ちなみにスペースはあってもなくてもいいし、中括弧の前後とかで改行してもしなくても同じです。ただし、一般的な書き方がありますので変なクセをつけないようにしてください。
一般的には、中括弧のあとで改行し、スペース2個分インデントしてプロパティ: 値;で改行です。

CSSの一般的な作法


/* スラッシュ+アスタリスク〜アスタリスク+スラッシュの間はコメントアウトされます。 */
p { background: #ccc; padding: 10px; margin: 10px; } #hoge .fuga { width:100px; height:60px; }

個人的には全部いっぺんに1行で書くのが好きです。つまり好みですね。でも上記の一般的な書き方がベターかと思います。

まとめ

このページでは、少しcssの使い方に触れましたが、以上基本的なルールの方を理解してもらえればと思います。
実際に書いてみれば、いかに簡単なルールなのかを理解してもらえると思います。

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

SNSでもご購読できます。

コメントを残す

*