縦書き文庫の開発日誌 960 grid system メモ
2009年12月 / 11月≪ 12345678910111213141516171819202122232425262728293031≫01月 ブラウザごとのレイアウト整合性を確認するのがしんどくなってきたので、何か統一的に使えるCSSフレームワークを導入しようと思いました。 以前に同じようなことを思ってblueprint.cssを使ってみたのですが、IEのときに別ファイルを読まないといけない仕様が面倒だな、と思っていました。 しかし、960 Grid System というグリッドフレームワークではそういうことはないみたいです。素晴らしい。 グリッドのサイズを自分好みに変えたい場合は、こちらのジェネレーターから作成できるようです。 使い方はデモページをFirebugの「要素を調査」などで追いかけるだけでわかりますが、毎回調べるのもあれなので、自分用の覚え書きを残しておきます。b
配色パターンからWebデザインを考える
2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト！ まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和食・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い＝明るい色はさわやかで爽
jQuery Fubar – How To Create A Website Toolbar From Scratch And Add Widgets To It | AddyOsmani.com | Where Web Businesses Grow
Over the past year, we’ve seen website toolbar’s become an increasingly popular way for site-owners to offer users a consistent set of powerful social features, regardless of what page they’re on – Share, Subscribe, Tweet, Talk – you name it and chances are there’s a toolbar out there that offers some variation of these features. Facebook were one of the first companies to introduce this toolbar c
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
jQueryで作る垂直メニュー7 – creamu
jQueryでシンプルな動きのメニューを作りたい。 そんなときにおすすめなのが、『7 Vertical Menus With jQuery Effects』。jQueryで作る垂直メニュー集です。 メニューにマウスオーバーすると、 中のテキストがすっと右にずれたり、背景がびよーんと伸びたりするメニューの実装方法になっています。 jQuery Easing Pluginを使っていて動きが滑らかなので、気持ちいいですね。 デモは以下から。 View Demo 一度見てみてください。 7 Vertical Menus With jQuery Effects ふぅ、やっと少し落ち着いた。今週はずっと集中しっぱなしでした。昨日ブログ書けなかった分を挽回挽回！ Web Designingの方にお声がけいただいて、「サイトを彩るパーツのアイデア集」という特集で、見出しやテーブル、検索ボックスやTwitt
アイコンがふわっと拡大するjQuery – creamu
マウスオーバー時に気持ちのいい効果をつけたい。 そんなときにおすすめなのが、『BubbleUP』。アイコンがふわっと拡大するjQueryです。 アイコンにマウスオーバーすると、ふわっとサイズが大きくなりますね。動きが滑らかで気持ちいいです。 デモは以下から。 jQuery Menu Plugin: BubbleUP 実装方法も詳しく解説されているので、ぜひ見てみてください。 Learning jQuery: Your First jQuery Plugin, “BubbleUP” ブログ遅くなりました。。昨日は書けなかった。すんまへんm(_ _)m 急いで作業しているところでOSが起動しなくなり、ここ数年で一番大変な日を過ごしました。。。 セキュリティーについて深く考えさせられたので、心機一転してがんばります。
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
RedLine Magazine : 印刷用CSSのお話
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
スタイリッシュなWEBフォームの実装例いろいろ:phpspot開発日誌
25 Stylish Examples of Web Forms スタイリッシュなWEBフォームの実装例がいろいろと紹介されており、一部ご紹介。 フォームというと簡単なデザインで済ましてしまう場合が多いと思いますが、こうしたところにもこだわっていると力の入れ加減が伝わってきますね。 デザイン自体もなかなか難しいと思いますが、参考にして綺麗なフォームが作れそう。 Alexandru Cohaniuc 壁に貼ったみたいなインタフェースでオシャレ Tea Round App 角丸で立体的なフォームがナイス Grooveshark 子ダイアログ風のポップアップフォーム Substrakt Matt Pixelight Creative 全部見る デザインを学んだ上で、ユーザビリティについても考え、あくまで利用者視点にたった使いやすいフォームを作りたいものですね 関連エントリ CSSでデザインされた
| ＾＾ |秒刊SUNDAY | 鼻血が出るほど高センスなWEBデザインサイトギャラリー集まとめ
2009年06月08日 鼻血が出るほど高センスなWEBデザインサイトギャラリー集まとめ カテゴリ：WEBデザイン デザインサイト集というのは、こんなにも沢山出来上がっているとは知らなかったのですが、仕事柄かなり活用しますのでここで抑えておきたいと思います。 ◆いけてるサイト.com このサイトを紹介しないと、この記事のコンセプトがわからないので、とりあえずフリということで。 ■WEBデザイン リンク集 : ikesai.com --- いけてるサイト ドットコム（WEBデザインの参考にどうぞ） ◆Webデザイン・Webデザイナーのまとめサイト 膨大なデータベースです。色やキーワードで検索できる。ここにいけばほぼそろうか？ ■Webデザイン・Webデザイナーのまとめサイト | Webデザインに優れたサイトのリンク集 ≪デザインリンクデータベース≫ ◆WEBデザイン・データベースWEBdeDB
CSSでイメージをオシャレに修飾するサンプル集「CSS Decorative Gallery」:phpspot開発日誌
CSS Decorative Gallery I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images.CSSでイメージをオシャレに修飾するサンプル集「CSS Decorative Gallery」。 イメージにＣＳＳをあてることで、次のように、セロハンテープで貼り付けたり、画鋲でとめたりといった効果を出すことができます。 デモページはこちらでＩＥ６でも問題なく動作。 沢山種類があって、色んな場面で使えそうです。 これは久しぶりに感動しました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
IDEA * IDEA
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌