CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
画像付きリストのテキストを縦方向に中央揃えする(リキッドレイアウト対応)
こんにちは、鴨田です。 何らかの要素が縦横中央揃えになっているデザインが結構な頻度で出てきます。 デザイナーとしては見栄えを考えてそうしているのですが、 コーダーとしては、横方向はまだしも縦方向の中央揃えは何かと面倒だったりします。 いくつかケースがあると思うので、それぞれに関して自分ならこうする、 というコーディングをしていきたいと思います。 とある要素の中で画像だけを縦横中央揃えしたい、というケースもあると思いますが、 今回は画像があってその横に来るテキストを縦方向に中央揃えしなければならない、 というデザインに特化した説明をします。 また、画像の横幅は決まっているけど、テキスト部分の横幅が可変となっていて、 かつ、画像とテキストを内包するリンクは縦横いっぱいにリンクエリアが確保されている というリキッドレイアウトとします。 ０．元となるHTML HTML <div class="wr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コリス