ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

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

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

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

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

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

コメント(9)

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

http://www.siliconcafe.com/

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

いくつにも画像を重ねることができ、そこでポイントになるのが透過GIFなんすね。これ、けっこうはまってます。
うーん。ネタってほどでもないですが、
divに以下のようなスタイルを指定してインラインフレームみたいなことをするのがすきです。

#box {
width: 300px;
height: 300px;
overflow: auto;
}
以前、ブックマークつけたのは、これのバリエーションですよね。これを全面(100%)で設定して、その上でスクロールバーを隠すようにしてる。

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

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

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

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

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

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

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

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

まあ、「ソースでメシが食えるか!」とか「手打ちが好きなら蕎麦屋になれ」…などと暴言吐いていたオッサンにしては、随分進歩したでしょ(自分で言うな)
あれ、昨日は&書いたつもりだったのですけど。

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

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

mixiユーザー
ログインしてコメントしよう!

css Zen見てぶっ飛んだひと 更新情報

css Zen見てぶっ飛んだひとのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング