Code Archive Skip to content Google About Google Privacy Terms
小さいサイズのスマートフォンから大きいサイズのデスクトップまで考慮した、StaticとFluidのいいとこ取りをしたスタイルシートのレイアウトを紹介します。 Rubber Layouts – Combining Static and Fluid Layouts [ad#ad-2] Rubber Layoutsのデモ Rubber Layoutsの特徴 Rubber Layoutsの実装 Rubber Layoutsのデモ デモはメインコンテンツとサイドバーのシンプルな2カラムのレイアウトで、ブラウザのサイズを変更することで、StaticとFluidの固定と可変をどのように取り入れているか確認できます。 デモページ:幅480pxでの表示 ヘッダ・コンテンツ・サイドバーすべてを同じ幅に変更。 Rubber Layoutsの特徴 多くのウェブページで可変であるFluid Layoutが使用されて
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く