LogoMark.png

CSS/Framework

CSS framework


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


Bootstrap


Download

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

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

このフォルダ内に 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 を指定することで、スタイルが適用されるようになります。以下、サンプルを2つ紹介します。

Sample #1 → DEMO

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

Sample #2 → DEMO

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


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

Layout

Content

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

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フレームワークです。

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


その他

PAGES

GUIDE

DATA

添付ファイル: fileBootstrapSample01.zip 288件 [詳細] fileBootstrapSample02.zip 313件 [詳細]
Last-modified: 2020-02-02 (日) 17:31:22