webサイトのデザインをいろいろ考えてみようかななどとでっち上げたサイトです。ようやく7つ目のデザインとなります。
デザインにはカスケーディングスタイルシート(CSS)を使っています。21世紀の今、テーブルレイアウトでもないでしょうから。ですのでデザイン的にはターゲットとなるwebブラウザは、CSSにきちんと対応した新しめのもの、たとえば Firefox(レンダリングエンジン Gecko を使ったもの。N9なども含む)や 、Opera9、Safari などを想定していますが、HTML的には素直なよいHTMLをめざしてますので、まともなWEBブラウザであれば閲覧に支障はないでしょう。デザインが再現できるかはともかく。
今回のポイントは半透明画像の重ねあわせといったところでしょうか。
一番下の背景の上に3枚の半透明画像が重なり、スクロールするとそれぞれ違う速度で動く、というのが当初の構想です。ちなみに画像は下からhtml要素の背景、body要素の背景(半透明の白い球)、bodyのafter疑似要素(バニーガール)、見出しの背景(黄色っぽい球)というようにCSSで指定しています。
これまでCSSのみでJavascriptは使わずにやってきたのですが、「それぞれ違う速度で動く」というのがCSSだけでは不可能なので、今回はJavascriptを使っています。
現在のスクロール量を得てそれぞれの画像の位置を決めてやる、のですが、疑似要素の場合 Javascriptでアクセスすることができません。getOverrideStyleというメソッドを使えばいいらしいのですが、こいつを実装してるブラウザは今のところ存在してないようです。
しかたがないので、疑似要素はなかったことにして、Javascriptで改めて追加してやります。(ついでにアルファチャンネル付PNGをまともに表示できないIE6には透過PNGに差し替えてやる小細工もしています)
ということで、Javascriptで動かしている部分は次のとおり。
バニー画像を動かすと、うちの環境ではかなりがたつくので、初期設定では本文と同じ速度で動くようにしてあります。動かしてみたい方はボタンをクリック。→
右上の小さいバニーガールのまわりを球が回っているのも、Javascriptです。こちらももともと疑似要素として配置しているものです。(球がhtml要素のbefore疑似要素、バニーガールがbody要素のbefore疑似要素)
メニュー部分は、マウスカーソルを持っていくと説明がポップアップするようにしました。こちらはCSSのみで作ってあります。
001:<ul id="menulist"> 002: <li><a href="#about"><span class="menuitem">ご案内</span> 003: <span class="lead">このサイトについて。更新日:2007.11.4.</span> 004: <img class="capt" src="./gallery/grace/cap_index.jpg" alt="" /> 005: </a></li>
メニュー部分はこのようにリストで記述してあります。この部分に対応するCSSは次のとおり。
001:.menuitem { 002: font: bold 150% sans-serif; 003:} 004:#menulist li { 005: line-height: 1.4; 006: height: 2.1em; 007: overflow: hidden; 008: padding: 0; 009: list-style-type: none; 010: position: relative; 011:} 012:#menulist li a { 013: display: block; 014: margin: 3px; 015: padding: 0 7px; 016:} 017:#menulist .lead { 018: color: #000; 019: font: 90%/1.2 sans-serif; 020: display: block; 021: margin-left: 2.5em; padding: 0.2em 0; 022:} 023:#menulist .capt { 024: display: none; 025:}
メニューの1項目は、項目名、説明と更新日、サムネイルの3つの部分に分かれます。初期の表示は項目名だけが表示されるよう、高さを2.1em、はみ出た部分を非表示(6,7行目)と指定しています。(高さが2.1emなのは、項目名のフォントサイズが150%[2行目]、行の高さが1.4倍[5行目]なので、150%×1.4=210%=2.1em となるため) そして、後続のspan要素に display:block の指定をしているので、次の行に送られ、最初の行は項目名だけになります。
001:#menulist li:hover { 002: overflow: visible; 003: z-index:100; 004:} 005:#menulist li:hover a { 006: background: #ffd0e0 url("a_bg.png") repeat-y right; 007: border: #930200 3px solid; 008: border-width: 0 3px 3px 0; 009: margin: 0; 010: padding: 3px 75px 3px 10px; 011: text-decoration: none; 012: z-index: 200; 013: color: #c13; 014:} 015:#menulist a:link:active , 016:#menulist a:link:hover { 017: color: #c13; 018:} 019:#menulist a:visited:active , 020:#menulist a:visited:hover { 021: background: #ffbbff url("a_bg.png") repeat-y right; 022: color: #903; 023:}
マウスカーソルを項目のところに持ってくると、非表示にしていた2行目以降を見えるようにし(上のCSSの2行目)、
(つづく?)
ギャラリーというか、前のデザインです。
HTMLやCSSの記述、背景の飾り画像やボタン画像類について権利は主張しません。使えると思ったらコピーするなりご自由にどうぞ。また当然リンクもご自由に好きなところに好きなだけどうぞ。
CGをご覧になりたい方はこちらへ 
あるいは同人関係ならばこちらへ 
