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

Webデザイン

→ → → Entries ← ← ←
カテゴリー: CSS 　閲覧数:1099　配信日:2013-04-01 15:35


基本的な考え方


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>


週間人気ページランキング ／ 10-24 → 10-30
順位 ページタイトル抜粋 アクセス数
1 Design 0 15
2 「bgcolor」「background-color」「background」の違い | CSS 9
3 鉄道会社毎のカラーコード | カラーコード(色) 5
4 カラーコード ／ 色コード | カラーコード(色) 4
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
5 Stylus(Chrome 拡張機能) カテゴリー 3
5 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
    		• 3
    5 右クリック出来るのに、コピペ出来ないWebページ。2020 年 | ブラウザ 3
    6 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 2
    6 HSLとHSVの違い | 色変換(色) 2
    6 縦横比が16:9となる整数値の組み合わせ 2
    6 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 2
    6 Chromeブックマーク ショートカット | Chromeブックマーク(ブラウザ) 2
    6 ユーザー個別の設定情報が格納されているレジストリキーを削除 2
    6 レスポンシブサイトにおけるスマホ表示用画像指定 2
    6 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 2
    6 画像 2
    6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
    6 Adobe Camera Raw 4.0 | Photoshop 2
    2026/10/31 5:05 更新
    指定期間人気ページランキング ／ 2020-5-30 → 2026-10-30
    順位 ページタイトル抜粋 アクセス数
    1 RGB ⇔ Lab | 色変換(色) 8959
    2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4639
    3 Design 0 4313
    4 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 3815
    5 RGBの種類 ／ ビットカラー | RGB(色) 2845
    6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2811
    7 「bgcolor」「background-color」「background」の違い | CSS 2129
    8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2106
    9 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 2005
    10 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 1916
    11 16進数カラーコード ／ 2進数 1900
    12 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1736
    13 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1712
    14 「属性」「プロパティ」「アトリビュート」の違い | CSS 1701
    15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能(ブラウザ) 1581
    16 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1550
    17 「東京都」のカラーコード取得は難しい | カラーコード(色) 1513
    18 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1405
    19 「西武鉄道株式会社」のブランドカラーは、3色(#3366CC、#66CCFF、#33CC66) | 色 1278
    20 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1257
    2026/10/31 5:05 更新