ゲーム実況動画の編集で疲れ気味の犬吉です。

Bootstrapドキュメントのcssページ、続きを読んでいきます。
軽い気持ちではじめましたが、けっこう量がありますね。

目次

  1. 概要 – Overview
  2. グリッドシステム – Grid system
  3. 文字 – Typography
  4. コード – Code
  5. 表組み – Tables
  6. フォーム – Forms
  7. ボタン – Buttons
  8. 画像 – Images
  9. 補助 – Helper classes
  10. レスポンシブ – Responsive utilities
  11. Lessを使う – Using Less
  12. Sassを使う – Using Sass

Typography – 文字

Headings

.h1 〜 .h6が用意されてて、使用すると応じた文字の大きさになる。

h1タグだけど、h2のテキストサイズにしたいなどの時に対応できますね。

でこのシリーズのクラスの中で、<small>か.smallを使えば、部分的に文字サイズ変更ができて、
副タイトル的な表現ができますと。

Body copy

基準の文字サイズは14px, 行間は1.428。

装飾なしの<p>はこの設定。

Lead body copy

リードテキストの.leadが用意されてる。

って感じで使う。

Built with Less

これらを修正したいときは、

variables.lessっていうファイルに@font-size-base と @line-height-baseが書いてある。

Inline text elements

Marked text

<mark>タグで囲むとその部分がハイライトされるそう。

Deleted text

<del>タグは打ち消し線。削除の意味。

Strikethrough text

<s>タグも打ち消し線。すでに正確でない・関係ない内容に使う。

Inserted text

<ins>タグは、アンダーラインが付く。追記された文章に使用する。

Underlined text

<u>タグは、アンダーライン。あれこのタグ廃止予定じゃなかったけ?

Small text

.small と <small>は、親要素の文字サイズから85%のサイズにしちゃうぜ!

Bold

<strong>は、文字が太くなるよ。強い強調の意味で使うタグだね。

Italics

<em>タグは、文字がイタリック体になるよ。強調の意味で使うね。

Alternate elements

<b> と <i>は適当に使ってね。<b>は意味のない強調につかったり<i>は音声、技術用語に主につかうなどなど。

Alignment classes

行揃えのclassシリーズ

左揃え:text-left

中央揃え:text-center

右揃え:text-right

行端揃え:text-justify

自動改行禁止:text-nowrap

Transformation classes

大文字、小文字などの書式を変更するクラス。

文の先頭が大文字:text-lowercase

全部大文字:text-uppercase

単語の先頭が大文字:text-capitalize

Abbreviations

略称を表す<abbr>タグは、カーソルを載せた時にtitle属性の値が、チップで表示されるよ!

Basic abbreviation

ってな感じで使う。

Initialism

追加で.initialismを使うと、わずかに文字が小さくなるのかな?サンプル見ても実感できなかったけど。

Addresses

addressタグ内、行の最後は<br>を使うべし。

Blockquotes

引用・転載についての説明。

Default blockquote

<blockquote>を使うときには、さらにその中に<p>タグをつかってね。

Blockquote options

のオプションタグ。<footer>と <cite>の表示例。

<footer>はソース情報で、さらにその文章中で<cite>はソースタイトルに使う。

Alternate displays

.blockquote-reverseを使うと右揃えになるよ。

Lists

Unordered

リスト、ul、liタグの基本的な表示例。

Ordered

番号付きリスト、olタグの表示例

Unstyled

.list-unstyledを使うと、ul、olのスタイルをリセットされる。

Inline

.list-inlineは横に並べる時に使う。

Description

dlタグの表示例。

Horizontal description

dlタグに.dl-horizontalをつけると、dtとddが一行になる。

これ便利!

※dt部分はテキストが長いと表示が省略される設定になってるみたい。

 

コード – Code

Inline

文章中にタグが出てくる場合は<code>を使う。カッコ部分は&lt;などに置き換える必要があるみたい。

文字が赤で、ハイライトされる。

User input

キー入力を表す<kbd>タグを使うと、部分的に黒背景に白文字になる。

shift

サンプルでやってみた。このブログにもboostrap入ってるからね。これは便利。

Basic block

<pre>タグは、ソースコードに使う。

.pre-scrollableをつけると、高さ最大350pxでスクロール付きになるみたい。

Variables

<var>タグは、変数につければいいのかな?見た目は変化なさそう。

Sample output

<samp>タグは、サンプルにつける。

Tables

表組みに関して。

Basic example

まずは、基本的な構成。

テーブルのキャプション。
# 項目1 項目2 項目3
1 いぬ ワンワン dog
2 ねこ ニャー cat
3 とり チュンチュン bird

tableタグに.tableをつけるとこうなる。

Striped rows

.table-stripedをつけると、行がストライプになる。

テーブルのキャプション。
# 項目1 項目2 項目3
1 いぬ ワンワン dog
2 ねこ ニャー cat
3 とり チュンチュン bird

Bordered table

セル全体に線を引く場合は.table-borderedをつける。

テーブルのキャプション。
# 項目1 項目2 項目3
1 いぬ ワンワン dog
2 ねこ ニャー cat
3 とり チュンチュン bird

 

Hover rows

.table-hoverをつけると、カーソルをのせた行の背景がかわるようになる。

テーブルのキャプション。
# 項目1 項目2 項目3
1 いぬ ワンワン dog
2 ねこ ニャー cat
3 とり チュンチュン bird

 

Condensed table

.table-condensedをつけると、セル内の余白が減る。パディング8pxが5pxになってますね。

テーブルのキャプション。
# 項目1 項目2 項目3
1 いぬ ワンワン dog
2 ねこ ニャー cat
3 とり チュンチュン bird

 

 Contextual classes

行の色を変えたい時に使う。

class  説明
.active ホバーの時の色
.success 成功した時など
.info 良くも悪くもない、中立的
.warning 注意や警告色
.danger 危険や否定
# 普通はこの色

 

色を替えても スクリーンリーダー使用者には伝わらないので、配慮する場合は.sr-onlyを使って工夫してね。

Responsive tables

.table-responsiveをつけると、表組みがレスポンシブ対応になるぜ!

とまあ、話はそんな簡単ではなく注意事項がいくつかある。表組みは、小さい端末に合わせて縮小すれば、読めないほど小さくなってしまう。かといって安易に並び替えれば、意味合いが変わってきたり、可読性が著しく悪くなる。なので768px以下は、表示を切ってしまって、横スクロールをつけようってのが、ここでいうレスポンシブテーブル。

# 項目1 項目2 項目3 項目4 項目5 項目6 項目7
1 いぬ ワンワン dog dog dog dog dog
2 ねこ ニャー cat cat cat cat cat

 

使い方で注意点。いままでのようにtableタグやtrタグにclassをつけるのではなく、

tableタグの周りにdivを用意して、それにclassをつける。

とします。

続き

つづきはこちら

Trackbacks/Pingbacks

  1.  【cssページ編 1/5】Bootstrapのドキュメントを読んでみた | 8bit8px フロントエンドエンジニア備忘録 by LuckyDogWorks

Comments are closed.