» ウェブログアーカイブ » CSSコースにもうひと工夫 CSSコースにもうひと工夫 2009年11月11日、Rumoroso著 前回の記事（「上級CSSコースをスタイリング」）でやったように、サラゴサでのCSSコースのプレゼンテーションで使ったスタイルのいくつかについて引き続きコメントしていきます。今日は手短に。 あるスライドで、プロパティのリストを分類する必要がありました。このリストは画面に縦に並べるには少し長すぎたので（まして同じスライドにもう一つリストを追加したかったこともあり）、インラインでスタイリングすることにしました。今回もまた、プレゼンテーション自体を例として活用するつもりでした（rumoslideで作ったことを思い出してください。これは基本的にXHTML、CSS、JavaScriptです）。スタイルシートで何が実現できるかを示すためです。以下にそのリストを掲載します。スタイリングしていない状態の見た目がわかるように画像で載せます（Firefoxがデフォルトで適用するスタイルのみを表示しています）： 使用したHTMLはシンプルです。各項目が内部にテキストを持つcode要素で構成されたリストです：
border-collapseborder-spacingcaption-sidecolorwidowsword-spacing
…そして得たかった結果（そして明らかに得られた結果）は以下の通りです（ここでもスクリーンショットを掲載します）： この結果を得るために使用したスタイルは以下の通りです： code { font: .8em monospace; color: #009; } .herencia li { display: inline; } .herencia li:after { content: ’, ’; } .herencia li:last-child:after { content: ’ ’; } 最初にやったのは、code要素を他のテキストと区別できるようにスタイリングすることでした。そのためにフォントのサイズ、ファミリー、色を調整しました。見ての通り、とてもシンプルです。 最初は縦に並んでいたリストを横並びに変えるために、項目のdisplayプロパティをinlineに変更しました。次に、contentプロパティ（生成コンテンツ）を使ってタイポグラフィックなカンマとスペース（「, 」）を表示させました。これは疑似要素:afterに適用しました。最後に、これでは最後の項目にもカンマが表示されてしまうので、その生成コンテンツを空（content: ’ ‘）にするよう指定しました。 さて、まだコメントしていない点に問題があるのは明らかで、誰かが気づいてくれていることを願っています（理想的にはコースに参加した生徒の誰かが）。最後の項目を選択するために、CSS 3の疑似クラス:last-childを使いましたが、そのサポートはごく限られています。CSS 2.1のセレクタだけを使えばよかったのではと思うかもしれません。例えば、各項目の前（後ではなく）にコンテンツを生成するのに:beforeを使い、その後:first-childで最初の項目を選択して前のカンマを除去する、といった具合です。なぜそうしなかったのか？…理由は以下の通りです： 項目が行頭に来ると、カンマが各行の先頭に配置されてしまい、これは明らかに誤りです。これを避けるために、使用するブラウザがそれをサポートしていることを知っていたので、CSS3を使うことにしました… わかっています、:last-childはブラウザ間で十分に普及していませんが、少なくとも最新のバージョンでは対応しています…そしてプレゼンテーションには完璧に役立ちました。 この長々とした話から一つの結論が導けます：CSSは最高だし、コースのプレゼンテーションを例として使えるのはさらに最高です。とはいえ、お願いです…もっとサポートが充実したブラウザと、早く来てほしいCSS 3。 ブラウザごとのCSSサポート度合いを詳しく説明したリストへのリンクをいくつか残しておきます：
http://www.webdevout.net/browser-support-css#css3standards http://www.quirksmode.org/css/contents.html ちなみに、プレゼンテーションでは我慢できずにもう少しCSS 3を使いました…明らかに、いくつかの角を丸くせずにはいられませんでした。次の記事でそれについてコメントします… CSSコースにもうひと工夫 カテゴリー：CSS —> 2件のコメント Niquelao » ウェブログアーカイブ » CSSコースにもうひと工夫に言及したツイート — Topsy.com 2009年11月12日 […] この投稿はTwitterでJorge Rumoroso、Jorge Rumorosoによって言及されました。Jorge Rumorosoは言いました：#
niquelao CSSコースにもうひと工夫
http://bit.ly/J7vm9（英語のほうがクールに見えるでしょ！ […] CSSコースにもうひと工夫 2009年11月12日 […] 全文はNiquelaoにて：CSSコースにもうひと工夫 […] コメントはRSS 2.0フィードで追跡できます。また、あなたのサイトからトラックバックを送ることもできます。 前の記事：上級CSSコースをスタイリング 次の記事：CSS 3で複数の背景画像 —> —> —> この作品はCreative Commonsライセンスの下で提供されています。
P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; if you want the current details.