Tumblrのポストを表示するためのページ作りを進めている。CSS・JQuery中心に実装を進めていて、node.jsどころではなくなっている。モダンなWeb技術に関する知識のない私が、Wordpressのテーマかスタマイズを始めてから今まで勉強してきた中でポイントだ！と思ったところを書いておこう。当たり前のことばかりだけれども。といいつつまだ私の中ではまだ腑に落ちていないのだが。。
文字装飾はCSSでする
当たり前の話だが。モダンなWebではHTMLの装飾タグはもう使われていないのだ。BやI、CENTER、FONTとかはもう使わないのだ。すべてCSSで記述できる。
float周りのレイアウト知識を理解しておく
段組みはdivでやるのは当たり前で、フレームやテーブルでやるのはもう廃れている。レイアウトに関する知識、特にブロック要素のレイアウトについては基本を押さえておく必要がある。意図したとおりのレイアウトにするためにはfloatやマージンの相殺なども知っておく必要がある。私の場合マージンがwidth,heightに含まれないということを知ったのはごく最近のことだ。つまりマージンとパディングの違いがわかっていなかった。
jQueryを使用するにはCSSのセレクタの知識が必要
基本中の基本だが、jQueryはDOMを操作するのにCSSのセレクタ構文を使用する。CSSのセレクタで要素を特定するのだ。だからjQueryというんだな。
だからCSSのセレクタを知っていないとチンプンカンプンとなってしまうというか、jQueryの良さが理解できないのだ。逆に詳しくなってくるとビシっと要素を指定できるようになって楽しくなってくる。jQueryという存在はずいぶん前から知っていたのだが、私は何にもわかってなかったのだ。
HTML5で使えるセマンティックな要素を使用する
section,article,aside,header,footer,navなどのセマンティックな要素を使って文書の構造を意味のあるものにする。divタグはレイアウトのためだけに使うようにする。これがまた難しいのだけれども。こうしとくと検索エンジンが解析しやすいような気もする。
簡単にできそうでできないこととか
画像の上にテキストを重ねる
仮に親要素がdivで、その中にテキストのdivとブロック要素にしたimgがあるとする。このimgの中にテキストを置きたい。
実現方法だけども、テキストブロックをposition:absoluteにしてz-indexを画像より大きくし、さらにテキストブロックの親要素をposition:relativeにするだけだ。
この「親要素をposition:relativeにする」というのがポイント。position:asbsoluteというのは、自由に配置位置を決めれるのだが、基準点がどこになるのかというと、親要素がposition:relativeであれば親要素の左上のポイントが基準となり、そうでない場合はbody要素が基準となる。この仕様がわかっていなくて、親要素のdivからテキストブロックがはみ出してしまい、ハマってしまった。ひょっとすると他の方法もあるかもしれないけれども。
画像を親ブロック中で縦方向にセンタリングする
これは2-3時間はまってしまった。できそうでできない。CSSだけで行う方法としては以下の方法があるようである。
やってみたけど、うまくいかなかった。何か問題があるのだろうけれども。
結局jQueryで縦方向のセンタリングを行うことにした。
上記のサイトでヒントをいただいて、書いたのが下記の関数。ポイントなのはハイライトにした部分だけ。まあ(親要素の高さ)-(画像の高さ)/2をmargin-topに指定するだけだけれども。
```javascript highlight:9 function center_img() { if ($(window).width() <= 320) return; $('div#content > article.photo,div#content > article.video').each(function () { var imgs = $(this).find('img'); if (imgs && imgs.length == 1) { imgs.css('margin-top', (($(this).height() - imgs[0].clientHeight) / 2) + 'px'); } });
}
```