PROGRAMMING
CSS
- リスト(li)を中央に配置する
- ブロックレベル要素全体をリンクにする
- 実践と点線の交わり部分のギザギザをすっきりさせる
javascript
- JS-Image-Resizerを使って画像を高画質で縮小
- ファイルを作成しローカルに保存
- 前月・翌月の日付を埋め込んだカレンダーを作る
- モーダルウィンドウをクラス化
- ストップウォッチを作る
- XMLHttpRequest Lebel2を試してみる
- ページャーを作る（簡易版）
- jQuery：Tableで親・子・兄弟要素を取得
- ページャーを作る
- 文字列をセパレータ文字で分割し配列で返す関数
- forループのカウンタを使用している関数の定義
- クロージャの使いどころ
- JSONPでクロスドメイン
- AjaxでJSON形式のデータを扱う
- jsファイルからjsファイルを呼び出す
- 祝休日対応のカレンダーを作る
- jQuery：モーダルウィンドウを作ってみる
PHP
Java
SQL
リスト(li)を中央に配置する
リストをナビメニューなどに使用するとき中央に配置したいときがあります。
そういう場合は、floatを使う方法とdisplayのinline-blockを使う二つの方法があるので、
その二つをメモっておきます。
floatを使う方法
<div id="sample1">
<ul>
<li>ドイツ</li>
<li>インド</li>
<li>スイス</li>
</ul>
</div>
#sample1 {
position: relative;
overflow: hidden;
border: 1px solid #aaaaaa;
}
#sample1 ul {
position: relative;
left: 50%;
float: left;
}
#sample1 ul li {
position: relative;
left: -50%;
float: left;
border: 1px solid #aaaaaa;
margin: 5px;
}
まず、positionをrelativeにします。
ulの先頭を右に50%ずらし中央に持ってきます。分かりやすいように色を着けてあります。
liを-50%としてulでずらした分を戻すことで中央に配置されるということです。
- ドイツ
- インド
- スイス
overflowはulの右側がulを囲むdivからはみ出た場合の対策です。
displayのinline-blockを使う方法
<ul id="sample2">
<li>ドイツ</li>
<li>インド</li>
<li>スイス</li>
</ul>
#sample2 {
text-algin: center;
}
#sample2 li {
display: inline-block;
border: 1px solid #aaaaaa;
margin: 5px;
}
liのdisplayをinline-blockにし、囲むulをtext-algin:centerにするだけです。簡単で良いですね。
inline-blockは、imgのように「幅・高さ・margin・paddingが指定できるインライン要素」といえます。
- ドイツ
- インド
- スイス
liにfloatの例と同じmarginをセットしてもli間の隙間が広いのは、リストタグの後に改行するとその改行を半角スペースとして表示されるからです。 改行しなければ隙間はできません。letter-spacingを使って隙間を削除するという方法もあるようです。