コラム

【第3回】マークアップの流れ – CSS編

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プロパティの値を「0」にします。これで、画像と文章の左端が揃った表示になります。

CSSファイルの記述例

figure.photo-left   {margin: 0}

%e5%9b%b31-4-%e4%bd%99%e7%99%bd%e5%89%8a%e9%99%a4

floatで画像の配置と文章の回り込みを指定

画像を左に配置し、右側に文章が回り込むようにします。<figure class=”photo-left”>のfloatプロパティの値を「left」にします。画像の右側に30ピクセルの余白を入れて間隔を調整するため、margin-rightプロパティの値を「30px」にします。

figure.photo-left   {margin: 0;
                     margin-right: 30px;
                     float: left}

%e5%9b%b31-4-float

回り込みを解除する

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のテクニックだけで検索結果上位へ持ち上げるのは難しいですが、文法は正しいに越したことはありません。

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。