優先順位

Posted by muchag | CSS |
初回投稿:2015-02-11 (水) 13:50:44 | 最終更新: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セレクタの優先順位の計算方法

Posted by muchag | CSS |
初回投稿:2015-02-11 (水) 13:50:44 | 最終更新:2015-02-11 (水) 13:50:44

CSS Index

Posted by muchag | CSS |
初回投稿:2015-02-11 (水) 13:28:53 | 最終更新:2016-05-08 (日) 11:37:02


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

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

Posted by muchag | CSS |
初回投稿:2015-02-11 (水) 13:28:53 | 最終更新:2016-05-08 (日) 11:37:02

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

Posted by muchag | CSS |
初回投稿:2011-06-12 (日) 16:00:39 | 最終更新:2011-06-12 (日) 16:00:39

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

Posted by muchag | CSS |
初回投稿:2011-06-12 (日) 16:00:39 | 最終更新:2011-06-12 (日) 16:00:39

Modernizr

Posted by muchag | CSS3,HTML5,JavaScript |
初回投稿:2011-06-08 (水) 16:24:08 | 最終更新:2011-06-09 (木) 10:21:49

HTML5 と CSS3 を使うのはいいんだけど
新しいものの宿命として、ブラウザの対応状況
特に IE の問題は避けて通れない。

今までも散々苦労してきたけど
今回は素敵なライブラリを発見した。
Modernizr

【環境】
[HTML5 テンプレート] HTML5 Boilerplate
[CSS3 テンプレート] html5-boilerplate / css / style.css

このようなテンプレートをありがたく利用させていただいているので
後述の手法以外にテンプレートに助けられている部分があるかも。

概要
  • 各ブラウザの HTML5 & CSS3 対応状況を調べる
  • HTML5 に対応していない IE 8 以下に HTML5 をレンダリングする

っていう機能を持つみたい。

詳細はこちら。
Modernizr:Documentation(英語)
 

DL

Modernizr Download
2011-06-08現在の最新は version 2.0 beta のようだ。

1.x 系はオールインワンだったのに対して

2.x 系は必要な機能を選択して
オリジナルファイルを作成できるようになっている。

 

導入
modernizr.js

DL してきた上記ファイルを然るべき場所へ配置。

当該 HTML ファイルへ以下を記述。

  1. <script src="js/modernizr.js"></script>

HTML5 Boilerplate には元々記述してある。

※ CakePHP で利用する場合には js/modernizr.js の前に / (スラッシュ)が必要。
CSS が適用されない
 

HTML5 タグ

また、CSS ファイルに以下を加える。

  1. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  2.   display: block;
  3. }

github:html5-boilerplate / css / style.css #L35-37

これで、無事に header タグが機能した。

私は、html5-boilerplate / css / style.css をそのまま利用させていただいているため
元々この記述が外部 CSS ファイル内に存在したが
この記述以外の部分を削ってみても、ちゃんと機能した。
 

CSS3 要素

背景画像について。

  1. body {
  2.     background-size: 100% auto;
  3. }

と指定したら、IE 7 では当然の如く意味無し。

そこで

  1. <body class="backgroundsize">

とした上で

  1. body {
  2.     background-color: #9999ff;
  3. }
  4. .backgroundsize body {
  5.     background-image: url('img/bg.png');
  6.     background-size: 100% auto;
  7. }

このようにしたら、見事 IE 7 と Firefox 4.x で仕分けしてくれた。
 

意味不明

が・・・。

  1. .backgroundsize body {

これって、class=”backgroundsize” の中にある body タグっていう意味でしょ?

それなのに

  1. <body class="backgroundsize">

これに反応するのは・・・ん~よく分からない・・・。

Posted by muchag | CSS3,HTML5,JavaScript |
初回投稿:2011-06-08 (水) 16:24:08 | 最終更新:2011-06-09 (木) 10:21:49

CSS 拡張

Posted by muchag | CSS |
初回投稿:2011-06-02 (木) 13:24:37 | 最終更新:2011-06-07 (火) 3:53:58

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

代表的なものとして

  • SCSS(Sass)
  • LESS

があるようだ。

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

Posted by muchag | CSS |
初回投稿:2011-06-02 (木) 13:24:37 | 最終更新:2011-06-07 (火) 3:53:58

リセット CSS

Posted by muchag | CSS3,HTML5 |
初回投稿:2011-06-02 (木) 2:00:24 | 最終更新:2011-06-09 (木) 10:11:36

無設定のスタイルはブラウザの標準スタイルが適用されるため、
リセット用のCSSを適用してブラウザの標準スタイルを無効にする必要がある。

HTML5 & CSS3 の環境において、このリセット用の CSS はいくつかあるらしい。

HTML5 Doctor

Google:html5resetcss

Posted by muchag | CSS3,HTML5 |
初回投稿:2011-06-02 (木) 2:00:24 | 最終更新:2011-06-09 (木) 10:11:36

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

Posted by muchag | CSS |
初回投稿:2011-05-31 (火) 20:54:53 | 最終更新:2011-06-09 (木) 14:20:06
状況

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

システム

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

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

設定

よって

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

に対して

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

これで実現可能。

Posted by muchag | CSS |
初回投稿:2011-05-31 (火) 20:54:53 | 最終更新:2011-06-09 (木) 14:20:06

HTML 5 & CSS 3 ブラウザ対応状況

Posted by muchag | CSS3,HTML5 |
初回投稿:2011-05-31 (火) 19:18:55 | 最終更新:2011-05-31 (火) 19:18:55

FindMeByIP:HTML5 & CSS3 Support

Posted by muchag | CSS3,HTML5 |
初回投稿:2011-05-31 (火) 19:18:55 | 最終更新:2011-05-31 (火) 19:18:55

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

Posted by muchag | CSS,JavaScript |
初回投稿:2011-05-28 (土) 13:33:34 | 最終更新:2011-05-28 (土) 13:35:32

画像の切り替えは 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="送信" />

簡単♪

Posted by muchag | CSS,JavaScript |
初回投稿:2011-05-28 (土) 13:33:34 | 最終更新:2011-05-28 (土) 13:35:32

リストタグ <ul> <ol>

Posted by muchag | CSS,HTML |
初回投稿:2010-07-10 (土) 23:52:43 | 最終更新:2010-07-11 (日) 0:35:36

リスト表示用の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(デフォルト)に。
 
あなたのブラウザはいかが?

Posted by muchag | CSS,HTML |
初回投稿:2010-07-10 (土) 23:52:43 | 最終更新:2010-07-11 (日) 0:35:36
次ページへ »