WebCoding.jpコーディングと文字校正・校閲を同時進行できるサービス「ウェブコーディング.jp」

どーも、チーフデス。

長年コーディングに携わりながらも、微妙に自分の中のルールも曖昧だったりする「ID名とクラス名」でお困りのアナタ！？

今日は、一般的によく使われている”チーフ的ID名＆クラス名”を2回に渡ってご覧いただきます！！

まず第1回目は、レイアウトに関するブロック・ボックスに対してよく使われる名前から！！

 

 

全体やその直下を囲む

・「container」「wrapper」「wrap」

 

ベースとなる各ブロック

・ヘッダ「header」「head」

・コンテンツ「content」「contents」

・フッタ「footer」「foot」

・ナビゲーション「navigation」「nav」

・グローバルナビゲーション「globalNavigation」「globalNav」「gNav」

・サブナビゲーション「subNavigation」「subNav」

・ローカルナビゲーション「localNavigation」「localNav」

・ヘッダナビゲーション「headerNavigation」「headNav」

・フッタナビゲーション「footerNavigation」「footNav」

※それぞれのボックスの内側で大きくブロック分けしたい時なんかは「main」「sub」「extra」「upper」「inner」「lower」等を付加して「contentUpper」「contentLower」的にするのもヨイね！

 

 

次に文書内容を記述する為に囲む

・「section」「field」や、記事の記述「article」、その記事をまとめた「archive」など

 

 

もう少し具体的なとこだと

・エントリー「entry」

・コメント「comment」

・案内文「lead」

・概要「outline」

・要約「summary」

・説明「description」

・注目や話題の情報なんかだと「topics」「pickup」「spotlight」

・その他にプロフィール「profile」や検索ボックスの「searchBox」

 

 

メニューなんかは

・メニュー「menu」

・パンくずリスト（トピックパス）「topicPath」

・タブメニュー「tab」「tabMenu」

・ページ遷移メニュー「pager」「paging」

・サイト情報や案内関連「siteInfo」「guide」

・補助的なとこだと「option」「assist」

 

 

ざっとこんな感じデス！

 

次回はそれぞれの要素に対する名前の付け方を

「チェェェーック！」

 

前回の記事 で触れたjavascript (.htcファイル)「PIE.htc」。
今回はそのCSS3 PIE の記述ルールの備忘録。

まずは現時点で無難にクロスブラウザで使えるスタイルのおさらい。

・border-radius（ボックスに角丸をつける）
・box-shadow（ボックスに陰影をつける）
・border-image（境界線に画像を使う）
・multiple background images（背景に最大４つの画像を使用できる）
・linear-gradient as background image
（背景にグラデーションをつける）

基本の記述。

セレクタ {
CSS3プロパティ : 値 ;
CSS3プロパティ : 値 ;
CSS3プロパティ : 値 ;
: ;
: ;
position: relative;
behavior: url(“/PIE.htc”);
}

※ font や background などの色指定は、16進法で指定。(black や red などではなく「#●●●●●●」。)
※ position: relative; はおまじない的に常に表記しておいて損はナシ。

 

そして各プロパティの記述。

 

・border-radius プロパティ

-webkit-border-radius: ○○px; /* Safari, Chrome用 */
-moz-border-radius: ○○px; /* Firefox用 */
border-radius: ○○px; /* CSS3草案 */
position: relative;
behavior: url(“/PIE.htc”);

 

・box-shadow プロパティ

-webkit-box-shadow: #●●●●●● ○px ○px ○px; /* Safari, Chrome用 */
-moz-box-shadow: #●●●●●● ○px ○px ○px; /* Firefox用 */
box-shadow: #●●●●●● ○px ○px ○px; /* CSS3草案 */
position: relative;
behavior: url(“/PIE.htc”);

※ 「●」は、影の色。「○」は、左から”横方向のズレ”、”下方向のズレ”、”ぼかし具合”。「box-shadow: inset #●●●●●● ○px ○px ○px;」insetを追記することで、ボックスの内側に影ができる。

 

・border-image プロパティ

border: 1px solid #●●●●●●;
-webkit-border-image: url(“/images/●●●.jpg”) △ △ △ △ / ○px ○px ○px ○px repeat; /* Safari, Chrome用 */
-moz-border-image: url(“/images/●●●.jpg”) △ △ △ △ / ○px ○px ○px ○px repeat; /* Firefox用 */
border-image: url(“/images/●●●.jpg”) △ △ △ △ / ○px ○px ○px ○px repeat; /* CSS3草案 */
position: relative;
behavior: url(“/PIE.htc”);

※ 「△」は”border-image-slice”の指定、「○」は”border-image-width”の指定。「repeat」は”border-image-repeat”の指定。その他”border-image-outset”の指定も可能。

 

・multiple background images プロパティ

background-image: url(“/images/●●●.jpg”), url(“/images/●●●.jpg”);
background-repeat: no-repeat, no-repeat;
background-position: ○○px center, ○○px center;
behavior: url(“/PIE.htc”);
-pie-background:
url(“/images/●●●.jpg”) no-repeat ○○px center,
url(“/images/●●●.jpg”) no-repeat ○○px center;
position: relative;
behavior: url(“/PIE.htc”);

 

・linear-gradient as background image プロパティ

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#●●●●●●), to(#●●●●●●)); /* Safari, Chrome用 */
background: -webkit-linear-gradient(#●●●●●●, #●●●●●●); /* Safari, Chrome用 */
background: -moz-linear-gradient(#●●●●●●, #●●●●●●); /* Firefox用 */
background: linear-gradient(#●●●●●●, #●●●●●●); /* CSS3草案 */
-pie-background:linear-gradient(#●●●●●●,#●●●●●●);
position: relative;
behavior: url(“/PIE.htc”);

※「●」は、グラデーション上部と下部の指定。

 

最後に先日の作業中に発見したのが、

・IE で filter を使ってグラデーションと角丸 を併用すると、グラデーションが効かない。
・『PIE.htc』IE7,8 box-shadowの「inset」には未対応？。

ただしWindows 7、IE9の開発モード環境のみでの確認だったので、他のOSやIE他のバージョンでは問題ないのかも……？
というか、そもそもWin7＋IE9 環境はPIE.htcが効いてないような……？！

という訳で、
今後のPIE.htcバージョンアップで対応するのか？
はたまた現状でもじゅうぶんな対処法があるのか？
それともIE10 のリリースを待って、
IE9以下を全て排除するのか！？デキルのか！！？？

WebCoding.jp 第1事業部　チーフ専属秘書
左門寺バーバラ久美子でした。

 

 

一部のCSS3をIE6.7.8で機能させる為の便利 javascript (.htcファイル)「PIE.htc」の注意点。

 

• ・border-radius（ボックスに角丸をつける）
• ・box-shadow（ボックスに陰影をつける）
• ・border-image（境界線に画像を使う）
• ・multiple background images（背景に最大４つの画像を使用できる）
• ・linear-gradient as background image（背景にグラデーションをつける）

 

CSS3の中でも、実務にも無難に、クロスブラウザでも問題なく動作する、上記リストのスタイルを IE6.7.8 でも機能させてくれる「PIE.htc」。

使い方としては、CSS3 PIE: CSS3 decorations for IE からファイルをダウンロード、その中の「PIE.htc」ファイルのみを適宜アップロード。

CSS3のプロパティを使ったスタイルシートの末尾に「behavior: url(“/PIE.htc”);」と記述する。

だけど、これだけでは動作はしない。上記リストのスタイルごとに、PIE.htcを動作させる為のソースの記述に違いがあるが、それはまた後日。

そんな、もはや定番といえる「PIE.htc」だが、動作させるにあたっての注意点がいくつかある。

注意点その１。

「PIE.htc」へのパスを、基本的に相対パスではなく、”絶対パス” を使う。

例えば…

behavior: url(/PIE.htc);

とか

behavior: url(/js/PIE.htc);

と記述する！

相対パスでも使えるが、その際はCSSファイルからではなく “HTMLファイル” からの相対パスで指定する必要があるので注意！

 

注意点その２。

behaviorプロパティを使って「PIE.htc」ファイルを指定すると、一部のスタイルが無効になってしまうことがある。その場合は、behaviorプロパティを記述した箇所に、positionプロパティを加える。

position: relative;

「zoom: 1;」のように、おまじない的に常に記述しておいて損はナイと思う。

 

注意点その３。

サーバの仕様によっては、デフォルトで .htc ファイルを認識しない場合があるので、その際は「.htaccessファイル」に

AddType text/x-component .htc

を追記する。

 

ちなみにチーフは「Coda×MAMP」のコンビで作業をしているが、

その際は Coda から「ファイルを開く」を選択し、

アプリケーション ＞ MAMP ＞ conf ＞ apache ＞ httpd.conf

の順に開く。

その開いたファイルの 1000行目前後のあたりに

AddType text/html .shtml .html .htm
AddOutputFilter INCLUDES .shtml .html .htm

とあるので、そこへ下記のように追記。

AddType text/html .shtml .html .htm
AddOutputFilter INCLUDES .shtml .html .htm
AddType text/x-component .htc

セーブしてMAMPを再起動すると、IE6.7.8 でも問題なく「PIE.htc」が動作しているはず。

 

といった訳で、「PIE.htc (IE6.7.8)」を捨て去る日が、一日でも早く訪れることを切に願いつずける日々でございます。

WebCoding.jp 第1事業部

チーフ専属秘書　左門寺バーバラ久美子でした。