CSS


  • CSS3で描画されたドラえもんを見たときも相当ビビりましたが、今度はiOSのアイコンを全てCSSで表現したという大バカ者の登場。一体何の役に立つのかは全く不明ですが、画像も使用しておりません!Chromeでは正常に見れましたが、IEでは相変わらずぶっ壊れているのが、絶妙なオチになっていて素晴らしいですね。

    http://graphicpeel.com/cssiosico

    mcatm2010-06-28 09:56

    Thumb ebc8541958040f14493d116f0b10468e
  • Styleboost

    2010-01-21 09:27

    当サイトでは二度目の紹介になります。ここまで多くのWEBデザインポータルが生まれる遥か前から、センスの良いサイトを紹介し続けてきた「Styleboost」が、再リニューアル!今風のシンプルなデザインになっています。

    これで、更新頻度が以前のように戻ってくれれば、一番嬉しいんだけどなあ。って、前回の掲載の際にも同じような事書いてる…。

    StyleboostStyleboost is a gallery for showcasing beautiful web sites.…

    mcatm2010-01-21 09:27

    Thumb f30276607cd26c2438543929e2108d31
  • javascriptを使わずにCSSだけで表現するエフェクトまとめ。プログレスバー(!)や、グラフ、ドロップダウンメニューや、jsを使わずに再現するLightboxなどもあります。微妙なものもありますし、ブラウザ互換がjs以上に不安ですが、軽快に動作するので、採用を検討したいものもあります。

    中で紹介されている「CSS Play」っていうサイト、初めて知りましたが、とても便利そうなTipsが沢山載っていて良いですねー。

    Scriptを使わないCSSエフェクト、Tipsいろいろ | DesignWalkerScriptが使えないブログを利用されている方や、これ以上Scriptを増やしたくない。でも、いろいろ挑戦してみたい。って方には、便利かもしれません。本日は、S…

    mcatm2008-04-17 15:47

    Thumb 9037a520831f4e03c45957a3fb8ff2e6
  • これは便利!

    必要な項目を選択していって、詳細を設定するだけで、スタイリッシュなフォームが出来上がると言う代物!

    …いやー、使うかなあ…??

    IDEA*IDEAスタイリッシュなフォームをカスタマイズ&ダウンロードできる『pForm』これはかなり便利です。今風のスタイリッシュなフォームをブラウザ上でがんがん作っていくことができます。作ったフォームはHTML+画像+CSS+Javascript…

    mcatm2007-10-10 22:51

    Thumb cc9ff9f52337fe28ec8c5c159c38ce81
  • 僕も原文見てギョッとした…というか笑いましたが(「そもそもせっかくリニューアルといっているのに、いまだにphpではなくperlで動いているあたり。。。」と言い放った寺田あつしは一躍スターに)、「mixiのデザインリニューアル」に対してオールアバウトの「専門家」がコメントを付けています。リンク先はその秀逸なまとめ。

    基本的には慣れの問題かなと思います。よく言われる通り、一週間もすれば慣れるよ。そもそも「慣れてまで見る必要がある」と感じるかどうかは別問題、って話なんですが。

    「文章構造」は、寺田が言うほど汚くねえぞ、と思いきや、やはりちょっと詰めの甘い印象。イベントハンドラ周り、もうちょっと整理できなかったものでしょうか。マイミク一覧など、ちょこちょこっとテーブル組みが残る部分もあり、まあ用途には則した使い方だからありはありだけど、あんまり好きじゃないなあって印象。まあ、好みの問題ですね。

    で、リンク先のまとめは、基本的に秀逸だと思うのですが、一点、前提として「1000万人のユーザーを抱えるインフラとしてのmixi」という視点が抜け落ちているような気がするんですね。

    例えば、OS9問題(OS9の怒りの矛先はサイト運営者じゃねえだろ、っていうツッコミとか、基本的にはリンク先に同意です)。一般的には、新規に立ち上げるウェブサイトをOS9に対応させる必要は無いと思います。IEはサポート停止してるし、そもそもAppleのサイトですら、OS9で見るとガタガタの状態でした(要するに親からも引導渡されたんですね)。だが、mixiは、今まできっちり対応してきて、それに対してお金まで払わせておいて、それでいきなりほとんどなんのアナウンスも無く切り捨てたわけですから、これはちょっと問題かなと思います。

    googleのように、CSSもjavascriptも完全に切ったシンプルな別ページを用意してあげるとか(別に文章構造を変える必要もありません、テーブル組みの部分はちょっと気になりますが)、少しは目配せをしないと拙いのではないかと思いますが、それすら会議に上がらなかったのならそれはそれで凄いな。

    http://neta.ywcafe.net/000785.ht

    mcatm2007-10-08 16:332

    Thumb cc9ff9f52337fe28ec8c5c159c38ce81
  • UF3K

    2007-09-26 16:56

    ヘッダーに透明度を設定した背景画像を指定して、美しい効果を生み出しています。ちなみに鬼門であるところのIE6で観てみたら、豪快に無視されていました。

    http://www.uf3k.com/v7/

    mcatm2007-09-26 16:56

    Thumb 799e77cbd3a5fb4e0f58cff7868aa1ea
  • みんながIE6を嫌っていることをそろそろ認めようよ。僕たちのCSSのデバッグの約80%の時間がIE6のために費やされている。みんな知っていると思うけど、IE6は時代遅れだし、ひどいCSSのレンダリングエンジンを持っている。

    みんなおつかれー!リッピングヤードはこの路線で是非とも行きたいよね(でもやっぱちょっとIE6に気を使ってしまうかも…)。12月に完成予定の某サイトでは、どんな風になるかな…???

    TransIEハックなんて全部捨てちまえ! - Trans件名の通り。といっても、英語ブログの訳文です。原文は「Trash All IE Hacks」より。間違いもあるかもしれませんが、訳文の許可をもらったので日本語訳…

    mcatm2007-08-09 02:021

    Thumb cc9ff9f52337fe28ec8c5c159c38ce81
  • 泣いた。これはすごい!

    ほらあるでしょ?floatを解除しようと思って、brでclearしようと思ったら、firefoxでは上手くいくけど、win IEではその分のmarginが取られちゃって、すっげー迷惑な時。そういうのを、CSSハックでなんとかしちゃってる。

    404 Error - Not Found

    mcatm2007-07-02 01:18

    Thumb cc9ff9f52337fe28ec8c5c159c38ce81
  • Thumb f867e8295bd08fffe75333cd3978ff17
  • 31Three

    2007-05-31 18:25

    いいなあ…。青と蝶を基調とした、とても美しいサイト。凝ったCSS組みです。

    Home - 31Three

    mcatm2007-05-31 18:25

    Thumb 7c94177301cfd47c491034c4500aa524
  • 凄い整ってるCGM(おそらく)。
    ユーザー管理画面のインターフェイスが恐ろしい!!!

    お婆ちゃんの知恵袋の集合体でしょうか。
    研究の余地アリです。

    CurblyCurbly | DIY Design & DecorCurbly is DIY Design & Decor for People Who Love Where They Live…

    komugi2007-05-24 19:582

    Thumb 6ecfd92ad9f003e6184b51310f5df499
  • Only Human

    2007-04-27 17:37

    ええなあ、ざっくりしてるなあ。ちなみに「失敗談を共有するサイト」だそうで、内容もとても面白そう。

    割と正確なグリッドレイアウトなんだけど、ここまでザックリ感があるのは微妙なところでバランスを調整している証で、見習いたいところです。

    http://www.weareonlyhuman.com/

    mcatm2007-04-27 17:372

    Thumb 5f5f96e221fee78568ec8daee175f851
  • これは良さそっすねー。まだよく見てないけど。

    CSS Showcase | CSS Navigation Menus, Tabs and CSS Navigation Techniques ShowcaseCSS Showcase is a gallery of css-based navigation menus, tabs and css navigation…

    mcatm2007-04-25 21:32

    Thumb cc9ff9f52337fe28ec8c5c159c38ce81
  • ShaunInman.com

    2007-04-19 16:58

    シンプルにも程がある!!!!

    ただ、注目して欲しいのは、各記事タイトルのフォントね。これ、地の文ですよ。なんのフォント使ってるのかなあ。調べろっつう話ですが。

    http://www.shauninman.com/

    mcatm2007-04-19 16:581

    Thumb daa79432b242c16e82493597a4d8c41f
  • Typetester

    2007-04-19 16:52

    サイトの作りもさることながら、便利なツールですよね。日本語対応しているのかしら?試していないのだけれども。

    http://www.typetester.org/

    mcatm2007-04-19 16:52

    Thumb ba81bbe33358b2f73201b58f51df43bb
  • Camisetas Camiseteria

    2007-04-19 16:50

    昨日、「ぶおぉん」という豪快なオノマトペを伴って否定された「アナログっぽいデザイン」の一例。でも、CSSレイアウトとしても良く出来てる。Tシャツのサイト。

    Camiseteria agora é Soupop | Soupop

    mcatm2007-04-19 16:502

    Thumb f0d0b070be593820651230120b0374be
  • B2B Branding Agency UK

    2007-04-19 16:42

    美しい3カラムレイアウト。

    width990px。これぐらいあっても良いのかも。

    Base OneB2B Marketing Agency London | Base One       …

    mcatm2007-04-19 16:42

    Thumb 7ae168dcf41e0084ac65f700ff7c3ba2
  • bignoobチームの手によって、トップページが洗練されたcraigslist。

    ちょっと身震いした。凄いなあ。

    http://craigslist.thebignoob.com

    mcatm2007-04-11 17:321

    Thumb 407cad0189ead44b9eb0d0c81e0feb9a
  • A List Apart

    2007-04-05 12:09

    近代WEBデザイン史を専攻する上で、ここは外せないっす。

    A List Apart: For People Who Make WebsitesA List Apart explores the design, development, and meaning of web content, with …

    mcatm2007-04-05 12:09

    Thumb 37c291878746e2245012bf0c54cb7316
  • postscript5

    2007-04-05 11:52

    可愛らしいアナログデザインと、緻密で正確なCSSグリッドレイアウトは、実によく親和するという好例。

    http://www.postscript5.co.uk/

    mcatm2007-04-05 11:52

    Thumb efc90d4834c398f23ebcb79f46512f66