[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
リストを横並びにしてセンタリングというのはよく使う。ただよく使う(われる)わりには「これ！」というようなテクニックがないような気がする。inline-blockで並べた場合は項目の間に隙間ができ、floatで並べた場合はセンタリングがトリッキーすぎる。気分で色々使い分けてたけど最近はdisplay: inline-tableをよく使うようになって、これで良いかなーという感じ。
<nav class="paging">
<ul>
<li><a href="foo">Prev</a></li>
<li><a href="bar">Next</a></li>
</ul>
</nav>
というようなマークアップの一般的なページング・ナビゲーションだと、
.paging {
text-align: center;
}
.paging ul {
display: inline-table;
}
.paging li {
display: table-cell;
}
という形で行う。display: tableだと幅が明示されてないとセンタリングできないのでinline-tableのが手軽で良い。.pagingのようなラッパー要素がないと実現できないのでマークアップに依存するというのが一番大きな欠点。
input:focus, select:focus, textarea:focus {
outline: 2px #ff0000 dashed;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| outline | 太さ、色、スタイル | アウトライン（太さ、色、スタイル）を指定 |
アウトラインの指定方法については、outlineプロパティをご覧ください。
アウトラインのスタイルは、以下の値で指定します。
値には，コンマ（.）を使って指定します。「0.1」「0.8」「0.555」と小数点以下を指定することも出来ます。
border、padding、background、img、テキスト、他のプロパティ
