1|2|3|4レスポンシブに画像ファイルを自動で縮小/拡大させる自動で縮小/拡大させたい画像のimg要素のclassに「img-responsive」を指定すると、該当画像ファイルが画面サイズに応じて自動で縮小/拡大します。image"></div>sample4.htmlより抜粋sample4.htmlBootstrapデフォルトのp要素スタイルp要素のclassに「bg-***」(***はプロパティ名)を指定すると、スタイルを変更できます。スタイルのプロパティ名と概要」を参照してください。</div>sample5.htmlより抜粋sample5.htmlBootstrapデフォルトのナビゲーションスタイルBootstrapには、さまざまなナビゲーションのスタイルが用意されています。sample6.html以下基本ルール内で使用しましょう。ul要素にclass="nav"を記載Tabsul要素のclassに対して「nav-tabs」を追加します。</ul>sample6.htmlより抜粋Pillsul要素のclassに対して「nav-pills」を追加します。</ul>sample6.htmlより抜粋stackedul要素のclassに対して「nav-stacked」を追加します。nav-tabs"」に対して「nav-justified」を追加します。nav-pills"」に対して「nav-justified」を追加します。</ul>sample6.htmlより抜粋Bootstrapが気になったら公式サイトを活用しようBootstrapを利用すると既にスタイルが作成されているため、class名を指定するだけでシンプルですが、統一感のあるページが作成できます。冒頭でも説明していますが「テーマ」を無料で配っているサイトが多数ありますので、CSSを入れ替えるだけで違うスタイルを適用可能です。使用方法を理解し、適切にご使用いただければと思います。Bootstrap公式サイト内のメニュー「CSS」「Components」には、いままで説明してきた内容が事細かに記載されています。各要素に適用されるスタイル表示内容も確認できます。ある程度の基礎ができれば、サイトを見るだけでも使い方が分かってくると思います。Bootstrapの使用開始に、この記事が活用されれば幸いです。この記事を読んだ方は、公式サイトの情報も、ぜひ読んでみてください。MVPデジタルハリウッド講師を務めるほか@IT、日経ソフトウエア、SoftwareDesign、ITProなどへ寄稿。HTML5ビギナーズ(html5jビギナー部)で勉強会を毎月or隔月開催中。ヒカ☆ラボなどのセミナーやイベントにも登壇中。alpha」がリリースされた。中の人に聞く、Bootstrap対応を強化するDreamweaverの新機能と今後、コーディングが捗る裏技とはもうすぐ2015年2度目の大きな機能追加が予定されているDreamweaverについて、機能追加の方向性や、あまり知られていない裏技などを開発担当者に聞いた。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。