プログラミングの勉強をしよう@Wiki
プログラミングの勉強をしよう@Wiki

レイアウト

概要

画面のレイアウトの調整


画面を中央寄せ

上位に<div class="container">で囲む

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>レイアウトテスト０１</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span12" style="background-color: #FF0000;">
          940pxのサイズを12カラムで分割して管理
        </div>
      </div>
      <div class="row">
        <div class="span3" style="background-color: #FFFF00;">
          3カラム
        </div>
        <div class="span3" style="background-color: #FF00FF;">
          3カラム
        </div>
        <div class="span3" style="background-color: #FFFF00;">
          3カラム
        </div>
        <div class="span3" style="background-color: #00FFFF;">
          3カラム
        </div>
      </div>
      <div class="row">
        <div class="span1" style="background-color: #FF0000;">
          1カラム
        </div>
        <div class="span11" style="background-color: #0000FF;">
          11カラム
        </div>
      </div>
      <div class="row">
        <div class="span6" style="background-color: #FF00FF;">
          6カラム
        </div>
        <div class="span6" style="background-color: #CC00FF;">
          6カラム
        </div>
      </div>
      <div class="row">
        <div class="span1" style="background-color: #FF00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #0000FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FFFF00;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FF00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FFFF00;">
          1カラム
        </div>
        <div class="span1" style="background-color: #00FF00;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FF00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #AA00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #CC00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FF00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #00FFFF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #CCFFFF;">
          1カラム
        </div>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 
 

画面を可変（横に広げる）

classを"container-fluid"、"row-fluid"に指定

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>レイアウトテスト０２</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12" style="background-color: #FF0000;">
          940pxのサイズを12カラムで分割して管理
        </div>
      </div>
      <div class="row-fluid">
        <div class="span3" style="background-color: #FFFF00;">
          3カラム
        </div>
        <div class="span3" style="background-color: #FF00FF;">
          3カラム
        </div>
        <div class="span3" style="background-color: #FFFF00;">
          3カラム
        </div>
        <div class="span3" style="background-color: #00FFFF;">
          3カラム
        </div>
      </div>
      <div class="row-fluid">
        <div class="span1" style="background-color: #FF0000;">
          1カラム
        </div>
        <div class="span11" style="background-color: #0000FF;">
          11カラム
        </div>
      </div>
      <div class="row-fluid">
        <div class="span6" style="background-color: #FF00FF;">
          6カラム
        </div>
        <div class="span6" style="background-color: #CC00FF;">
          6カラム
        </div>
      </div>
      <div class="row-fluid">
        <div class="span1" style="background-color: #FF00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #0000FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FFFF00;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FF00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FFFF00;">
          1カラム
        </div>
        <div class="span1" style="background-color: #00FF00;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FF00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #AA00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #CC00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FF00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #00FFFF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #CCFFFF;">
          1カラム
        </div>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 
 

画面をレスポンシブウェブ対応（横幅を小さくすることで画面にあったデザインへ変更）

レスポンシブ用のCSSを適用

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>レイアウトテスト０３</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span12" style="background-color: #FF0000;">
          940pxのサイズを12カラムで分割して管理
        </div>
      </div>
      <div class="row">
        <div class="span3" style="background-color: #FFFF00;">
          3カラム
        </div>
        <div class="span3" style="background-color: #FF00FF;">
          3カラム
        </div>
        <div class="span3" style="background-color: #FFFF00;">
          3カラム
        </div>
        <div class="span3" style="background-color: #00FFFF;">
          3カラム
        </div>
      </div>
      <div class="row">
        <div class="span1" style="background-color: #FF0000;">
          1カラム
        </div>
        <div class="span11" style="background-color: #0000FF;">
          11カラム
        </div>
      </div>
      <div class="row">
        <div class="span6" style="background-color: #FF00FF;">
          6カラム
        </div>
        <div class="span6" style="background-color: #CC00FF;">
          6カラム
        </div>
      </div>
      <div class="row">
        <div class="span1" style="background-color: #FF00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #0000FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FFFF00;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FF00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FFFF00;">
          1カラム
        </div>
        <div class="span1" style="background-color: #00FF00;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FF00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #AA00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #CC00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #FF00FF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #00FFFF;">
          1カラム
        </div>
        <div class="span1" style="background-color: #CCFFFF;">
          1カラム
        </div>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 
 

「レイアウト」をウィキ内検索
最終更新：2013年06月05日 00:23