CSSの読み込み開始までのラグの原因とは？
- CSSの読み込み開始までに2秒近いラグが発生しています。
- header.php、main.php、footer.phpの３ファイルをincludeして読み込んでいます。
- 考えられる原因としては、ファイルの読み込み順やネットワークの遅延が挙げられます。
- ベストアンサー
CSSの読み込み開始までラグがあります
header.php、main.php、footer.phpの３ファイルを作成して、 index.phpに include './header.php'; include './main.php'; include './footer.php';などとして読み込ませました。 cssファイルは、header.phpの<head>に <link rel="stylesheet" type="text/css" href="header.css"> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="footer.css"> の形で記述されています。 javascriptがあり、これも同様に<head>に記述されています。 以上のファイルはすべて同じフォルダ内にあり、これをlocalhostで表示させました。 これをchromeで要素を検証してみたところ、 cssの読み込み開始までに2秒近いラグがあります。 このラグの考えられる原因は何があるでしょうか。 どなたか心当たりのある方、教えてください。よろしくお願いします。
- crouch-tancle
- お礼率80% (20/25)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
htmlは基本的(パラレルダウンロードする部分もあるけど)に上から下に読み込まれます。 Chromeの検証を使えば、何に時間がかかっているのか分かると思うのですが、分かりにくいのであれば、アナログでheaderの要素をひとつづつ削ってテストしてみてはどうでしょうか。
関連するQ&A
- cssの読み込み優先順位
以下の場合、grid.cssが優先されて「text-align: center;」が適用されてしまうのですが、common.cssを優先させるにはどのようにしたらよいのでしょうか。(!important命令は使わないという前提で。) 【階層構造】 「cssフォルダ」┳ common.css ┃ ┣ screen.css ┃ ┗ 「libフォルダ」━ grid.css cssファイル中身 [screen.css] @import 'lib/grid.css'; [grid.css] body { text-align: center; } [common.css] body { text-align: justify; } htmlファイル中身 <head> <link rel="stylesheet" type="text/css" href="../../css/screen.css" /> <link rel="stylesheet" type="text/css" href="../../css/common.css" /> </head>
- ベストアンサー
- CSS
- 外部ファイルを読み込んだhtmlをinclude
外部ファイルを読み込んだhtmlをincludeしたいです。 ディレクトリの階層は、 index.php style.css /pic/picture.html /pic/css/style1.css /pic/css/style2.css : /pic/css/style13.css /pic/js/jquery1.js /pic/js/jquery2.js : /pic/js/jquery15.js : （画像などが他にもいっぱい） となっています。 ----- picture.html内には <link rel="stylesheet" type="text/css" href="css/style1.css"> <link rel="stylesheet" type="text/css" href="css/style2.css"> : <link rel="stylesheet" type="text/css" href="css/style13.css"> <link rel="stylesheet" type="text/css" href="js/jquery1.js"> <link rel="stylesheet" type="text/css" href="js/jquery2.js"> : <link rel="stylesheet" type="text/css" href="js/jquery15.js"> : と書かれています。 ---- このときindex.phpのbody内に <?php include('./picture.html'); ?> とした場合、相対パスによる記述なのでpicture.html以外のcssやjsは適用されませんよね。 しかし/pic/内にあるすべてのpicture.htmlに関係するファイルは非常に数が多いので、これらすべてをincludeするのは厳しいです。 すべての外部ファイルを読み込んだ状態のpicture.htmlをbody内に表示したいのですが、そんなことは可能でしょうか。 どなたかご教示ください。どうかよろしくお願いします。
- ベストアンサー
- PHP
- 一部のページにデフォルト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
- phpでこのイコールは代入演算子ですか？ <l
phpでこのイコールは代入演算子ですか？ <link rel="stylesheet" type="text/css" href="stylesheet.css"> ↑このイコールです link relにstylesheetを代入するという意味ですか？ ↓他にもたくさんありますが、このイコールは代入演算子なんですか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body>
- ベストアンサー
- PHP
- ＣＳＳが反映されないで困っています；；
日本のホストの時は、ＣＳＳがＨＴＭＬにうまく反映されていたのですが、 ホストを海外の Ｔ３５Hosting と Graffiti.net で同じ様に挑戦したら ＣＳＳが反映されませんでした；； index.htmlのヘッド内に下記を書いて、 top.cssの名前でＣＳＳを書きました。 <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="top.css" type="text/css"> </head> なぜか、反映されませんでした；； 「/」（ルートディレクトリ）と何か関係あるのでしょうか。 <link rel="stylesheet" href="top.css" type="text/css">の行の href="top.css" を href="/.top.css" などに変えなくてはいけないのでしょうか。。。 お知りの方 よろしくお願いします。
- ベストアンサー
- ブログ
- インラインフレーム内のcssを親フレームに適用する
インラインフレーム（子ウィンドウ）に表示されているページ（同一ドメイン上のページです）で読み込まれているcssを、ページ読み込み時に親ウィンドウ側でも読み込みたいと思っています。 内容としては 親ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test1.css"> 子ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> となっているソースをページ呼び出し時に 親ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> 子ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> のように共通していないcssを子ウィンドウ側に合わせて変更したいのです。 子ウィンドウ内のページのソースは訳があって編集する事が出来ないので、親ウィンドウ側で子ウィンドウ内の <link rel="stylesheet" type="text/css" href="test2.css"> の href の値を読みこみ、親ウィンドウ側の href の値を置き換えるといった方法では無いかと思うのですが、具体的にどうすればよいのか分かりません。 どなたかご存知の方、ご教授ください。 よろしくお願いいたします。 また、ブラウザはIE6～8と、Firefoxを想定しています。
- ベストアンサー
- JavaScript
- CSS のときのヘッダの記述
<link rel="stylesheet" href="style.css" type="text/css" /> の link rel = の ●「 rel 」って何の省略なのでしょうか？ また、 ●href は Hyper link REFerence の略でしょうか？
- ベストアンサー
- HTML
- type="text/css"
<link rel="stylesheet" type="text/css" href="http://web.fc2.com/css/index.css"> と <link rel="stylesheet" href="http://web.fc2.com/css/index.css"> では意味同じですか？ type="text/css"は省略したほうがいいのでしょうか？ しない方が良いのでしょうか？
- ベストアンサー
- CSS
- プリント用CSSについて
いつもお世話になります。 プリント用のCSSを作成しようと思うのですが、 複数記述してもエラーは出ないのでしょうか？ 説明がうまくないので具体例を書かせていただきます。 “a.css”“b.css"の各々のプリント用cssを “aprint.css”と“bprint.css"とした場合に <link rel="stylesheet" href="css/a.css" type="text/css" media="all"> <link rel="stylesheet" href="css/b.css" type="text/css" media="all"> <link rel="stylesheet" href="css/aprint.css" type="text/css" media="print"> <link rel="stylesheet" href="css/bprint.css" type="text/css" media="print"> この記述で不具合はないものかと悩んでいます。 それともa,bを統合して“c.css”という新たなものを作り、 プリント用“cprint.css”を設けるべきでしょうか？ できれば複数記述できると助かるのですが。 要領を得ない質問ですみませんが、ご教授いただけると嬉しいです。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- HTMLメールの外部CSSが有効になりません
HTMLメールから以下のように外部CSS（http://から始めてます）を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか？ <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
- 締切済み
- HTML
お礼
ありがとうございます。 要素を削ったところ、原因はjavascriptにありました。