複数CSSファイルを、PHPを利用して1ファイルにする。~ 2018年

CSS

目次一覧

 状態:試行錯誤履歴  閲覧数:2,783  投稿日:2013-04-01  更新日:2019-10-14
ドキュメントルート外のCSSファイル読込。~ 2018年」の続き

管理側としてやりたいこと / この問題を両方解決するためには?

なぜ複数のCSSファイルを、1つにまとめたいの?

実際に試してみた


管理側としてやりたいこと / この問題を両方解決するためには?

 閲覧数:721 投稿日:2013-04-01 更新日:2019-10-14

管理側としてやりたいこと


複数CSSを効率よく管理したい
サーバーとの通信回数を出来るだけ減らしたい

この問題を両方解決するためには?


サーバー側で1ファイルにまとめる
複数のCSSファイルをサーバーでまとめてSEO対策しよう

なぜ複数のCSSファイルを、1つにまとめたいの?

 閲覧数:642 投稿日:2013-04-01 更新日:2019-10-14

何が問題?


・この件は知っていたが、これまであまり速度のことを気にしたことはなかったので試したことはなかった
・今回、CSSをドキュメントルートより上階層から読み込むよう変更したので、ついでに挑戦してみた

実際に試してみた

 閲覧数:417 投稿日:2017-08-16 更新日:2019-10-14

文字列として連結


リンク先のように複雑なことをやりたいわけではないので
・PHPのみ利用
・「<link rel="stylesheet"で読み込んだPHPファイルにて、「file_get_contents」で取得した文字列(CSS)を単に連結して出力しているだけ
▼style.php
<?php 
// ヘッダ出力
header("Content-Type: text/css; charset=utf-8");
$str = '';
if (is_file(""ドキュメントルート上のパス/style.css")) $str .= file_get_contents("ドキュメントルート上のパス/style.css");
if (is_file(""ドキュメントルート上のパス/top.css")) $str .= file_get_contents(""ドキュメントルート上のパス/top.css");
echo $str;

※「file_get_contents」の変わりに「include」でも、同じ結果を得ることが出来る

デメリット


デバッグが若干やりづらくなる
・内容に応じた外部CSSを読み込んでいる場合は、Chrome等でデバッグする場合、そのCSSファイル名を確認でき、視覚的にわかりやすい
・一方、この方式のファイルをデバッグすると、CSSファイル名は「css.php」となるため、実際にはどのファイル名で記述されているか、作成者以外には分からない(いちいちグレップ検索する必要が生じる)


ドキュメントルート外のCSSファイル読込。~ 2018年

効果を打ち消すスタイルシート



類似度ページランキング
順位 ページタイトル抜粋
1 複数CSSファイルを、PHPを利用して1ファイルにする。~ 2018年 77
2 ドキュメントルート外のCSSファイル読込。~ 2018年 44
3 Illustrator CS2 でファイル名に「更新済み」を追加しない 31
4 Chromeで名前を付けて保存する際、ファイルを一つにするには、mht形式で保存する 29
5 画像を小さくトリミングして綺麗にみせるため、PhotoShop CS3 で色調補正する 28
6 使用していないCSSをチェックする、標準的な方法を知りたい 28
7 フォーム要素に対する(私の)CSS適用ルール 28
8 「DALL·E 2 - OpenAI」を使用してみた感想。2022 年 7 月 31 時点では、デザイン実務に耐えられるレベルではないと思いました。 28
9 一つの要素に対して「id 属性値」を複数指定することは出来ない 27
10 JPEG画像ファイルコピーを繰り返しても画質は劣化しない。画質が劣化するのは上書き保存する場合 27
11 SVG線を徐々に描画していくためには、@keyframes を利用 26
12 HTML5では、action属性を省略すると、送信先はそのHTMLファイル自身になる 26
13 「Photoshop CS3」で、レイヤーを他のPSDへコピーする方法 26
14 「Photoshop CS3」で、画像を円形に切り取り、背景を透明にする 25
15 コピペ出来ないWebページをコピペ出来るようにするためには? 2017年 25
16 Photoshop CS3 「全てのメニュー項目を表示する」 25
17 CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する 25
18 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない 24
19 右クリック出来るのに、コピペ出来ないWebページ。2020 年 24
20 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 24
2025/2/05 16:50 更新
週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 22
2 16進数カラーコード / 2進数 11
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 9
4 鉄道会社毎のカラーコード | カラーコード(色) 7
5 キャラクター無料着せ替えジェネレーター Dress up game / オンラインサービス | イラスト参考(デザイン) 6
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 5
7 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
7 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 4
7 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3
8 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
8 拡張機能が Chrome によって無効にされました / この拡張機能は破損している可能性があります。 | Chrome 拡張機能 3
9 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 2
9 Design 0 2
9 RGBの種類 / ビットカラー | RGB(色) 2
9 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
9 色空間 / 表色系 / 顕色系 / 混色系 2
9 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 2
2025/2/5 1:02 更新