この写真の記事へ

見やすいUIを作れるフレームワークBootstrap4の使い方(画像)(19ページ目)

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
見やすくてレスポンシブなデザインが簡単に作成できるフレームワークBootstrap

見やすくてレスポンシブなデザインが簡単に作成できるフレームワークBootstrap

Bootstrapをダウンロード
Bootstrapの構成ファイル
吹き出しを表示する機能も簡単
Bootstrapを使ったサンプル
Bootstrapはバージョン別にウェブサイトがある
Bootstrap2を使ったサンプルページ
Bootstrap3を使ったサンプルページ
標準でレスポンシブ・ウェブデザインに対応
画面(ブラウザの幅)に応じて段組構造を変化させられる
見やすくてレスポンシブなデザインが簡単に作成できるフレームワークBootstrap
上端や下端に常時固定されるナビゲーションバーを作ることもできる
ナビゲーション項目は、狭い画面では畳まれて表示される
標準でレスポンシブWebデザインに対応
画面(ブラウザの幅)に応じて段組構造を変化させられる
上端や下端に常時固定されるナビゲーションバーを作ることもできる
ナビゲーション項目は、狭い画面では畳まれて表示される
最新バージョンのファイルをCDNサーバから読み込む記述を、そのままコピー&ペーストする
Bootstrap4の構成ファイルを読み込むHTML5ソースの記述例
見やすくてレスポンシブなデザインが簡単に作成できるフレームワークBootstrap

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます