PROGRAMMING
CSS
- フォルダ構成をCSSで見やすくする
- シンタックスハイライトPrismのカスタマイズ
- リスト(li)を中央に配置する
- ブロックレベル要素全体をリンクにする
- 実践と点線の交わり部分のギザギザをすっきりさせる
javascript
- 自作カレンダーをES6で使えるようになったクラスで置き替えてみる
- JS-Image-Resizerを使って画像を高画質で縮小
- ファイルを作成しローカルに保存
- 前月・翌月の日付を埋め込んだカレンダーを作る
- モーダルウィンドウをクラス化
- ストップウォッチを作る
- XMLHttpRequest Lebel2を試してみる
- ページャーを作る（簡易版）
- jQuery：Tableで親・子・兄弟要素を取得
- ページャーを作る
- 文字列をセパレータ文字で分割し配列で返す関数
- forループのカウンタを使用している関数の定義
- クロージャの使いどころ
- JSONPでクロスドメイン
- AjaxでJSON形式のデータを扱う
- jsファイルからjsファイルを呼び出す
- 祝休日対応のカレンダーを作る
- jQuery：モーダルウィンドウを作ってみる
PHP
Java
- IntelliJ と Gradle で JavaFX アプリケーション(非モジュール版)を作る
- javaのコンパイルと実行
- イメージを回転する
- Exif情報を簡単に取得できるライブラリ
- 高画質で画像縮小
- JDBCによるデータベース操作
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%;
}
どうして皆さんはすぐ気がつくのだろう。うらやましい。