CSS のスライド ドア テクノロジー

CSS の進歩としてよく議論されるのは、背景画像をスタックする機能で、背景画像を重ね合わせてスライドさせて特殊効果を作成できるようになります。 CSS 2.0 の現在のルールによれば、各背景画像には独自の HTML 要素が必要です。多くの場合、一般的なマークアップは、一般的なインターフェイス コンポーネントとして使用できるさまざまな要素をすでに提供しています。

シンプルなデザインだからこそ実現できます。

イノベーションはどこから来るのでしょうか?

私がこれまでに見た多くの CSS ベースのナビゲーション タグは、ほとんど同じ特徴を持っています。長方形のカラー ブロック、おそらく単なるアウトライン、現在選択されているタグの境界線はなく、マウス ポインタがその上に移動するとタグの色が変わります。 CSS が提供できるのはこれだけですか?一連の小さな箱と単調な色?

CSS が広く採用される前に、タブ ナビゲーションのデザインには多くの革新が見られました。オリジナルのフォーム、熟練した色の混合、現実世界の多くの物理インターフェイスの模倣。しかし、これらのデザインは、テキストを含む複雑に作成された画像に過度に依存しているか、ネストされたテーブルにパッケージ化されていることがよくあります。テキストを変更したり、ラベルの順序を変更するには、複雑なプロセスが必要です。テキストを引き伸ばすことさえ不可能であり、ページのレイアウトに大きな影響を与えます。

テキストのみのナビゲーション バーは、画像としてのテキスト ナビゲーション バーよりも耐久性があり、読み込みが速くなります。同様に、視覚障害のある方のために、各画像に alt 属性を追加することもでき、プレーン テキストのサイズを自由に変更できます。当然のことながら、CSS でスタイル設定されたプレーン テキスト ベースのナビゲーション バーが Web デザインに戻ってきました。ただし、CSS ベースのナビゲーション バーのデザインのほとんどは、今のところまだ意味がありません。最近採用されたテクノロジー (CSS など) を使用すると、前述したテーブル タグやイメージ タグの効果を失うことなく、より良い結果を得ることができます。

スライドドア技術

美しい職人技、真に柔軟なインターフェイス コンポーネント、テキストに基づいた適応的なサイズ設定により、2 つの独立した背景画像を使用してテキストを作成できます。左側に 1 つ、右側に 1 つです。これら 2 つの画像は、次の画像に示すように、スライドして重なって狭いスペースを占めるか、互いにスライドして離れて広いスペースを占める 2 つの引き戸であると考えてください。

このモデルでは、1 つの画像が別の画像の一部をマスクします。ラベルの角を丸くするなど、各画像の周囲に独自のコンテンツを配置するとします。上の画像が下の画像を完全に覆い隠すことは望ましくありません。これを防ぐために、上の画像 (この例では左側の画像) をできるだけ狭くすることができます。ただし、ラベルの片面の独自性を示すために、一定の幅を確保します。外側の角が丸い場合は、上の画像の円弧部分と同じ幅になるように制御する必要があります。

ターゲットのサイズが大きくなり、上記の幅を超えると、テキスト サイズとフォントの変更により画像が引き伸ばされ、見苦しい隙間が生じます。判断する必要があるのは、このスケーラビリティがどの程度になるかを予測することです。ブラウザのフォントサイズを変更するとターゲットは大きくなりますか?実際的には、少なくともフォント サイズが 300% まで増加すると見積もる必要があります。背景画像もこの増加に対応する必要があります。上の例では、下（右）の画像を 400*150 ピクセルに設定し、上の画像を 9*150 ピクセルに設定します。

ラベルを伸ばすと、画像がスライドして消え、出入り口が広くなり、より多くの画像が表示されます。

この例では、記事の冒頭に示したように、Photoshop で 2 つの滑らかな薄い 3D ラベル画像を作成しました。 1 つは、現在選択されているラベルを表すために、内部が明るく、境界線が暗くなります。このトリック モデルを左右の画像に適用するには、ラベル画像でカバーされる領域を拡張し、それを 2 つの部分に切り取る必要があります。

同じアプローチが「current」というラベルにも適用されます。これら 4 つの画像 (1、2、3、4) を用意したら、マークアップと CSS を使用してラベルの作成を開始できます。

ラベルの作成

CSS を使用して水平方向のリストを作成することを検討すると、リスト項目を同じ行に配置する方法が少なくとも 2 つあることがわかります。どちらの方法にも独自のメリットがありますが、どちらもレイアウトによって生じる混乱を解決するために CSS を必要とします。 1 つのメソッドはインライン ボックスを使用し、もう 1 つはフロートを使用します。

方法 1 は、より一般的な方法かもしれませんが、すべてのリスト項目をインラインで表示することです。インラインアプローチの利点はそのシンプルさにあります。ただし、これから説明するスライド ドア テクノロジの場合、インライン方式には特定のブラウザーで解釈上の問題がいくつかあります。ここで焦点を当てる方法 2 は、float を使用してリスト項目を同じ行に配置することです。腹立たしいことに、float の一見矛盾した動作が自然な論理を回避していることがあります。それでも、複数のフローティング要素を処理する方法と、信頼性の高いフローティングが何を意味するかについての基本的な理解を議論する価値があります。

浮動要素の配置の問題を解決するために、別のタイプの浮動要素を使用します。このようにして、親要素は子要素を完全に包含します。したがって、ラベルに背景色と背景画像を追加できます。ラベルの直後にあるテキスト要素は、CSS のクリア関数を使用してフローティング オブジェクトをクリアすることを覚えておくことが非常に重要です。これにより、フローティング ラベルがページ上の他の要素の位置に影響を与えるのを防ぎます。

次のマークアップから始めます。

<div id="ヘッダー">
<ul>
<li><a href="#">ホーム</a></li>
<li id="current"><a href="#">ニュース</a></li>
<li><a href="#">製品</a></li>
<li><a href="#">概要</a></li>
<li><a href="#">連絡先</a></li>
</ul>
</div>

実際には、#header div にはロゴと検索ボックスも含まれる場合があります。この例では、アンカー チェーン内の各ハイパーリンクの値を短くしたいと考えています。明らかに、これらの値にはファイルまたはディレクトリの場所が正しく含まれている必要があります。

#header コンテナを配置することからリストのデザインを開始します。これにより、コンテナーが、その中にフローティングされているリスト項目を含むコンテナーとして実際に機能することが保証されます。要素は浮動小数点であるため、その幅を 100% であると宣言する必要もあります。一時的な黄色の背景を追加して、親コンテナがラベルの後ろの領域全体を完全に埋めるようにします。同様に、スタイルが均一になるようにデフォルトのテキスト プロパティを設定します。

#ヘッダー {
フロート:左;
幅:100%;
背景:黄色;
フォントサイズ:93%;
行の高さ:標準;
}

ここで、順序なしリストのデフォルトのマージン/パディング値を 0 に設定し、リスト項目の前のマークを削除する必要もあります。各リスト項目は左に移動します。

#ヘッダーul {
マージン:0;
パディング:0;
リストスタイル:なし;
}
#ヘッダーリ {
フロート:左;
マージン:0;
パディング:0;
ブロック オブジェクトとしてレンダリングを強制するようにアンカー チェーンを設定すると、心配することなくすべてのスタイルを制御できます。

#ヘッダー {
表示:ブロック;
}

次に、右側の背景画像をリスト項目に追加します (変更部分は太字で示されています)。

これで、左の画像をアンカー チェーン (コンテナ内の要素) の左側に配置できます。また、ラベルを拡大し、テキストをラベルの端から遠ざけるパディングも追加します。

#ヘッダー {
表示:ブロック;
背景:url("norm_left.gif")
左上はリピートなし。
パディング:5px 15px;
}

このようにして、効果 2 が得られます。ラベルの形状に注目してください。ここで、IE5/Mac ユーザーはすぐに「なんてことだ、タブが縦に積み重なって画面全体に広がっているんだ!」と驚くでしょう。すぐに解決できるようお手伝いいたします。当面は以下の手順をお試しいただくか、都合がよければ一時的に別のブラウザに切り替えると、IE5/Mac 版の問題はすぐに解決されます。

一般的なラベルの背景画像が完成したので、「現在の」ラベルの画像を置き換える必要があります。これを実現するには、id="current" とアンカー チェーンをターゲット リスト項目に追加します。画像以外の背景の外観を変更する必要がないため、背景画像機能を使用します。

画像を #header コンテナの背景に配置し (元の黄色の背景を置き換えます)、背景画像を一番下に移動し、画像の上の空白スペースに対応する背景色を追加します。同時に、body から継承したパディングを削除し、ul の上部、左側、右側に 10 ピクセルのパディングを追加します。

#ヘッダー {
フロート:左;
幅:100%;
背景:#DAE0D2 url("bg.gif")
繰り返し-xの下。
フォントサイズ:93%;
行の高さ:標準;
}
#ヘッダーul {
マージン:0;
パディング:10px 10px 0;
リストスタイル:なし;
}

これを行うには、通常のアンカー チェーンの下部のパディング値を 1 ピクセル (5px-1px=4px) 削減し、減算されたパディングを「現在の」アンカー チェーンに追加します。

最後の仕上げ

鋭い観察者であれば、前の例の白いラベルの角に気づいたかもしれません。これらの不透明なコーナーは、下の画像が上の画像に透けて見えるのを防ぐために使用されます。理論的には、ラベルの背景に合わせて背景画像の一部を使用することもできます。ただし、背景色を移動しようとすると、ラベルの高さが大きくなり、背景画像が短くなります。代わりに、ラベルの角が透明になるように画像を変更します。円弧がアンチエイリアス処理されている場合は、円弧のエッジの周囲により均一な背景色が使用されます。

角が透明になったので、左側の画像が右側の画像の角から透けて見えるようになります。これを補うために、左側の画像の幅と一致するパディング (9px) をフォーム項目に追加します。フォーム項目にパディングを追加したので、同じ幅を削除してテキストを中央揃えにする必要があります (15px-9px=6px)。

#ヘッダーリ {
フロート:左;
背景:url("right.gif")
右上はリピートなし。
マージン:0;
パディング:0 0 0 9px;
}
#ヘッダー {
表示:ブロック;
背景:url("left.gif")
左上はリピートなし。
パディング:5px 15px 4px 6px;
}

これはまだ終わっていません。9 ピクセルのパディングを追加すると、左側の画像とラベルの左側の間に隙間ができるからです。表示されている「出入り口」の左端と右端が接続されたので、左の画像を一番上に置く必要はなくなりました。そこで、2 つの背景画像の順序を入れ替えて逆にします。また、「current」タグで使用されている 2 つの画像を交換します。

#ヘッダーリ {
フロート:左;
背景:url("left.gif")
左上はリピートなし。
マージン:0;
パディング:0 0 0 9px;
}
#ヘッダー a、#ヘッダー強、#ヘッダー スパン {
表示:ブロック;
背景:url("right.gif")
右上はリピートなし。
パディング:5px 15px 4px 6px;
}
#ヘッダー #現在 {
背景画像:url("left_on.gif");
}
#header #current a {
背景画像:url("right_on.gif");
パディングボトム:5px;
}

これを完了すると、エフェクト 4 に到達します。透明な角により、ラベルの左側にクリックできない領域が作成されることに注意してください。この領域はテキストの範囲外ですが、それでも認識できます。ラベルの両面に透明な画像を使用する必要はありません。この無効な領域を作成したくない場合は、ラベルの背後にある色を使用し、ラベルの隅にある透明なイメージをこの色で置き換える必要があります。ここでは、この透明な角だけを残しておきます。

問題の残りの部分では、すべての変更を一度に行います。ラベルのテキストを太くし、通常のラベルのテキストを茶色に変更し、「現在の」ラベルのテキストを濃い灰色に変更し、リンクの下線を削除します。 、最後にホバーテキストの色を変更します 同じ濃い灰色に変更されました。一連の変更を経て、これまでの効果を見ていきます 5．

一貫したソリューション
エフェクト 2 の後、私たちが認識した 1 つの問題は、IE5/Mac ブラウジング モードでは、各タブが拡張されてブラウザの幅全体を占有し、タブが垂直方向に積み重なることです。これは私たちが望んでいることではありません。

ほとんどのブラウザでは、フローティング要素は、その要素を含むコンテンツの最小サイズまで縮小します。フロート要素に画像が含まれている場合、または画像である場合は、画像の幅まで縮小します。テキストのみが含まれている場合は、先頭のない最長のテキストの幅に縮小されます。

Auto-width ブロック オブジェクト要素が float 要素に挿入されると、IE5/Mac の画像で問題が発生します。他のブラウザは依然としてフロートを最小化し、コンテナ内のブロック要素を無視します。ただし、IE5/Mac はこの動作に従いません。代わりに、float および block オブジェクト要素を可能な限り広く拡張します。この問題を解決するために、他のブラウザを放棄しないように、同時にアンカー チェーンをフローティングしますが、IE5/Mac のみに限定されます。まず、アンカー チェーンのフローティング ルールを設定します。次に、バックスラッシュ コメント メソッドを使用してこのルールを非表示にし、このルールが IE5/Mac に対してのみ有効になり、他のブラウザは無視されるようにします。

1 つの例から推論する ここでは、プレーン テキストと順序なしリストを使用してナビゲーション ラベルを作成し、少量のスタイルを設定する、スライディング ドア テクニックを練習しました。読み込みが速く、メンテナンス性が高く、見た目を損なうことなくテキストのサイズを大幅に拡大できます。ナビゲーション バーの複雑なスタイルを作成する際のスライド ドア テクノロジの柔軟性については、改めて説明する必要はありません。

考えられないことやできないことは何もありません。最後のエフェクトは例を示していますが、デザインはこれに限定されるものではありません。

場合によっては、ラベルは必ずしも対称ではありません。私はすぐにこのラベルの 2 番目のバージョンを作成しました。これもシェーディング 3D スタイル、角張ったエッジ、特徴的な左側の部分を備えています。 2 番目のバージョンによると、左右の画像の位置を交換することもできます。この詳細なレイアウトとスマートなイメージ コントロールを使用すると、3 番目のバージョンに示すように、ボタンの下の境界線を削除して、ラベルのイメージが背景によりよく収まるようにすることができます。ブラウザが複数のスタイル シート間の切り替えをサポートしている場合は、それを使用して複数のバージョンのナビゲーション バーを自由に切り替えることもできます。

他にも言及していない効果がたくさんあります。簡単なメモですが、マウスオーバーでテキストの色を変更しましたが、画像全体を置き換えて、より興味深い変換効果を作成することもできます。マークアップ内に 2 つのネストされた HTML 要素がある場合でも、CSS を使用して、私たちがまだ考えていない効果を実現できます。この例で作成したのは単なる水平タブ バーですが、スライド ドアは他の多くの状況で使用できます。どう思いますか？