https環境に設置しているページから、http環境の外部ファイル（CSSや画像、JSなど）を参照するとブラウザがセキュリティの観点からhttp環境の参照ファイルをブロックしてしまいます。

IEならこんな感じで警告してくる。

毎回、こんなのが出てきたらコンテンツとして成り立たないが、ちゃんと解決方法がある。

以下のように外部参照ファイルを絶対パスで記載するとNGなので・・・
https://samurai-ferret.upper.jp/css/hoge.css

絶対パスのプロトコル部分（http:）を除外して記述すると問題なし！
//samurai-ferret.upper.jp/css/hoge.css

GoogleからJQueryを参照するときのパスも//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.jsとなっているのはプロトコルの違いに考慮したからってことだね。

SEO的にhttpよりhttpsを上位にするということをGoogleが明言しているというのもあるので、これから既存のコンテンツをhttpからhttpsにしていくということもあるだろう。
そんなときにリソースが参照されてねぇ！と慌てないためには今のうちからプロトコル部分を取り払った絶対パスで記述するように癖をつけたほうがいいかもしれませんな。

CSSを組むときって知らず知らずのうちに優先度などを考えてセレクタを指定していると思います。
実際俺もそうでした。
でも、ちゃんと計算方法を知っておくと、やたらめたら「!important」を使うことや、上の階層のクラスからセレクタ引用してセレクタが冗長になってしまうなんてことを避けることができます。

まあ、個人で制作から運営までしているサイトなら上記ようなの事態に陥ることは少ないとは思うのですが、web制作を仕事としている場合にはそんな事態に少なからず出会ったことがあるはず。

そこで、CSSセレクタの優先度の計算式。
それぞれに決まった点数をつけることで決まるらしい。

• タグのstyle属性（1000点）
  例：<p style="font-color:#00F;">

• ID（100点）
  例:#hoge {font-color:#00F;}

• 疑似クラス（10点）
  例:a:hover {font-color:#00F;}
  ※疑似クラス単体で記載することはないので、例の場合は要素+疑似クラスで11点となる

• 属性セレクタ（10点）
  例:a[href*="google"] {font-color:#00F;}
  ※属性セレクタ単体で記載することはないので、例の場合は要素+属性セレクタで11点となる

• クラス（10点）
  例:.hoge {font-color:#00F;}

• 擬似要素（1点）
  例:a:first-letter {font-color:#00F;}
  ※擬似要素単体で記載することはないので、例の場合は要素+擬似要素で2点となる

• 要素（1点）
  例：ul {font-color:#00F;}

• 全称セレクタ（0点）
  例：* {font-color:#00F;}

疑似クラスと疑似要素の区別が難しく感じるが、疑似要素は下記の四つしかないので覚えてしまうべし。
※:first-childは疑似クラスだったりするのでしっかり覚える。

• :before

• :after

• :first-line

• :first-letter

では、実際に試してみよう！
上記の点数の理論が本当かどうかこちらのページで色々試してみた。

CSSセレクター実験

はい、実験の結果は上記の理論は正しくない！ということでした。

では、何が正しい計算方法なのか？いろいろググってみると、こんな考え方がでてきた。

AをインラインCSS、BをID、Cを属性/クラス/疑似クラス、DをHTMLタグ/疑似要素とする。
それをもとにすると、セレクタの点数は以下のようになる。

点数というより、アプリなどのバージョンをイメージするとわかりやすいだろうか・・。
この計算式だと、クラスや属性をいくつ集めてもIDに勝てないという理論に説明がつく。

CSSの優先度の考え方としてはこちらの計算方法で考えるのがベターなようですな！

AndroidのCSSのコーディングハマったので覚書。

背景画像のサイズを指定できるプロパティ「background-size」があるが、これを「background」の値として書いてはいけない。
「background」「background-size」の順番で記載してあげれば問題なし！

・・・と言い切ってしまった感があるけど、具体的には以下のように記述するべし！

おススメ例
background : url("背景画像") no-repeat scroll center center rgba(0, 0, 0, 0);
background-size : contain;

おススメしない例
background : url("背景画像") no-repeat scroll center center / contain rgba(0, 0, 0, 0);

おススメしないやり方だとAndroid標準ブラウザで背景画像が表示されないバグ？の発生を確認しました。
確認したAndroid OSのバージョンは2.1、2.3、4.2といったところです。
AndroidのChromeなら問題なし。
このあたりGoogleなんとかせいやっ！って感じだけど、Androidデフォルトブラウザのことなんてもうどうでもいいのだろうな。

margin-bottomやmargin-topなどを個別に指定するのではなくプロパティをまとめてmargin:0 0 0 10px;のように指定することをショートハンドというらしいですが、今回の問題はbackground-sizeをbackgroundのショートハンドとして指定するとNGという問題のようですな。

使用前に調べたらbackgroundのショートハンドプロパティとして背景画像のサイズを指定する場合はpositionのあとにスラッシュで区切って指定せよとあった。
この「スラッシュで区切って指定せよ」というのがCSSのコーディングで見かけない記述だったので気になってはいただけど、まさかこんな落とし穴があるとは・・・ですよ。

background-positionのピクセル指定も右や下基準の指定だとAndroidは対応していないし、なかなか厄介なり、Android！

あ、ちなみに、以下のように記述したらやはりNGだから気を付けよう。
background-size : contain;
background : url("背景画像") no-repeat scroll center center rgba(0, 0, 0, 0);

background-sizeを記載したあとにbackgroundのショートハンド設定のパターン。
これはショートハンドでサイズを指定していないけど、省略していると思われて「auto」がついているのと同じと解釈するブラウザがあるみたい。
CSSの優先度は後に書いた方が優先されるので、せっかく指定したものがautoで上書きされて想定と異なる事象が起きてアワアワするので気を付けよう。

そもそもメタ（meta）とはなんなのだろうか？
IT用語辞典を見てもさっぱりわからん・・・というより形がつかみづらいものだ。
形而上の概念というか、なんというか、とにかく掴みづらく感じる。

メタとは、
何らかの概念について、その概念自体を対象とする同種の概念・・・らしいので、HTMLでのメタというのもはメタキーワードならそのHTML文章を概念的に表すキーワード。
メタディスクリプションならHTMLを概念的に表す説明書。
と、いうことになるのかな？
たぶんね。

では、タグとはなんだろうか？
まあ、これはそのままタグのことだよね。
服を買う時に服の値段やサイズとか情報が掲載されている商品タグがある。
そのタグのこと。
つまり、HTMLタグとはimgタグならそれは画像ですよ、pタグならこれは段落ですよ。blockquoteなら引用ですよ。
と、文章にタグをつけることでブラウザに文章の構造を理解させているということだ。
たぶんね。
いや～タグでマークアップ（印付け）をするとはよくいったものだ。

昔はレイアウトのために文章の構造とか無視してマークアップしちゃってたし、ブラウザを開発する側も独自仕様を作りまくって手におえん！
ってことでW3Cという団体がいわゆるウェブ標準というものを策定し始めたらしい。

とまあ、うだうだ書いてきたけど、メタタグ編集機能はHTML文章の概念を定義する機能で、サーチエンジンにインデックスしてもらったあとに、インデックスページから、このサイトが一体どんなコンテンツなのかを人間に概念的に理解してもらうために必要ということですな。

さらに最近のサーチエンジンは概念的な内容とコンテンツの実際の内容がマッチしているかもちゃんと見ているようで、スゲェ！と思うと同時に空恐ろしさも感じますね、個人的には。

・・・。