LearningjQuery.com のブログ投稿リストの左側には、次のようにクールな日付が表示されます。
写真を見ると、右側に「2009」が縦に並んでいるのがわかります。 Firebug を使用して、HTML 構造にテキスト「2009」が表示されます。この記事では、この効果を実現する 2 つの方法を紹介します。
1. Sprite テクノロジーを使用して実現します
実装プロセスについては、Chris Coyier 氏の記事「スプライトを使用した日付表示テクニック」で詳しく紹介されています。実装プロセスについて簡単に説明します。明らかに、日付ごとに個別の画像を使用したくないので、図に示すように、日付を 1 つの画像に統合し、年、月、日を画像の異なる領域に配置します。
1.HTML
ページ内の HTML 構造は次のとおりです。
6月
30
2009
.postdate コンテナには、年、月、日に対応する 3 つの領域が含まれており、セマンティックな整合性が確保されています。
wordpress のような CMS システムでは、バックエンド コードは次のようになります。
2.CSS
CSS はスプライトが実際に活躍する場所で、HTML で定義されたクラス属性を使用して、対応する画像を表示できるようにします。
まず、クラス属性 .postdate を持つコンテナーを相対的に配置します。これにより、コンテナーに含まれる 3 つの領域が絶対的に配置され、同じ背景画像が使用されます。それぞれの幅と高さを設定し、テキストを外側に移動して背景画像を表示します。
次に、各月 (12)、毎日 (31)、および毎年 (10 年に基づく) の特定の背景位置を定義して、対応する画像を表示します。
.postdate {
位置: 相対的;
幅: 50ピクセル;
高さ: 50ピクセル;
フロート: 左;
}
.月、.日、.年 {
位置: 絶対;
テキストインデント: -1000em;
背景画像: url(/wp-content/主題/ljq/images/dates.png);
背景リピート: リピートなし;
}
.month { 上: 2 ピクセル; 幅: 32 ピクセル; }
.day { 上: 25 ピクセル; 幅: 32 ピクセル;}
.year {下: 0; 右: 17px; }
.m-01 {背景位置: 0 4px;}
.m-02 {背景位置: 0 -28px;}
.m-03 {背景位置: 0 -57px;}
...もっとこのように...
.d-01 { 背景位置: -50px 0;}
.d-02 {背景位置: -50px -31px;}
.d-03 {背景位置: -50px -62px;}
...もっとこのように...
.y-2006 { 背景位置: -150px 0;}
.y-2007 {背景位置: -150px -50px;}
.y-2008 {背景位置: -150px -100px;}
...もっとこのように...