HTML&CSS

Bootstrapの使い方(6)〜ナビゲーションバーの作成

グローバルナビゲーションとして使用できるナビゲーションバーの作成方法です。 ナビゲーションバーを作成するには少し複雑なタグとクラスを使用することになります。 Bootstrap本家のサンプルを確認してみましょう。 基本的なナビゲーションバーのサンプル 基本的なナビゲーションバーのHTML(Bootstrapのページサンプルより) これをそのまま使用してリンク部分を変更すればOKというわけですが、折角だからバラバラにして構造を知っておきましょう。 ナビゲーションバーの必須パーツ サンプルのナビゲーションバーは少し複雑でわかりにくいですね。もっとシンプルに使いたい場合もあるでしょうし、シンプルなものに独自なデザインを取り入れたい要望もあるかもしれません。 ここでは最低限必要な構成を確認してみます。 navタグのclass ナビゲーションバーのシンプルサンプル HTMLコード ナビゲーションバーとして最低限必要なパーツは次のとおりです。 nav要素にnavbarとnavbar-defaultのクラス名を付けます。navbar-defaultをnavbar-inverseとすると黒系の配色になります。 つぎにul要素にnavとnavbar-navクラスをつけます。 カレントページにはactiveクラスをつけます。 クラスnavbarのçss内容は高さの指定とボーダーの指定、そしてposit  >>続きを読む

Bootstrapの使い方(5)〜ボタンの作成

Bootstrapを使うと手軽に見栄えのよいデザインでしかも使い勝手のよいボタンやナビゲーションを作成することができます。 buttonタグでボタンの作成 Bootstrapを使ってボタンを作成するには、buttonタグにクラス名 btnと、ボタンの色を指定するbtn-○○ を指定します。 ボタンの色指定クラス クラス名 ボタンの色 btn-default 白 btn-primary 青系 btn-success 緑系 btn-info ライトブルー btn-warning 黄系 btn-danger 赤系 btnクラスとボタンの色を指定するbtn-○○ をあわせて使用します。 buttonタグを使ったボタンのサンプル HTMLコード例 リンクボタンの作成 リンク用のボタンを作成する場合はaタグにbtnクラスとボタンの色を指定するbtn-○○ をあわせて使用します。 リンクボタンのサンプル HTMLコード例 補足 リンクボタンにbuttonタグは使用できません。 buttonタグの子要素としてa要素を使用することはできません。また、aタグでbutton要素を囲むこともできません。これはよく間違って使用されていますが、文法的には間違いです。buttonタグはjQueryなどのスクリプトのクリックイベント用に使用します。 a要素はHTML5からp要素やdiv要素を囲めるようになりました  >>続きを読む

Bootstrapの使い方(4)〜レスポンシブ対応

レスポンシブWebデザインは一つのファイルで複数のデバイスに対応させることができる仕組みです。スマホサイトの重要性はますます高くなっていますので、サイト作成イコールレスポンシブ対応は当たり前になってきています。 スマホ用とPC用を考慮して設計するのは結構手間がかかりますが、Bootstrapを使うと簡単にレスポンシブに対応してくれます。 デバイスの画面に応じて列幅を変更 デバイスの画面幅に応じてレイアウトを変更する仕組みはCSS3のメディアクエリを使います。 レイアウトを切り替えるポイントになる画面幅をブレイクポイントと呼びます。 Bootstrapでレスポンシブに対応させるにはグリッドシステムを活用します。 Bootstrapのグリッドシステムではあらかじめブレイクポイントが決められています。 ブレイクポイント ウインドウ幅 デバイスの種類 0px以上 スマートフォン 768px以上 タブレット 992px以上 ノートPC 1200px以上 大画面PC Bootstrapが用意している.containerのCSS記述を見ると次のようにブレイクポイントが設定されており、それぞれのブレイクポイントで.containerの幅を切り替えています。つまり.containerを使用すればデバイスが変われば表示幅が変更されることになるわけです。 .containerのcss記述(抜粋) グリッ  >>続きを読む

Bootstrapの使い方(3)〜グリッドシステムの活用方法

Bootstrapのグリッドシステムの仕組みを更に掘り下げてみます。 Bootstrapを使用するときに注意する点はボックスモデルの概念が通常と違うところです。 Bootstrapは通常のボックスモデルではありません。border-boxです!! レイアウトの幅を算出するときはこの事をふまえておく必要があります。 Bootstrapでは全ての要素にいきなり次のように初期化を行っています。 Bootstrapでは内容領域(width)にパディングとボーダーが含まれます。通常のボックスモデルは内容領域(width)にパディングとボーダーは含まれません。 グリッドシステムの基本構造 グリッドシステムの基本構造は次のようになります。 containerまたはcontainer-fluidでグリッドを囲むと15px余白をつくる。 行を作成する要素(divなど)にrowクラスを適用すると-15px余白をつくりcontainerの余白と相殺されて結局余白は0になる。 カラムを作成する要素(divなど)にcol-xs-N(xsの他にxs,sm,md,lgがある)クラスを適用する containerまたはcontainer-fluidで左右のmarginを15pxとり、rowで左右のmarginを-15pxとしている点がポイントです。 左右のmarginを15px以外の値にしたければカスタマイズ用の  >>続きを読む

Bootstrapの使い方(2)〜グリッドシステム

グリッドデザインとは グリッドデザインとは、均等なマス目に分割して、そのマス目に沿って各部品を配置していくデザインです。 有名なものに「960 Grid System」があります。 Webサイトを作成するときにグリッドデザインを活用すると統一感のあるページができあがります。 Bootstrapのグリッドシステムではクラス名を指定することで簡単にグリッドレイアウトを作成することができます。 面倒なfloatの設定を自分で行ったり、レスポンシブの対応を考えたりする必要もありません。 Bootstrapを活用したグリッドデザイン Bootstrapでグリッドデザインを行うには、divに決められたクラス名を命名していきます。 ちょうどテーブルを作成するとき、まずtableタグを使用するように、Bootstrapのグリッドシステムでは、divにクラス「container」または、「container-fluid」を命名してコンテナを作成します。 複数行のカラムを作成する場合は、テーブル作成のとき「tr」で行の指定をするように、Bootstrapのグリッドシステムでは、行をdivで作成してクラス「row」を指定します。 そしてカラム作成は、テーブル作成のとき「td」でセルの指定をするように、カラムをdivで作成してクラス「col-xs-N」で指定します。 コンテナの作成 コンテナを使用すると左  >>続きを読む

Bootstrapの使い方(1)〜準備

BootstrapはCSSフレームワークのひとつです。自分で一からCSSを構築しなくても簡単に使い勝手の良いデザインのWebサイトを作成することができます。面倒なレスポンシブサイトも簡単にできあがります。 HTMLとCSSの基本をマスターしたらBootstrapを活用して制作の効率化をはかることも重要な手段です。 Bootstrap使用のポイントはすべてBootstrapの決まり事に頼るのではなく、効率化したい部分でうまく活用することではないでしょうか。 この記事はHTMLとCSS、jQuery、JavaScriptの基礎をすでに習得されている方を対象に書いています。 Bootstrap導入 Bootstrapを使用するには用意されたファイルをダウンロードする必要があります。以下の本家からダウンロードします。 Bootstrap本家のページ Bootstrap本家のページから「Getting startd」を選択して「Download Bootstrap」(下図赤枠)をクリックしてダウンロードします。(2015/4現在) Bootstrap CDNを使用する場合はBootstrap本家のページから「Getting startd」を選択したページにリンク先の情報がありますのでコピペして使用します。 今回はデータをダウンロードして使用します。ファイルの構成なども同ページに記載されていま  >>続きを読む

jQuery Mobile1.4でスマホサイト作成4〜テーマの変更

data-thema属性で変更できるテーマは、jQuery Mobile 1.4の場合は「a」(白ベース)と「b」(黒ベース)の2種類のみです。 data-theme=”a”またはdata-theme=”b” ThemaRollerの使い方 ThemaRollerを使用して独自テーマを作成することができます。各パーツの配色などが簡単に行えます。 ThemaRollerのページ ページが開くときにPOPアップが表示されたらGet Rollingをクリックしてください。 左サイドのGlobalタブで全般の設定を行います。 Font Familyでフォントの設定 Corner Radiiでグループ化している矩形の角丸設定、ボタンの角丸設定 Icon diskを付けるかどうか、またdiskの色と透明度の設定 Box Shadow Box Shadowの設定 A,B,Cのタブを選んだ状態でそれぞれAパターン、Bパターン、Cパターンの配色の設定ができます。 上部のInspector onにするとそれぞれの部位を選択すると左サイドの対象メニューが選択されます。 通常はこの方法をとるとよいでしょう。 配色は上部のパレットの色を対象の部位にドラッグして着けていきます。 テーマの作成が完了したらダウンロードして使用します。 上部のDownloadをクリッ  >>続きを読む

jQuery Mobile1.4でスマホサイト作成3〜開閉式コンテンツとPOPアップ

完成例サンプル リストをうまく利用することで小さなモバイル画面で情報を見やすく整理することができます。 リストビューの作成 リストの作成はul要素にdata-role=”listview”属性を付加します。a要素でリンク設定すると右向きの矢印が表示されます。 また、li要素にdata-role=”list-divider”属性を付加するとそのli要素は見出しになります。 全体を角丸にするにはdata-inset=”true”を付加します。 リストビューの作成 data-role=”listview” リストビューの例 開閉式コンテンツの作成 もともとjQueryを使用しているので開閉式のコンテンツは簡単です。 div要素にdata-role=”collapsible”属性を付加します。divの中にはh1~h6のどれかを配置してその後にdivやp要素を配置して開閉式のコンテンツを作成します。 開閉式コンテンツの作成方法 div要素にdata-role=”collapsible”を指定 タッチする部分はh1~h6 可動部分はpかdiv 作成例 ポップアップの作成 a要素にdata-rel=”popup”を付加して、指定し  >>続きを読む

jQuery Mobile1.4でスマホサイト作成2〜ボタンの作成

完成例サンプル リンクボタンの作成 リンクボタンの作成は簡単です。a要素にclass=”ui-btn”というクラスを指定するだけです。 リンクボタンの作成は旧バージョンから1.4になってから大きく変更されていますので注意してください。 data-属性からクラスでの指定に変更されています。 リンクボタンはブロックレベル要素でできています。インライン要素のリンクボタンを作成するにはクラス名にui-btn-inlineを追加します。インライン状態にするとfloatされて横並びになります。 ブロック要素のボタン class=”ui-btn” インライン要素ボタン class=”ui-btn ui-btn-inline” ブロックレベルのリンクボタンでサイズを小さくする場合はui-miniというクラス名を追加します。 旧記法 新記法 意味 data-role=button class=ui-btn ボタン作成 data-theme=a class=ui-btn-a テーマ指定 data-corners=true class=ui-corner-all 角を丸める data-shadow=true class=ui-shadow 影をつける data-mini=true class=ui-mini 小さいボタン data-  >>続きを読む

jQuery Mobile1.4でスマホサイト作成1〜文書構造作成

jQuery Mobileのバージョン1.4では、従来バージョンから変更があります。1.4に対応した記述方法を学習します。 jQuery Mobileの準備 モバイルページサンプル meta要素にviewportの設定を記述します。Viewportを指定することで表示サイズを設定することができます。 viewportについて ライブラリの読み込みはCDN(Contents Delivery Network)で行います。オンライン環境で使用する場合はCDNの方がレスポンスが良いと言われています。これはサーバーが分散されるためです。 jQuery Mobileのページ Copy-and-Paste snippet for jQuery CDN hosted files:と書かれている部分をhead内にコピペします。 参考例 data-roleで文書構造を作成 マルチページの作成 Homeページと下層ページを別々のファイルに分けて作成する既存のページ作成方法と、ひとつのファイルに複数のページをまとめて記述するマルチページ作成の方法があります。今回はマルチページ作成を説明します。 ページ領域 マルチページはひとつのファイルに複数のセクションを作成して各セクションをページ内リンクで移動する方法です。 Topページや下層ページなどそれぞれのページの領域をつくるセクション部分のタグにdata-r  >>続きを読む