PROGRAMMING
CSS
- フォルダ構成をCSSで見やすくする
- シンタックスハイライトPrismのカスタマイズ
- リスト(li)を中央に配置する
- ブロックレベル要素全体をリンクにする
- 実践と点線の交わり部分のギザギザをすっきりさせる
javascript
- ページャーを作る(簡易版)
- ページャーを作る 4/4
- ページャーを作る 3/4
- ページャーを作る 2/4
- ページャーを作る 1/4
- 自作カレンダーを作る 6/6
- 自作カレンダーを作る 5/6
- 自作カレンダーを作る 4/6
- 自作カレンダーを作る 3/6
- 自作カレンダーを作る 2/6
- 自作カレンダーを作る 1/6
- JS-Image-Resizerを使って画像を高画質で縮小
- ファイルを作成しローカルに保存
- モーダルウィンドウをクラス化
- ストップウォッチを作る
- XMLHttpRequest Lebel2を試してみる
- jQuery:Tableで親・子・兄弟要素を取得
- 文字列をセパレータ文字で分割し配列で返す関数
- forループのカウンタを使用している関数の定義
- クロージャの使いどころ
- JSONPでクロスドメイン
- AjaxでJSON形式のデータを扱う
- jsファイルからjsファイルを呼び出す
- jQuery:モーダルウィンドウを作ってみる
PHP
Java
- IntelliJ.Gradle.JavaFX(6) プラグイン org.beryx.jlink を使ってみる
- IntelliJ.Gradle.JavaFX(5) NSISでインストーラーを作る
- IntelliJ.Gradle.JavaFX(4) exewrapで実行可能jarをexe化する
- IntelliJ.Gradle.JavaFX(3) Jlink でカスタム JRE を作る
- IntelliJ.Gradle.JavaFX(2) すべての依存対象を含んだ Fatjar を作る
- IntelliJ.Gradle.JavaFX(1) アプリケーションを作る
- javaのコンパイルと実行
- イメージを回転する
- Exif情報を簡単に取得できるライブラリ
- 高画質で画像縮小
- JDBCによるデータベース操作
リスト(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;
background-color: #cccccc;
}
#sample1 ul li {
position: relative;
left: -50%;
float: left;
border: 1px solid #aaaaaa;
margin: 5px;
}
まず、positionをrelativeにします。
ulの先頭を右に50%ずらし中央に持ってきます。分かりやすいようにulに色を着けてあります。
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をセットしても、floatの例と比べてli間の隙間が少し広くなっています。 これは、liタグの後に改行するとその改行を半角スペースとして表示されるからです。 改行しなければ隙間はできません。letter-spacingを使って隙間を削除するという方法もあるようです。