PROGRAMMING
javascript
- JS-Image-Resizerを使って画像を高画質で縮小
- ファイルを作成しローカルに保存
- 前月・翌月の日付を埋め込んだカレンダーを作る
- モーダルウィンドウをクラス化
- ストップウォッチを作る
- XMLHttpRequest Lebel2を試してみる
- ページャーを作る（簡易版）
- jQuery：Tableで親・子・兄弟要素を取得
- ページャーを作る
- 文字列をセパレータ文字で分割し配列で返す関数
- forループのカウンタを使用している関数の定義
- クロージャの使いどころ
- JSONPでクロスドメイン
- AjaxでJSON形式のデータを扱う
- jsファイルからjsファイルを呼び出す
- 祝休日対応のカレンダーを作る
- jQuery：モーダルウィンドウを作ってみる
CSS
- リスト(li)を中央に配置する
- ブロックレベル要素全体をリンクにする
- 実践と点線の交わり部分のギザギザをすっきりさせる
PHP
Java
SQL
ブロックレベル要素全体をリンクにする
ボックス全体をリンクにしたいと思い、DIV全体をaタグで囲んでみた。
特に機能上は問題が無かったのですが、これではブロックレベル要素をインライン要素で囲んでいることになります。
インライン要素はブロックレベル要素をその子孫要素として持つことができない（らしい）ので、ググッて見たところ、
なるほどと思ったサイトがいくつかあったのでメモッておく。
HTMLとCSSのポイント
ググッたよそ様のサイトのポイントは次とおり。 1. リンクを張りたいブロックレベル要素内のどこかにaタグを置く。 2. 親要素であるブロックレベル要素をposition:relativeで相対配置に。 3. 子要素であるaタグをdispley:blockでブロックレベル要素にし、 4. さらにposition:absoluteで絶対配置にして、親要素と同じ大きさに広げる。 そこで、このとおりにCSSを書き直してモヤモヤがスッキリしました。
<div class="linkBox">
<a href="http://linkSite/"></a>
<div class="image"><img src="./image/hoge.png"></div>
<p>ブロックレベル要素全体をリンクにする</p>
</div>
.linkBox {
position: relative;
width: 300px;
height: 70px;
margin: 15px auto;
}
.linkBox a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
どうして皆さんはすぐ気がつくのだろう。うらやましい。