ga-05-n1

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
レスポンシブ対応
ビューポートとメディアクエリ の使い方

下段の左の図は、ビューポートとメディアクエリを指定していません。右の図は、同じHTMLファイルに次のビューポートとメディアクエリを指定したものです。

画像

A.ビューポートの指定(HTMLファイルのHEAD部)
レスポンシブ対応をする全てのHTMLファイルに指定することをお勧めします。ブラウザが端末の画面幅を読み取ってそれなりの対応をします。

        <meta name="viewport"
            content="width=device-width, initial-scale=1">
        

B.メディアクエリの指定(CSSファイル)
メディアクエリを使って本文の文字を大きくするサンプルとして提示しました。端末によって表示を変えたい所に利用できます。

          
        @media screen and (max-width: 600px) {
           .f-sub-contents {
                font-size: 120%;
            }
        }
        

 back
pagetop
 next

inlineとblockと
inline-block

ビューポートと
メディアクエリ
の使い方

タイトル文字の
折り返し

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken