html5＆CSS3を一から勉強していくブログ
はじめまして、kokotosuと申します。
このブログでは、ずぶの素人である僕が一からhtml5＆CSS3を勉強した内容を掲載していきます。 僕の備忘録と同時に、ずぶの素人でも独学でhtml5とCSS3を学べるんだってことを証明したいと思います。本当に一からの勉強になるので、ある程度知識のある方にとっては何の役にも立たない可能性が大いにあります。記事を読むときは温かい気持ちで見守っていただければと思います。では早速今日勉強した内容を紹介していきます。
HTMLファイルとスタイルシートの作成
まずはHTMLファイルとスタイルシートの作成を行います。参考にしているテキストは、【HTML5＆CSS3レッスンブック】このテキストに沿って勉強しています。
このテキストでは、ひとつの簡単なサイト作成を通じて、HTML5とCSS3を学んでいくスタイルって感じっぽいです。まずはテキストエディタを使用して、HTMLファイルとCSSファイルを作成します。僕の場合はcrescenteveというテキストエディタを使っています。ファイルを保存するときの注意点として、文字コード（エンコード）をUTF-8に設定することです。crescenteveの場合、【グローバルメニューのツール】→【crescenteve起動時の設定】から設定することができます。
HTMLとCSSファイルの両方でUTF－8に設定したら、拡張子の部分をそれぞれ【html】【css】にします。これをしないと、いくら記述が正しくても、WEB上に表示することはできません。 ちなみにCSSの場合は【style.css】というファイル名にするようになっています。HTMLファイルの場合は特に指定があるわけではありませんが、テキストでは【news01.html】とするようになっています。 それではいよいよHTMLタグを入力していきます。
HTMLタグのルールその①
とその前に、HTMLタグの記述方法とルールについて簡単に説明します。
HTMLタグは【開始タグ<h1>】【文章】【終了タグ</h1>】でマークアップすることにより、中身が何であるか明確にしています。<h1>が要素名で、文章があり、終了タグがあり、開始タグから終了タグまでのことを要素と呼びます。
複数のHTMLでマークアップするときは、開始タグと終了タグの1セットは他のタグの中に完全に入っていないいけません。
◎
<body>
<h1>ほいほい学園</h1>
</body>
----------------------------------------------------------------------------------------------
☓
<body>
<h1>ほいほい学園</body>
</h1>
----------------------------------------------------------------------------------------------
<body>
<h1>ほいほい学園</h1>
</body>
で言うと、<body>が親要素となり、<h1>が子要素となります。ちなみに全てのHTMLタグの親要素となるのが、<html>タグです。最上位に位置するタグなので、ルート要素とも呼ばれています。
HTMLタグの記述方法とルールその②
エンコード（文字コード）を記した<meta charset="UTF-8">タグのように、単独で機能する要素もあります。これらは【空要素（Void要素）】と呼ばれています。末尾に<meta charset="UTF-8" />スラッシュを入れてもいいですし、入れなくても機能します。
開始タグには要素ごとに用意された属性を記述し、さまざまな設定を指定できます。属性を入力するときは<html lang="ja">のように半角スペースで区切り、【属性名="値"】という形で入力します。値の部分は””か''で囲むか、囲まずに記述します。
開始タグをと終了タグの省略ができるタグがあります。
【開始タグと終了タグの両方を省略できるもの】
<html><head><body>など
【終了タグを省略できるもの】
<p><li><tr><td><th>など
以上がHTML記述をするうえでのざっとしたルールです。これを踏まえて、HTMLを記述していこうと思います。
HTMLの記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>真夏のひまわり畑 - FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<h1>真夏のひまわり畑</h1>
<p>森の工房の隣にある畑は毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p>
<p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p>
</article>
</body>
</html>
<!DOCTYPE html>
<!DOCTYPE html>とは、HTML5で記述することの宣言になります。これがないとHTMLの記述は始まりません。
<html lang="ja">
<html lang="ja">とは日本語での内容になります、との宣言です。英語の場合はenフランス語だったらfrなどWEBで使う主な言語が変われば、ここでの宣言内容も変わってきますが、日本人向けに作成するのであれば、jaでOKです。
<meta charset="UTF-8">
<meta charset="UTF-8">は、UTF-8という文字コードを使いますという宣言です。UTF-8はもっとも一般的でベターな文字コードなので、基本的にはUTF-8で問題ないそうです。
<title>
次にtitleタグです。これは文字通り、そのサイトのタイトルになり、SEOの観点から見ても非常に重要なポイントです。<title>タグもそうですが、HTMLタグの多くは<p></p>のように必ず閉じなければいけません。
閉じ忘れがあると、表示が崩れてしまったり、表示されない場合があります。
またスペルの間違いでも表示されない可能性があります。crescenteveの場合は、タグの予測変換機能が付いているので、それらを活用して、スペルミスをなくしていきましょう。
<h1>
続いて<h1>タグについて紹介します。
<h1>は大見出しという意味があり、<h2><h3><h4><h5>など数字が大きくなればなるほど、小見出しになっていきます。SEOの観点から言うと、<h1><h2>くらいまでしか効果がないと言われていますので、<h1>タグをつけるときは、キーワードをねじ込む感覚でつければいいと思います。
<p>
<p>タグには段落という意味があります。<p></p>で囲った部分はひとつの段落として、ひとつのブロックとしてみなされます。文章を見やすくする意味合いが強いので、適度に<p>タグを挿入すると良いでしょう。また<p>タグは閉じてもいいですし、閉じなくても良いタグなので、細かい段落をつけるとき以外は、<p>タグを閉じる必要はありません。
<link rel="stylesheet" href="style.css">
これは、href（エイチレフ）属性と呼ばれるタグであり、CSSを読み込むための記述です。
この記述を有効にするためには、HTMLを記述しているファイルとCSSを記述しているファイルを同じフォルダ内に保存しておく必要があります。このタグがないと、CSS的な装飾は一切できなくなります。
<article>
<article>とは、コンテンツとして成立している部分をマークアップするためのタグです。safariなどをiPhoneで使用する場合、記事のメイン部分だけを抽出して読み込む機能があり、そういったときに自身サイトでメインとしている部分を示す意味合いがあります。<article>タグを挿入しても、表面上は一切変化はありません。
まとめ
実際にHTMLタグを打ち込んでいくと、早速どツボにハマりました。入力が終わってプレビューを見ようと思ったら、文章が何一つ表示されないという自体になりました。
原因が何か探ること小一時間。<title>タグの終了タグを</titile>とスペルミスしていたことが原因でした。
たった一文字間違っただけで、小一時間も取られるなんて！と怒りがこみ上げてきましたが、もう二度と同じ失敗はしないようにcrescenteveと予測変換機能を使っていくことに決めました。手打ちだとどうしても、入力ミスの可能性が出てきます。
今回のように短い記述だったとしても、何が原因か探すのに大変な思いをしました。これが何ページにも渡るサイトだったら…と考えるだけでぞっとします。
結論。HTMLに慣れるまでは、一つのタグを入力し終わったら、プレビューで確認していこうと思います。皆さんも同じ間違いをしないように、スペルミスがないように予測変換機能を使うことを強くおすすめします。
