Fw: CSS＋αで縦横混在の長方形画像を、正方形枠でセンタリングさせる方法 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ

Ajax を活用した構築方法ですと、DOM スクリプトを使って backgroundImage に放り投げるため “no-repeat center center” とすれば微力ながらも画像ダウンロード禁止処理が加わり良いと思うのですが、ホットペッパーWebサービスの設計はどうなのか気になります。

さらにこの Blogger 上で試してみると、空白ピクセルを使わずに縦方向の位置が変化しています。（デフォルトの CSS 記述を読むか important で避ける必要アリ。）

CSS＋αで縦横混在の長方形画像を、正方形枠でセンタリングさせる方法 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ
<div style="width:100px;height:100px;text-align:center;border:1px solid #ccc;padding:0;">
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" width="100" height="75" alt="IMG_3385" />
</div>

少し話は逸れますが、もし初回の読み込み時（ページ表示の初期化）に PHP でタグを出力したとしても、ページャーを使う以降の同じページ設計の遷移では Ajax を利用することでサーバーサイドから徐々にクライアントサイドの技術を利用するソフトウェアやサービスに移行することができます。

最近 PHP で MVC 設計のソフトウェアを見せて頂いたのですが、ファイルやディレクトリ名とその位置関係が分かりにくい反面、関数の連携や処理を確認するのに適していると思いました。

話を戻すと、使う html のバージョンについても意識しておくと(・∀・)ｲｲ！ですね。

今回は仕事メールの文調で。

Share on Tumblr