CSS/Framework

CSS framework

CSSフレームワークとは、HTMLタグにクラスを適用するかたちで美麗なビジュアルを実現できるようにしたもので、css、js、images等のファイルセットとして各公式サイトから配布されています。大半がオープンなものです。

留意点：便利なものにはリスクもあります。以下の点にご留意ください。
- 仕組みがわかれば生産効率は上がりますが、それなりに学習コストがかかります（いきなり使いこなせるものではありません）。大前提として HTML+CSS の基礎知識が必要です。
- 仕様とは異なる構造のものを作るのは逆に大変になる。
- 直接的実装に比べ、無駄に重たく、パフォーマンスが劣る場合がある。
- CSSフレームワークは多数あります。学習したことが無駄にならないよう、将来性の高い(それなりに著名な）ものを選んで下さい。

ここでは、Bootstrap を例に、フレームワークの使い方を紹介します。

Bootstrap
様々なフレームワーク
- Google Material Design
- その他

↑

Bootstrap

↑

Download

以下のページで「Download bootstrap」を選んでください。
http://getbootstrap.com/getting-started/#download

解凍すると bootstrap-x.x.x-dist というフォルダができて、
その中にcss、js、fontsの３つのフォルダが見えると思います。
必要なファイルは、以下のものだけです。その他はなくてもOK。

css / bootstrap-theme.min.css、bootstrap.min.css
js / bootstrap.min.js
fonts / （この中のフォントデータはすべて使います。）

このフォルダ内に Bootstrapの記述ルールに沿って書かれたHTMLファイルを置く・・というかたちでサイトを作ります。

↑

BasicTemplate

以下のコードは Basic template のコメントを削除して、簡単に書いたものです。これを index.htmlとして、上記のフォルダの中に置いてみて下さい。

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Bootstrap 101 Template</title>
       <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
       <h1>Hello, world!</h1>

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
       <script src="js/bootstrap.min.js"></script>
    </body>
</html>

このテンプレートでは「Hello, world!」と表示されるだけです。実際には、＜body＞内に具体的な記述を行って、各要素に class を指定することで、スタイルが適用されるようになります。以下、サンプルを２つ紹介します。

↑

Sample #1　→ DEMO

ナビゲーションをヘッダーに固定した形で、レスポンシブになっています。

index.html

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <title>Bootstrap Sample</title>
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#SiteNavigator" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">MyGallery</a>
        </div>
        <div class="collapse navbar-collapse" id="SiteNavigator">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="password" placeholder="Search" class="form-control">
            </div>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">GALLERY</a></li>
            <li><a href="#">LINK</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="jumbotron">
      <div class="container">
          <h1>Sample Site</h1>
          <p>This is a sample page using Bootstrap ・・</p>
          <p><a class="btn btn-default btn-lg" href="http://www.lipsum.com/" role="button">Lorem Ipsum &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h2>Title01</h2>
          <p>Lorem ipsum dolor sit amet, ・・</p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Title02</h2>
          <p>Nunc euismod elementum odio.・・</p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Title03</h2>
          <p>Vivamus porta, ligula id pretium commodo, ・・</p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>
      <hr>
      <footer>
        <p>&copy; YourName http://example.com</p>
      </footer>
    </div>

  </body>
</html>

style.css

body {
  padding-top: 50px; /* fixed navbar 50px */
  padding-bottom: 20px;
}

.jumbotron{
  background: orange;
}

解説
HTMLの各要素に、Bootstrapのクラスを適用させています。
追加のスタイルシート（style.css）は、サイトのカスタマイズに必要最小の事項を上書きするためのもので、以下の２点のみ変更しています。
・ナビをページ上部に固定するため、その分だけ body を下げる
・ヘッダー部分(jumbotron)の背景色をORANGEに変更

↑

Sample #2　→ DEMO

シングルページ、３セクションのサンプルです。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SinglePage Sample</title>
  <script src="js/jquery.js"></script>
  <script src="js/jquery.smooth-scroll.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>

<body>

  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#SiteNavigator">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">MyGallery</a>
      </div>
      <div class="collapse navbar-collapse" id="SiteNavigator">
        <ul class="nav navbar-nav">
          <li><a href="#about">About</a></li>
          <li><a href="#gallery">Gallery</a></li>
          <li><a href="#links">Links</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <header class="jumbotron">
    <div class="container">
      <h1>Sample Page</h1>
      <p>This is a sample page using Bootstrap </p>
    </div>
  </header>

  <section id="about">
    <div class="container">
      <div class="row">

        <article class="col-md-8">
          <h1>ABOUT</h1>
          <p class="lead">Single Page Website Powerd by Bootstrap</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </article>
 
        <aside class="col-md-4">
          <h2 class="lead">bookmarks</h2>
          <nav>
            <ul>
              <li>FineArts & MediaSciences
              <li>Photography & ImagingArts
              <li>VisualDesign
              <li>LivingEnvironmentDesign
              <li>SocialDesign
            </ul>
          </nav>
        </aside>

      </div>
    </div>
  </section>

  <section id="gallery">
    <div class="container">
      <div class="row">

        <article class="col-md-8">
          <h1>GALLERY</h1>
          <p class="lead">Sample Image Gallery</p>

          <div class="col-md-3">
            <img class="thumb" src="images/monalisa.jpg">
            <p class="notes">
               La Gioconda (1519）<br>
               Leonardo da Vinci<br>
               30 × 21 inch<br>
            </p>
          </div>

          <div class="col-md-3">
            <img class="thumb" src="images/monalisa.jpg">
            <p class="notes">
               La Gioconda (1519）<br>
               Leonardo da Vinci<br>
               30 × 21 inch<br>
            </p>
          </div>

          <div class="col-md-3">
               以下同様
            </div>

       </article>

        <aside class="col-md-4">
          <h2 class="lead">bookmarks</h2>
               内容省略
        </aside>

      </div>
    </div>
  </section>

  <section id="links">
    <div class="container">
      <div class="row">
       <article class="col-md-8">
          <h1>LINKS</h1>
          <p>内容省略</p>
       </article>
       <aside class="col-md-4">
         <h2 class="lead">bookmarks</h2>
          <p>内容省略</p>
       </aside>
      </div>
    </div>
  </section>

  <hr>
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p>&copy; YourName　 http://example.com</p>
        </div>
      </div>
    </div>
  </footer>

  <script>
      $('a').smoothScroll();
  </script>

</body>
</html>

style.css

body {
  margin-top: 50px;
}

section {
  padding-top: 75px;
}

.thumb {
  width: 100%;
  margin-bottom: 16px;

} .notes {

  width: 100%;
  font-size: 10px;
  line-height: 150%;
}

解説
- HTMLの各要素に、Bootstrapのクラスを適用させています。
- スムーズスクロールを実現するために、jQueryのプラグイン
  jquery.smooth-scroll.min をjsフォルダに追加しています。
- 追加のスタイルシート（style.css）は、サイトのカスタマイズに必要最小の事項を上書きするためのもので、以下の２点のみ変更しています。
  ・ナビをページ上部に固定するため、その分だけ body を下げています。
  ・ページ内リンクの位置ズレ解消のために、section のパディングトップに
  　75px分の余白を作っています。
  ・画像とキャプションの表示について微調整しています。

以下、基本的なルールについて概説します。

↑

Layout

レスポンシブ設定
Bootstrap では、4つの画面サイズを前提としています。
- Extra small ：スマートフォン　768px未満＞ 記号：xs
- Small：タブレット　768～991px ＞ 記号：sm
- Medium：中型ディスプレイ　992～1199px ＞ 記号：md
- Large：大型ディスプレイ　1200px以上＞ 記号：lg

コンテナ
Bootstrap の各要素はコンテナの中に記述するのが前提です。以下のような書き方をして使いますが、２つの種類があります。
```
<div class="container bg-info">
  container
</div>
```
- class = "container"
  固定的コンテナで：左右15pxの余白をもってウインドウ中央に表示されます。xs：全幅、sm：750px固定、md：970px固定、lg：1170px 固定です。
- class = "container-fluid"
  流動的コンテナ：ウィンドウ幅に応じてスムーズに幅が変動します。

グリッドシステム
Bootstrap はコンテナを12個のグリッドに分割して、以下のソースのような書き方でレイアウトを制御します。下記の例では 8:4 (8+4=12) の割合でコンテナを分割しています。
```
<div class="container">
  <div class="row">
    <div class="col-lg-8">column 8</div>
    <div class="col-lg-4">column 4</div>
  </div>
</div>
```

↑

Content

タグを適正に使用したHTML文書であれば、bootstrap.cssを読み込むだけで、美麗な表示が実現しますが、各要素に様々なクラスを指定することで、ビジュアルを簡単に変化させることができます。

見出し
普通に＜h1＞〜＜h6＞を用います。
その中で<small>を使うとサブタイトルに最適化されます。
```
<h1>Title <small>Sub Title</small></h1>
```

本文
普通に＜p＞タグを用います。.lead を指定するとリード文に最適化されます。
```
<p class="lead">リード文の記載</p>
<p>本文記事の記載・・・・・・</p>
```

本文の配置
以下のようにそれぞれクラスを指定することで最適化されます。

<p class="text-left">左寄せテキスト</p>
<p class="text-center">中央寄せテキスト</p>
<p class="text-right">右寄せテキスト</p>
<p class="text-justify">両端揃えテキスト</p>
<p class="text-nowrap">改行禁止テキスト</p>

リスト
普通に<ul>と<li>を使いますが、以下のような書き方でクラス指定します。
```
<ul class="list-unstyled">
  <li>home</li>
  <li>gallery</li>
  <li>links</li>
</ul>
```
- class = "list-unstyled"：先頭にマークの無いリスト
- class = "list-inline"：横方向に並ぶインラインリスト

ボタン
- class ="btn" でbootstrapのボタンデザインが適用されます。また、ボタンの種類（色）は info success など、それぞれルールが決まっています。
```
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button> 
<button class="btn btn-danger">Danger</button>
<button class="btn btn-link">Link</button>
```
- ボタンの大きさは、.btn-lg, .btn-sm, .btn-xs などで指定します。
- 全幅のブロックボタンは、.btn-block で指定します。

↑

Documents

多数の記事がありますが、以下頻繁に話題となる記事です。

↑

Examples

以下、様々なサンプルが紹介されています。
http://getbootstrap.com/getting-started/#examples

すべてのサンプルを含んだ圧縮ファイルは以下からダウンロードできます。
https://github.com/twbs/bootstrap/archive/v3.3.7.zip 　　2016.11.04現在
フォルダ内の docs > example と辿ると、その中に20個ほどのサンプルがあって、それぞれに、index.htmlとそれぞれ独自のCSSがあります。

その他参考

↑

様々なフレームワーク

↑

Google Material Design

Material Design とは、2014年にGoogleが提唱した UI/UX デザインのための基礎概念です。Googleがそのガイドラインを発表して以降、Google androidを中心にその成果を目にすることも多くなってきました。

以下、それに基づいて設計されたCSSフレームワークです。

Material Design Lite：https://getmdl.io/
Materialize：https://materializecss.com/
MDB：https://fezvrasta.github.io/bootstrap-material-design/
MUI：https://www.muicss.com/
Material-UI：https://material-ui.com/

以下のページに概要説明とサンプルを掲載しています。

MaterialDesign

↑

その他

Foundation
http://foundation.zurb.com/
Web Start Kit（Google）
https://developers.google.com/web/starter-kit/
SemanticUI
http://semantic-ui.com/
bulma
http://bulma.io/
SkyBlue CSS
http://stanko.github.io/skyblue/
Skeleton
http://getskeleton.com/
Responsive Grid System
http://www.responsivegridsystem.com/
Pure（Yahoo）
http://purecss.io/
960 Grid System　
http://960.gs/

CSS framework

Bootstrap

Download

BasicTemplate

Sample #1　→ DEMO

Sample #2　→ DEMO

Layout

Content

Documents

Examples

様々なフレームワーク

Google Material Design

その他

PAGES

GUIDE

DATA

CSS/Framework

CSS framework

Bootstrap

Download

BasicTemplate

Sample #1 → DEMO

Sample #2 → DEMO

Layout

Content

Documents

Examples

様々なフレームワーク

Google Material Design

その他

PAGES

GUIDE

DATA

Sample #1　→ DEMO

Sample #2　→ DEMO