Bootstrap2.0が標準で導入されるようになっているみたいです。そこで、今日は誰でも簡単にTwitterBootstrapが使えるように基本的な事を調べてみたいと思います。導入方法を調べてみましょう。Bootstrapの必要ファイルをダウンロードします。現在の最新バージョンがv2.0.4です。ダウンロードしたZipファイルを解凍したら、中の3つのフォルダ(css,img,js)を適当な箇所(同じ階層)に保存します。jsファイルを使うために必要なjqueryのファイルをダウンロードします。※jqueryのファイルはダウンロードしなくてもCDNで直接使用することが出来ますが、一応ダウンロードしてjsフォルダに保存する方法も覚えておきましょう。下記のサイトよりjqueryファイルをダウンロードします(最新のバージョンはv1.8.0です)。ブラウザによっては、ダウンロードファイルをクリックすると、ずらずらと文字が表示され戸惑うかもしれませんが、右クリックで、『名前を付けて保存』をクリックすれば、ダウンロードすることが出来ます。※オペラの場合はメニュー→ページ→保存でダウンロードできます。それでは、ダウンロードしたTwitterBootstrapとjqueryのファイルを読み込むための基本的な記述方法を下記に記載しておきます。jsファイルは</body>の直前に読み込むこと、bootstrap.jsの前にjqueryのファイルを読み込むことです。※尚、基本的にmin.cssやmin.jsとminがついているファイルを読み込むようにして下さい(ファイル容量が軽いので)。基本的な記述方法が分かったら、次は基本構造です。Bootstrapは、デフォルトでは、横幅940pxのサイトを12個のグリッドという塊(コラム)で構成するグリッドシステムで出来ています。Bootstrapでは、サイトの大枠をcontainerという名前のクラスで囲みます。その中を分割するためにはrowクラスを作成して、rowクラスの中にグリッド幅に合わせてspan1~span12で指定します。段組を入れ子にすることも出来ます。その場合も入れ子の元になるdivタグの下にさらにrowクラスを作成して、そのrowクラスの幅の範囲内で作成します。上の例でいえば、span8のメインコンテンツを入れ子にする場合、メインコンテンツの中にrowクラスを作成して、span8の範囲で分割(例えば5:3)して作成します。Bootstrapの場合、divタグの数はかなり多くなる可能性がありますので、終了タグの打ち忘れに注意しましょう。上記の場合、サイトの幅は940pxで固定されていますが、サイトの幅に合わせて伸縮するサイトも簡単な設定で作成することが出来ます。cotaninerクラスとrowクラスをcontainer-fluidクラス、row-fluidクラスに変更するだけで簡単に作成することが出来ます。上記のレイアウトでもほとんどのデバイスに対応できるのですが、よりデバイスごとに最適なレイアウトを作成する為のレイアウト法がレスポンシブレイアウトです。レスポンシブレイアウトはPCに適したレイアウト、タブレットに適したレイアウト、スマートフォンに適したレイアウトとそれぞれのメディアに対応できるように文字の大きさだけで無く、3段組が2段組になったり、1段組になったりと色々変化します。そのレスポンシブレイアウトを使うには、bootstrap.min.cssの後に、bootstrap-responsive.min.cssを読み込むだけでOKです。※尚、bootstrap.min.cssの前にビューポートを指定し忘れないようにして下さい。それぞれのデバイスごとのレイアウトを変更したい場合は、メディアクエリーで指定されている箇所を変更します。それぞれのデバイスに応じて表示、非表示を切り替えることも可能です。class="visible-phone"と指定するとスマートフォンのみ表示することが出来ますし、逆にclass="hidden-phone"と指定するとスマートフォンのみ非表示にすることが出来ます。TwitterBootstrapを使用する上で、便利な機能の1つがボタンの作成でしょう。class="btn"と指定するだけで簡単にボタンが作成できます。btn-primary"と指定すると濃い青色が、btn-dangerが赤色と簡単にボタン色も指定することができます。class="btn"標準的なグレーのボタンを作成します。btn-primary"濃い青色のボタンを表示します。btn-info"水色のボタンを表示します。btn-success"緑色のボタンを表示します。btn-warning"オレンジ色のボタンを表示します。btn-danger"赤色のボタンを表示します。btn-inverse"ほとんど黒に近い濃い灰色のボタンを表示します。複数のボタンをグループ表示したり、グループを複数表示したりすることも簡単にできます。class="btn-group"複数のボタンをグループ化します。class="btn-toolbar"ボタングループをbtn-toolbarで囲うことで、複数のボタングループを横に並べて表示します。ドロップダウンボタンも簡単に表示することが出来ます。ボタンの色や大きさ、メニューの右寄せ、左寄せなども指定することが出来ます。data-toggle="dropdown"必ずdata-toggle="dropdown"と一緒に使用します。class="caret"></span>ボタンに逆三角マークを表示するために使用します。class="dropdown-menu"ドロップダウンで表示されるメニューを定義するために使用します。Bootstrapはフォームも簡単に作成してくれます。フォームは基本的に4つのフォームレイアウトで出来ています。form-verticalラベルと入力欄が改行されて表示されます。formにクラス指定をしない場合、自動的にこれが適用されます。1~span12を指定することで決めることが出来ます。form-inlineラベルと入力欄が改行されずに横に並べて表示されます。form-search検索用のフォームが表示されます。form-horizontal複数の入力エリアを作成するときに、テーブル枠の中にきちんと並べて作成したようにきれいに左側がラベル、右側がフォームという風に作成してくれます。class="control-group">で囲む必要があります。上記のソースコードを下記に記述しておきます(公式サイトのソースコードそのままですが)。TwitterBootstrapはテーブルも簡単にレイアウトしてくれます。注意点は表題行に<thead>タグをデータ行に<tbody>タグを必ず指定するようにして下さい。下記のクラスを同時に複数指定することも出来ます。class="table"横幅が均等で、行間に薄いラインが表示されます。table-striped"枠がストライプ(1行ごとに背景色が変わる)表示になります。table-bordered"枠囲み(外枠と区切り線)が表示されます。table-condensed"1行の高さが標準のテーブルよりも低くなります。画像をサムネイル表示することが簡単にできます。サムネイルする画像の大枠をclass="thumnails"で囲みます。その中に表示する画像ごとにclass="thumnail"を指定します。通常、イタリック表示に使用するiタグにオプションクラスを指定することで、アイコンを表示することが出来るようになります。class="icon-アイコン名"icon-glace、icon-music、icon-search、icon-envelope、icon-star、他全部で140ものアイコンが用意されていますので簡単にワンポイントアイコンを付けることができます。class="icon-white"アイコンの表示色を白色に変更することが出来ます。ページの階層(現在位置)を表示するのに使用されるパンくずリストもulタグ要素にオプションクラスのbreadcrumbを指定することで簡単に作成することが出来ます。class="breadcrumb">ulタグ要素にbreadcrumbクラスを指定することでパンくずリストに適したレイアウトを提供してくれます。class="divider">/</span>階層の仕切りを表示するのにdividerを使用します。class="active">現在の階層</li>現在のページの階層をactiveによって指定することが出来ます。テキスト文字の好きな部分をlabelで囲むことで簡単にラベル表示ができます。文字色は、success(緑)、warning(オレンジ)、important(赤)、info(水色)、inverse(濃い灰色)を指定するだけです。上記のlabelの代わりにbadgeを指定することで、楕円形のバッジっぽい表示が出来ます。最近いろんなサイトで採用されているページトップのナビゲーションバー、このナビゲーションバーはページ全体の枠組みのcontainerとは別に作成します。2つのdiv要素navbarとnavbar-innerの中にナビゲーションバー用のcontainerを作成します。常にページトップにくっついているように表示させるにはnavbar-fixed-topを指定します。反対にページ下部にくっつけて表示させるには、navbar-fixed-bottomを指定します。サイト名(表題)は、class="brand"でサイト名を囲むことで表示することが出来ます。レスポンシブレイアウトでサイズが小さくなったときに、ナビゲーションをたたみ込む為の表示は、data-toggle="collapse"を指定します。data-target=".nav-collapse"に対して、表示したい箇所をclass="nav-collapse"で指定することで中身を表示することが出来ます。簡単なサイトならこれで作成することが出来ます。使って試してみて下さい。Bootstrapはかなり奥が深いです。いろんな便利クラスが用意されています。使って見て面白そうだなと思ったら、公式サイトで勉強して下さい。英語が苦手な人に日本語で丁寧に説明しているサイトを発見しましたので、ご紹介します。『Greenapple-room』というサイトで日本語でかなり丁寧に説明していますので、是非覗いてみて下さい。Bootstrapの使い方の講座がありますので、利用してみて下さい。テーブル行の非表示について15番で説明した表示、非表示の切替ですが、ブロック単位(グリッド単位)の表示しか考慮されていないみたいで、テーブル行にこれを指定すると不具合の出る箇所があります。例として、下記のようなテーブルの行を5列目と6列目を携帯の時に表示しないようにhidden-phoneを指定してみます。endforeach;?></tbody></table>確かに横幅が480px以下の時は、5列目と6列目を表示しません。ところが、PCサイズに変更すると、5列目と6列目が一緒になって2行で表示されるようになります。この対処法として、自分自身でクラスを作成する方法があります。TwitterBootstrapのcssファイルを保存した場所と同じ場所にmy-style.css(名前は任意)ファイルを作成して、下記のように記述します。sp-none(名前は任意)というクラスを作成して、480px以下の表示を記述するメディアクエリーにdisplay:none;を指定するだけです。}そして、bootstrap-responsive.min.cssファイルの後にmy-style.cssファイルを読み込みます。これで、先程のhidden-phoneをsp-noneに変更すれば、スマートフォン表示時のテーブル行の表示を減らすことが出来ますし、PC表示の時にも不具合はおきません。この非表示の方法は、あくまで表示しないだけで、データ自体は読み込んでいます。PC用に用意している容量の大きな画像が、この方法でスマートフォンで非表示にしてもアクセススピードが早くなるわけではありません。画像をたくさん使用するようなサイトの場合は、やはりPC用とスマートフォン用は作り分けた方がいいかもしれません。新人Webエンジニアの記録。こちらがおすすめです。コメントをキャンセルメールアドレスが公開されることはありません。...DreamweaverCS6.0の新機能を試してみました。本日、AdobeCS6.0が発売になりました。ダウンロードして、DreamweaverCS6.0の新機能を試してみたいと思います。Builderを試してみたいと思います。AFFINGER5.。