第一回SEO女子コラム「HTMLの世界に触れよう！」

HTMLって実際何なの？

担当者：きょん

初めまして！きょんです(^^)初めて書く今回の記事が『HTML』ということで！！
あぁ…っっ！テーマがでかい(´；ω；｀)
SEO女子の一員として分かりやすく説明していきたい次第でございます。

ではさっそく…

HTMLとは？
「HyperText Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）」の略になります。
(きょん訳：コンピューターにも理解できるすごい文字！)

WEB上で文章を書きたいと思っても、私たちが普段使っている言葉で書いてもコンピューターからすれば理解することが困難です。
そこで！コンピューターにも分かるようなマークアップ言語と呼ばれる言葉を用いて文章を書くことにしたのです。これがHTML。
このHTMLではタグと呼ばれる「目印」をつけ、文章を構成することにしました。(例：タイトルや見出し、リストなど）

要は「WEB上で文章を記述するときの専用言語」と言った感じですね。

ここまで来ても「イマイチ、HTMLがどんなものか分からないよぅ」って方は、パソコンから実際にこのサイトを右クリックして【ソースを表示】してみてください。

どうでしょうか？
訳の分からない文字列が並んでると思いますが、これが『HTML』になります。

このHTML、実は生まれるまでにかなりの人生を送ってるんです。
…が、かなり長くなるので興味のある人は調べてみてください。機会があればまたコラムにでも…するかな…。

このHTML、実は一種類だけじゃないのです。
いくつか種類があるのですが、今主に主流となっているものをご紹介します。

現在HTMLは様々な装飾を付けることが出来るのですが、本来は文章の構造などをコンピューター示すものだから、装飾などでオシャレにしたい人はCSSを使ってね！と推奨するようになったのがこの4.1。
それまでに生まれては廃案となったHTMLたちの要素を取り入れつつ、複数の言語に対応した国際化の要素も盛り込まれます。(もちろん日本語にも対応☆彡)
今でも多くの人が使用しています。

「Extensible HyperText Markup Language(エクステンシブル・ハイパー・テキスト・マークアップ・ランゲージ)」の略で、XMLとHTMLを融合したものとなります。
「XML」とは先に説明したマークアップ言語の一種です。
XMLはHTMLと違い書き方に対してとっても厳しい！ちょっとでも書き方を間違えると怒られます。
XHTMLはその中間の存在なので双方に互換性があります。
時代は「XMLはWEB以外でもいろいろ使えて素晴らしい！」となったため、流行りにノッてHTMLのデータをXMLベースに移行するためにXHTMLは推奨されました。
HTML4の概要はほぼ引き継いでいますが、XMLベースなので記述について厳密なのはもちろん、多数のルールがあります。XHTML+CSSでの使い方が一般的なようです。

この【SEO初心者女子がゆく】もこのバージョンになります。文章の構造をより明確にブラウザやロボットに伝えることができるようになりました。また、記述の面に関しても大幅に要素などが追加・変更・削除がされたので、徒来のHTMLよりもソースの見た目がシンプルになり、作る側のスペルミスなどが起きにくいという利点もあります。特にCSSで代替できる要素などが多数変更となり、今まで少し曖昧だったタグの整理などもされたのです。
そして、ユーザーが動きのあるサイトを求める傾向があったため、JavaScriptを利用しなくても動画などを簡単に使用できるようになりました！
一番発揮できるのが、ほとんどの人が持っているスマートフォン。今ではアプリやサイトなどのほとんどがこのver.で作られています。しかし、パソコンとスマートフォンでは容量や処理速度に大きな違いがあるので、よりシンプルなHTMLが好まれると推測されます。

時代と共に需要も変わり、日々進化していくIT業界。
こうして見ると、HTMLの進化はWEBの歴史といっても過言ではありませんね！(名言)
コンピューターと人、両方に優しくなった次世代のHTML5！もっと勉強していきたいと思います！

WEB上の文章を読みやすく

担当者：つじさん

HTMLが誕生し、WEB上での文章の記述が容易に出来るようになったところで、もう少し欲を出してみましょう。

その文章、読みやすくしたい…！

まるで資料にマーカーをするように
大切な部分を赤丸でチェックしておくように
可愛いシールでデコレーションするように
色んな色で文字を塗っていくように……

文章を装飾したい！

実はそんな欲求も、HTMLは実現可能です。すごい！
下記でも説明するように、HTMLのタグにも装飾が出来るものが存在しますが、説明があったようにHTMLは文章の構造を示すもの。
そこに直接装飾を施すことはあまり良くないとされています。
それを解消するために、装飾専用の言語を付随させてHTMLのデコレーションを可能にさせたのが、先ほどからちょっと話題に上がっている「CSS」です。

CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略称です。
文字や文のスタイルを指定するためのシートなので、スタイルシートですね。
スタイルシートにも幾つか言語が存在しますが、WEB用の言語が使われているのが「CSS」です。

CSS自体は独立していても機能せず、HTMLとの組み合わせで使用します。
概念としてはこんな感じかな？

細かな組み合わせ方法等はまたの機会ということで今回省きますが、1つのCSSがあれば複数のページに対して同じスタイルを指定できたり、かなり便利な機能です。

CSSは直接HTML上に記述をしない仕様なので、HTMLファイルの文字数が多くなり過ぎないのも特徴ですね。
最近のGoogleはこのCSSも読み取ることが出来ると言われています。
実際に私達がサイトを見るようなデザインを、Googleも見ているようです。
人間みたいだな、Google…そのうちサイトにコメントとかくれたりして。「どうもGoogleでtyそんな話はさておき。

CSSは装飾の幅もかなり広くHTMLの構造を邪魔しないので、とってもおすすめです。
HTMLを学ぶ上で切り離せないアイテムの1つと言っても過言ではないかもしれないですね。

実際にHTML文章を装飾しよう！

担当者：おかもっさん

CSSのお話が出たところで、私は「HTMLタグやネット上で出来るデザイン」をテーマに記事を書いてみることにします。
実際にどうすれば文字を装飾できるのか、やってみましょう！

HTMLタグにも装飾用のタグは存在しますが、現在は推奨されていない傾向にあるようです。(現にXHTMLでは廃止されてたりします)
その為、多くのWEBサイトでは装飾等を行う時にCSSなどを活用しているかと思います。他にもFlashやJavaScriptなんかもありますが、話題にも出たので今回はCSSを取り上げます。

とはいえいきなりCSSを書いてもなんのこっちゃとなるので、装飾用のHTMLタグと一緒に紹介します。
CSSの記述方法について詳しくは書かないので、使いたい！って人はぜひ調べてみてください。

いくら良い文章を書いているサイトでも、テキストを淡々と書いているだけのサイトは見る気がしないものです。
シンプルイズベストと言っても、実際見たいと思えるサイトでなければ作った意味もないですよね。
そこで、少し目を引くために注目してもらいたいタイトルや文章のサイズを変更をしてみましょう。

<font size="5">ここの文字が記述した数字サイズへ変化します</font>

セレクタ｛
font-size: 150%; /* サイズはpx、em、%を使用 */
｝

タグのfontとsizeの間は半角スペース・数字は半角英数字で記述してください。
間違えてもすべてのテキストを大きくしないでくださいね。ただ見難いだけになってしまいます。
サイズの記述は色々なサイズが用意されているので、実際に使いやすいサイズを検証してみてください。

タイトルの文字を大きくしたけど華やかさが足りない！更に目立たせたいキーワードがあるんだ！
そんな時にはテキストの色変更をしてみましょう。

色味のあるテキストにする事でサイトの印象も大きく変わります。
文字の色を変更する為にはこちらのタグを使用してみましょう。

<font color="カラーコード">ここの文字の色が変わります</font>

セレクタ｛
color: #FFFFFF; /* カラーコードやカラー名を指定 */
｝

カラーコードを選ぶ際にはWEB色見本等のサイトを参考にしてみてくださいね。
さて、ココで要注意なのが、もし目立たせたくない文章がある時や隠したいワードがあるときに背景色とテキストを同じ色にしないことです。
なぜならこれは「隠しテキスト」としてペナルティを受ける対象になってしまう可能性があるから。
個人的にはCSSでh1タグを隠す手法をよく目にするのですが、背景とキーワードを同化させている手法も少なくないです。
よほど悪意がない限りペナルティを受けることはないですが、自分では隠しテキストのつもりはなかったのに！という時でもペナルティ受ける可能性があるので注意しましょう。

サイトの中でこの文字すっごく大事だから！というのを伝えるときには強調タグを使用してみましょう。
テキストを強調する際に使用するタグは二種類あります。

<b>ここが太字に</b><br />
<strong>ここが強調文字に</strong>

この二種、表示自体は一緒ですが、基本的にはstrongで重要度が高いよと知らせる方が良いかなという感じです。
コレを利用して注力したいキーワードに使用するのもイイと思います。
ただ、ほぼ全文にstrongタグ…など過剰に使用するのはやめましょう。
やり過ぎるとどれが強調したいのかわからなくなるので、行き過ぎた使用はNGです。

セレクタ｛
font-weight: bold; /* 太字にする時に使用 */
｝

特に重要性を伝えるわけではなく文字を太くしたいだけなら上のCSSが使えると思います。

さて、今回はテキストに関するタグをメインに書きましたが、文字を色とりどりにして様々な所を強調しすぎると、どこを見せたいサイトなのかよくわからない状態になります。
なのでどんなタグでもほどほどに、バランスを考えて使用しましょう。