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

CSS

目次一覧

 状態:試行錯誤履歴  閲覧数:5,977  投稿日:2013-04-01  更新日:2019-10-14
2種類

経緯 / 最初に思いついた方法 / 次に思いついた方法

PHPを利用して、ドキュメントルート外のCSSファイルを読み込む

利用する関数別(2種類)

CSS読み込み別(2種類)

B.(PHPを利用して、)ドキュメントルート外の外部CSSファイルを、内部CSSとして読込

A.(PHPを利用して、)ドキュメントルート外の外部CSSファイルを、外部CSSとして読込

履歴


2種類

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

2種類


A.(PHPを利用して、)ドキュメントルート外の外部CSSファイルを、外部CSSとして読込
~ 2013年

B.(PHPを利用して、)ドキュメントルート外の外部CSSファイルを、内部CSSとして読込
2013年 ~ 2018年

経緯 / 最初に思いついた方法 / 次に思いついた方法

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

経緯


何が問題なの?
・「同じデザインの複数サイト」を運営している
・デザイン完成してから開発しているわけではなく、「デザイン」と「開発」を同時並行で進めている
・CSS変更が発生すると、その都度、全てのサイトへCSS更新を適用させなければいけない
・コピペするだけなのだが、この単純作業が作業の途中で何回も入ってくると、段々苦痛になってくる
・いちいち一つ一つCSS修正とかやっていられない
・何とかして、includeみたいに、1つのCSSファイルを、全てのサイトで読み込ませることは出来ないのか? そう考えたのが始まり

最初に思いついた方法


@import url(ドキュメントルートより上階層のパス/style.css);

実際に試してみた結果分かったこと
@import urlは、「ドキュメントルートより上階層に配置されたCSS」を読込不可

次に思いついた方法


HTTP経由でCSSを読込
・jQueyだってHTTP経由で読み込んでいるわけだし、CSSだってHTTP経由で読み込めば良い
・そうすれば、一つのファイル修正結果が、すべてのサイトへ適用される
・JavaScriptやCSSで外部ファイルをURLで読み込む時に書く「src=”http://…”」や「href=”http://…”」の「http:」の部分は省略できる

HTTP経由でCSSを取得するに当たっての懸念事項
・速度的に問題ないの?
・読み取るHTTPをどこにするの?
・URLから関連があるサイトだとバレてしまう(いや、バレても別にいいのだが)
・この時点では、CSSアップロード専用ドメインを一つ準備して、そこから読み取ろう、と考えていた
・ホントに既の所でこの方式を採用するつもりだったのだが、ここで新たな手法を発見

PHPを利用して、ドキュメントルート外のCSSファイルを読み込む

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

基本的な考え方


PHP(サーバー側)でCSSを読込後、表示
PHPを利用することにより、「ドキュメントルートより上階層に配置したファイル」も読込可能になる

ドキュメントルートより上階層に配置した「外部CSS」を、「外部CSS」あるいは「内部CSS」として読み込む
何れを選択するかは、サイト設計思想に因る

利用する関数別(2種類)


file_get_contents
include
※試していないが、多分「require」でもいけるものと思われる

CSS読み込み別(2種類)


「PHPを利用してドキュメントルート外のCSSファイルを読み込む」場合、下記2つのパターンの何れかを選択することになる(同じ効果を得ることができる)
外部CSS利用
<link href="xxxx" rel="stylesheet">

内部CSS
<style></style>


利用する関数別(2種類)

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

「include」と「file_get_contents」の違い


評価有無

下記例では、何れを利用しても同じ結果を得られる
<style>
body{
 color:blue;
}
</style>


下記例では、includeのみ期待した結果を得られる
※実際に動作確認してみたわけではないが…
<style>
body{
 color:#<?php echo $randColor[0]; ?>;
}
</style>


include()


評価して実行

file_get_contents()


評価せず実行
PHPの外部関数で、ファイルを読み込みます。
画像ファイルとか、Acrobat pdfファイルのようなバイナリーファイルも
読み込めます。(文字列として読み込まれます)
・CSSはテキストファイル(?)なので、今回はincludeを採用
※負荷計測(?)をしてみないことには、実際にはどちらを利用すべきかは不明

CSS読み込み別(2種類)

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

前提


下記何れを採用するかについて
論点は2つある
※ここで言う採用とは、PHPでどう実装するか、という話。例えば「外部CSS」で作成されていても、PHPを利用することにより(実装方法によっては)「内部CSS」と同じ効果を得ることも出来る
外部CSS利用
<link href="xxxx" rel="stylesheet">

内部CSS
<style></style>

論点は2つ


1.優先度
・CSSは記述場所によって、適用優先度が異なる、というかなり重要な話
・予め「外部CSS」で記述していたものを、PHPを利用することに何も考えずに「内部CSS」読み込みしてしまうと、意図した内容と違う表示をしてしまうこともあり得るので気をつけよう

2.速度
クライアントのブラウザの設定にもよりますが、同一ファイルはキャッシュしますので、同一CSSファイルを異なるページで読み込ませる場合は外部CSSファイルを読み込ませる方が処理は軽くなります

内部CSSは(htmlへ記述するから)キャッシュされないが、外部CSSはキャッシュされる?

B.(PHPを利用して、)ドキュメントルート外の外部CSSファイルを、内部CSSとして読込

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

内部CSSとして読込


(PHPを利用して)ドキュメントルートより上階層へ配置した「style.css」を、<style></style>タグ内部で読み込む
<style>
   <?php echo file_get_contents("ドキュメントルートより上階層のパス/style.css"); ?>
</style>

※「file_get_contents」の変わりにincludeを利用しても良い

特徴


初めて見るページでは
「外部CSS」より速く表示される
※サーバーへ対してCSSファイルをリクエストする時間が省略されるため、

A.(PHPを利用して、)ドキュメントルート外の外部CSSファイルを、外部CSSとして読込

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

方法は2種類


X.CSSファイルで、PHP関数を利用
Y.PHPファイルで読み込んだ文字列をCSSファイルとして出力

X.CSSファイルで、PHP関数を利用


「.htaccess」で、CSSファイルをPHPとしても動作させるよう予め設定しておく必要がある

index.php
<link href="style.css" rel="stylesheet">


style.css
<?php echo file_get_contents("ドキュメントルートより上階層のパス/style.css"); ?>


Y.PHPファイルで読み込んだ文字列をCSSとして出力


ドキュメントルートより上階層へ配置した「style.css」を、「style.php」ファイル内部で読み込む

index.php
<link href="style.php" rel="stylesheet">


style.php
<?php 
// ヘッダ出力
header("Content-Type: text/css; charset=utf-8");
echo include("ドキュメントルート上のパス/style.css");

※ヘッダで、明示的にCSSと出力しなければ、「rel="stylesheet"」指定で読み込んでも正常認識されないので、注意が必要

上記Yで、複数CSSファイル連結


複数CSSファイル連結にも挑戦

index.php
<link href="target.php" rel="stylesheet">


target.php
<?php 
// ヘッダ出力
header("Content-Type: text/css; charset=utf-8");
$dir = "/var/www/xxxx/views/common/css";
$str = '';
if (is_file("$dir/style.css")) $str .= include("$dir/style.css");
if (is_file("$dir/hoge.min.css")) $str .= include("$dir/hoge.min.css");
echo $str;


履歴

 閲覧数:476 投稿日:2017-08-16 更新日:2019-10-21

2017/8/16時点


以前は外部CSSとして読み込んでいたが
現在は内部CSSとして読み込んでいる

変更理由
CSS読込階層変更

絶対パス指定例
▼/var/www/xxxx/views/common/common_siteheader.php
<style>
 <?php echo file_get_contents("/var/www/xxxx/views/common/css/style.min.css"); ?>
</style>


相対パス指定例
▼/views/status/individual.php
<style>
 <?php
   echo include( realpath( dirname( __FILE__ ) ).'/../common/lib/xxxx/xxxx.min.css');
 ?>
</style>


色々な組み合わせ
▼/views/common/common_siteheader.php
<style>
 <?php
   echo file_get_contents("/var/www/xxxx/views/common/css/style.min.css");
   echo include( realpath( dirname( __FILE__ ) ).'/../common/lib/xxxx/xxxx.min.css');
   //echo file_get_contents("/var/www/xxxx/views/common/lib/xxxx/minified/themes/default.min.css");
   echo include($_SERVER['DOCUMENT_ROOT'] ."/bootstrap/css/style-site.css");
 ?>
</style>


この方法を止めた理由


min化が面倒
・min化したcssファイルを読み込んでいる
・1cssファイル毎にmin化する必要がある
・面倒


「bgcolor」「background-color」「background」の違い

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



週間人気ページランキング / 9-28 → 10-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 19
2 鉄道会社毎のカラーコード | カラーコード(色) 18
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 13
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 9
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 7
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 6
6 RGBの種類 / ビットカラー | RGB(色) 6
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
7 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 5
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
7 「bgcolor」「background-color」「background」の違い | CSS 5
8 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
9 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
9 aタグで複数のブロック要素を囲むやり方 | CSS 3
9 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
10 HTML5では「ブロックレベル要素」「インライン要素」で分類しない | HTML5(HTML) 2
10 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 2
10 Design 0 2
2024/10/5 1:01 更新