Bulma: Free, open source, and modern CSS framework based on FlexboxThe most beautifully written framework I've ever had the pleasure of working with.
なぜリセットではなく Normalize.css を使うのか | Yomotsu net
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
CSS sprite 導入や javascript 最適化でブログ表示を高速化
７月下旬くらいから徐々に進めてきた作業ですが概ね形になりました。 このチューニング作業で当ブログの表示を約２倍に高速化することができました！ ∩(≧ο≦)∩ 高速化と行っても得意分野の動的コンテンツ（プログラムやＤＢのチューニング）ではなく静的コンテンツのチューニングです。チューニングの観点は文末の二冊の参考書を読むと理解が深まると思いますが、大きく分類するとサーバのチューニングとコンテンツのチューニングに分けられます。そして個人運営のサーバではちょっとチューニングの余地がなさそうな項目は除外すると次のような項目がチューニングポイントとなります。 コンテンツの構成によるチューニング HTTP リクエストを減らす → CSS スプライト導入、JavaScript/CSS ファイルを１つに統合 スタイルシートのロードを head 内に記述 可能な限りスクリプトのロードを /body タグ直前に
print.css 印刷用CSSの作成方法
head内に <link rel="stylesheet" href="common.css" type="text/css" media="screen,tv" /> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> と記述。 →common.cssはWEB上適用されるCSS →print.cssは印刷時用に適用されるCSS common.cssの中身は @media screen{ /*この中にCSSを記述*/ } print.cssの中身は @media print{ /*この中にCSSを記述*/ } WEBでは表示されているけれども、印刷用には表示したくない時は、 .side { display:none; } とすればよい。 ただしMac IEで「@media type { 〜 } で
Modernizr: the feature detection library for HTML5/CSS3
MENURespond to your user’s browser features.Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.Add your detects Development build What is Modernizr?It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. Why do I need it?All web develope
IT戦記 - Safari 3 に実装された、当たっている CSS ルールを全て抽出できる getMatchedCSSRules が凄い
今日は、まだまだ Safari 3 が熱い！ window オブジェクトを走査していたら、またしても面白そうな関数を見つけてしまった。 その名も getMatchedCSSRules ！！！ まずはデモをご覧ください 以下のブックマークレットを任意のサイトで実行すると、コンテンツの下に DOM Inspector のような要素が出現します。 そこで、要素を開いていくと Safari の場合は、どの CSS ルールが当たっているかを見る事ができます。 javascript:(function(){var d=document,s=d.createElement('script');s.className='css-inspector-script';d.body.appendChild(s);s.src='http://amachang.art-code.org/cssInspector.j
値わりあて，カスケード処理，継承 - CSS2リファレンス
値わりあて，カスケード処理，継承 目次 指定値，算出値，実効値 指定値（Specified values） 算出値（Computed values） 実効値（Actual values） CSS2.1での値わりあて 指定値（Specified values） 算出値（Computed values） 使用値（Used values） 実効値（Actual values） 継承（Inheritance） inherit という値 @import規則 カスケード処理（The cascade） カスケードの順序（Cascading order） 最重要規則（!important rules） セレクタの詳細性（specificity）を計算する CSS以外の手段による表現指定の優先度 指定値，算出値，実効値 User Agentは文書を解析して文書ツリーを組立てたのち，そのツリー内のあらゆる要素
CSS基礎文法最速マスター
最近ネット界隈で流行中の「基礎文法最速マスター」シリーズ。 Parlから始まったこのシリーズですが、いまやPHPやRubyをはじめ、JavaScriptからVBA、果てはjQueryに至るまで、かなりの数の言語が「基礎文法最速マスター」シリーズ化されています。 そこでワタクシもどーにか便乗してやろーと画策しまして、得意分野のCSSについてまとめてみたいと思います。 まぁCSSはプログラム言語とは呼びませんが、プログラマさんなんかは結構苦手意識のある方も多いようなので、ちょっとでも参考になればと思いますー。 CSSの基礎 CSSとは 一言で言えば、(X)HTMLでマークアップされたページの見栄えをコントロールするためのものです。 CSSを使う事で、(X)HTML側ではページの内容や構造だけの記述に留める事が出来るので、検索エンジンにも優しく、デザインの変更も容易になる（と言われてますが、実際
「なぜ CSS が巨大になってしまうのか、なにがいけないのか」 - by edvakf in hatena
Nicole Sullivan さんの素晴らしいプレゼン。 5 Mistakes of Massive CSSView more presentations from Nicole Sullivan. 内容は30分ぐらい。ビデオのほうが分かりやすいのでおすすめ。だいたいスライドの35ページ目まではあんまりおもしろくないので飛ばしてもいいと思う。 スライド中に出てくる衝撃的な統計は、Sullivan さんのブログにもまとめられているのでご一見を。 Top 5 Mistakes of Massive CSS | Stubbornella 要旨 CSS の「ベストプラクティス」は間違っている。 プレゼンでは Facebook の例を挙げているけど、例えばサーバー側のロジックでは、ページヘッダー、右コラム、中央、左コラム、フッター、のようにビューを分けるところだけど、CSS をそのような区分でデザ
HTML5 presentation
This presentation is an HTML5 website Press → key to advance. Zoom in/out: Ctrl or Command + +/- Having issues seeing the presentation? Read the disclaimer HTML5* Web Development to the next level *Including other next generation technologies of the Web Development stack Rough Timeline of Web Technologies 1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tablel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Primer
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
Icons | Font Awesome
Normalize.css: Make browsers render all elements more consistently.
Ultimate CSS Gradient Generator from ColorZilla
ninjaui.com
Quick Lookup
[CSS]スクリプト無しで、画像に鏡面効果を与えるスタイルシート