![Web制作 HomeWeb [ホームウェブ]](http://www.home-web.jp/img/logo.gif){kind=logo}
運営者ブログ
サイト構成に合わせたスタイルシート設定
コーディングに関して、サイト構築する際に主に2つのパターンが考えられます。
・サイト全体でページの体裁が整っている
・各ページそれぞれレイアウトが変化する
前者は情報サイトなど、ページ数も多く規模が大きなサイトに、後者は10ページ程度で小規模ながら個性のあるのサイトによく見られます。さて、この大きく分けて2つのパターンのサイトは、どのようにスタイルシート設定すれば効率的でしょうか。
サイト全体でページの体裁が整っている場合は、パーツごと設定するのが効率的です。具体的には、よく使われるパーツにclassセレクタを指定するのです。
HTML
<ul class="type1">
<li>テキスト</li>
</ul>
CSS
ul.type1 {
list-style-type:disc;
}
ul.type1 li {
border-bottom:solid 1px #000000;
}
このサンプルでは、箇条書きリストタグ（ul）に対して、classセレクタをtype1として設定したものです。このように設定することで、何度もスタイルシートで設定することなく、同じ表示形式のタグを簡単に設置することができます。
次に各ページそれぞれデザイン／レイアウトが変化する場合です。この場合はページごとidセレクタをふって、その中で処理するのがよいでしょう。
HTML
<div id="type1">
<ul>
<li>テキスト</li>
</ul>
</div>
CSS
div#type1 ul {
list-style-type:disc;
}
div#type1 li {
border-bottom:solid 1px #000000;
}
このようにidセレクタの後ろに続けて記述することで、他ページに影響を与えることなくデザイン／レイアウトを設定できるわけです。
2つのパターンの記述法を紹介しましたが、どちらにしてもこれから作ろうとしているホームページの全体像を把握しておくことが大事です。把握できているからこそスタイルシートの記述方法も選べるというもの。スタイルシート制作に入る前に、まずはじっくりとサイト全体を確認しておきましょう。
floatに関するバグ解決法 ～左余白が倍になってしまう場合～
IEでは、floatとmargin-leftを同時に指定すると、指定した数値の倍の余白が空いてしまうバグがあります。そのため、ピクセル単位でページ構成している場合は、さらにdivで囲ったりと余計な手間がかかってしまうこともあります。
この対処法はfloatしたボックスに対して、inlineを指定することで簡単に解決します。
CSS
div {
width:300px;
margin-left:10px;
float:left;
display:inline;
}
上記のように「display:inline;」がなければ、IE表示では左余白は20ピクセルになってしまいます。ピクセル単位で構成されたページでは、この対処法を知っているか知らないかでは制作面に大きな違いが出てきます。簡単な方法ですので是非、ご活用ください。
floatに関するバグ解決法 ～背景が消えてしまう場合～
背景色、または背景画像を入れているボックスの中でfloat指定をすると、背景が消えてしまうことがあります。IE6などではウィンドウを上下にスクロールさせると消えたり表示されたり、文字が消えてしまったりと多くのバグが確認されています。
これは背景を入れているボックスにwidth指定を加えることで解決します。
CSS
div {
width:300px;
background:#ff0000;
}
また、clear指定にも解決法があります。
brタグに回り込み解除を埋め込む方法をよく目にしますが、背景が消えてしまうことが多々あります。そこで以下のような指定で回り込みを解除させるとある程度のバグを回避できます。
HTML
<div style="clear:both;"></div>
空要素になってしまうものの、レイアウトが崩れてしまうよりはよいでしょう。また、スペーサー（透過画像）で解除させても同様の効果があります。
HTML
<img src="ファイル名" width="幅" height="1" style="clear:both;">
このようにいくつか解決法があるわけですが、width指定を加えて解決するのがベストでしょう。
フォントサイズの単位あれこれ
フォントサイズには絶対サイズと相対サイズに分けられます。絶対サイズは文字サイズを固定する設定、相対サイズは基準となるサイズに依存する指定になります。それぞれの単位には以下のようなものがあります。
【絶対サイズ単位】
「cm」（センチメートル）
「mm」（センチメートル）
「in」（インチ）： 1インチ＝2.54センチ
「pt」（ポイント）： 1ポイント＝1/72インチ
「pc」（パイカ）： 1パイカ＝12ポイント
【相対サイズ単位】
「px」（ピクセル）： ディスプレイの画像解像度に依存します。
「%」（パーセント）： 他の値（基準値）に依存します。
「em」（エム）： 適用要素のフォントサイズを1とします。
「ex」（エックスハイト）： 適用要素の英小文字「x」の高さを1とします。
絶対サイズはIEなどのブラウザ設定のフォントサイズ変更を無効にしますが、safariなどのブラウザでは強制的にフォントサイズを変更できるので効果がありません。またアクセシビリティの面からもフォントサイズの固定はユーザーの設定を制限してしまうので望ましくありません。「ありません、ありません」と続きましたが、個人的にはレイアウトに影響してしまう場合など部分的な使用に関しては許されるかと考えています。でも注意は必要です。
CSSレイアウトのコツ2 ～幅指定は外側だけ！～
前回はブラウザによって幅の解釈が変わってしまうことへの対処法を紹介しましたが、今回は幅と内側の余白をまとめて設定する方法を紹介します。基本的には前回同様、widthとpaddingを同時に記述しないことです。それでは以下の例を見てください。
HTML
<div class="box1">
<div class="box2">
<p>テキスト</p>
</div>
</div>
CSS
div.box1{
width:400px;
}
div.box2{
width:350px;
margin-left:50px;
}
div.box2 p{
padding-left:50px;
}
上の例でも正常に表示されるのですが、以下のように記述すればより効率よく同じ効果を出すことができます。
CSS
div.box1{
width:400px;
}
div.box2{
margin-left:50px;
padding-left:50px;
}
外側(div.box1)の幅にあわせて、内側(div.box2)では幅の指定なしで外余白(margin)と内余白(padding)で幅を調節しているわけです。こうすれば、box2に入れる要素全てに設定しなくても同じ余白を与えることが出来ます。
今回のポイント
width指定は外側だけで内側はmarginとpaddingで調節
CSSレイアウトのコツ1 ～widthとpaddingを同時に記述しない～
CSSレイアウトにっとってクロスブラウザは無視できない問題です。記述によってはIE7とIE6の間にもCSSの解釈に違いが見られ、MacIEなどの旧ブラウザに泣かされた人は少なくないはず。そこで、CSSレイアウトでのクロスブラウザ対策のちょっとした工夫を紹介します。
まずは下記の例を見てください。
HTML
<div>
<p>テキスト</p>
</div>
CSS
div{
width:200px;
padding-left:20px;
}
上記のようにwidthとpaddingを指定すると、IEでは200ピクセルで表示されますが、Firfoxではwidth＋paddingの220ピクセルで表示されてしまいます。widthとborderの場合も同様の表示になってしまいます。そこで一手間かけます。
CSS
div{
width:200px;
}
div p{
padding-left:20px;
}
上記のようにwidthとpaddingを分けて記述すればどのブラウザでも同じ幅で表示されます。これはdivボックスを入れごにする場合も同じことが言えます。
今回のポイント
width(height)と左右(上下)paddingの指定を同時にしない
SEO対策は自分でするもの！
検索結果の上位に表示されるSEO対策はネットビジネスにおいて、非常に魅力的なものです。しかし、実際に効果が現れるには、サイト運営側にもそれなりの努力が必要です。
当サイトはSEO業務を行うわけではありません。SEO対策の基礎としてWeb標準サイト制作を提供しています。例えるなら「箱」を提供しているわけです。そして、その「箱」に入れるモノが重要になってきます。つまりサイトの「内容」です。
サイトの内容を充実、あるいは見る者にとって有用な情報を提供できるようになれば、後はちょっとした工夫でSEO効果が期待できるようになるのです。もちろんSEO業者に依頼しても効果は期待できます。しかし、業者にまかせっきりで肝心の「内容」が疎かになってしまうと、あっという間に検索結果の表示順位は下がっていきます。
情報を提供する熱意があってこそ、SEO対策は効果を発揮するのです！
そのお手伝いとして当サイトの「箱（サイト制作）」はいかがでしょうか？（宣伝・・・。）
CSSハックは必須か？
最近のWeb標準化とともに注目されているCSSレイアウトですが、様々なブラウザに対応するために苦労している方は多いはず。と言うのもCSSレイアウトでは各種ブラウザや旧バージョンのブラウザなどでバグが多く、レイアウト崩れを起こすことが多々あるからです。このように各種ブラウザに対応するためのクロスブラウザをクリアするために、ブラウザのバグを逆に利用したハックと呼ばれる技法があります。一時は必須事項だったのですが、ブラウザのバグを逆利用する技法のため確実な表示を保障するものではありません。
個人的にハックは、テーブルレイアウトなどの従来のサイト制作からWeb標準による制作に移行する間だけの一時的な技法として必要ですが、依存するべきものではないと考えています。そのため、Web標準を意識したサイトを制作する場合はコーディングだけでなく、デザイン・レイアウトの段階でも考慮する必要があるかもしれません。
SEO（検索エンジン最適化）としてのコーディング
本来、SEO（検索エンジン最適化）の目的は、検索キーワードに対して最適な検索結果を表示させるユーザーの視点に立ったものです。そのためサイト運営者はアクセシビリティ・ユーザビリティに配慮して、サイトの趣旨に応じた情報を提供することになります。しかし実際には検索エンジンのシステムを利用してSEO効果を上げるためだけの手法も少なくありません。これはスパム行為と呼ばれ、SEO本来の目的と異なるために検索エンジン側も取締りを厳しくする傾向にあります。
コーディングの面から見ると、alt属性に無関係なテキストを詰め込んだり、必要以上のリンクの重み付けなどがスパム行為に当たります。悪質なスパム行為には検索結果から除外されるなどのペナルティがあるのですが、SEO効果を上げるためだけの手法はなくならないでしょう。しかし、これらの効果は一時的なもので、すぐに使われなくなることが多いのです。こういったSEO対策ではサイト内容とは別に、SEO効果を上げるためだけの手法を研究、更新していかなければなりません。
短期間のサイト管理を考えた場合は、このようなペナルティにならない程度のスパム行為は有効と言えるかもしれません。しかし長期間のサイト運営、あるいはサイト制作者側としては、Web標準などの本来の目的に則したSEO対策コーディングを施し、サイト内容を充実させること（ページ更新がしやすいこと）が求められてくるでしょう。
Web標準コーディングはSEO対策の基本です！！
コーディング専門サイト「HomeWeb-coding」がオープンしました！
SEO対策としてますます注目されているWeb標準。ソースの簡略化、ファイルサイズの軽減、人にも検索エンジンにもわかりやすい文書構造、つまりSEO対策として有効なのがWeb標準コーディングです。「HomeWeb-coding」ではそんな無駄のないコーディングをいたします。
細部まで丁寧な仕上がりはコーディング専門だからこそ！新規サイトをWeb標準でコーディング、既存サイトのWeb標準化など、お気軽にご相談下さい。
Web標準でこれだけソースは簡略化できる！！
制作ソフトは非常に便利なツールですが、基本的にはテーブルレイアウトによる構築です。テキストの装飾などをCSSで設定できるようにはなったとは言え、CSSレイアウトにはまだ対応できていません。それではテーブルレイアウトなどの従来の方法で制作したページと、Web標準に基づき制作したページとでは、HTMLのソースにどの程度違いが出るでしょうか。下記サンプルのように、ブラウザ表示させた場合を分かりやすく比較してみました。
まずはテーブルレイアウトにした場合のHTML
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td><img src="○○○.gif"></td>
<td><font color="#369"><strong>コンテンツ1</strong></font></td>
</tr>
<tr>
<td><img src="○○○.gif"></td>
<td><font color="#369"><strong>コンテンツ2</strong></font></td>
</tr>
</table>
<ul>
<li>コンテンツ1</li>
<li>コンテンツ2</li>
</ul>
一目でわかるとおり、ソースがシンプルになりました。項目としての意味合いからリストタグを使用し、フォント色や太さ、行頭の画像といった視覚表現についてはCSSで設定します。CSSの設定は一度設定してしまえば他のページでも利用できるので、効率よく項目を増やすことができます。
シンプルなソースはファイルサイズ軽減にもつながるので、上記例では項目が増えれば増えるほどWeb標準でコーディングする有効性がわかるかと思います。
MTテンプレート配布開始！
ブログが普及した現在、あちこちでブログシステムでもあるMovableTypeも耳にするようになりました。そこで、MovableType用テンプレート専門サイトを立ち上げました！
テンプレートの無料配布からビジネス向けオリジナルテンプレートの制作、またMovableTypeでのサイト構築も承りますのでお気軽にご連絡下さい
