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

ご相談はお気軽にどうぞ 03-5369-1878

○秘

ID名とクラス名でお困りのアナタへ

カテゴリ:コーディングTips

2011年10月7日

どーも、チーフデス。

長年コーディングに携わりながらも、微妙に自分の中のルールも曖昧だったりする「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」

 

 

ざっとこんな感じデス!

 

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

「チェェェーック!」

 

○秘

CSS3×PIE.htc の記述ルール

カテゴリ:コーディングTips

2011年9月6日

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

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

・border-radius(ボックスに角丸をつける)
・box-shadow(ボックスに陰影をつける)
・border-image(境界線に画像を使う)
・multiple background images(背景に最大4つの画像を使用できる)
・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×PIE.htc の注意点

カテゴリ:コーディングTips

2011年8月5日

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

 

  • ・border-radius(ボックスに角丸をつける)
  • ・box-shadow(ボックスに陰影をつける)
  • ・border-image(境界線に画像を使う)
  • ・multiple background images(背景に最大4つの画像を使用できる)
  • ・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」だが、動作させるにあたっての注意点がいくつかある。

注意点その1。

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

例えば…

behavior: url(/PIE.htc);

とか

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

と記述する!

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

 

注意点その2。

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

position: relative;

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

 

注意点その3。

サーバの仕様によっては、デフォルトで .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事業部

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

 

 

 

 

 

○秘

Smartyの使いどころ

カテゴリ:その他

2009年11月10日


今日はちょっと横道にそれて、PHPよりの話

最近はSmartyの使いどころが、とんと難しくなりました

数年前までは、デザイナーとプログラマーの分離と謳われ、
一世を風靡したPHPテンプレートエンジンも、

便利なフレームワークの登場で、すっかり影が薄くなって参りました。

Zend,CakePHP,symfony,CodeIgniter・・・・などなど

Smartyのみを使うwebシステムやサイトは、
テンプレートの部分は多少なりとも楽になりますが、上で挙げたツワモノ達に比べると、
やっぱり、作業量は格段に上がります。

逆に、手軽に使おうと、メールフォームやアンケートフォームのみで使うとしても、
やや大袈裟すぎます。(別に使っちゃまずいという事はないんですが)

しかし!

上で挙げたフレームワーク達のほとんどが、プラグインなどで、
使用出来るんです。

彼にもまだ生きる道があったんです。
(実際、そういう使い方する人をあまり聞いた事ないんですが)

まあ、とにかく、Smartyの魅力は何よりあの可読性です!
<?=$hoge?>なんかよりも{$hoge}の方が、
訳の分からない度は、格段下がります。


響き的にもオシャレな気がしたので、何かやる度に、
Smartyを使ったりと若造な時期もあったものですが、
今思うとゾッとするようなくらい、あちこちのサイトに、
Smartyフォルダを忍ばせておりました


今日は有用な情報が一つも無いような気がしないでもないと思いつつ、
また次回よろしくお願いします!

○秘

xamppを利用してプレビュー環境構築

カテゴリ:コーディングTips

2009年9月30日

案件によっても異なるが、パスの記述方法で作業環境は大きく左右される。

特に制作段階で面倒なのは最近主流の「ルート相対」。

これは通常の相対と異なりとりあえずルート(root=最上階層)に上ってからパスをたどる記述方法。

利点はサイト内共通箇所に大きく表れる。

例えば、全ページに共通のバナー画像を同じレイアウト(同ソース)で配置する場合、

相対であればその画像パスは各階層ページで異なるソースとなる。

しかし、ルート相対を使えばどの階層ページであろうが全く同じソース記述で済む。

※画像へのパスがルートからたどるため共通。

これによって更新作業や修正作業がし易く効率化できる。

 

以上の事を考慮すると、ヘッダーやグローバルナビなどに使用すれば

相対パスでは更新時や修正時に発生していた面倒な問題や心配(一発置換的な)がかなり解決できる。

 

ただし、実はこのルート相対、ローカルでは普通に確認ができない。

ローカルでのルートをたどってしまう。。

仮にCドライブで制作作業をしているなら、Cドラ直下にプレビューファイルを構築すればプレビューできるが、、、

まさかそんな事はしたくないし、しない方が良い。

そこでやっと本題だが、xampp を使う。

基本的にはプログラム開発用の位置づけだが、こういった場合にもかなり使える。

コーディング自体、いかに制作環境を効率化するかで大きな時間短縮につながる場合が多い。

使える便利なものはすべて使う。

使用方法は xampp バーチャルホスト 等の検索で調べてみてください。

○秘

コメントアウトの使用方法

カテゴリ:コーディングTips

2009年9月29日

コーディング時にその後の更新や利便性を考慮し、

コメントアウトにてそこに記述されている要素が何なのかをマークしておく必要がある。

これはあくまで一般的な使い方。

それとは別に、不要なスペースを消す意味でコメントアウトをする使い方もある。

例えば、

画像を横並びに並べた場合、ソース上は改行くらいして整理しておきたい。

でも、これを普通に改行だけしたのでは画像と画像の間に不要なスペースが入る。

ブラウザにもよるがこの現象を回避するのにコメントアウトを使う。

 

こうする事で、見た目とソースの見た目、

つまりユーザー側と制作側、どちらにとっても良い仕様が出来る。

 

専門的で難しい小技もたくさんあるが、こんな事の積み重ねも大切な小技のひとつ。

○秘

W3C をパスする利点

カテゴリ:コーディングTips

2009年9月24日

チェックツールとは少し違いますが、

「W3C」(World Wide Web Consortium)という多くのWeb標準を策定している国際的な団体があります。

ここの定める規定をクリアすると、パスした証にW3Cバナーをサイトに貼ることが許されるのです。

といってもそこまでお堅いものでもありませんが。

 

W3Cをパスする利点は、多少のアクセシビリティアップ? SEO対策?

つまり正しいマークアップがされていれば自然とついてくる多少の効果各々です。

 

とは言うものの、コーディング代行などそれを売りにする職業やサービスサイトであれば

ないよりあった方がぜんぜん良いでしょう。 印象という意味でも。

 

W3C 公式サイトトップ

W3C (x)html チェック

W3C cssチェック

○秘

抑えておきたいチェックツール

カテゴリ:コーディングTips

コーディング内容のチェックツールには様々あります。

下記は用途によって使い分けるのがベストかと思いますが、

コーダーやウェブ制作に携わる人間としては知っておきたいチェックツールです。

 

それぞれ、違った観点から採点・評価しますので

案件ごとの重視ポイントに合わせて使い分けると良いと思います。

 

Another HTML-lint gateway

採点のほか、減点理由も表記されるので簡易的なチェックには最適です。

 

ウェブアクセシビリティチェックサイトHAREL

アクセシビリティ適合度をチェックする、解説付きでわかりやすいツールです。

 

WebInspector

同じくアクセシビリティを診断するソフトウェアで主に、高齢者や視覚に障害のある方にとって重要な問題を指摘します。

 

以上、代表的なものですが他にもまだまだたくさんあります。

SEO的なソースチェックを行ってくれるものから、キーワード出現率まで・・・

チェック結果を元にすべてを修正していては無駄な時間が多すぎます。

最低ラインはクリアした上で、最終的なチェックツールとして使用するのが良いと思います。

○秘

ブラウザ確認の便利ツール

カテゴリ:ブラウザ情報

コーディングの中でかなり重要で、かつ面倒なのがブラウザです。

基本は FireFox で確認しつつ、IE でのバグがあれば調整する。

といったやり方が普通ですが、

それぞれのブラウザを開く手間や、それぞれのバージョン、、

いろいろと面倒でもう少し作業の効率化を図りたいと思うことが多々あります。

そんな時のご参考に。

IE5.5, IE6, IE7, IE8の確認を同時にする IETester

についてはバージョンによって異なる現象がおきる事もあり

なるべく幅広くチェックしておきたいです。

○秘

とにかく便利なclearfix

カテゴリ:コーディングTips

CSSでのレイアウト制御が主流になってから

誰もがテーブル組みの時にはなかった現象に頭をかかえたはずです。

 

親要素の背景が反映されなかったり、

テキストが前要素に重なったり・・・

その他いろいろ。

 

そんな時はとにかく clearfix を試してみる。

それで回避できる事が多いはずです。

しかし、これも使い方を間違えると厄介なことになります。

とにかく使いまくるのではなく、なるべく使わない様に心がけながら

使用すべきところで、正しい使い方をおすすめします。

 

clearfix についての宣言方法は、検索すればすぐ見つかります。

ちなみに使用する際はcss内で clearfix用のクラスを設定しておくのがベストです。

読者登録

読者になる

このブログの更新情報が届きます

プロフィール

チーフ

ニックネーム:チーフ

血液型:A型

得意技:ブラインドコーディング

座右の銘:宵越しの金は持たない

口癖:「チェェェーック!」

愛犬:マレーシア生まれカラムーチョ大好きパグの "ジャッキー"

秘書:ニコ動とモンハンが生き甲斐 "左門寺バーバラ久美子"

カレンダー

2017年12月
« 1月    
 123
45678910
11121314151617
18192021222324
25262728293031

アーカイブ