タグ: HTML/CSS

[HTML/CSS]簡単にレスポンシブデザインを作る-BootStrapの使い方

グリッドシステムとは

画面横幅を12分割した列と見立ててサイトをデザインできるシステムのこと

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap テスト</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- グリッド 12分割 -->
        <!--
        対応デバイス  画面サイズ   prefixの指定方法（*は数値） prefixの意味
        デスクトップ   1200px以上              col-lg-*      Large
        デスクトップ   992px以上、1200px未満    col-md-*      Medium
        タブレット    768px以上、992px未満      col-sm-*     Small
        モバイル     768px以下                col-xs-*     Xtra Small
        -->
        <div class="col-xs-3 col-sm-2 col-md-3 col-lg-2" style="height:200px;background-color: blue">
        </div>
        <div class="col-xs-1 col-sm-2 col-md-6 col-lg-4" style="height:200px;background-color: red">
        </div>
        <div class="col-xs-2 col-sm-2 col-md-3 col-lg-1" style="height:200px;background-color: green">
        </div>
        <div class="col-xs-2 col-sm-2 col-md-4 col-lg-1" style="height:200px;background-color: gray">
        </div>
        <div class="col-xs-1 col-sm-2 col-md-4 col-lg-2" style="height:200px;background-color: pink">
        </div>
        <div class="col-xs-3 col-sm-2 col-md-4 col-lg-2" style="height:200px;background-color: yellow">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" style="height:200px;background-color: azure">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" style="height:200px;background-color: brown">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" style="height:200px;background-color: skyblue">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" style="height:200px;background-color: orange">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" style="height:200px;background-color: aqua">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" style="height:200px;background-color: gray">
        </div>
    </div>
</body>
</html>