LIFE is 日々一歩(33)[Web]Bootstrapの使い方をまとめてみた(2)/森 和恵

投稿:  著者:  読了時間:8分(本文:約3,500文字)


こんにちは! 森和恵です。先日、ビールティスト飲料というものを初めて飲みました。そう、ノンアルビールって奴です。

若い頃は、ビールをチェイサーにウイスキーロックを愛飲していた方でして、「ノンアルなんて! フッ」と小馬鹿にしていたものですが、甘くない炭酸飲料として意外にいいかもしれません。ご飯にも合うしね。

え? なんで好まないものを飲んでるか? ですか…。

今月末から、オールフリー×おそ松新作動画キャンペーンがありまして、その応募券を集めているところなんですよ。最低でも24本は消費しないとならない予定なのです。折角だったら、美味しく思って飲みたいじゃないですか。ねぇ。

・オールフリーと楽しむ、この夏イチオシ物語 キャンペーン
http://allfreecp.jp/apc/sscp/B1606ALF/top.html

さてさて。今回は、Bootstrapの2回目です。

前回は、Bootstrapが動くようにHTMLページにCSSやらJavaScriptを組み込むところを話しました。

【Bootstrapの使い方をまとめてみた(1)】
http://blog.dgcr.com/mt/dgcr/archives/20160530140100.html

今回は、<h1> や <p> など基本タグに付加されたスタイルを確認していきましょう。よく見ていないと気づかないぐらいの地味〜なスタイル調整なのですが、きれいに作るための下地としてけっこう効いてくると思います。



“Typography”のカテゴリでは、基本のタグにつけられた文字修飾のスタイルを確認できます。公式の仕様書を読んでいくとわかるのですが、地味な部分にもしっかりとスタイルが準備されています。
http://getbootstrap.com/css/#type

以下のURLで、Bootstrap使用前と後を見比べながら、確認してみてください。

【Bootstrap使用前】
http://r360studio.com/dgcr/bootstrap/step2-before.html

【Bootstrap使用後】
http://r360studio.com/dgcr/bootstrap/step2.html


●Body copy(本文)
http://getbootstrap.com/css/#type-body-copy

まずは、本文に指定されたスタイルを紹介します。

本文には、基本的に <p> を用います。デフォルトで指定されるのは、font-sizeが14px・line-heightが1.428です。

英文ならきれいなのですが、日本語の文字に割り当てると少し行間が狭いような気がしますね(ここは、調整方法を別の回でお話しする予定)。

margin-bottomは、line-heightの半分のサイズが指定されます(デフォルトは10px)。

<p class="lead"> と <p> にCSSのクラスセレクタ“.lead”を付加するとリード文(要旨)の指定ができます(リード文に指定すると文字が少し大きくなります)。


●Headings(見出し)
http://getbootstrap.com/css/#type-headings

<h1>〜<h6>までの見出し要素にシンプルなデザインが準備されています。要素内に <small> で副題をつけることもできます。

<h1>見出し1<small>見出し1の副題</small></h1>

とすると、<small> 要素内の文字が小さめ・薄めの文字になり、見出しの横に配置されます。タイトルとキャッチコピーのようなレイアウトを簡単に指定できますね。

ちなみにマニュアルには掲載されてないようですが、<hr>もきれいな極細線になりますよ。

●Alignment classes(行揃えのクラス)
http://getbootstrap.com/css/#type-alignment

ブロックタグのalign属性のように扱える行揃えと折り返し禁止のためのクラスです。“<p class="text-left">”のように指定します。

左揃え(text-left)・中央揃え(text-center)・右揃え(text-right)・両端揃え(text-justify)・折り返さない(text-nowrap)があります。CSSがでてから、align属性は非推奨(使わない方がよい)となっているため、同じような感覚で使えるのは便利ですね。

●Abbreviations(略語)
http://getbootstrap.com/css/#type-abbreviations

“略語”を示す <abbr> タグに、title属性をつけて“略語の解説文”を指定します。見た目と動きは、略語に破線で下線が表示され、マウスでポイントするとポップアップで解説文が表示されます。

●Blockquotes(引用)
http://getbootstrap.com/css/#type-blockquotes

“引用”を示す <blockquote> タグには、左側にボーダー線が表示されます。また、<blockquote> 内に <footer> タグで、“引用元”を指定したり、<cite> タグで、“引用元のタイトル”を指定したりできます。

<blockquote class="blockquote-reverse"> と <blockquote>にCSSのクラスセ
レクタ“.blockquote-reverse”を付加すると、
引用文全体を右寄せに配置します。

●Lists(リスト)、Description(順不同リスト)
http://getbootstrap.com/css/#type-lists
http://getbootstrap.com/css/#description

リスト系タグの <ul>・<ol>・<dl> にもきちんとスタイルが割り当てられています。

<ul class="list-unstyled"> と <ul> や <ol> にCSSのクラスセレクタ
“.list-unstyled”を付加するとリストマーカー(リストの行頭マーク)と左側の余白(marginとpadding)を非表示にします。

<ul class="list-inline"> と <ul> や <ol> にCSSのクラスセレクタ
“.list-inline”を付加するとインライン表示にし、左右に5pxの余白をもうけてリスト項目を横並びにします。

<dl class="dl-horizontal"> と <dl> にCSSのクラスセレクタ
“.dl-horizontal”を付加すると用語と説明を水平に並べて表示します(2列の表組みのような感じ)。レスポンシブに対応していて、画面幅768未満になると元の垂直表示に戻します。

…というわけで、今回はこの辺まで。

Bootstrapで基本タグの表示を確認ました。HTMLタグをデフォルトのまま使うとダサダサで嫌になっちゃうのですが、Bootstrapが何もしなくてもいい感じに整えてくれます。CSSを書かなくてもやってくれるというのが嬉しいところですね。

今回紹介したタグ以外にも細かい部分でいろいろと調整がされています。公式仕様書の“Typography”を再度確認してみてくださいね。

さて次回は基本タグの発展系で、フォーム、テーブル、画像やボタンなどちょっと特殊なコンテンツに付加されるスタイルを確認していきます。(もしかしたら、そろそろ夏アニメになるので、そちらを書くかもしれません。この夏のアニメは豊作ぞろいだそうで、楽しみです)

ではでは、また!(^^)


【 森和恵 r360studio 〜 Web系インストラクター 〜 】
site: http://r360studio.com
mail: r360studio@gmail.com
Twitter: http://twitter.com/r360studio

web系の担当講座、6・7月でAdobeソフトの入門・実践講座をやります。
好評受付中です。お申し込みはお早めに。
http://r360studio.com/seminar/