× 無料のユーザー登録をすると学習状況を管理することができるようになります
最新版のレッスンはこちらから » 【最新版】レスポンシブウェブデザイン入門 (全13回)

#07 スマートフォン向けのスタイル

さて、共通の設定は殆ど出来たので、今度はいよいよスマホに最適化したスタイルを書き込んでいきたいと思います。
スマホの場合は何をするかというと、ここのヘッダメニューを消して、ここのリンクからフッタメニューに飛ばせればいいので、その設定をまずやりましょう。

スマートフォン向けのスタイルを作りこみ、viewportの設定も行っていきます。また画像の扱いについても解説します。

  • スマートフォン向けのスタイル
  • viewportの設定
  • max-width
2014年1月31日
レッスンでは initial=1.0 と書いていますが、正しくは initial-scale=1.0 と書かなければエラーとなってしまいます。ご注意ください。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
2013年2月1日
viewportの仕組みに関しては以下のページも参考にしてみてください。
http://ascii.jp/elem/000/000/699/699842/
またviewportの仕様はW3Cにて以下のように定められています。
http://dev.w3.org/csswg/css-device-adapt/

このレッスンの問題を報告する

この動画に関する、よくある質問はまだありません。

プレミアム会員(月額980円)になると、全レッスンの素材ファイルをダウンロードできます。

詳しい説明を読む

プレミアム会員(月額980円)になると、全レッスンのソースコードを見られるようになります。

詳しい説明を読む

このレッスンの問題を報告する

プレミアム会員(月額980円)になると、全レッスンのデモを見られるようになります。

詳しい説明を読む
先生に質問してみよう (試験運用中)