タグ

ブックマーク / kachibito.net (7)

  • iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design - かちびと.net

    いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト 似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patterns pttr

    iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design - かちびと.net
  • スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries - かちびと.net

    これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものにすることも出来そう。 特にjQueryやmootoolsといったスクリプトに依存してないのもいいですね。イメージ的には部分的にMedia Queryを手軽に使える、という感じでした。 わずか5KBほどの非依存型軽量ライブラリです。ディスプレイサイズ等で要素が指定した数値になると、class名を与えてくれるので、環境によってデザインを簡単に変更できるようになります。 上記はMedia Query T

    スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries - かちびと.net
  • お手軽WordPress Tips:1行のコードで追加できる便利な新機能「投稿フォーマット」を使ってみよう - かちびと.net

    WordPress3.2のリリースも間近に控え、 より楽しみが増える今日この頃ですが、 3.1から増えた新機能の投稿フォーマット がさほど普及していない印象が否めない ので微力ながら貢献してみようかなと 思います。 カスタム投稿タイプやカスタムタクソノミーなど、便利な新規能が山盛りなWordPressなんですが、Webデザイナーさんにとって嬉しい新機能といえば「投稿フォーマット」ではないかなと勝手に思い込んでいます。 1行のコードだけで済むので導入も楽ですし、デザインに貢献出来る機能でもありますので、「知らなかったよ!」という方はぜひ使ってみてください。 以下、参考になるページです。 投稿フォーマット – WordPress Codex WordPress3.1の新機能投稿フォーマットを試してみた。 | Simple Colors Simple Colorsさん(@jim0912)が分かり

    お手軽WordPress Tips:1行のコードで追加できる便利な新機能「投稿フォーマット」を使ってみよう - かちびと.net
  • グリッドレイアウトでWebサイト構築したい時にはGrid calculator and generatorが手軽で良さそう - かちびと.net

    なかなか手軽で自分向きだったのでメモ。 グリッドレイアウトを意識したWebサイトの 構築の際に、希望の幅を入れれば、その 幅に応じたグリッドレイアウト用のcssが 生産されます。ファイルはフレームワークの Blueprint cssが生成されます。 手軽で自分好みだったのでメモがてらご紹介。いわゆるグリッドレイアウト用の計算機です。 幅を入れるだけで、作れるレイアウトを自動で計算してcssも出してくれます。cssBlueprintベースのようですね。 この設定だけでOK。 例えば、960pxで164~200pxくらいのカラムを10px以内の感覚で開けて並べたいという時の設定値だと3通りのレイアウトがあるようです。 条件の幅を広げれば、作れるグリッドの種類も増えます。 レイアウトが決まったら Preview & Download CSSをクリックすればプレビューとDLが可能です。 コンテン

    グリッドレイアウトでWebサイト構築したい時にはGrid calculator and generatorが手軽で良さそう - かちびと.net
  • まずは基本から・HTML5のCanvasについて参考になったサイトまとめ - かちびと.net

    ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、基的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。 html5.jp リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。 html5.jp ~HTML 5で導入されるcanvas要素の使い方~ 同じく教科書的なサイト。ありがたい。まだ、ざっと読んだだけですが、すごく分かりやすかったです。 ~HTML 5

  • 携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net

    ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneAndroidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト(html)の制作に入る前に確認しておきたいチェック項目 サンプルを元に解説してくれているので分かりやすいです。 携帯サイト(html)の制作に入る前に確認しておきたいチェック項目 携帯サイトの作り方 5年前の情報なので参考程度に。今は随

  • 「吹き出し」をツールチップとして実装するjsいろいろ

    マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので

    「吹き出し」をツールチップとして実装するjsいろいろ
  • 1