トップページ→CSSレイアウトの長所・短所
CSSレイアウトの長所・短所

CSSレイアウトの長所・短所

CSSレイアウトの長所・短所に関しては多くのwebページで取り上げられてきた話題です。 このページではそういった情報を以下のようにまとめました。

「CSSレイアウトの長所」
1. 更新時の利便性が高い
外部にスタイルシートを置くことによって、同じスタイルシートを読み込んでいるページ の修正を一括で行うことができます。
例えば「全ページ共通のフッタの<hr>色を修正したい」といった場合、外部スタイ ルシート1ファイルの修正で行うことが可能です。

2. レイアウトの自由度が高い
例えば「htmlのソース自体には手を加えず、左メニューの2カラムレイアウトを右メニュ ーの2カラムレイアウトに変更する」ということができます。
また、1px単位でのレイアウトやDIVタグを用いたレイアウトを行うことも可能です。

3. ソースファイルの軽量化
スタイルシートを外部に置いて切り離すことで、単純にページの容量を軽減することが出 来ます。見た目的にもソースがすっきりしますので、ひいては更新性の高さにも繋がりま す。

「CSSレイアウトの短所」
1. ブラウザ間の相違
例えばInternetExplorerとFireFoxなど、ブラウザ間(もしくは同一ブラウザのバージョン 間)でのCSSの解釈の違いから、表示が微妙に異なることがあります。この問題を克服した ソースを記述するには、ある程度の経験や知識が必要となります。


二次的なメリットとなりますので上の項目には加えませんでしたが、個人的に最も大きい と感じるメリットは「SEO的に有利である」という点です。ファイルが軽量化され、また HTMLソース自体には文書の理論構造のみが記述されることから、結果としてクローラーが 解釈し易いソースとなるからです。

CSSレイアウトの長所・短所

実際にCSSレイアウトを行う前に、その長所・短所に関して把握しておきましょう。当然ながら万能な手法ではなく、短所と言うべき点も存在します。
画像1

サイト枠組みの作り方

スタイルシートは、より構造的にレイアウトを整える事ができ、HTMLだけでは表現しきれないレイアウトが可能になります。このページでは2カラム、3カラム構造の実例に沿ったCSSのサンプルを紹介しています。
画像2

メニュー部分の作り方

最近のホームページのメニューでよく使用される、HTMLの「li」とCSSの「a:hover」要素を利用したJavaScriptなしのロールオーバーメニューに関して調べます。HTMLとCSSだけで構成されるので、軽いロールオーバーメニューが作成できます。
画像3

よくあるレイアウト崩れ

スタイルシート作成時によくありがちなスタイル・段組崩れについてのヒント集です。borderの指定やデフォルトスタイルのリセット、ブラウザのバージョン違いによるスタイル崩れについて主に記載しております。
画像4

[PR] ポイントでお小遣い稼ぐならi2iPoint
友達を紹介すれば、友達が貯めたポイントを最大90%還元!
[PR] FX初心者必見のブログ「FX投資家・メイの逆張り相場ブログ」
専業FXトレーダー・メイのトレード日記ブログ!初心者の入門から逆張りのチャートの読み方まで解説!
[PR] 電力の自由化って?そんな疑問にエネチョイスが回答!
エネチョイスでは電力会社150社を比較して一括見積もりすることが可能!あなたに合った電力会社を見つけよう!