css Zen見てぶっ飛んだひとコミュのギミック

CSSでレイアウトをする…って最初は色々と越えなければいけないハードルも多く四苦八苦したものですけど、最近は、テーブルレイアウトと同じようなことはできるようになってきたのでは…と自分で自分を褒めたりもします。

…で、CSSレイアウトのことが少しでも分かってくると、今度はCSSならではのギミックみたいなものを表現したくなったりしませんか？

ブックマーク共有にも書きましたが、このサイトなんてそうですよね
http://www.bungie.net/

そんなテーマがあれば、コネタとして語り合いませんか？

コメント(9)

最初
全て
最新の40件

[1] mixiユーザー 06月06日 16:49

で、言い出しっぺなので、自分のサイトで今、取り組んでいるテーマ（テーマというほど大げさじゃないですけど）

http://www.siliconcafe.com/

ここのヘッダ周辺なんですが、FireworksとかPhotoshopのレイヤーの感覚を取り入れたいと思って作りました。ブラウザを左右にグニグニと広げたり、狭めると偶然の重なりみたいなものが面白いなあ…って。

いくつにも画像を重ねることができ、そこでポイントになるのが透過GIFなんすね。これ、けっこうはまってます。

[2] mixiユーザー 06月10日 22:30

うーん。ネタってほどでもないですが、
divに以下のようなスタイルを指定してインラインフレームみたいなことをするのがすきです。

#box {
width: 300px;
height: 300px;
overflow: auto;
}

[3] mixiユーザー 06月11日 04:14

以前、ブックマークつけたのは、これのバリエーションですよね。これを全面（100％）で設定して、その上でスクロールバーを隠すようにしてる。

※今、ちょうどやってるトコ(笑)

[5] mixiユーザー 06月14日 20:32

そうか！！

横に並んでいようが、リストはリスト。

特にリンクボタンとかに関して、今まで画像ボタン（スライス書き出し）を並べていた自分としては、リストという観念がなかったよ。（特に横並びの場合は、見た目にリストという感じがしないもんね）

ありがとうございます。

[7] mixiユーザー 06月14日 21:32

ありがとうです！
ちょうどいま、やってたんですよ（本当は帰ろうかと思っていた）いま、次のリニューアルデザインしてて、グランドナビは、また今のような横並びなので、それを

<ul id="nav-bar">
<li><a href="●" title="●">チュートリアル</a> </li>
<li><a href="●" title="●">Webデザイン</a> </li>
</ul>

とし、id="nav-bar"をブロック要素に設定し、liをインラインにしてうまくいきました。
※Pはとってしまいました。ソースもきれいになったし。

さっきも、書きましたがブラウザのデフォルトスタイルにこだわっていたんですね。

他の部分でも、引用であるとか、アドレスとか…「見た目」ではなく、本来あるべき記述に近づけておるです。（近づけるではなく、正規表現にせなアカンねんけど）

まあ、「ソースでメシが食えるか！」とか「手打ちが好きなら蕎麦屋になれ」…などと暴言吐いていたオッサンにしては、随分進歩したでしょ（自分で言うな）

[9] mixiユーザー 06月21日 15:50

あれ、昨日は&書いたつもりだったのですけど。

とりあえずベースはできたので、これからXML回してみて、色々試してみようかな…と。このあたり、全然弱いので。

ログインすると、みんなのコメントがもっと見れるよ