タイトルの固定


otosan page
上へスクロールすると

otosan page スタート画面


マウスオーバーで拡大表示します。


2013年5月11日



Webページを眺めていると、自分のHPを制作・向上させる上で、ヒントと捉え応用・実現して見たくなる衝動に駆られることがある。

表現方法等でこのような刺激を、全く受けない製作者はまずいないと思われるが、多分やっている時間が無い人が大部分だと思う。

テーマ(教材)を見つけて、実現するために挑戦する。そしてこれを達成できれば、HP作成技術のスキルアップへ結び付くはずであると確信している。

スペース

今回、某社のHPを見ていて気づいた点は
 HPを上へスクロールさせていくと、一番上にあるタイトル(又はヘッド部)の下へ、本文等がスクロールして隠れ込む。
今度は下へスクロールして行くと、隠れていた本文等が元の姿で現れる(丁度、「エクセル」の表の項目部分を画面上で固定するのと同じ効果)ページがあった。

同じような効果を生じるデザインのページは、以前から何社かで使われていた為、実現させる技法には興味があった。

以前挑戦した時は、背景画像が動いてしまったりし、効果が半減したりして失敗に終わったが、今回は希望通りの効果が得られた。

スペース

otosan page・トップページの構成は、上部画面一杯のタイトル部分、中に本体ページメイン記事の「Topics」と、左に「各項目を案内するサイドバー」があり、下部に便利コーナー(HP記事と直接関係ないサービス掲示部分)が続いています。

上部図の様に、画面左半分の記事(赤点線内)を上へスクロールすると、効果が出て記事はタイトル部の下へ潜り込みます。しかし、右半分については全く動きません。これは、この部分は記事のない透明な部分である為、固定した背景画像等で表示させているのが透けて見えるため(解像度の低いディスプレイ使用の方にも見れる幅750ピクセルの仕様)です。

■■■以前の記事:構造解説(背景画像の活用)

やり方はWebページで沢山紹介されている為、詳細の解説は避けます。
先ずタイトル部の表示位置を上部に固定させます。同時にz-indexプロパティを使い値を大きく設定します。次に下の内容の入れものにもz-indexプロパティを指定し、こちらの値は小さく設定します。すると、同じ位置で重なってしまった時には規則通りに、大きい値が指定された部分が上部となり、小さな値部分はこの下へ潜り込むことになります。
丁度ワードやエクセルの、「図の最前面へ移動」した時の効果と同じであると言えます。

otosan page・トップページでやりましたが、更に応用して、本ページでも同様の効果を付加してみました。