外部ファイル読み込み時の相対パスの記述方法

Posted by muchag | CSS,PHP |
初回投稿:2010-06-17 (木) 16:56:36 | 最終更新:2015-12-16 (水) 14:26:23

外部ファイル読み込み時の相対パスの記述方法は言語によって異なるみたい。

今回気が付いたのは、PHPとCSSでの差異。

PHPでは、大元ファイルから辿る相対パス。
CSSでは、読み込み先ファイルから辿る相対パス。

ディレクトリ構成

状況
ユーザーアクセス

ユーザーがアクセスするファイルは aaa ファイル。

入れ子状況

その aaa ファイルは、bbb ファイルを読み込んでいる。
その bbb ファイルは、ccc ファイルを読み込んでいる。

お題

そのときの bbb ファイルにおける ccc ファイルへのパスの書き方。

CSS の場合
解答

bbb.css から辿るパスを記述。

ソース
aaa.css
  1. @import url("../bbb.css");
bbb.css
  1. #hoge {
  2.     background-image: url("c/ccc.png"); // ← bbb.css からみたパス
  3. }
PHP の場合
解答

aaa.php から辿るパスを記述。

ソース
aaa.php
  1. require('../bbb.php);
bbb.php
  1. $image_path = '../c/ccc.png'; // ← aaa.php からみたパス

PHP の場合は読み込みで、CSS の場合は参照
ということなのかな?

2015-12-16 追記 ここから
PHP で、当該ファイルから辿りたい場合

上記例において、bbb.php で記述する ccc.png へのパスを
bbb.php から辿りたいとき。

  1. $image_path = dirname(__FILE__) . '/c/ccc.png'; // ← bbb.php からみたパス
bbb から見て、登る必要があるとき

未試行。

  1. $image_path = dirname(__FILE__) . '/../d/ddd.png'; // ← bbb.php からみたパス
参考サイト

WEB EGG:phpでrequire_onceするときに相対パスでハマった

2015-12-16 追記 ここまで
Posted by muchag | CSS,PHP |
初回投稿:2010-06-17 (木) 16:56:36 | 最終更新:2015-12-16 (水) 14:26:23

携帯シミュレータ

Posted by muchag | ActionScript,CSS,Flash,HTML,JavaScript,PHP,ガラケー |
初回投稿:2010-06-09 (水) 23:42:07 | 最終更新:2010-06-12 (土) 22:46:23

携帯サイトの作成については
大袈裟に言えば、全機種挙動が違うので
実機テストは無理・・・。

そこで大まかにではあるが
キャリア毎にシミュレータが存在する。

DoCoMo : iモード HTML シミュレータ Ⅱ

iモードHTMLシミュレータII
2010-06-09現在 ヴァージョン8.4
シミュレートモードというのが8段階あり、
発売時期別の大まかな仕様グループになっていて
それを見れば、どの辺の機種に対応しているか
わかりやすい。

細かい内訳は

「1」・・・
FOMA 901iシリーズ(2004年12月頃発売開始)、MOVA 505iシリーズ(2003年5月頃発売開始)・506iシリーズ(2004年5月頃発売開始)以降。
iHTML5.0 Flash Lite1.1 Deco-mail1.0

——————————————————————————–

「2」・・・
FOMA 901iSシリーズ(2005年6月頃発売開始)
iHTML5.0 Flash Lite1.1 Adobe Reader LE1.0 Deco-mail1.0 ※PDF閲覧に対応

——————————————————————————–

「3」・・・
FOMA 902iシリーズ(2005年11月頃発売開始)、702iシリーズ(2006年2月頃発売開始)以降。
iHTML6.0 Flash Lite1.1 Adobe Reader LE1.0 Deco-mail2.0 ToruCa1.0 ※トルカに対応

——————————————————————————–

「4」・・・
FOMA 903iシリーズ(2006年10月頃発売開始)、703iシリーズ(2007年1月頃発売開始)以降。
iHTML7.0 Flash Lite1.1 Adobe Reader LE2.0 Deco-mail3.0 ToruCa2.0

——————————————————————————–

「5」・・・
FOMA 903iシリーズ(2006年10月頃発売開始)、703iシリーズ(2007年1月頃発売開始)以降。
iHTML7.1 Flash Lite3.0 Adobe Reader LE2.0 Deco-mail3.0 ToruCa2.0

——————————————————————————–

「6」・・・
FOMA 905iシリーズ(2007年11月頃発売開始)、705iシリーズ(2008年1月頃発売開始)以降。
iHTML7.2 Flash Lite3.0 Adobe Reader LE2.0 Deco-mail4.0 ToruCa2.0

——————————————————————————–

「7」・・・
FOMA 906iシリーズ(2008年6月頃発売開始)以降。
iHTML7.2 Flash Lite3.1 Adobe Reader LE2.0 Deco-mail4.0 ToruCa2.1

——————————————————————————–

「8」・・・
2009年5月以降発売のシリーズ(一部機種を除く)
i-mode Browser2.0 Flash Lite3.1 Adobe Reader LE2.0 Deco-mail4.0 ToruCa2.1
※クッキー・リファラー・JavaScript、文字コードUTF-8、CSSへ対応

引用元:ReNeWDA! モバイルサイト構築の際の確認に。【iモードシミュレータ】

au : Openwave SDK6.2K

開発元が休止中らしく、公式Downloadサイトは閉鎖中、
あちこちにあるリンクはほとんど切れている。

なので実際にDLするときは こちら 。
開発中止になってから大分経つので、さすがに使い勝手が悪い。
と思ってすぐ止めた記憶が・・・。

SoftBank : Web Contents Viewer

SoftBank公式の会員専用サイトに登録して
そこからDLできる。

これは、シミュレートするだけでなく
HTMLコードを表示することができ
どこがエラーの元になっているかもわかるようになっている優れもの。

Posted by muchag | ActionScript,CSS,Flash,HTML,JavaScript,PHP,ガラケー |
初回投稿:2010-06-09 (水) 23:42:07 | 最終更新:2010-06-12 (土) 22:46:23

画像の回り込み

Posted by muchag | CSS,ガラケー |
初回投稿:2010-06-01 (火) 10:52:32 | 最終更新:2010-06-01 (火) 10:53:56

画像の回り込みは、CSSで

  1. float: left;

などと float で指定してやるのが普通だが
なんと au では、float が効かない・・・

だから au では、画像の本来の回り込み方法である
align属性を指定してやるそうな。

また、回り込みの解除については

  1. <br clear="all" style="clear: both;" />

こうしてやるのが一般的に紹介されているが
これだとDoCoMoでは上手くいかないらしい。

そういうわけでインラインの例を挙げると

  1. <img aling="left" style="float: left;"/>
  2. 解除したいところで
  3. <div clear="all" style="clear: both;"></div>

となる。

参考元
ke-tai.org ケータイでの画像回り込みについてまとめてみました
画像/回り込みタグ

Posted by muchag | CSS,ガラケー |
初回投稿:2010-06-01 (火) 10:52:32 | 最終更新:2010-06-01 (火) 10:53:56

フォントの指定

Posted by muchag | CSS |
初回投稿:2008-06-12 (木) 15:14:38 | 最終更新:2008-06-12 (木) 15:14:38

何度調べても忘れてしまうので、メモ。

フォントの指定の書式
  1. font-family: "ゴシック体のフォント名" , sans-serif;

上記のように、希望するフォント名と代替フォント名を併記すること。

代替フォントとして指定できる一般名

serif
明朝体のような「ひげ付きフォント」を意味します
sans-serif
ゴシック体のような「ひげ無しフォント」を意味します
cursive
手書きのようなフォントを意味します
fantasy
装飾に使えるようなフォントを意味します
monospace
等幅のフォントを意味します
引用元:Web標準普及プロジェクト フォント名の指定は一般名と併用するべきです

というわけで、以下のような指定をしてやると

  1. <span style="font-family: '存在しないゴシックフォント' , sans-serif;">ゴシック(sans-serif)</span><br />
  2. <span style="font-family: '存在しない明朝フォント'     , serif;">明朝(serif)</span><br />
  3. <span style="font-family: '存在しないCursiveフォント'  , cursive;">手書き風(cursive)</span><br />
  4. <span style="font-family: '存在しないfantasyフォント'  , fantasy;">装飾文字(fantasy)</span><br />
  5. <span style="font-family: '存在しない等幅フォント'     , monospace;">モノスペース(monospace)</span><br />

ゴシック(sans-serif)
明朝(serif)
手書き風(cursive)
装飾文字(fantasy)
モノスペース(monospace)

となる。

Posted by muchag | CSS |
初回投稿:2008-06-12 (木) 15:14:38 | 最終更新:2008-06-12 (木) 15:14:38

IE6 で適用されない

Posted by muchag | CSS |
初回投稿:2008-02-11 (月) 1:00:13 | 最終更新:2008-02-11 (月) 1:40:04

CSS ファイルの入れ子 で覚えたので
早速 CSS ファイルを入れ子にしてみたが、IE6 では、上手く適用されない。
あれこれいじってみた結果、

  1. p { /* あひゃひゃ */
  2.   color:red;
  3. }

  1. p {
  2.   color:red;
  3.   /* あひゃひゃ */
  4. }

のようにコメント文を1行で入れていると、うまくいかず

  1. p {
  2.   color:red;
  3.   /*
  4.   あひゃひゃ
  5.   */
  6. }

のようにすると直った・・・なにこれ・・・

Posted by muchag | CSS |
初回投稿:2008-02-11 (月) 1:00:13 | 最終更新:2008-02-11 (月) 1:40:04

CSS ファイルの入れ子

Posted by muchag | CSS |
初回投稿:2008-01-27 (日) 20:55:14 | 最終更新:2008-01-31 (木) 1:06:52

WordPress の CSS をいじるにあたって、
どのテーマでも共通に利用できるように、
基本 CSS ファイルの作成を思い立った。

調べてみると、CSS ファイルの先頭行に

  1. @import url("style.css");

としてやればよいらしい。

参考元:CSS中から別の外部CSSファイルを読み込む

Posted by muchag | CSS |
初回投稿:2008-01-27 (日) 20:55:14 | 最終更新:2008-01-31 (木) 1:06:52
« 前ページへ