CSSの分割とウェブサイトの表示速度
- CSSの分割とウェブサイトの表示速度について混乱しています。
- CSSの分割と結合には、それぞれメリットがあります。
- 共通のCSSをcommon.cssにまとめ、各ページに特有のCSSを読み込む方法が有効です。
- ベストアンサー
CSSの分割とウェブサイトの表示速度 (SEO)
. よく、【(1)HTTPのリクエストを抑えるために、複数のCSSファイルはひとつにまとめる】ということが言われますが、一方で、【(2)表示速度のためにCSSを分割する】ということが推奨されることもあります。 この2つが一見矛盾する感じで少々混乱しております。 ここで、例えば、ホームページ・記事ページ・製品ページの、3つのページが存在するウェブサイトを仮定するとします。 【質問A】 そこで、(1)については、ある一つのページにおいては、もしCSSを複数呼び出している場合には、できるだけその複数のCSSファイルをまとめた方がHTTPのリクエストが少なくなるのでよい。 そして、(2)については、各ページにおいては、ページごとにCSSファイルを分けていた方がそのページでは使わない無駄なCSSコードを読み込ませなくて済むのでよい。 ということなのでしょうか？ 【質問B】 そうすると、全てのCSSファイルを一つにまとめてしまうのではなく、例えば上の3つのページに共通するCSSをcommon.css 、それぞれのページに特有なCSSをindex.css、article.css、product.css といった感じで読み込ませるようにすることは、(1)(2)の両方をある程度両立させる方法といえますでしょうか？ 【質問C】 質問Bの内容を具体的に実現するには、HTMLのヘッダー部分をテンプレートパートにして、まずcommon.cssについては<head>に<link>で記述しておき、index.css、article.css、product.css についてはその下に条件分岐で記述して各ページで該当のCSSを読み込ませるという方法で問題ございませんでしょうか。 .
- milano-com
- お礼率100% (36/36)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Ａ．基本的にはその考え方であっています。 Ｂ．各ページ特有のスタイルが多く存在するのであればその方法でいいと思います。 ただ、各ページの特有のスタイルが少ないのであれば、全てを1つにまとめる事でキャッシュが有効に働くので、CSSファイルの読み込みは最初の1回で済む事になり2ページ目以降の高速化に繋がりますので、ファイル容量次第で使い分けが必要です。 Ｃ．それでいいと思います。
関連するQ&A
- CSSの呼出方法と表示速度 (SEO)
. HTML内で外部CSSファイルを呼び出す方法について、表示速度の面で記述を迷っ ている部分があります。 例えば、ホームページ・記事ページ・製品ページの、3つのページが存在するウ ェブサイトを仮定するとします。 そして、3つのページに共通するCSSをcommon.css それぞれのページに特有なCSS をindex.css、article.css、product.css とするとします。 【方法A】 HTMLのヘッダー部分をテンプレートパートにして、まずcommon.cssについて<link > で記述し、index.css、article.css、product.css についてはその下に条件分 岐で記述して、CSSファイルを呼び出していく 【方法B】 HTMLのヘッダー部分をテンプレートパートにせず、ホームのページのHTMLにcommon.css 及びndex.cssを<link>で2つ記述、記事ページのHTMLにcommon.css及びarticle.css を<link>で2つ記述、製品ページのHTMLにcommon.css及びproduct.cssを<link>で 2つ記述、してCSSファイルを呼び出していく。 Bの方法は管理の手間はかかることになりますが、テンプレートパートを使い条 件分岐をするAと条件分岐をしないBで、各ページで表示速度に違いは出るもの なのでしょうか .
- ベストアンサー
- CSS
- ウェブサイトのTOPページのSEO対策について
自分のドメイン「○○○○○.com」で、「○○○○○.com/A/index.html」や「○○○○○.com/B/index.html」など複数の異なるカテゴリーを 構築する場合、その「○○○○○.com」のページに簡単な各カテゴリーの 『案内のテキストリンクを貼るだけ』のシンプルなTOPページを作る場合と、 「○○○○○.com」のページに『各カテゴリーのサイトの説明を詳細に 記述する場合』とでは、SEO対策的には、複数のカテゴリーを構築する場合には どちらが有利になりますでしょうか？ それともSEO対策的には、両方共、あまり差はないでしょうか？ よろしくご教授ください。
- 締切済み
- その他([技術者向] コンピューター)
- CSSファイルは、どこから読み込んでいるのか？
とあるWebサイトのソースを見たら、headの部分が次のようになっておりました。 <link rel="stylesheet" href="css/import.css" type="text/css" media="all" /> これは、普通に記述されていると思いますが、href="css/import.css"を開いてみたら、次の記述しかありませんでした。 @charset "utf-8"; /* CSS Document */ @import "common.css"; @import "top.css"; @import "text.css"; @import "faq.css"; @import "form.css"; これは、どういうことでしょうか？ CSSからCSSを読みこんでいるのでしょうか？ なぜ、htmlファイルに複数行をかけてCSSファイルを一つずつ読みこませないのでしょうか？ 何かメリットがあるのでしょうか？
- ベストアンサー
- CSS
- 一部のページにデフォルトCSSを読み込ませない方法
一部ページにCSSを読み込ませない方法がありましたら、 ご教授ください。 例えば、 全ページに以下のCSSを共通で読み込ませてあります。 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> しかし、test.htmlだけ <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> を読み込ませたくありません。 つまり、 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> は通常通り読み込んで、 <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" />のみを 除外したいです。 * 共通のCSSは外すことはできません。 * また、CSSを新たに追加することもできません。 * head内にスクリプトを記述することができますが、スクリプトの記述で解決できますでしょうか。 自分で検索もしてみたのですが、答えに辿りつけません。 どのような方法がありますでしょうか。 何か方法がありましたら、ご教授ください。 よろしくお願いいたします。
- 締切済み
- CSS
- cssファイルがダウンロードできてしまう・・・
cssを外部ファイルに置いて、http://○○○.com/css/index.cssのようにしているのですが、以下の問題が発生しています。 ■http://○○○.com/css/index.cssでcssファイルがダウンロードできてしまう。 ■cssファイルがYahoo検索エンジンにインデックスとして大量に登録されてしまう。 上記の2点の問題で非常に困っています。htaccessに <Files ~ "\.css$">deny from all</Files> と記述しましたが、これではサイトにアクセスするとcssを読み込まずにレイアウトが総崩れしてしまいます。 どのように記述すればよいのでしょうか？
- ベストアンサー
- HTML
- ディレクトリ構成【「common」を使いますか？】
サイトのディレクトリ構成について質問です。 よく「common」ディレクトリを使用して前ページ共通のファイルを格納しているサイトをみかけますが、【図(1)】のようになっているものが多いように思います。 （色々なファイル名や整理、分割の仕方はあると思いますが、ここでは共通CSSをcommmon.css、各ページのCSSをpage.cssとしておきます。「アクセス」ページ（地図などを掲載しているページ）を加えてみました。） しかし、page.cssは個別の設定であるため「common」の中に入っていることに違和感を覚えます。 次に「common」を使用しない場合ですが、こういった場合、ヘッダやフッタ等に使用する共通画像の置き場所に困ってしまいます。 例えば【図(2)】にすると、トップページの画像ディレクトリの中にcommon/共通画像が格納されていて気持ち悪い感じです。 皆さんどのようにディレクトリを整理しておられますか？ できるだけすっきりとわかりやすい構成にしたいのですが・・・。 （※条件：できれば各ページの画像は各ページのimagesディレクトリに入れたい。） 知恵をお貸しください！ 【図(1)】 index.html ※トップページ │ ├common┬─css──┬─common.css ※サイト共通のCSS │ │ └─page.css │ └─images ※サイト共通の画像 │ ├images ※トップページ画像 │ │ └─ access┬─index.html └─images ※「アクセス」ページの画像 【図(2)】 index.html ※トップページ │ ├images ※トップページ画像 │ └─common ※サイト共通画像 │ ├css ───┬─common.css ※サイト共通のCSS │ └─page.css ※各ページのCSS │ └─ access┬─index.html ※アクセスページ └─images ※「アクセス」ページの画像
- ベストアンサー
- CSS
- リンキングCSSについて
どうしても判らないので初心者的なのですが質問させていただきます。 タイトルにもありますように、リンキングCSSについてです。 読み込む元のcssファイルの記述なんですが、どの本、どのサイトを回っても Ｈ１{ｃｏｌｏｒ：＃○○○○○○} Ｈ２{ｃｏｌｏｒ：＃▲▲▲▲▲▲}等記述してあります。 頭の部分をＨ１にして読み込むと見出しになってしまうので嫌なのです。 また＜ｐ＞にした場合ですと、複数記述が出来ません。 ためしに a{ｃｏｌｏｒ：＃○○○○○○} b{ｃｏｌｏｒ：＃▲▲▲▲▲▲}と記述してみましたところ、 これは綺麗に表示されました。 この表示の仕方でも大丈夫なのでしょうか？ 「わからないならHEADに記述かインラインにすれば？」と思われる方も いらっしゃりますでしょうが、どうしてもリンキングにしたいのです。 とても困っています。 どなたか宜しくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
- CSS SPRITEを使う為の画像を作りたい
CSS初心者です。 最近、CSS SPRITEを使ってHTTPリクエストを軽減するという ページを見まして、CSSの方は理解は出来たのですが、画像の 作り方がぐぐって調べたのですが、どうもわかりません。 座標が出るグラフィックソフトを使う、という所まではわかった のですが、具体的にはどれを使えばよいのでしょうか？ 今、PCには、photoshop、illustratorは入ってます。 具体的な作り方が載ってるページなど教えて頂ければ幸いです。 宜しくお願いします。
- ベストアンサー
- HTML
- css
プリント時のCSS設定についておたずねします。 現在index.htmlとindex.cssがあります。 index.htmlに ----------------------------------------------------------- <link href="index.css" rel="stylesheet" type="text/css" media="all" /> ----------------------------------------------------------- としてindex.cssを読み込み index.css内では ----------------------------------------------------------- body{ background:url("../images/bg_body.gif") repeat-x; } ----------------------------------------------------------- として、bodyの背景に画像を貼り付けています。 これを印刷時にはbodyに指定している背景画像を非表示にして 印刷させたいのです。 ※ブラウザの詳細設定「背景の色とイメージを印刷する」にはチェックを入れたまま。 別途cssを用意しhtml側で ----------------------------------------------------------- <link href="print.css" rel="stylesheet" type="text/css" media="print" /> ----------------------------------------------------------- とすれば出来そうなのですが、ちょっと答えが出ません・・・ そもそもなぜこのような事がやりたいのかというと コンテンツ内容が長くなった時、印刷すると複数ページに渡りますが、 <body>に指定した画像が、2ページ目、3ページ目にも表示される為です。 背景にしている画像は高さを十分に確保しており横32px×縦3000px位で、 一番上（0pxの高さ）から150px位の高さまで単純なグラデーションをかけたものです。 151px以降は1色のベタ塗りという感じです。 ブラウザ閲覧上はコンテンツ内容が長くても背景画像のグラデは ページ上部のみ表示されるのですが、印刷時に2ページ目、3ページの上部に グラデが表示されてしまうという事です。
- 締切済み
- ホームページ作成ソフト
お礼
ありがとうございます。モヤモヤが解消され安心することができました。 特に、質問Bに対するキャッシュの件と使い分けのお話しはとても参考になりました。感謝します。