cssの必要性っていったいなんなのでしょうか。なぜcssというものが必要なのか独自目線で語っていきます。
前回の記事でSEO的、クローラーというようなキーワードを出しました。
SEO的というのはページ作成後にどれだけアクセスが集まるか。クローラーというのは公開されたページにロボットが回ってきたとき、サイト内を回遊しやすいかどうかという意味です。
これらには共通点があって、スッキリしていて見やすくなっているかどうか、ということ。
たとえば、Yahooのホームページの上でマウスを右クリックしてソースを見てください。英数字が凝縮されていますよね？笑
私がHTMLやCSSの世界に飛び込んだのは、ドロップシッピングというものを始めたからでした。この世界には、テキストエリアに文章を入れれば、自動的にホームページができる、というツールがあり、それを利用し周りのサイトを見よう見まねして作成していました。
例えば文章を中央寄せするために、こういうタグを使っているサイトがあって、
<p class="inline-center">こんにちは！</p>
自動ツールでは
<p style="text-align: center;">こんにちは！</p>
という記述で中央寄せされている箇所もあり、何が違うのかよくわかりませんでした。
HTMLに詳しい人に尋ねると、style=””という書き方はCSSの記述を直接HTMLに書き出している。ということで、ネットで調べてもらえれば出てくるのですが、CSSはこういうった書き方をしています。
.inline-center {
text-align: center;
}
cssではinline-ceterというclass名で text-align: center; を割り当てていて、style=” “という書き方では、” ” の中に text-align: center; を入れることで、HTMLタグの中で直接、文字の修飾をすることができることを知りました。
なるほどねー。と思った私は、しばらく、この style=”” というスタイルを多用していました。
しかし、中央寄せという形はいくつもの場面で使用すること、そして、同じスタイルで文章を追加する可能性があるということ、
さらに、ソースが長く見づらいという問題点が出てきます。
修飾するタグをCSSで短縮して割り当ててしまえば、入力する手間が省けること、後から一括で変更することもできてしまいます。
<p style="font-size:18px; font-weight:700; color:#ff0000; text-align:center;"> こんにちは！ </p>
（↑これよりも）
.red{
font-size:18px;
font-weight:700;
color:#ff0000;
text-align:center;
}
（cssでこうして）
<p class="red">こんにちは！</p>
（こんな感じ！）
タグがスッキリすることで整理され、見やすくなります。クローラー自体も、Yahooのホームページのような圧縮されたタグでは判別しづらいようで、途中まで解読しては別のサイトにいき、また戻ってきて解読するという動きをします。
つまり、良質な記事を作っていたとしても、検索上位に上がるのに時間がかかってしまうということです。読みにくいんだよ！と思っているのかもしれません。笑
人の目で見やすいサイトは、クローラーでも解読しやすいということですね。
スポンサードリンク