CSS3基本教程

CSS3 メディアクエリ

CSSメディアクエリを使用して、異なるサイズの出力デバイス上で正しく表示されるようにドキュメントをフォーマットできます。

メディアクエリとレスポンシブウェブデザイン

メディアクエリは、タグを変更せずに特定のデバイス範囲（例えば、スマートフォン、タブレット、デスクトップなど）に対応するウェブページの表示方法をカスタマイズするために使用できます。メディアクエリは、メディアタイプと特定のメディア機能（例えば、デバイス幅やスクリーン解像度）に一致する条件の式0個以上で構成されています。

メディアクエリは論理表現であり、trueまたはfalseとして解釈できます。メディアクエリで指定されたメディアタイプが表示されているドキュメントのデバイスタイプと一致し、メディアクエリのすべての式が満たされている場合、クエリの結果はtrueです。メディアクエリがtrueの場合、関連するスタイルシートやスタイルルールがターゲットデバイスに適用されます。これは標準のデバイスメディアクエリのシンプルな例です。

例

/*　スマートフォン（ポートレートおよびランドスケープ）　----------　*/
@media　screen　and　(min-width:　320px) そして（max-width:　480px){
　　　　/*　styles　*/
}
/*　スマートフォン（ポートレート）　----------　*/
@media　screen　and　(max-width:　320px){
　　　　/*　styles　*/
}
/*　スマートフォン（ランドスケープ）　----------　*/
@media　screen　and　(min-width:　321px){
　　　　/*　styles　*/
}
/*　タブレット、iPad（ポートレートおよびランドスケープ）　----------　*/
@media　screen　and　(min-width:　768px)　and　(max-width:　1024px){
　　　　/*　styles　*/
}
/*　タブレット、iPad（ポートレート）　----------　*/
@media　screen　and　(min-width:　768px){
　　　　/*　styles　*/
}
/*　タブレット、iPad（ランドスケープ）　----------　*/
@media　screen　and　(min-width:　1024px){
　　　　/*　styles　*/
}
/*　デスクトップおよびラップトップ　----------　*/
@media　screen　and　(min-width:　1224px){
　　　　/*　styles　*/
}
/*　大きなスクリーン　----------　*/
@media　screen　and　(min-width:　1824px){
　　　　/*　styles　*/
}

テストを見て‹/›

ヒント：メディアクエリは、レスポンシブレイアウトを作成するのに最適な方法です。メディアクエリを使用すると、ページの実際の内容を変更せずに、スマートフォンやタブレットなどのデバイスでブラウジングするユーザーに異なる方法でウェブサイトをカスタマイズできます。

スクリーンサイズに応じて列幅を変更

CSSメディアクエリを使用して、ユーザーに最適な視聴体験を提供するために、異なるデバイス上でウェブページの幅や関連する要素を変更できます。

以下のスタイルルールは、スクリーンまたはビューポートのサイズに応じて自動的に変更され、コンテナ要素の幅が変更されます。例えば、ビューポートの幅が768ピクセルで、それがビューポートの幅を100％、それが大きい場合768ピクセルであれば、1024ピクセルの場合、75ピクセル、そのようにして続きます。

例

.container　{
　　　　マージン: 0 auto;
　　　　背景: #f2f2f2;
　　　　box-sizing:　border-box;
}
/*　携帯電話（縦と横）　----------　*/
@media　screen　and　(max-width:　767px){
　　　　.container　{
　　　　　　　　width:　100%;
　　　　　　　　padding:　0　10px;
　　　　}
}
/*　タブレットおよびiPad（縦と横）　----------　*/
@media　screen　and　(min-width:　768px)　and　(max-width:　1023px){
　　　　.container　{
　　　　　　　　width:　750px;
　　　　　　　　padding:　0　10px;
　　　　}
}
/*　低解像度デスクトップおよびラップトップ　----------　*/
@media　screen　and　(min-width:　1024px)　{
　　　　.container　{
　　　　　　　　width:　980px;
　　　　　　　　padding:　0　15px;
　　　　}
}
/*　高解像度デスクトップおよびラップトップ　----------　*/
@media　screen　and　(min-width:　1280px)　{
　　　　.container　{
　　　　　　　　width:　1200px;
　　　　　　　　padding:　0　20px;
　　　　}
}

テストを見て‹/›

注意：CSSを使用して要素上に3 ボックスサイズ調整属性を使用して、より直感的で柔軟なレイアウトを作成しやすくなります。

スクリーンサイズに応じてレイアウトを変更

あなたはCSSメディアクエリを使用して、あなたの多列ウェブサイトレイアウトをより適応性のあるものにし、多くのカスタマイズを必要とせずにデバイスに対応させることができます。

視口サイズがピクセル以上の場合768ピクセルの場合、以下のスタイルルールが二列レイアウトを作成しますが、ピクセル以下の場合は768ピクセル、それが一列レイアウトとして表示されます。

例

.column　{
　　　　width:　48%;
　　　　padding:　0　15px;
　　　　box-sizing:　border-box;
　　　　background:　#93dcff;
　　　　float:　left;
}
.container　.column:first-child{
　　　　margin-right:　4%;
}
@media　screen　and　(max-width:　767px){
　　　　.column　{
　　　　　　　　width:　100%;
　　　　　　　　padding:　5px　20px;
　　　　　　　　float:　none;
　　　　}
　　　　.container　.column:first-child{
　　　　　　　　margin-right:　0;
　　　　　　　　margin-bottom:　20px;
　　　　}
}

テストを見て‹/›

CSS3 その他 CSS3 フィルタ（Filters）