トップページ ＞ ホームページ制作 ＞ 制作料金
この「パンくずリスト」は、大規模なホームページなどでは欠かせない要素となっており、ユーザビリティやSEO対策にとっても重要な要素の一つです。
コーディング方法としては難しいことをすることもなく、以下のようにしても問題ありません。
ただ、Web標準的なコーディングとして考えた場合は、olタグを使うのが適切でしょう。
CSS
HTML
表示サンプル
このようにolタグを使うことで、テキストモードでは以下のように表示され、階層構造が明確になるわけです。
1.トップページ ＞
2.ホームページ制作 ＞
3.制作料金
修正する時も見やすいのでお勧めのコーディング方法です。
]]>そんな「※（米印）」のテキスト処理で簡単な方法としては以下のようなコーディングがあります。
CSS
HTML
こんな簡単なことで注意書きの見栄えがグッとよくなります。ただ、Macの標準ブラウザSafariでみると、2行目の文頭がずれてしまいます。さすがに標準ブラウザは無視することはできないですよね・・・。
そこで以下のような方法が有効になります。
CSS
HTML
表示サンプル
こうすることで文頭が綺麗にそろうようになります。
対象ブラウザが明確であるならシンプルなコーディングの前者をお勧めしますが、幅広いブラザウに対応したい場合は後者を使用するのがよいでしょう。また、後者の場合は「※（米印）」だけではなく、CSSの余白設定によって「（答え）」のように文字を入れるなど、応用も利くので利用価値は高いでしょう。
是非、お試しください。
]]>CSS
HTML
上記では3階層目まで記載されていますが、以降、同じように階層が深くなるにつれて左側に余白ができるような仕組みになっています。
これはCMSなどで自動生成されるものだと問題ないのですが、通常コーディングで用いる場合は、階層が深ければ深いほど複雑になるのでタグの閉じ忘れなど注意が必要です。とは言え、通常のサイト構築ではそこまで深い階層のナビゲーションはなかなかお目にかかりませんが...。
]]>CSS
HTML
この方法では、実に簡単にfloat解除ができ、なおかつ下余白も設定しやすくなります。ただし注意しなければならない点もあります。
上記の点に注意しておけば、空要素などを作ることなく、シンプルなコーディングでfloat解除できるわけです。
レイアウト崩れの原因に最も多いfloat解除忘れで、レイアウトが崩れてしまわないように是非、活用してみてください。
回り込み解除のためのコーディングにはいくつかの方法があります。
【改行タグ（br）に埋め込む】
この場合、ブラウザによっては下余白の調節が困難な場合があります。
【空のdivタグに埋め込む】
空のブロック要素が必要になるのであまりお勧めはできません。
【imgタグに埋め込む】
回り込み要素の下に画像がある場合は使えますが、ない場合は透明画像を用意しなければなりません。
【次のブロック要素に埋め込む】
回り込みブロックが複雑な入れ子になっている場合、うまく機能しない場合があります。
CSSレイアウトが一般的になってきたので、これらの方法をうまく使い分けてレイアウト崩れにならないように、工夫したコーディングが必要でしょう。
ちなみに「clear:○○;」は、正確に言うとfloatの解除ではありません。
仕様書では「生成されるボックスの上マージンを増加し、上境界辺がソース文書のそれより以前の要素から生じたあらゆる左浮動ボックスの下外辺よりも下になるようにする。」
つまりは上マージンの自動調節ということで、結果的にfloat解除になるというわけですね。
]]>CSSを設定する上で、こういったことは良く聞かれます。
上下の余白が思うようにいかない原因はいくつか考えられますが、「marginの相殺」が考えられます。
次の例を見てください。
HTML
<ul>
<li>テキスト</li>
<li>テキスト</li>
</ul>
CSS
li {
margin-top:5px;
margin-bottom:10px;
}
上の例では、一つのリストの上下に余白が設定されています。そのリストが二つ並ぶのでリスト間の余白は15pxになるはずです。ところが実際には10pxの余白しか空きません。これは要素間の重なり合うmarginには相殺のルールがあるためです。
要素間のmarginが重なり合う場合、大きい値が有効になる
この規則を忘れずに制作するのもいいのですが、要は要素間のmarginを重ならないようにすればいいということです。例えば、一方はmarginでもう片方はpaddingで指定するといった感じです。
私の場合はもっと単純に「上の余白は指定しない」ようにしています。もちろん場合によって使い分けてはいますが、独自の制作ルールを作っておくことで、作業がスムーズに進められます。
制作を進めている中で、「どっちに設定しようか…」、とどちらでもいいことに悩むのは意外と多いものです。独自ルールを設けていれば、あれこれ悩まずに作業もはかどるというわけです。
]]>CSSレイアウトとはWeb標準の考えに則り、文書構造（正しいHTML）と視覚表現（CSS）を分けた制作方法と言い換えることができます。
そのため、即「テーブルタグ禁止！」につながるものではないと考えます。脱テーブルレイアウトは文字通り、レイアウトとしてのテーブル使用はしないことですので、表組みなどはテーブルレイアウトを使うべき箇所ではないでしょうか。
テーブルレイアウトからCSSレイアウトへの移行の背景にはSEOの考え方があります。テーブルレイアウトはクロスブラウザにも対応したすぐれた技法ですが、入れ子になることが多くソースが複雑化します。複雑化したソースはファイルサイズ増加につながり、読み込みにも時間がかかってしまうことになります。
こういった視点で考えると、クロスブラウザの利点だけでは割が合わないようですが、複雑な入れ子にしなければ良いだけのことです。もともとの目的である表組みや、スタイルシートでは難しい部分的なレイアウトなど、テーブルタグを正しく有効に使えばSEO的にも問題ないのではないでしょうか。
各ブラウザもCSSに対して順応しているといってもまだ完全ではありません。テーブルとCSSのどちらの利点のほうが大きいかを考慮した上で制作方法を選ぶのが一番です。
]]>h1タグは内的SEO対策にとって重要な割合を占めています。それだけに無関係なキーワードを詰め込んだり、重み付けの重複など、本来の目的から外れた使い方が広まってしまい、その結果、スパム行為として警戒されるようになっています。
「h1タグのフォントサイズを小さくするだけでスパム行為とみなされる。」と聞くことがあります。本にも書いている場合があります。しかし、フォントサイズを通常サイズにするだけでスパムとされるのでしょうか。
スパム行為の定義として「検索エンジンを騙す可能性のある行為」と解釈できます。具体的には以下のようなものがあります。
こうしてみると、h1タグの文字サイズを通常サイズにする行為だけでは、到底スパムとは考えられません。そもそもh1タグをそのままデザインとして使えるのか？と、疑問すら感じます。
「h1タグのフォントサイズを小さくするとスパム」というのは、ページ説明のためにページ内に1か所だけ設置するといった基本的な使い方を無視して、テキスト内のキーワード部分にh1タグを埋め込むことを指しているもので、それが間違って広まってしまったのではないでしょうか。実際、正しい目的でh1タグを使った場合、フォントサイズを調節してスパムとみなされた例は聞いたことはありません。
悪用されれば規制されるように、今後もスパムの定義が変わっていくかもしれませんが、正しい情報を持ってホームページ制作に取り組みたいものです。
]]>・サイト全体でページの体裁が整っている
・各ページそれぞれレイアウトが変化する
前者は情報サイトなど、ページ数も多く規模が大きなサイトに、後者は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したボックスに対して、inlineを指定することで簡単に解決します。
CSS
div {
width:300px;
margin-left:10px;
float:left;
display:inline;
}
上記のように「display:inline;」がなければ、IE表示では左余白は20ピクセルになってしまいます。ピクセル単位で構成されたページでは、この対処法を知っているか知らないかでは制作面に大きな違いが出てきます。簡単な方法ですので是非、ご活用ください。
]]>これは背景を入れているボックスに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などのブラウザでは強制的にフォントサイズを変更できるので効果がありません。またアクセシビリティの面からもフォントサイズの固定はユーザーの設定を制限してしまうので望ましくありません。「ありません、ありません」と続きましたが、個人的にはレイアウトに影響してしまう場合など部分的な使用に関しては許されるかと考えています。でも注意は必要です。
]]>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で調節
まずは下記の例を見てください。
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対策の基礎としてWeb標準サイト制作を提供しています。例えるなら「箱」を提供しているわけです。そして、その「箱」に入れるモノが重要になってきます。つまりサイトの「内容」です。
サイトの内容を充実、あるいは見る者にとって有用な情報を提供できるようになれば、後はちょっとした工夫でSEO効果が期待できるようになるのです。もちろんSEO業者に依頼しても効果は期待できます。しかし、業者にまかせっきりで肝心の「内容」が疎かになってしまうと、あっという間に検索結果の表示順位は下がっていきます。
情報を提供する熱意があってこそ、SEO対策は効果を発揮するのです！
そのお手伝いとして当サイトの「箱（サイト制作）」はいかがでしょうか？（宣伝・・・。）
]]>