*

PC LIFE

ホーム >  Web制作 >  HTM5/CSS3 > 
17.スマホ&タブレット対応 MENU 

17.css3 スマホ&タブレットに対応 メディアクエリ Mwdia Query Chap 6

学習書の「sample_a」(Chap6)を表示しソースコードを見て下さい。
スマホ&タブレット対応
学習書で作成しているサイトの設計は横幅900pxで、HPをPCで表示する場合、同サイズが一般的である。このHPをスマホでやタブレットで表示すると下図のように極めて小さく画面に横900pxで表示される。スマホなど小さな画面にも関わらず、高解像度で表示出来てしまう(iOS & Android3x/4xで980px)。その結果、下図右端のように小さな画面に900pxのHP全体が表示出来るが、これでは文字が小さすぎて、とてもではないが文字が読めない。
対応前

対応後(CSS Media Queries(メディアクエリ)の利用)
Media Queriesを利用して使用端末のdencityに基づく解像度を取得し、端末サイズに合わせた表示をCSSで指定する方法。詳しくは学習書で。
・画面が900px以上の場合→3段組、600px以上899以下→下図中央の表示、599px以下→下図右端の表示
CSSの記述
  • 行番
  • 説 明
  • 4-33
  • 3段組み部分を2行目と35行目で囲む
  • 38-
  • タブレット及びスマホの表示設定