2015年1月23日ゲーム実況動画の編集で疲れ気味の犬吉です。Bootstrapドキュメントのcssページ、続きを読んでいきます。軽い気持ちではじめましたが、けっこう量がありますね。.h6が用意されてて、使用すると応じた文字の大きさになる。h1タグだけど、h2のテキストサイズにしたいなどの時に対応できますね。副タイトル的な表現ができますと。装飾なしの<p>はこの設定。copyリードテキストの.leadが用意されてる。class="lead">...</p>って感じで使う。@line-height-baseが書いてある。text<mark>タグで囲むとその部分がハイライトされるそう。text<del>タグは打ち消し線。text<s>タグも打ち消し線。正確でない・関係ない内容に使う。text<ins>タグは、アンダーラインが付く。追記された文章に使用する。text<u>タグは、アンダーライン。<small>は、親要素の文字サイズから85%のサイズにしちゃうぜ!Bold<strong>は、文字が太くなるよ。強い強調の意味で使うタグだね。Italics<em>タグは、文字がイタリック体になるよ。<i>は適当に使ってね。<b>は意味のない強調につかったり<i>は音声、技術用語に主につかうなどなど。classes大文字、小文字などの書式を変更するクラス。title="attribute">attr</abbr>ってな感じで使う。Initialism追加で.initialismを使うと、わずかに文字が小さくなるのかな?サンプル見ても実感できなかったけど。Addressesaddressタグ内、行の最後は<br>を使うべし。Blockquotes引用・転載についての説明。blockquote<blockquote>を使うときには、さらにその中に<p>タグをつかってね。optionsのオプションタグ。<cite>の表示例。<footer>はソース情報で、さらにその文章中で<cite>はソースタイトルに使う。displays.blockquote-reverseを使うと右揃えになるよ。ListsUnorderedリスト、ul、liタグの基本的な表示例。Ordered番号付きリスト、olタグの表示例Unstyled.list-unstyledを使うと、ul、olのスタイルをリセットされる。Inline.list-inlineは横に並べる時に使う。Descriptiondlタグの表示例。descriptiondlタグに.dl-horizontalをつけると、dtとddが一行になる。これ便利!※dt部分はテキストが長いと表示が省略される設定になってるみたい。CodeInline文章中にタグが出てくる場合は<code>を使う。カッコ部分は&lt;などに置き換える必要があるみたい。文字が赤で、ハイライトされる。inputキー入力を表す<kbd>タグを使うと、部分的に黒背景に白文字になる。shiftサンプルでやってみた。このブログにもboostrap入ってるからね。block<pre>タグは、ソースコードに使う。.pre-scrollableをつけると、高さ最大350pxでスクロール付きになるみたい。Variables<var>タグは、変数につければいいのかな?見た目は変化なさそう。output<samp>タグは、サンプルにつける。Tables表組みに関して。exampleまずは、基本的な構成。テーブルのキャプション。birdtableタグに.tableをつけるとこうなる。rows.table-stripedをつけると、行がストライプになる。テーブルのキャプション。tableセル全体に線を引く場合は.table-borderedをつける。テーブルのキャプション。rows.table-hoverをつけると、カーソルをのせた行の背景がかわるようになる。テーブルのキャプション。table.table-condensedをつけると、セル内の余白が減る。パディング8pxが5pxになってますね。テーブルのキャプション。classes行の色を変えたい時に使う。スクリーンリーダー使用者には伝わらないので、配慮する場合は.sr-onlyを使って工夫してね。tables.table-responsiveをつけると、表組みがレスポンシブ対応になるぜ!とまあ、話はそんな簡単ではなく注意事項がいくつかある。表組みは、小さい端末に合わせて縮小すれば、読めないほど小さくなってしまう。いって安易に並び替えれば、意味合いが変わってきたり、可読性が著しく悪くなる。768px以下は、表示を切ってしまって、横スクロールをつけようってのが、ここでいうレスポンシブテーブル。cat使い方で注意点。いままでのようにtableタグやtrタグにclassをつけるのではなく、tableタグの周りにdivを用意して、それにclassをつける。class="table">...</table></div>とします。