■画像を中央に揃える
Bootstrap3で画像をレスポンシブにする方法はimg-responsiveを使いますが、左寄せになります。
センター寄せにしたい場合はcenter-blockを利用すればセンター寄せになります。
<img src=”…” class=”img-responsive center-block” >
text-centerやdivでtext-align:center;のセンタリングしてみましたがなかなかうまくいかず
margin:0 auto;でセンタリングしてくれるようです。
Bootstrap3にはcenter-blockクラスが用意されているのでこちらを画像のクラスに利用すれば大丈夫でした。
■スマートフォンでは非表示
表示・非表示を切り替えます。例えばヘッダー画像をPC用、タブレット用、モバイル用と用意しておき、それぞれ表示させるケースなど。
visible – モニターが当該のサイズになると表示
hidden – モニターが当該のサイズになると非表示
class=”hidden-xs” で-xsが非表示なる。
class=”visible-xs” で-xsがのみが表示
■丸数字を表示させる（CSS）
ol{
counter-reset: list_count;
}
ol li::before{
margin-right: .25em;
counter-increment: list_count;
content: counter(list_count);
display: inline-block;
line-height: 17px;
text-align: center;
height: 17px;
width: 17px;
border-radius: 50%;
font-size: 0.8em;
border: 1px solid #000;
}
■数字の前に文字を表示させたい（CSS）
数字だけのこともあれば、「その１」、「１番」など数字の前後に文字をつけたいことがあります。beforeのcontent内counterの前後に指定をすればそれも可能です。
ol{
counter-reset: list_count;
}
ol li::before{
margin-right: .25em;
counter-increment: list_count;
content: counter(list_count)’番’;
display: inline-block;
}
■（1）のような括弧付きリスト（css）
HTML
<ol class=”list_parentheses”>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ol>
CSS
ol.list_parentheses{
padding:0 0 0 2em;
margin:0;
}
ol.list_parentheses li{
list-style-type:none;
list-style-position:inside;
counter-increment: cnt;
}
ol.list_parentheses li:before{
display: marker;
content: “(” counter(cnt) “) “;
}