[B! css][tips] kyouzontのブックマーク

Mozilla の Web O'(pen) Wonder

驚きの連続ウェブの見事なデモを探検してください! 高機能なブラウザで実現されるすばらしい発明の世界を! デモを投稿!

kyouzont 2011/08/01

リンク

実は以前に別の場所でも書いたのですが、今回Google Page Speedの方でも少しだけ触れられていたので、改めてまとめ。自分でも経験があることなのですが、開発をやっているとどうしても、構造をモジュール化して複数のファイルに分割して管理したくなります。 StyleSheetにおいても同様で、プレゼンテーション層のコンポーネントにあわせてCSSを用意し、ページ構成にあわせて取り込むようなことをやりたくなるでしょう。しかしその際、@import構文を使うのはパフォーマンスと挙動の両方に有害である可能性が高いと、「」の著者としても知られるSteve Souders氏が警鐘を鳴らしています。使うべきでないポイント @importは、大きく分けて2つの観点で「使うべきでない」とされています。ひとつは、パフォーマンスの問題。StyleSheetはほぼ全ての主要ブラウザでパラレルロードがサポ

kyouzont 2011/07/07

リンク

[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか

外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。 don't use @import 内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。 @import @import 2つの外部スタイルシートを@importで指定。 <textarea name="code" class="html" cols="60" rows="5">

kyouzont 2011/07/07

リンク

[CSS3] CSS3 Buttonize Framework - CSS3でコーディングされた汎用ボタン

[CSS3] CSS3 Buttonize Framework – CSS3でコーディングされた汎用ボタン Pocket Tweet CSS3でコーディングされた汎用ボタン。ページ中央あたりからダウンロードでき、コード挿入だけで実装できます。とっても簡単。ズラっと並んでるボタンの最後にある「More」をクリックすると、他の作例も出てきます。カスタマイズもラクにできそうなので、ボタン制作の素体としてもイイかも。あとこのページ、画像がほとんど使われてません。8bitな感じがナイスです。 CSS3 Buttonize Framework

kyouzont 2011/07/01

リンク

| test

mameshibankさん豆柴日和 amecustomさんアメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！ jade-taさん脚本家によろしく。 nisishowさんリフォームで地域社会に貢献 ringo417-maさん ★ 月に負け犬 ★ cairさん広報＆IR担当のオフィシャルブログ shikamaさん千葉の東京寄りでホームページ制作＆企画・運用中！ saijoさん経営に終わりはない nina-yuanbeauteさん芳村仁奈オフィシャルブログ「Nina's Diary」Powered by Ameba frontier-ceo-bossさんフロンティア社長オフィシャルブログ Powered by Ameba ohtias-ceoさんソーエネ×オーチアス社長 alfortさん念ずれば花ひらく「会社経営」

kyouzont 2011/06/19

css
Tips

リンク

グラフィックデザイナーのためのCSSレイアウトメモTIPS「CSS記述の優先度」

CSSレイアウト[TIPS] CSS記述の優先度 CSSは後に書かれた指定ほど優先順位が上になるのが基本。前の指定を後の指定が上書きする。この法則に当てはまらないものに、後述の「条件付きセレクタ」と「!important付き指定」がある。 HTML上での読み込み順による優先度 HTML上での読み込みが後の方ほど優先される。外部CSSファイル読み込みでも、HTMLに直接書き込む場合でも同じ。例えば、外部ファイルをHTMLの<head></head>内に下記のような順番でCSSを読み込んだ場合は、 <link rel="stylesheet" href="first.css" type="text/css" /> <link rel="stylesheet" href="second.css" type="text/css" /> この場合、後で読み込まれる「second.css」の指定が

kyouzont 2011/06/15

css
TIPS

リンク

CSSセレクタ20個のおさらい

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル