CSSとは
CSSは Cascading Style Sheet （カスケーディング・スタイルシート）の略で、ホームページの見栄えを細かく指定することができます。CSSはHTMLで作った要素を装飾するスタイルを指定する言語です。
リセットCSS と ノーマライズCSS（ Normalize.css ）
CSSを指定していないHTMLをブラウザで表示すると、ブラウザの持っているCSSが適用されます。
しかし、ブラウザの持っているスタイルのままだと、文字サイズが違ったり、余白などの幅の計算が複雑になるなどコーディングの手間が増えてしまいます。
そこで、ブラウザの持っているCSSを整えてからコーディングをすると便利です。
CSSを整える方法は、ブラウザの持っているスタイルのほとんどを調整する「リセットCSS」を使う方法と、ブラウザの持っているスタイルをなるべく残す「Normalize.css」を使う方法の2種類があります。
各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に「リセットCSS」と呼ばれています。
Normalize.cssとは、リセットCSSとは異なり、ブラウザに初期設定されているCSSを活用し、最小限のスタイルを備えたCSSです。その上で、ブラウザ間の差異を無くしたものです。そのため、見出しや段落といったものがわかりやすくなります。Normalize.cssは有用なデフォルトCSSを残してくれるので、必要だと感じるスタイルだけを再定義してやればいいので、コーディング量はリセットCSSを使った場合よりも少なくなり、メンテナンスしやすくなります。
ここではリセットCSSを使っていきます。
外部CSSファイルを読み込む順序
要素を複数書いて、複数の外部CSSファイルをHTMLに読み込むことが可能です。
CSSには「前に読み込まれたものを、後で読み込んだものが上書きする」というルールがあります。
そのため複数の外部CSSファイルを読み込む場合、最初にリセットCSSを記述する必要があります。
下記4つのスタイルシートをHTMLに読み込む記述例を記載します。
reset.css (リセットCSS)
style.css (全体のスタイルシート)
style_pc.css (パソコン用のスタイルシート)
style_sp.css (スマートフォン用のスタイルシート).
<head> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style_pc.css"> <link rel="stylesheet" href="css/style_sp.css"> </head>
デフォルトスタイルシートで挿入された余白を削除
CSSファイルを開き、<figure class=”photo-left”>のmarginプロパティの値を「０」にします。これで、画像と文章の左端が揃った表示になります。
CSSファイルの記述例
figure.photo-left {
margin: 0
}
floatで画像の配置と文章の回り込みを指定
画像を左に配置し、右側に文章が回り込むようにします。<figure class=”photo-left”>のfloatプロパティの値を「left」にします。画像の右側に30ピクセルの余白を入れて間隔を調整するため、margin-rightプロパティの値を「30px」にします。
figure.photo-left {
margin: 0;
margin-right: 30px;
float: left
}
回り込みを解除する
clearプロパティは、floatプロパティによって左寄せ、右寄せを指定された要素の、次の要素に対する回り込みの指定を解除します。clearプロパティで指定できる値は下記です。
None 何もしない
Left 左側の回りこみを解除する
Right 右側の回り込みを解除する
both 両側の回り込みを解除する
SEOの効果が得られるHTMLマークアップ
・適切な「alt属性」の入力
<img src="画像のURL" alt="○○○"/>
回線が混雑していて画像が表示されるまでに時間がかかる場合、画像の替わりにこのaltの文言が表示されます。
検索エンジンのクローラーに写真の内容を知らせる目的でも、このalt属性は重要な役割を担っています。
alt属性は画像の代替テキストとなるので出来るだけ入力すべきです。Webページの内容によっては、特定の画像に対しては入力しないほうが良い場合も考えられます。その場合は [alt=””]と何も記述しないという選択肢もあります。
・HTML の構文チェック
Webの技術標準化を進める国際的な非営利団体「W3C（World Wide Web Consortium）」では、HTMLの文法チェッカー「W3C Markup Validator」を無償で提供しています。
W3C Markup Validatorを利用するには、http://validator.w3.org/にアクセスします。
上部のタブが「Validate by URI」を選んだ状態でHTML の構文をチェックしたい URI を「Address」に入力し、「Check」をクリックすると結果が表示されます。
SEOのテクニックだけで検索結果上位へ持ち上げるのは難しいですが、文法は正しいに越したことはありません。
この記事へのコメントはありません。