ヘッダーとフッターについて
ヘッダーとはサイト名をマークアップするための記述です。ヘッダーがないというサイトは基本的にはありません。フッターはページ最下部に表示させる情報で、コピーライトなどが記述されるのが一般的です。
今回のHTMLの記述内容
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>真夏のひまわり畑 - FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>FOREST STUDIO</h1>
</header>
<article>
<h1>真夏のひまわり畑</h1>
<p>森の工房の隣にある畑は毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p>
<p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p>
</article>
<footer>
<small>Copyraight ©FOREST STUDIO,all rights reserved</small>
</footer>
</body>
</html>
赤字の部分が今回追加した部分です。
<header>
<header>とは、コンテンツとサイト名を明確に区別するためにマークアップする指定です。よって、<header>の指定をしても、サイト上で変化はありません。
<フッター>
<footer>も<header>と同様に、コピーライトとコンテンツを明確に区別するためにマークアップします。
<small>
<small>はコピーライトであることを明確にするためにマークアップします。<small>タグで指定をすると、文字がひと回り小さく表示されます。
<h1>
今回もうひとつ<h1>を追加したことにより、同じページに<h1>がふたつある状態になりました。これって良いの？と思う方もいるかもしれませんが、HTML5になってからOKになりました。
ただし、これは記述しても問題がないというだけで、SEO的な観点から言うとNGです。同一ページ内にもっとも重要なマークアップが2つあると、クローラーが混乱する可能性が高くなります。
ここでは、テキストに沿って作成していくので、このまま作成を続けていきます。
セクションごとに<h1>を使用してもOKになったので、<body>で1つ<article>で1つとそれぞれセクションが異なるため、この<h1>はOKになっています。
セクションを指定する要素は以下のとおりです。
- <article>
- <nav>
- <aside>
- <section>
- <body>
それぞれ役割がありますが、それは追々紹介していこうと思います。
まとめ
今回は本当に少し記述を追加しただけなので、特に難しいなということはありませんでした。ただ、セクションを指定する要素がたくさんあるので、今後難しくなっていくのかなって思っています。
ヘッダーとフッターのタグを入れても、画面上では変化がないので、特に何かしたな！って実感はほとんどありませんでしたが、とても大切な記述らしいので、しっかり覚えていこうと思っています。
CSS3入門編 パッと見HTML5よりわかりやすいかも！
引き続きCSS3の記述を勉強していきます。
CSS3の記述内容
今回CSSで記述したのは以下のとおりです。
----------------------------------------------------------------------------------------------
body {font-family:"メイリオ","Hiragino Kaku Gothic Pro","sans-serif"}
h1 {font-size:38px}
P {line-height:1.5}
----------------------------------------------------------------------------------------------
この記述をhtmlファイルと同じフォルダ内にある、style.cssというファイルに記述していきます。
CSSの記述方法
CSSはhtmlとは異なるルールで記述してきます。
例→h1{font-size:38px}
【h1】はセレクタと呼ばれる要素。
【font-size】はプロパティと呼ばれる要素。
【38px】は値と呼ばれる要素です。
CSSの記述はまず、htmlタグのどこの部分を変更していくかを決めます。例の場合で言えば、【h1】部分を変更することがわかります。
そして【font-size】のプロパティと【38px】という値で、どのように変更するか指定します。このときのルールは、まずセレクタを記述しプロパティと値の部分を{}←のように波カッコで囲います。
プロパティと値の間は:←コロンで区切ります。プロパティと値のことを【宣言】と呼びます。ひとつの指定で複数の宣言ををする場合は
h1{font-size:38px;}
上記のよう;←セミコロンで区切ることで可能です。常に行末にセミコロンを付けても問題ありません。
font-family
font-familyとは、使用するフォントを指定するためのプロパティです。ここで指定しているフォントは、【メイリオ】【ヒラギノカクゴゴシックプロ】の2つです。最後の【sans-serif】という記述は左記のどちらもインストールされていない環境の場合、利用可能なゴシック系のフォントを使用するという指定です。
この指定の意味は、【メイリオ】がインストールされていれば、メイリオが使用され、メイリオがインストールされていなければ、【ヒラギノカクゴゴシックプロ】が使用され、そのどちらもインストールされていなければ、使用可能なゴシック系のフォントが使用されるという記述です。
優先順位
メイリオ＞ヒラギノカクゴゴシックプロ＞使用可能なゴシック系のフォント
という感じです。
font-size
font-sizeの指定は、名前のとおりフォントのサイズを指定するための記述です。ここでは、38pxにするように指定されています。フォントサイズの指定は【px】以外にも以下の方法があります。
- em 親要素の文字サイズに対する比率
- xx-small 最極小
- x-small 極小
- small 小
- midium 中
- large 大
- x-large 極大
- xx-large 最極大
- smaller ひと回り小さく表示
- larger ひと回り大きく表示
※ブラウザがChromeの場合は、可読性を保つため、10px以下の記述はすべて10pxで表示されるように設定されています。
おそらく、【em 親要素の文字サイズに対する比率】の意味がわからない人も多いと思いますので、自分なりに噛み砕いて解説します。
例
body {font-size:16px}
h1 {font-size:1em}
上記のような記述の場合、【body】部分が親要素になります。親要素のフォントサイズが16pxということは、1emが16pxということになります。h1に2emと記述した場合、フォントサイズは32pxで表示されます。
さらに言うと、もっと上の階層でフォントサイズを指定した場合、それが親要素となります。ちなみに、フォントサイズをどこでも指定しないかった場合、1em=16pxとなります。
これはテキストに書いてあることではありませんが、【em】に似た指定で【rem】があります。【rem】でフォントサイズを指定すると、必ずルートのフォントサイズを基準にするので、サイトバランスが取りやすくなります。
今の時代はスマホでネットサーフィンする人がほとんどなので、px指定してしまうと、スマホで見たときに文章のバランスが取れなくなる可能性が大いにあります。それを防ぐために、【em】や【rem】をうまく使っていく必要があります。
line-height
【line-height】は行の高さを指定するプロパティです。
- nomal line-heightの初期値の高さ
- 数値（pxなど） ピクセル数での指定
- 倍率（単位なし） 文字サイズに対する倍率
- 比率（％） 文字サイズに対する比率
※line-heightの場合はピクセルで指定することはほとんどない。主に倍率で指定するのが一般的です。
{line-height:1.5}
上記の場合は、文字サイズに対して、1.5倍の倍率で行の高さを指定していることになります。
まとめ
今回は初めてCSS3の記述をしましたが、特に躓くことなく記述できました。内容が簡単すぎるのも原因だと思いますが、これからどんどん難しくなっていくような予感がしています。
特にfont-sizeの指定はemとremをメインに使っていかないといけないっぽいので、深く理解する必要があるなと感じました。
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に慣れるまでは、一つのタグを入力し終わったら、プレビューで確認していこうと思います。皆さんも同じ間違いをしないように、スペルミスがないように予測変換機能を使うことを強くおすすめします。
