レスポンシブイメージを実現するCSS4のimage-set
レスポンシブイメージを実現するCSS4のimage-set iOS6のMobile Safariで新たにレスポンシブイメージを実現するCSS4(WD)のimage-set関数が実装されました。 仕様は「CSS Image Values and Replaced Content Module Level 4」、詳しい日本語の解説は「Responsive imagesのための-webkit-image-set() - fragmentary」を参考にしていただくとして、早速どのようになるか試してみました。 #img{ background:black; background:-webkit-image-set( url(1x.png) 1x, url(2x.png) 2x ); width:100px; height:50px; } このようにベンダープリフィックスを付けた-webkit-im
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webのページレイアウトやコンポーネントのレスポンシブ対応のさまざまなアイデア集 -Responsive Patterns
Border Radius
公海555000kk线路检测—首页（欢迎您）
KataPad.com is for sale | HugeDomains
re-dzine.net situs togel online toto 2023 -
HTML5 Please - Use the new and shiny responsibly
http://www.designwalker.com/2010/05/css3.html