タグ

Webデザインに関するdenkenのブックマーク (30)

  • くらげごはん。

    くらげごはん。 - くだくらげの料理の記憶をつづる →いままでのごはんを見る

    くらげごはん。
    denken
    denken 2012/03/10
    すごい
  • SHINE

    SHINEからあなたへプレゼント!!! あなたに再興の「死」をデザインします。 わたしはその時をただ待ちますか。 何もしない人に、最期の瞬間はひどく苦しく つらいものが訪れます。 そして永遠の「生」をプレゼントします。 自分の遺志で選択することにより、 私は新しい命を得ることになります。  そうこれは不死のプロジェクトなのです。 不死のプロジェクトなのです。 CAN YOU BELIEVE TO ME? 彼はこの現実を捨て、別の時代、別の世界に瞬間異動することができる。 どうぞ、自分が理想と思う世界をイメージなさい。 目を閉じ、目を閉じたら、その世界が、わたしの目の前に広がっています。 YOUR Daems come True!! ※「SHINE」は、完全会員制のSNS(ソーシャル・ネットワーキング・サービス)です。

    denken
    denken 2011/10/02
  • JavaScript Garden

    JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language. JavaScript Garden does not aim to teach you JavaScript. Form

    denken
    denken 2011/04/24
    画面幅によって右側のナビゲーションの表示方法を変えてる
  • ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌

    ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B

    denken
    denken 2010/06/29
    実行時やウィンドウのリサイズ時に周りのboxの高さや幅から自分のleft値とtop値を求めて絶対位置指定する。columnWidthが何の幅なのか、なにが100なのかとかくらい説明を加えてあげたらいいと思う。
  • 美味しいカステラなのに楽天メソッドが極まりすぎてて残念な場合

    長崎心泉堂の「幸せの黄色いカステラ」というのを楽天で取り寄せてみました。 とても卵の味が濃くて、甘さはその分抑えてあり、非常に美味しいカステラでした。 よくあるカステラとは明らかにひと味もふた味も違います。届いた1を数日でべきって、またすぐに注文しちゃったくらいです。 また、アフターケアも充実していて、買った後、こんなメールまで届いたのです。 題名:【長崎 心泉堂】カステラは無事お届けできていますか? お世話になります。 カステラ専門店【長崎心泉堂】 受注担当 待鳥智美です。 <中略> さて、ご注文の品は無事お届けできておりますでしょうか ご贈答の場合は、お届け先様にお気に召していただけましたでしょうか? カステラのお味はいかがでしたでしょうか? ぜひ、私どもに、お客様の声をお聞かせくださいませ。 お願いします。 というのも、お客様の声によりよい商品作りがあると考えるからです。 当社の

    美味しいカステラなのに楽天メソッドが極まりすぎてて残念な場合
    denken
    denken 2010/04/17
    おっしゃることはごもっともですが、はてブのxxx usersのリンク先がはてブのブクマページでなくページ内リンクになってるのは、その楽天のサイトと同じようにニールセン先生が顔をしかめると思いますよ
  • IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開

    業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U

    IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
  • 「次(Next)」と「前(Previous)」というナビゲーションには何かスッキリしないものがある - モジログ

    ウェブサイトで連続的な複数のページがある場合、そのナビゲーションには 「次(Next)」 と 「前(Previous)」 が使われることが多いが、これにはいつも、何かスッキリしないものを感じている。 ブログに代表されるように、たいていの場合は「日時の降順」、つまり「新しい順」に並んでいることが多い。それを考えれば、 「次(Next)」 = もっと古いもの(過去) 「前(Previous)」 = もっと新しいもの(未来) となるのは明らかではある。 しかし、ウェブやブログを前提としない、普通の「時間感覚」でいえば、前方に未来があり、後方に過去があるので(注)、 「次(Next)」 = 未来(もっと新しいもの) 「前(Previous)」 = 過去(もっと古いもの) という連想も働かないわけではない。 つまり、まったく反対の意味が、オーバーラップして重なってしまうわけだ。 ここでは、意味やラベ

    denken
    denken 2009/06/25
    ブログで次/前のリンクをそのエントリのタイトルにすると、現状のメジャーな検索エンジン仕様では誤爆が発生して面白くないのが問題。本文部分からだけ検索できるようにすれば良いのに
  • サービス終了のお知らせ

    サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

  • 株式会社ミクシィ

    株式会社ミクシィ・ミクシィグループの公式企業サイトです。企業情報、IR・投資家情報、ニュースリリース、採用情報などを掲載しています。

    株式会社ミクシィ
  • iduプラス

    不動産にまつわる文化的価値を、経済的価値へと昇華させる開発事業・オペレーション構築のiduプラス

  • ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介

    yamaokaです。 エラスティック・レイアウトというwebサイトのレイアウト手法をご存知でしょうか?  「エラスティック(elastic)」とは、ゴムのように弾力性がある状態のことです。 言い換えると「伸び縮みするレイアウト」になるでしょうか。 webサイトの代表的なレイアウト手法として、次の2つが挙げられるかと思います。 固定幅レイアウト リキッド・レイアウト 固定幅レイアウト 固定幅レイアウトでは、 コンテンツを格納するボックスの幅を以下のように絶対値で指定します。 div#container { width: 800px; } 固定幅レイアウトの場合、ウィンドウや文字のサイズが変更されてもレイアウトの枠は変わりません。 したがって、ウィンドウを大きくすると表示されるエリアが小さくなってしまったり、 文字のサイズを変更すると外枠が変わらないので読みづらくなってしまったりします。 リキ

    denken
    denken 2009/02/16
    横幅のem指定とmax/min-width
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    denken
    denken 2009/01/28
    新規登録ボタンを次へボタンに変えてユーザの障壁を下げた例
  • 例:「固定幅と可変幅のどちらがより適切なウェブデザインか」という議論をしている場合

    例:「固定幅と可変幅のどちらがより適切なウェブデザインか」という議論をしている場合 あなたが「可変幅は固定幅よりも優れている」っ言ったのに対して否定論者が… 事実に対して仮定を持ち出す 「可変幅は横スクロールが発生しないが、もし横スクロールが発生する可変幅なデザインがあったらどうだろうか?」ごくまれな反例をとりあげる 「だが、ユーザーCSSを使い全て固定幅で閲覧している人もいる」自分に有利な将来像を予想する 「何年か後、横スクロールバーが存在するという保証は誰にもできない」主観で決め付ける 「閲覧者自身が可変幅であることを望むわけがない」資料を示さず持論が支持されていると思わせる 「世界では、可変幅は横に広がって見難いという見方が一般的だ」一見、関係がありそうで関係のない話を始める 「ところで、Jintrickがアニメキャラのファンサイトを運営していたのを知っているか?」陰謀であると力説す

    例:「固定幅と可変幅のどちらがより適切なウェブデザインか」という議論をしている場合
  • ichiro.to

    This domain name is parked at Register.TO Domain Registrar.

    denken
    denken 2009/01/28
    画像が出たとたんにwidthのパーセント指定ができなくなって、結局max-widthを許すかどうかの政治問題になる。max-widthの実装が遅れたのってどんな事情があるのだろう
  • ‘web屋が主張する「リキッドレイアウト」に騙されないために’に騙されないために:ekken

    ウェブサイトのデザインに関する話で、固定幅派と可変幅派の意見対立は珍しくも無いのだけど、これはちょっと酷かったなー。 web屋が主張する「リキッドレイアウト」に騙されないために 私自身は今現在、最小・最大幅設定の可変幅を採用しているわけなんだけど、別に「固定幅憎しッ! セーバイしてくれるッ!」とか思っているわけじゃなくて、まぁ読みやすければ良いんじゃないのよ、などと言いながらハナクソをホジホジしている「どっちでもよかんべ派」 そのどっちでもよかんべの私が可変幅を採用しているのは、自分が読みにくいと思う他人のウェブサイトを閲覧する際に、文字サイズや表示領域を変更することが多いから。 表示領域を変更しているくせに、その最大・最小幅を限定しているのは、そのサイズより大きい・小さいと、なまら読みにくいべや、などと思っているからなのです。あ、今ちょっとだけ北海道弁が出てきたけど気にすんな。 で、安眠

    denken
    denken 2009/01/25
    関係ないけど、width:40em;text-align:justify;のユーザCSSをあてて、マウスを中クリックしてやや下にドラッグするとダラダラ読めていい。
  • 次のページのリンクを推測する上での困難メモ « ku

    HTMLから次のページのURLを推測するAPIを作る上での問題点メモ。 http://ido.nu/kuma/az-speculator/?u=http://jp.techcrunch.com/&callback=f&format=jsonp old/new, next/prev問題 デザイン上の問題として昔から言われているもの。時系列 descendant で並べてると見ていく人的にはNextはolderだけど、レイアウトする時は左側?右側?みたいなやつ。 これはクライアントが必ず1ページ目(連続するなにかの端)から見ていると仮定できるのなら、既に読み込んだページを記録して参照することで解決できる。 階層構造問題 Next articleとNext pageが同時に存在するとどっちを優先すればいいかはコンピュータにはわからない。単語の意味を知らないから。単語の意味を統計的に与えることは理

  • HTMLを綺麗に保つ12の原則 | エンタープライズ | マイコミジャーナル

    Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Chris Coyier氏がSmashing Magazineにおいて12 Principles For Keeping Your Code CleanのタイトルのもとHTMLコードをクリーンにするための12の原則を紹介している。厳密には11の原則だが、HTMLをクリーンに保つ上で実践的で効果的なものだ。WebデザイナやWebデベロッパは一度チェックしておきたい。12 Principles For Keeping Your Code Cleanで紹介されている原則を要約すると次のようになる。 [原則1] HTML 4.01を採用する場合でもXHTML 1.0を採用する場合でもStrict指定のDOCTY

    denken
    denken 2008/11/17
    デザイン上どうしても必要となるDivはJSで生成したらいいと思う
  • CSS 3における新しいレイアウト手法:ボックスレイアウト - builder by ZDNet Japan

    ウェブページのレイアウトでは、ヘッダーやサイドバー、コンテンツなどをどのように配置するかがポイントとなる。現在、配置のコントロールにはfloatやpositionプロパティを利用するのが一般的だが、CSS 3の「Advanced Layout Module」という草案では、新しいレイアウト手法が提案されている。 このレイアウト手法は「行と列のレイアウト」や「ボックスレイアウト」と呼ばれ、FirefoxとSafari、Google Chromeが対応している。 ボックスレイアウトの機能を利用すれば、これまでのfloatやpositionプロパティでは困難だった「段の高さを揃えた段組み」なども簡単に作成できるようになる。 そこで今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認

    CSS 3における新しいレイアウト手法:ボックスレイアウト - builder by ZDNet Japan
    denken
    denken 2008/11/14
    [display: box]「ブラウザで表示を確認する」をクリックすると404が出るんだけど
  • スクリーンショット.jp - 複数のブラウザ環境でサイトのレイアウトチェックツール

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

  • AutoPagerizeが効き過ぎる - 空繰再繰

    denken
    denken 2008/11/10
    それはマークアップとかデザインにも改善余地がある