右メニュー

レスポンシブ対応

動画内で使用している項目に対しての説明文になります。

動画は以下になります。

 

 

レスポンシブ対応

PC、タブレット、スマートフォン等の異なるデバイスの画面サイズの幅を基準にWebサイト表示を調整して、見やすく表示すること

レスポンシブ対応のポイント

・metaタグで、viewportを定義する

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

bootstrapのレスポンシブ対応必須方法

・containerとrowを必ず定義する

        <div class="container">
            <div class="row">
            </div>
        </div>
・デバイス（画面幅）毎に定義する
                    xs…スマホ(～767px)
                    sm…タブレット(768px～991px)
                    md…PC(992px～1119px)
                    lg…PC(大画面)(1120px～)
                    ※pxは画面サイズの単位

                    bootstrapの場合、画面の幅を12分割して考えるようになっているので
                    各画面でどれくらいの幅を利用するか決める
                    col-○○-△△の△△の部分
                    △△の部分が12なら12分割されている内の12個を使用する
                    △△の部分が 6なら12分割されている内の 6個を使用する

　　　　　12分割の参考サイト

                  12分割使用例

                  <div class="col-xs-12 col-md-6">
                    <label>ログインＩＤ</label>
                    <input type="text" id="input_id"/>
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <label>パスワード　</label>
                    <input type="password" id="input_password" />
                  </div>

•