CSS3 セレクタ チートシート
以前、CSS3 セレクタをまとめたエントリーを 3回にわたって上げましたが、それらをまとめる意味で CSS3 セレクタのチートシートを作ってみました。 本当は、サンプルソースとか、セレクタに関する説明とか色々入れようと思ったんですけど、A4 サイズ 1枚にまとめるのはスペース的に不可能だったので、単純な CSS3 セレクタ一覧になっちゃいました。残念。 CSS3 セレクタチートシート （PDF） ※PDF ファイルは URI が変わる可能性がありますので、ブクマする際はできればこのエントリーにして頂いた方が安全です。 今回、チートシートのフォーマットは、Microformats Cheat Sheet を参考に作らせてもらいました。右サイドに IE7、IE6、Firefox、Opera、Safari それぞれでの各セレクタ対応状況を簡単にまとめてあります。 なお、対応状況のチェックには、c
CSS セレクタに関するおさらい 3
前回の続きです。今回が最終回、擬似要素を中心にまとめています。 擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関して... 前回の続きです。今回が最終回、擬似要素を中心にまとめています。 擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関しては、「:」 を 2回使って、「::」と記述することが定義されています。CSS2 までに準拠してコーディングする場合は従来どおり、「:」 1つの記述方法でも問題ありませんが、将来的にはこの記述方法が基本になる予定ですので、今回は仕様書に合わせて 「::」 と記述しています。 この 「::」 方式の記述ですが、実はモダンブラウザの多くはすでにこの記述方法に対応してたりしますので、今でも使えちゃいます。 擬似要素 (pseudo-element) E::first-line
CSS セレクタに関するおさらい 2 | WWW WATCH
前回の続きです。今回も引き続き、CSS3 で定義予定のものも含めて、CSS セレクタのリファレンスいきます。 今回は擬似クラスを中心に取り上げてみますが、CSS3 では擬似クラスが大幅に拡張されていますので、見慣れないものばかりかと思いますが、知っておくといいかもしれません。ただし、ブラウザのサポートはまだまだですので、実用性は高くないと思います。 擬似クラス (Structural pseudo-classes) E:root ドキュメント内のルート要素である E という要素にスタイルを指定します。CSS3 で定義。(X)HTML においては、ルート要素は html 要素になるので、 :root { margin:0; padding:0; } とすれば html 要素にスタイルが適用されます。XML の場合は、DTD で指定されたルート要素に対して適用されます。 E:nth-child
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
Web デザイナーに求めたい 5つのこと | WWW WATCH
趣味として Web サイトを作っている場合は置いといて、仕事として Web サイト制作に携わる Web デザイナーであれば、今後、最低限これくらいは押さえといて欲しいなということをえらそうに書いてみます。 個人的にスキルが 「デザイン」 よりも 「コーディング」 に偏っている傾向があるので、内容的にはコーディングに関係する話が多くなっているかもしれませんけど...... 1、DTP 脳からの脱却 DTP の延長で作られる Web サイトデザインの中にはフォントサイズやテキストの量が決め打ち前提で作られているデザインも少なくありません。それが悪いとは言わないんですけど、現在の Web 制作においては、CMS を始めとした他のプログラムとの連動やアクセシビリティを念頭に、柔軟性のあるデザインが求められます。 自分の思い描いたとおりにデザインをコントロールしたいという気持ちはわからなくはないので
本当に CSS だけでテキストにシャドウを
前回、S i M P L E * S i M P L E さんのエントリーにただ乗りさせていただく感じで書いた 「CSS は正しくお使いください」 というエントリーですが、Text shadows プロパティが定義されてブラウザが実装するまで待てって、まったく解決になってねーよっていうエントリーだったせいか、なんか他に方法ないのかね？という話を知り合いからもらったので、その時話した方法をメモ代わりに上げておきます。 最初に断っておきますが、これから紹介する方法は、今現在、IE では認識されませんので、あまりインパクトはないということと、テキストにシャドウを付けるということ自体、無理に CSS でやることなの？という個人的な疑問もありますので、積極的に使用をオススメするものではありません。あくまでこんな方法もあるよという程度で楽しんでください。 ということで、まずはいきなりソースから。 HT
CSS は正しくお使いください
立て続けに人のエントリーに乗っかってますが...... S i M P L E * S i M P L E さんで紹介されていた、「CSSだけで文字にドロップシャドウをつける方法」 （元ネタはこれ） に関してはちょっと気になったので書いておこうと思います。 実は S i M P L E * S i M P L E さんのエントリーの元ネタでは書かれているのですが、このようにテキストを 2回書いてそれを CSS によって重ねてしまう方法は、下記のような弊害があります。 CSS が OFF だと、テキストがだぶる 音声ブラウザは 2回同じテキストを読み上げることになる CSS が OFF という状況は、ブラウザでアクセスしてくる人間様相手の場合、あまり起こらない状況だと思いますが、ページをスクレイピングしていくようなユーザーエージェントは、CSS なんて基本的に読みません。例えば、Google
Google Co-op版 OpenSearch plugin
以前のエントリーで紹介した 「Firefox2 OpenSearch plugin」 ですが、同じく先に紹介した、Google Co-op を使用したサイト内検索を外部から利用するための Firefox2 OpenSearch plugin を作ってみました。 Firefox2 OpenSearch plugin に関して詳しくは 「Firefox2 OpenSearch plugin を作る」 を合わせて参考にしていただければと思いますので、いきなりですがソースを下記に。 <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/"> <ShortName>WWW WATCH</ShortName> <D
IFRAME を使わない方法の補足 | WWW WATCH
phpspot開発日誌さんで紹介されていた 「IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法」 を読んでちょこっと補足。 人気エン... XHTMLではiframeタグは禁止されているのでValidにしたい場合はこっちを使ったほうがよいらしいです。 iframe 要素は、HTML4.01 Strict 及び XHTML1.0 Strict では未定義 （Transitional、Frameset では定義済み）、XHTML1.1 では廃止されていますので、Strict でコーディングする際に外部オブジェクトを (X)HTML によって読み込むには object を使うことになりますね。 で、object 要素の DTD はどうなっているかというと、（XHTML1.0 Strict） <!ELEMENT object (#PCDATA | param | %bl
!important だらけの CSS にお別れを
CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができ... CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができなかったりと、思わぬところで無駄な時間をとられたりします。 で、結果として !important 宣言を連発、気が付いたら CSS が !important 宣言だらけになるなんてオチが待ってたりするわけですが、そうならないためにも CSS が適用される際の優先順位について簡単におさらいをしてみたいと思います。 CSS は、「Cascading Style Sheets」 という名前の通り、「Cascading」 されて （段階的に） 適用されます。よって、簡単に言っ
5分でわかる Google Co-op 導入方法
今まで当サイトのサイト内検索は、Movable Type 標準の検索機能を使っていましたが、これがなかなか重たいのと、検索精度もイマイチなので変更することに。 で、以前にも紹介したとおり、Google からリリースされた、カスタムサーチエンジン制作機能、「Google Co-op」 を利用して、サイトのデザインに合わせたサイト内検索を実現してみることにしました。 ということで、簡単に自分のサイトに 「Google Co-op」 を導入するための作業の流れを説明してみます。Google のアカウントを持っている前提で行きますんで、その辺はよろしくお願いします。 1） Google Co-op で自サイトだけを検索する検索エンジンを作る Google Co-op にログインしたら、新規に検索エンジンを作成します。画面上の 「Create a Search Engine」 をクリック。 次の画面
「ブックマークに追加」 ボタン
サイトリニューアルの際に、旧デザインで各エントリーページに付けていた、hatena ブックマーク、del.icio.us 等ソーシャルブックマークへの追加ボタンをはずしてそのままにしていたのですが、これを再度掲載することに。 その際、単にアイコンを並べただけでは味気ないので、ちょこっと小技を効かせてみました。 実物はエントリータイトル横のアイコンにマウスオンしてもらえればわかるかと思いますが、せっかくなのでソースとか公開。 2007年12月14日 追記 サイトリニューアルでボタンが変わったので、サンプルを下記に移動しました。 実際に動作しているサンプルはこちら さて、今回の材料は、 アイコン画像 JavaScript ファイル 3種 本ボタンの XHTML ソース 本ボタン用 CSS の追加 JavaScript ファイルはマウスオン、オフ時の動きを制御するために使用。これは 「PJ Hy
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
