creatersnest124

【初心者脱出!】ワンランク上のデザインを目指す人のためのHTMLコーディング術


テーブルレイアウトや、リセットCSS、段落などワンランク上のHTMLコーディングを目指す際に覚えておいてほしい情報や、つまずきやすいポイントなどを分かりやすく解説します。

テーブルレイアウトからの脱却

何故テーブルでレイアウトを作成してはならないのか?

テーブルは表を見やすくする物であり、ページをレイアウトする物ではありません。
レイアウトをする場合は、CSSで行ったほうが良いでしょう。
また、テーブルでレイアウトを作成した場合

参考:ページをレイアウトしてみよう その1テーブルレイアウト

  • HTMLが長文化しメンテナンス性が悪くなる
  • CSSを活かしきれない
  • 情報とスタイルを分離出来ない
  • 正しい文書構造を作りにくい

などの欠点があります。
これでは、せっかくサイトを作成したにも関わらず、ページデザインの微調整が出来ない
ため、おすすめしません。

リセットCSSを使用しよう

何故リセットCSSを使用する必要があるのか?

HTMLをコーディングしている際、周りに変な余白が出て思い通りにデザインが出来なかったり、
ブラウザによっては見え方が異なるなんてことはありませんか?

これは、各々のブラウザが適用しているスタイルシートが影響しています。
デザインのされていない、HTMLのみのページでは見やすくて良いのですが、
ページのレイアウトを凝りたい場合などは厄介者です。

ですが、ここで登場するのがリセットCSSです。
リセットCSSとは、基本的に既にブラウザが適用しているCSSをリセットし
ブラウザ間の表示を統一するために使用されます。

リセットCSSと言っても検索したら沢山ありますので、メジャーなものを使用してどのような特徴があるのか解説します。

2015年に最も人気のあったリセットCSS

まずは、CSS Reset経由で2015年に最もダウンロードされたベスト5を紹介します。
参考:[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント

be1f9608a6ce4f388aa9e577b745747a
CSS Reset

 

  • Eric Meyer’s “Reset CSS” 2.0
  • HTML5 Doctor CSS Reset
  • Yahoo! (YUI 3) Reset CSS
  • Universal Sector ‘*’ Reset
  • Normalize.css 1.0

 

どのリセットCSSを使用するべきか?

ここで紹介しただけで既に5つ、リセットCSSがありますが、それぞれ特徴があり、
どの場面でどのリセットCSSを使うべきか、という物があります。

 

HTML5ではなく、プロトタイプのページを素早くテストしたい場合
Eric Meyer’s “Reset CSS” 2.0

HTML5で実装をする場合
HTML5 Doctor CSS Reset

フル機能のCSSフレームワークを使用したい場合
Yahoo! (YUI 3) Reset CSS

 

その他にも様々なリセットCSSがあり、それぞれ特徴が異なります。
上記の5つの中のどれかを使用しても良いですし、作成しているサイトに合うリセットCSSを探してみても良いでしょう。

 

brタグを連続で使用していませんか?

brタグは改行をする際に使用されますが、行間を取るためにbrタグを連続して使うのは
やめましょう。文法上連続して使うのは禁止とされています。

何故使用してはいけないか、また改行、段落の正しい使い方を解説していきます。

何故使い分けなければならないか?

  • どのブラウザでも同じように表示させるため
  • 検索エンジンに記事の構造をしっかりと把握してもらうため

 

全てbrタグを使用し、段落を開けたとしても、ある程度はブラウザ側で自動補完を行って表示をしてくれます。
そのため、重視はしませんが、毎回同じ分のbrタグを書くより、段落(pタグ)を使用することを
おすすめします。

また、検索エンジンは段落を一つのグループ(一つの情報)として見ており
正しくない記載(改行のみ)を行った場合
検索エンジンは情報をしっかりと捉えることが出来、サイトの表示順位が上がる可能性があります。

改行と段落の書き方

それでは、使い分ける必要などの説明を踏まえ
改行(brタグ)と段落(pタグ)の具体的な違い・書き方を解説します。

以上が正しい記載方法となります。
ですが、全て改行にしても、見え方は変化しません。

このようにした場合、人が見た場合2つの段落と見ますが、検索エンジンは
1つの段落として捉えてしまいます。

<br>タグと<br />タグの違い

さて、先ほどからbrタグと言ったり、コードでは<br />で行ったりしていますが
これらにも違いがあります。

  • HTML4の場合・・・<br>
  • XHTMLの場合・・・<br />
  • HTML5の場合・・・<br> <br />どちらでも使用可

となります。

HTML4やXHTML、HTML5などの違いについては
「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめ
を参考にしてください。

 

まとめ

テーブルでレイアウトを作成した場合、CSSを活かしきれないですし、HTMLが長文化し
メンテナンス性が悪く、サイトのコンテンツの編集がしづらくなります。

しかし、CSSにも面倒な所があり、最初からCSSが適用されているブラウザがあるため
リセットCSSを使用する必要が出てきます。

リセットCSSを使用することにより、全てのブラウザで表示の統一性を取ることが出来
デザインの崩れなどを気にすることがほぼなくなります。

brタグは改行の際、最も楽ですが、デザインがしづらくなりますし
基本的にbrタグを段落のために使用することは文法上、禁止とされています。

何故ならば、検索エンジン(Google, Bing等)へページの構造を正しく伝えるためです。
もしSEOを意識したいのであれば、覚えておいた方がよいでしょう。

 

以上、ワンランク上を目指す人のためのコーディング術となります。
ここで解説した物は、最近実務でもよく使用されますので、覚えておいて損はないはずです。

また、更にHTMLやCSSの情報について詳しく知りたい場合は、英語ですが
W3Cという団体が運営している http://www.w3.org/TR/html5/ を見てみるのもよいでしょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articlefacebook,twitterなどのSNSアイコンがセットになった素材まとめ