Sun >うぇぶのーと >うぇぶ日誌

このページは、ブログ形式の「うぇぶ日誌」を紹介しています。

Bootstrap 2017/04/14

ソフト開発している友人から聞いた「Bootstrap」を調べた。CSSのフレームワークで、CSSの枠組み・スタイルがある程度最初から定義されているライブラリファイルだ。
もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていたが、現在は「Bootstrap」のみになっている。
Bootstrapは、レスポンシブWebデザインに対応している。レスポンシブWebデザインとは、単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法を言う。
基本的にはマルチデバイスに対応させる手法として、以下の3つのキーワードがある。

  1. グリッドシステム

    サイトの横幅を均等に分けるガイドラインを「グリッド」と呼び、Bootstrapでは12本のグリッドがある。グリッドに沿って表示物を配置すると、パソコンやスマホなど画面幅が異なってもレイアウトを組み替えやすくなる。このグリッドを活用してレイアウトできる仕組みを「グリッドシステム」と言う。

  2. フルードイメージ

    画像のサイズをデバイスの可変に合わせて、画像の表示領域も変化させる手法
    max-width: 100%;

  3. メディアクエリ

    CSS3で追加されたメディアクエリは、コンテンツを各デバイスの出力幅に合わせて表示することができ、コンテンツそのものを個別に調整する必要がなくなる。本サイトはこの「メディアクエリ」を用いて、767px以下のデバイス(スマホ)と768px以上のデバイス(パソコン・タブレット)でcssを切り替えている。
    <link rel="stylesheet" href="phone.css" media="screen and (max-width:767px)">
    <link rel="stylesheet" href="pc.css" media="screen and (min-width:768px)">

▲ページの先頭へ

Firefoxの開発ツール 2015/04/25 open

伝わるデザインの基本を読んで… 2014/10/05 open

フィルタリングのホワイトリスト方式 or ブラックリスト方式 2014/07/21 open

ホームページは何故テキストファイルなのか? 2014/07/12 open

Lightbeam 2014/02/04 open

a:hover 2014/01/12 open

scratch 2013/07/17 open

▲ページの先頭へ