優先順位

Posted by muchag | CSS | 2015-02-11 (水) 13:50:44


計算式を発見!

優先順位
記述場所

タグの Style 属性 > .html ファイルに直書きの CSS > 外部 CSS ファイル

指定はどんどん上書きされていくから
要は、読み込む順序の問題である。
 

固有度

また、アプローチの仕方が異なって被る指定があった場合は
より固有度の高い指定が優先される。

id > class > タグ

  1. <div id="hoge" class="moge">無茶な爺!</div>
  1. div {
  2.     color: #ff0000;
  3. }
  4.  
  5. #hoge {
  6.     color: #00ff00;
  7. }
  8.  
  9. .moge {
  10.     color: #0000ff;
  11. }

この場合、「無茶な爺!」という文字は、緑文字になる。
 

計算式

という風にザックリとイメージをしていたけど、計算式なるものを発見したので、メモ。
Qiita:CSSセレクタの優先順位の計算方法

CSS | 2015-02-11 (水) 13:50:44 |

CSS Index

Posted by muchag | CSS | 2015-02-11 (水) 13:28:53


CSS も、色々と奥が深い。
ましてや、CSS3 が出てからはわけわけらんチーン。。。 🙄

丸っきりの書きかけ項目は Not found になる。

プロパティ
  1. background-attachment
  2. list-style-type
CSS3
  1. CSS3 Index

 

Tips
  1. CSS のみでドロップダウンナビ
  2. CSS ファイルの入れ子
  3. IE6 で適用されない
  4. 外部ファイル読み込み時の相対パスの記述方法
  5. 画像の回り込み
  6. スクロールに合わせて移動
  7. 背景画像
  8. フォントの指定
  9. 優先順位
  10. ロールオーバー時の画像切り替え

 

未分類
  1. CSS 拡張
  2. CSS で PHP 変数を利用する手法

 

参考

w3c:Cascading Style Sheets
w3c:日本語訳ページ
MITSUE-LINKS:Web標準仕様 日本語訳一覧:CSS
MDN:CSS

その他各参考サイトについては、各エントリーにて。

CSS | 2015-02-11 (水) 13:28:53 |

CSS のみでドロップダウンナビ

Posted by muchag | CSS | 2011-06-12 (日) 16:00:39

<参考元サイト>
バシャログ。:CSSで実現するプルダウンメニュー

CSS | 2011-06-12 (日) 16:00:39 |

CSS 拡張

Posted by muchag | CSS | 2011-06-02 (木) 13:24:37

CSS はメタ言語によって拡張できるらしい。

代表的なものとして

  • SCSS(Sass)
  • LESS

があるようだ。

詳細は参考元サイト参照。
 
参考元サイト:(DxD)∞ CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較

CSS | 2011-06-02 (木) 13:24:37 |

スクロールに合わせて移動

Posted by muchag | CSS | 2011-05-31 (火) 20:54:53
状況

ネットサーフィンをしていると
縦スクロールに合わせて
メニューやら広告やらが移動するページがある。
 

システム

というか、移動しているのはスクロールしている本体の方で
メニューやら広告は、それに合わせて移動せずに
定位置を保っている、というのが現実。

要は、そのオブジェクトを
ウィンドウに対して絶対位置で固定 している。
 

設定

よって

  1. <div id="sidebar">hoge</div>

に対して

  1. div#sidebar {
  2.     position: fixed;
  3. }

これで実現可能。

CSS | 2011-05-31 (火) 20:54:53 |

ロールオーバー時の画像切り替え

Posted by muchag | CSS,JavaScript | 2011-05-28 (土) 13:33:34

画像の切り替えは JavaScript でやっていたけど
CSS でもできることを知り
更には、切り替え用の2枚の画像を1枚の画像にする手法を見つけ
ビックリした。
 

CSS

タグ毎に様々な手法があるようで
以下に記したのはその中のごく一部。
 

一般画像(2枚)
  1. <div id="menu_top"><a href="index.html"></a></div>
  1. #menu_top {
  2.     width: 180px;
  3.     height: 50px;
  4.     background: url(out.png) no-repeat;;
  5. }
  6.  
  7. #menu_top a {
  8.     width: 180px;
  9.     height: 50px;
  10.     display: block;
  11. }
  12.  
  13. #menu_top a:hover {
  14.     background: url(over.png) no-repeat;;
  15. }

 

一般画像(1枚)
  1. <a href="index.php" id="menu_top">TOP</a>
  1. a#menu_top {
  2.     width: 300px;
  3.     height: 34px;
  4.     display: block;
  5.     background: url(menu_top.png) left top no-repeat;
  6.     text-indent: -9999px;
  7. }
  8. a:hover#menu_top {
  9.     background-position: 0 -34px;
  10. }

参考元サイト:nplll CSSだけでマウスオーバーして画像に色を付ける(RobGoodlatte.comの場合)
 

input タグ画像(2枚)

マウスオーバー時の画像を背景画像として配置し
マウスオーバー時にはマウスアウト時の画像を透過処理し
背景画像を見えるようにする手法。

  1. div.over {
  2.     background:url("over.png") no-repeat left top;
  3. }
  4. input:hover {
  5.     opacity: 0.0;
  6. */
  7.     /* IE */
  8.     /* filter: alpha(opacity=0); */
  9. /*
  10. }

参考元サイト:WebCreator Note inputボタンのロールオーバーをCSSで指定
 

button タグ画像(2枚)

button タグでもできるようだ。
参考元サイト:パソコンQ&A 現在最良の画像置換法(IR[Image Replacement]法)
 

JavaScript
2枚の画像

一般画像でも

  1. <img src="out.png" onmouseout="this.src='out.png'" onmouseover="this.src='over.png'" alt="メニュー1" />

ボタン画像でも

  1. <input type="image" src="out.png" onmouseout="this.src='out.png'" onmouseover="this.src='over.png'" value="submit" alt="送信" />

簡単♪

CSS,JavaScript | 2011-05-28 (土) 13:33:34 |

リストタグ <ul> <ol>

Posted by muchag | CSS,HTML | 2010-07-10 (土) 23:52:43

リスト表示用のHTMLタグ <ul> <ol>

今まではあんまり好きになれず使ってこなかったが
今回使いたくなったので調べてみた。
 

用例と差異

<ul> <ol> は <li> とセットで

  1. <ul>
  2.     <li>hoge</li>
  3.     <li>moge</li>
  4. </ul>
  5.  
  6. <ol>
  7.     <li>hoge</li>
  8.     <li>moge</li>
  9. </ol>

このように記述する。

実際に使ってみると

<ul>
  • hoge
  • moge

 

<ol>
  1. hoge
  2. moge

 
こんな感じ。

つまるところ <ul> と <ol> の違いは、どうやら
先頭のマーク。

<ul> は● <ol> は数字。
でも、それはデフォルトがそうっていうだけで
CSSなどで自由に設定できる。
本当にそれだけの違い・・・ですか? 🙄
 

入れ子

あ~ あと、入れ子も可能。

  1. <ul>
  2.     <li>hoge</li>
  3.     <ul>
  4.         <li>soge</li>
  5.     </ul>
  6.     <li>moge</li>
  7.     <ul>
  8.         <li>xoge</li>
  9.         <ul>
  10.             <li>goge</li>
  11.             <ul>
  12.                 <li>poge</li>
  13.                 <ul>
  14.                     <li>koge</li>
  15.                     <ul>
  16.                         <li>koge</li>
  17.                         <ul>
  18.                             <li>koge</li>
  19.                             <ul>
  20.                                 <li>koge</li>
  21.                                 <ul>
  22.                                     <li>koge</li>
  23.                                     <ul>
  24.                                         <li>koge</li>
  25.                                     </ul>
  26.                                 </ul>
  27.                             </ul>
  28.                         </ul>
  29.                     </ul>
  30.                 </ul>
  31.             </ul>
  32.         </ul>
  33.     </ul>
  34. </ul>
実例
  • hoge
    • soge
  • moge
    • xoge
      • goge
        • poge
          • koge
            • koge
              • koge
                • koge
                  • koge
                    • koge

意地になって10段階までしてみたけど、何段階までいけるんだろう・・・。
 

先頭記号の設定

CSSで設定する場合は

list-style-type : none; /* マークを使用しない */
list-style-type : disc; /* 黒い丸、デフォルト */
list-style-type : circle; /* 白い丸 */
list-style-type : square; /* 黒い四角 */
list-style-type : decimal; /* 数字 */
list-style-type : decimal-leading-zero; /* 数字(zero-fill) */
list-style-type : lower-roman; /* ローマ数字(小文字) */
list-style-type : upper-roman; /* ローマ数字(大文字) */
list-style-type : lower-greek; /* ギリシア文字(小文字) */
list-style-type : lower-alpha; /* アルファベット(小文字) */
list-style-type : upper-alpha; /* アルファベット(大文字) */
list-style-type : lower-latin; /* アルファベット(小文字) */
list-style-type : upper-latin; /* アルファベット(大文字) */
list-style-type : cjk-ideographic; /* 漢数字 */
list-style-type : hiragana; /* ひらがな */
list-style-type : katakana; /* かたかな */

<引用元>
Home > CSSリファレンス(HTML/XHTML用) > リストに関するプロパティ > リストのマークの種類

でも、ブラウザに依存するらしいので、あんまり特殊なのは使わない方がいいかも。
 

実験

さて! うちのブラウザはいかに!

none
  • hoge
  • moge
disc
  • hoge
  • moge
circle
  • hoge
  • moge
square
  • hoge
  • moge
decimal
  • hoge
  • moge
decimal-leading-zero
  • hoge
  • moge
lower-roman
  • hoge
  • moge
upper-roman
  • hoge
  • moge
lower-greek
  • hoge
  • moge
lower-alpha
  • hoge
  • moge
upper-alpha
  • hoge
  • moge
lower-latin
  • hoge
  • moge
upper-latin
  • hoge
  • moge
cjk-ideographic
  • hoge
  • moge
hiragana
  • hoge
  • moge
katakana
  • hoge
  • moge

 

結果
Firefox 3.6.6

全て表示された。

Firefox 3.5.10

全て表示された。

IE 7.0.5730.13

decimal-leading-zero ×
lower-greek ×
lower-latin ×
upper-latin ×
cjk-ideographic ×
hiragana ×
katakana ×
上記は全て disc(デフォルト)に。

IE 6.0.2900.5512.xpsp_sp3_gdr.090206-1234

decimal-leading-zero ×
lower-greek ×
lower-latin ×
upper-latin ×
cjk-ideographic ×
hiragana ×
katakana ×
上記は全て disc(デフォルト)に。
 
あなたのブラウザはいかが?

CSS,HTML | 2010-07-10 (土) 23:52:43 |

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

Posted by muchag | CSS,PHP | 2010-06-17 (木) 16:56:36

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

今回気が付いたのは、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 追記 ここまで
CSS,PHP | 2010-06-17 (木) 16:56:36 |

携帯シミュレータ

Posted by muchag | ActionScript,CSS,Flash,HTML,JavaScript,PHP,ガラケー | 2010-06-09 (水) 23:42:07

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

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

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コードを表示することができ
どこがエラーの元になっているかもわかるようになっている優れもの。

ActionScript,CSS,Flash,HTML,JavaScript,PHP,ガラケー | 2010-06-09 (水) 23:42:07 |

画像の回り込み

Posted by muchag | CSS,ガラケー | 2010-06-01 (火) 10:52:32

画像の回り込みは、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 ケータイでの画像回り込みについてまとめてみました
画像/回り込みタグ

CSS,ガラケー | 2010-06-01 (火) 10:52:32 |
次ページへ »