びっくりされた方すみません。
今日、4月5日は CSS Naked Day ということで CSS を切ってすっぴんの状態をさらしてみます。
むー、あまり美しくないです。もっとマークアップには気を配らねば。
‘CSS’ タグのついている投稿
CSS Naked Day
2007 年 4 月 5 日 木曜日私の CSS の書き方
2006 年 9 月 28 日 木曜日Masayan さんの[css] 書き方いろいろを受けまして、私がよくやっている CSS の書き方を紹介してみます。
いつも、プロパティを複数行に分けて書いています。
[code lang="css" -0]
* {
border:none;
font:normal 400 100%/1.5 Verdana, Arial, Helvetica, Sans-Serif;
margin:0;
outline:0;
padding:0;
text-decoration:none;
}
[/code]
割とずぼらなので、一行に書いてしまうと同じ指定を何度も繰り返す、なんて間抜け極まりないことをしてしまうこともあるためです。
CSS の最適化には、 CSS Formatter and Optimiser を使用しています。これの素晴らしいところは見易く、且つ軽く最適化をしてくれるところ。右上の “Compression” で見やすさと重さのバランスを調節できます。
Masayan さんも仰っていましたが、サイトを作成していて毎回悩まされるのが IE 。バグが多いですし、独自拡張ばっかりですし、そのくせシェアはトップ。呪いたくなるブラウザです。
CSS の振り分けを使ってしまいたいところですが、その前に出来ることを探してみます。趣味のWebデザインさんの“いろは”の先のCSS 第1回、Lucky bag::blog さんの CSS を作成する際のお約束にある通り、ブラウザのデフォルトスタイルを殺し、その上でいちいち指定し直すとズレが割合少ないです。いちいち、といったところでたいした手間でもありませんし、デフォルトで違うものを無理に直そうとするよりは労力が少なくてすむのでお薦めです。
あとは少し古い記事ですがスタイルシートスタイルブックが翻訳した CSS“カンニングペーパー”を見ているとつっかかっていることが解決することもあります。
閲覧者の方が IE を使わないでくださるとどんなに楽になることか。 Opera や Firefox のより一層の普及を願ってやみません。
あと、書く順番は昔使っていた P_BLOG のコーディング規約の標準 TOC オーダーに沿っています。
どういうことかと言いますと、マニュアルにもありますが、
- BASE ELEMENTS
- HEADER BOX
- CONTENT BOX
- MENU BOX
- FOOTER BOX
と場所ごとに書いていき、
- TEXT DECORATIONS
- OTHER STUFF
と汎用性のあるものをまとめます。慣れもあると思いますが、使いやすいです。コメントを入れることで後で見ても分かりやすく。あ、 CSS Formatter and Optimiser を使って最適化をすると、(他の最適化ツールでもそうですが) コメントが削除されてしまうので 1バックアップをとっておく必要があります。
プロパティの順番を変えると表示が変わってしまうこともあり、バックアップは必須です。
まとめにかえて
見直してみるとなかなか奥深い、と思いました。
ベストの書き方、というのは私も探している途中です。何か良いのがあったらご教授ください。
- 設定により残しておくことも可能。[back]
透過画像 + CSS で色指定
2006 年 9 月 10 日 日曜日
Lucky bag::blog さんの 背景画像に使える透過 GIF を拝見して。
おお、便利だ、と感嘆しました。色を変えたい部分を透過した GIF 画像を用意して、あとは CSS で色を変えるだけ、というものです。
なんだか似たようなことを知っている気がします。思い出しました。当サイトでも現在使用中です。
現在のテーマでは、記事のカテゴリを画像表示にしています。これは WordPress のプラグイン、Category Image(s) を使って 1実現しているのですが、そこでの画像に SOME RANDOM DUDE さんの Sanscons を使っています。
これは透過画像のアイコンと透過画像の背景画像のセットで、これも CSS で背景画像と背景色を指定するだけ、です。
リンクなどに使うと効果抜群です。JavaScriptでロールオーバー効果を実現するときは画像を2枚用意しなければなりませんが、これなら少なくてすみます。背景画像は使い回せますし。
最初に思いついた人はすごいです。
ではアルファ透過 PNG を使えばグラデーションもできてばっちり、と思ったら WinIE が。ぐむむ。
- しばた工務店 Weblog さんのプラグイン Category Image(s)、Tips Community さんのカテゴリー名をイメージアイコンで表示するプラグイン、びんさんのマジかよ〜 さんのCategory-imagesなどで詳しく解説されています。[back]
ささやかに使い易く リンク編 １
2006 年 7 月 1 日 土曜日
ささやかに使い勝手の良いサイトにしてみよう計画その1、リンク編。
英語が果てし無く苦手である私は、ぱっと興味を引かれてクリックした先が英語だとびっくりしてしまいます。訪問者の方にも同じ思いの方がいらっしゃるはず、というわけで IE 以外のモダンブラウザ限定ですがリンク先の文章の言語を表示しています。
方法
IE は :after 疑似要素にも、属性セレクタにも対応していないので残念ながら表示されません。
いちいち hreflang 属性を指定するのも面倒なので、 Firefox の拡張機能、 Copy URL+ で一発です。
Copy URL+ については
に詳しいです。
user.js に以下を追加。
[code lang="javascript" -0]
user_pref(’copyurlplus.menus.n.label’,'Create Link (English)’);
user_pref(’copyurlplus.menus.n.copy’,’%TITLE%‘);
[/code]
n には数字を入れてください。通し番号になります。
「英語」なのは海外の情報といったところで殆ど英語の情報しか見ていないからです。仏語や独語は読めさえしません。必要ならばそれぞれの言語コードを指定します。
閲覧者の方の「ぎょ」が減ることを願いつつ。うっかり忘れていた場合は笑って許すか突っ込みをお願いします。
画像に枠を付ける
2006 年 6 月 26 日 月曜日
のっけから不思議な画像 1ですみませんが話題は CSS です。サイト制作の時に詰まったこと。
表示されている画像には枠がついていると思いますが、これには紆余曲折があったのです。
枠がつかない
画像に CSS で枠を付けようと思ったので
[code lang="css" -0]
img {
border:1px solid #ccc;
padding:5px;
}
[/code]
という風に書いたのですが、 IE で枠が一向に表示されません。他のブラウザでなら表示されるのですが。
原因解明
IE のバグかなと思ったらやはりバグでした。やはり君はそうなんだね。分かっていたよ、と、どっと疲れた一瞬です。
XHTML（XML宣言あり）： 互換モード（この動作はバグです）
WinIE6.0互換モード及び5.5以前ではimg要素にパディングが効きません。
この原因はこの二つです。ですが文法的に XML 宣言をしないわけにはいきませんし、困ったなと思ったら、BirDesign さんで IE6以外でのみXML宣言をするPHPコード が公開されていました。
早速いただきまして、事なきを得たと言うことです。
付記
IE のバグには多くの人が悩まされていると思いますが、どうしてあんなにシェアがあるのでしょうか。ため息が漏れます。当サイトの訪問者さんは僅差で Firefox が勝っていますので、頑張ってください。
便利な管理者用メニューを表示
2006 年 6 月 20 日 火曜日BirDesign さんで紹介されていた Admin menu plugin についてです。
ログインしているときに、ページ上部に管理者用のメニューが表示されます。本稿執筆時点でのバージョンは 2.8 、使った WordPress のバージョンは 2.0.3 でした。
導入
Admin menu plugin for WordPress | Semiologic からファイルをダウンロードします。 v.2.7 と書いてありますが、中身を見ると 2.8 と書いてあるのでご安心を。
解凍してできた sem-admin-menu というフォルダごと wp-content/plugins/ にアップロード。管理画面から有効化します。
ですが、このままだとログオフしているときも管理者のパソコンではログインメニューが上部に表示されてしまいます。ログオフ時には非表示にしたい場合は wp-content/plugins/sem-admin-menu/sem-admin-menu.php を編集する必要があります。
バージョンアップと共にオプションで変更できるようになりました。
BirDesign さんの記事の時のバージョンは 2.6 だったのですが、バージョンアップしたので編集する場所が少し変わりました。しかしやることは一緒です。
付記
サンプルスキンとして付属している CSS が使いやすくお洒落なのでお気に入りです。
まず、もともとの wp-content/plugins/sem-admin-menu/に入っている sem-admin-menu.css を適当な名前にリネームします。そして 同じディレクトリにある skin-sample.css を sem-admin-menu.css にリネームしてアップロードすると半透明で絶対表示の管理人用メニューになります。
ただ、テーマによっては上に隙間ができてちょっと格好悪いです。
[code lang="css" -0]
#sem_admin_menu {
(中略)
top:0;
}
[/code]
とコードを追加すると上にぴったりくっつきます。
ただし IE は
[code lang="css" -0]
position: fixed;
[/code]
に対応していないので絶対表示にはなりません。
IE での可変幅
2005 年 10 月 13 日 木曜日CSS でサイトのデザインをするようになって、リキッドデザイン1っていいな、と思うようになりました。しかし、いくら水のように相対的に横幅が変わっても、限度というものがあります。
ここで活躍するのが max-width と min-width 。これを指定しておけば幅の最大値と最小値が設定されるので、びろびろに広がるのとも、ぎちぎちに詰まるのともおさらばです。が、こんなに便利なプロパティなのに IE では対応していないのです。 IE ユーザーはシェアの大部分を占めているわけですから無視するわけにはいきません。
そう思っていたところで、 Napdays さんで毎回美しいデザインにうっとりしつつ、リニューアル 2005年10月を読んでいると、
IEでもmin/maxを実現するために、doxdesk.comのminmax.jsを使用しています。
これは求めているものそのままではないですか。
JavaScript で擬似的に実現させているようです。他に日本語での情報はないだろうかと探したところ、サイケデリックビビアンさんで IEでmin-widthとmax-width 、という記事が。読み進めてゆくと、え？ P_Blog ？ 慌ててこのサイトを IE で見てみます。ウィンドウサイズを変えてみると、あ。
笑って幅可変デザインを試すことができそうですははは。
P_Blog を使い始めて早三ヶ月、全然気付いておりませんでした。
そういえば、 IE7 ってどうなるのでしょうか。上記の max/min-width はもちろん、 margin に auto を指定しても効かない、とか、半透明 PNG に対応していない、なんていうのにはとっとと対応してもらわないと困るのですが、「 Windows XP SP2 とそれ以降」向けだけだと、使えない人もいるはずですから、困ったものです。あまり期待はしていませんが。
というような長い記事を3度ほど消してしまったうつけ者は私です。同じ過ちを犯さぬようにお気をつけ下さい。
- サイズ可変デザイン、見栄えがウィンドウサイズに依存しない[back]