normalize.cssで使用されている各スタイルがどのように機能しているか解説
先日紹介した「sanitize.css（紹介記事）」や「Marx（紹介記事）」などリセット用CSSの新しいアプローチが増える中、ブラウザごとの要素の相違を吸収するのに人気なのはまだまだ「normalize.css」でしょう。 そのnormalize.cssも細かい改良が重ねられ、最新のバージョンは3.0.3になっています。 normalize.cssで使用されている各スタイルが、どのように機能しているか確認してみましょう。 normalize.css normalize.css -GitHub ※3.0.3はGitHubからダウンロードできます。 normalize.cssの特徴 html, body, :rootなどの全体系の定義 HTML5の新要素用の定義 リンク系の定義 テキスト系の定義 埋め込みコンテンツ系の定義 グルーピングコンテンツ系の定義 フォーム系の定義 テーブル系の定義
[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋
次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。 まずはアニメーションが楽しいデモから。 ※上から10個くらいはアニメーションgifです。
![[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68594e0182d8d63cfb96eda05e4f18be75583c9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091401-04.gif)
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
Learn CSS Layout
This site teaches the CSS fundamentals that are used in any website's layout. I assume you already know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you. If you want to learn HTML and CSS from the beginning, you should check out this tutorial. Otherwise, let's see if we can save you some fury on
「CSS Regionsを使った新しいCSSレイアウトを作る方法」HTML5 Conference2013レポート
「CSS Regionsを使った新しいCSSレイアウトを作る方法」HTML5 Conference2013レポート 馬場 美由紀（HTML5 Experts.jp編集部） 11月にiOS7のSafariでサポートされることになり、一躍注目を集めることになった「CSS Regions」。雑誌や新聞のような、自由でクリエイティブなWebデザインを実現できると注目されていますが、その実、何ができるのかは未知数です。 2013年11月30日（土）に開催された「HTML5 Conference 2013」のアドビシステムズ轟啓介さんのセッション「CSS Regionsを使った新しいCSSレイアウトを作る方法」では、主に「CSS Regions」を使ってできること、そして実際の記述方法について解説されました。 複数のボックスをまたいでリフローできる 「CSS Regions」 現在、「CSS Regi
知っておくと速い！CSS3に関する「便利」なまとめ
作成：2013/11/25 更新：2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 知っておきたいプロパティ １．カウント数を出力 ２．要素の前後に文字や画像 ３．カーニング ４．画像フィルタ ５．均等幅にレイアウト ６．アニメーション一覧 スマホサイト対策 ７．viewport ８．改行削除 ９．Webクリップアイコン １０．UIリセット／入力フィールド拡張 １１．横並び １２．ボタンサンプル １３．画像を使わない矢印 １４．自動改行 １５．はみ出しを隠す １
[CSS]水平に配置したセクションを分けるスタイルのさまざまな素敵なテクニック
1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとアイデアが素晴らしいものもたくさん！ デモページ 各デモと共にそのスタイルを紹介します。 まずはHTMLから。基本となるのは、2パターンです。 1つ目は、section要素にclassをつけるだけ。 <section class="ss-style-hogehoge"> コンテンツ </section> 2つ目は、svg要素を使用します。 <section> コンテンツ </section> <svg id="hoge"> SVGの中身 </svg> sctionだけの場合はclass、svgを使用するものはidになっています。 以下、各デモとそのスタイルです。 HTML/C
なぜリセットではなく Normalize.css を使うのか | Yomotsu net
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
そのベンダー接頭辞はいつまで書くの？
ベンダー接頭辞（プレフィックス）については最近いろいろと議論が活発ですが、そういう難しい話ではなくて、現状のCSSについての話です。 新しいCSSモジュールを使うために、ブラウザごとに接頭辞をつけなくてはいけない場合があります。まあそれについては現状では仕方ないことなんですが、接頭辞なしでも動作するようになったものでも、いつまで経っても接頭辞つきのものを書くのはどうなのかなと思うわけです。 CSSのコードも冗長で読みづらくなりますし、もう使われていない（使われることもない）であろうものを残しておくのもちょっとなー。 実際に運用されているサイトなんかだとそうそう簡単に手を入れられないかもしれませんが……。 また、はてなダイアリーの方でも書きましたが、ブログのチュートリアルを見ていて「もうその接頭辞つきの役目は終わった（終わりつつある）のに、なんでそれしか書いてないの」と思うことが結構あります
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まだ中央寄せで消耗してるの？ - @yoshiko_pg
CSS Reference | Codrops
http://fontdragr.com/
Ultimate CSS Gradient Generator from ColorZilla
Grad3