黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、１つの値
pruto.jp - よく使うCSSの話|基本編
2008.06.24 1年半ほど前の記事なので、現在は通用しない部分もあるかと思いますので最新の技術・流行り等を求めている方はご注意ください。 仕事を始めて数ヶ月が過ぎ、案件もいくつかこなしてきたりしてきた。 自分の仕事の進め方の中で毎度一瞬迷う部分がある。それはCSSを書き始めるときである。 どうしようかなーなんて迷いながらもなんだかんだで結局はいつも同じ形で出来上がるから今後どうしようかなーなんて迷わずにスパっと仕事に入れるようにするためのまとめてみよう。 はてなブックマークなんかでもよくCSS関連の記事が人気エントリーにあがってきたりして、それらを踏まえつついつか自分なりにまとめて書きたいとおもっていたから丁度良い。 色々あるからまずは基本となるところから。 仕事を始めて数ヶ月が過ぎ、案件もいくつかこなしてきたりしてきた。 自分の仕事の進め方の中で毎度一瞬迷う部分がある。それはCS
Flashなしでもここまで作れる！：ITpro
Webプログラミングは，プロはもちろんアマチュアのプログラマの間でも，もはや欠かせない開発ジャンルの一つです。しかし，書籍や雑誌の解説記事のほとんどが，データベースがどうとか，サーバーサイドがどうとか，どうしてもディープな方向に進んでしまう傾向にあります。もちろん，それはそれで大切なことなんですが，いったい何割の人が，その技術を“自分の”ホームページに使っているでしょう。 最近話題の「リッチ・コンテンツ」にしても同様です。例えばFlash。たしかにActionScriptというスクリプト言語を使えば，動く，鳴る，つながると，いいこと尽くめです。でも，いかんせん「Macromedia Flash MX 2004を買ってきてね」とあっては，皆がみな使えるわけではありません。 Part1でも解説があったようにblog（ブログ）の認知度が上がり，利用率も増えて，プロバイダからの提供体制も整ってきて
CSSを書く際の5つのテクニック:phpspot開発日誌
CSS tips and tricks at The Blog Herald CSSを書く際の5つのテクニック。 1. サイズ指定の際はピクセルを使うな。 body { font-size: 62.5% } p { font-size: 1.2em; line-height: 1.5em; } px指定してしまうとブラウザの文字サイズに反応しなくなってしまうというやつですね。 2. 階層構造はインデントして読みやすくしよう h1 {} h1#logo { font-size: 2em; color: #000; } h2 {} h2.title { font-size: 1.8em; font-weight: normal; } 確かに、これは分かりやすいかもしれません。今後導入しようと思います。 3. セクションごとにコメントを入れて構造化しよう /* Structure */ ...
Webデザイン エンジニアリング 第16回 ボタンを押させるテクニック：ITpro
対象とするユーザーの“慣れや知識”によって，画面の構成を変えたほうが伝わりやすいとするならば，画面上の「ユーザー・インタフェース（UI）部品」の色や形状も，ユーザーに応じて変えるべきでしょう。今回は，代表的なUI部品でありながら，なかなか作り手の思うように押してくれない「ボタン」について考えます。 わかりやすいボタンの形状はユーザーによって違う まず，前回とほぼ同じ絵を用います。Webシステムの操作方法への「熟知度（PCリテラシ）」を縦軸，「提供したいサービスに対する知識」を横軸とします。そして，それぞれの「軸」に対して，受け入れやすいと思われる「ボタン」の形状を例記しました。 上図の【A】や【B】のタイプに当てはまるPCリテラシの高いユーザーは，ボタンの“ラベル”に「submit」と書かれていようが「GO」と書かれていようが，ボタンを認識することはさほど苦ではありません。 しかし，PCに
ページをマトリックス風に表示するJavascript | S i M P L E * S i M P L E
これは新しい。 なんとあらゆるページをマトリックス風に表示してくれるのだ。（実際の動作はこちら） 実装するには以下の1行をコードに加えるだけ。 <script src="http://bodytag.org/bt_melter/bt_melter.js" type="text/javascript"></script> するとbodyタグの中身全部に適用される。 なお、javascript自体はbodytag.orgからダウンロードできる。 日本語にも対応しているようなので、サイトにアクセントを加えるちょっとした小細工として使えそうですね。
404 Blog Not Found:惰訳 - あなたのサイトの第一印象を決める21の要素
2007年11月29日07:20 カテゴリ翻訳/紹介iTech 惰訳 - あなたのサイトの第一印象を決める21の要素 21は多いけど、良い記事なので。 21 Factors that Influence the First Impression of Your Website’s Visitors << Vandelay Website Design あなたのサイトを初めて訪問した人が第一印象を決めるのはあっという間です。第一印象がよければ、その人が再びあなたのサイトを訪れてくれる確率は飛躍的に高まりますし、その一方で第一印象を覆すのは並大抵のことではありません。 以下のリストでは、その第一印象を決める21の要素を取り上げます。これらは要素の一部であってリストは完璧とは言えません。他にもあれば是非コメントして下さい。それでは、以下順不同に。 ロード時間(Load Time) - 我々のほと
AJAX Activity Indicators
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.
AJAXとCSSで作られたシンプルで見やすいプログレスバー「Ajax Progress Bar」
操作感はAJAXで、画像などはCSSで実装されたわかりやすいプログレスバーです。進捗状況などの表示が簡単にできます。また、クリックする度に10％増やしたり、あるいは減らしたりといったことも可能。いろいろなウェブアプリの開発などに応用できそうです。 詳細は以下から。 WebAppers Simple Ajax Progress Bar with CSS by WebAppers ライセンスはMITライセンスで提供されており、以下から実際に試してみることができます。 Demo http://www.webappers.com/progressBar/ 実際にダウンロードしてみると、prototype.jsを使っており、使用するイメージ画像は2種類。その組み合わせでバーの増減を表現するとは、なかなかいい発想。
Web2.0ナビ: ウェブサイトの横幅が1000px時代に突入する
いいね！ 0 ツイート B! はてブ 179 Pocket 4 ウェブサイトの横幅は、一昔前までは650pxが最適といわれ、4・5年前からは800pxが最もユーザビリティ上最適なサイズだった。大手ポータルサイトをはじめとして、800px未満で構築されたサービスが殆どだった。 しかし、ここ最近は800pxをあまり意識していないと思われるウェブサイトが多く登場してきた。mixi、AllAboutJapan、朝日/読売などは1000pxで最適化されている。ウェブサイトの横幅が1000px時代に突入しようとしているのだ。 # 厳密には950pxだったりするが、便宜上1000pxとしている。 ウェブサイトの横幅が1000px時代に突入しようとしているのには、大きく3つの理由がある。 画面解像度の向上 1000pxを表示するためには、それ以上の画面解像度のモニタが必要だが、今は1024以上のモニタが主
シンプルで美しく使い勝手のよいフリーアイコン集「Sizcons」:phpspot開発日誌
Sizcons - Random Jabber Sizcons is my own little icon set. Sizcons, if you couldn’t tell is a combination of my last name plus the word icons. シンプルで美しく使い勝手のよいフリーアイコン集「Sizcons」。 16x16と12x12のサイズをPNG形式にて配布しています。 サイト作りに役立てることが出来そうですね。 関連エントリ ブログに使えるフリーな超キュートアイコン集「Tiny Little Icons」 フリー＆フレッシュなアイコン配布サイト集２０＋ フリーのアイコンを探す＆入手できるサイト集 超クールかつロイヤリティフリーなMacOS Xアイコン集 ロイヤリティフリーなアイコン配布サイトいろいろ
ロゴデザインのリソースサイト集「105 Logo Design Tuts And Resources」 | DesignDevelop
皆さんはロゴデザインを考える時にどんな物を参考にしているでしょうか？今ある企業のロゴデザイン、昔のマーク、または全く関係のない物からと、作るロゴのテイストや使われる物の種類でも違ってくるとは思いますが、今回紹介するのはロゴデザインに役立つロゴで残を取り扱っているサイトをまとめた「105+ Logo Design Tuts And Resources」と言うエントリーを紹介したいと思います。 ロゴのリソースとなるようなサイトが集められています。かなりの数が紹介されていますが、その中からいくつか下記に紹介したいと思います。 詳しくは以下 ■Logo Design Trends – 2008 2008年のロゴのトレンドがまとめられているサイトこれは以前にも紹介しましたね。 ■LogoSauce ロゴ共有サイト。様々なロゴデザインがアップロードされています。 ■The Logos Of Web 2
CSSでお店のメニュー風なページを作成:phpspot開発日誌
CSS - A Recipe for Success If you look at most restaurant menus (or recipes) you will see the dish described on the left hand side followed by a dotted line that continues to the right side of the menu where the price is situated. Have a look at Figure 1 to see what I mean. CSSでお店のメニュー風なページを作成。 CSSで次のような、お店のメニューとプライスを書いたようなページを作成するチュートリアルです。 実際のデモページはこちら マークアップも次のように美しく作れます。 <ul> <li> <p><em>Lorem
なぜ「見た目」にこだわらないのか、IT部門の大きな勘違い
情報システムは「見た目」である――。こんなテーマの特集を執筆しながら、ふと我に返った。これは自分自身の仕事にも、全く同様に当てはまる、と。 「読んでもらえれば分かります」。記者という職業にとって、これは「禁句」である。いくら素晴らしい内容の記事でも、読んでもらえなければ無価値。だから記者は、見出しに最大の努力を払わなければならない。読者が雑誌や新聞をめくって、パッと目に入ってくるのは見出しだからだ。記事レイアウトの見やすさ、図や写真の的確さも欠かせない要素だ。 読んでもらえて初めて記事に価値が生まれるのだとすれば、記事の「見た目」がその価値を左右すると言える。 こう言っておきながら、自身を振り返ってみると非常に心許ない。もちろん気を遣ってはいたつもりだが、まだまだ足りないと思い至った次第である。 「使ってもらえれば」は禁句 実はほかにも、これと同じ感覚にとらわれたことがあった。Window
MTで実践 - CSSのモジュール化による管理方法と遊び方 - 3ping.org
1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザーでない方もローカルで確認できるパッケージがあるのでよかったらいじくってみてくださいね。 Movable Type テンプレート mt.vicuna Movable Typeのデフォルトソースを1から書き直し、シンプルで軽量、XHTML1.0 Strict DTD準拠です。基本的には1つのテンプレートソースに対して好みのスキンをあてこむ形で色々なデザインのウェブログが作れるようになっています。ごちゃ
JavaScriptでの画像プレビュー自由自在「PopBox」:phpspot開発日誌
PopBox! - Javascript Image Magnification PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page.JavaScriptでの画像プレビュー自由自在「PopBox」。 ページ内の画像をクリックするとページ内でそのまま、アニメーションしながら拡大。 PopBoxを使えば、そんな効果を実装することが可能です。 拡大だけではなく、比率の変更や、画像の移動、画像の縮小を行うことも出来ます。 凄く軽くて使いやすいです。もう、別ページで画像を拡大させるのは古い、と言われてしまうのかもしれませんね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カラーオンチなウェブデザイナーのお助けサイト : HotWeb Magazine
Webに関わるすべての人の基礎知識 - 社団法人 全日本能率連盟登録資格「Web検定」
CSSデザインで綺麗なボタンを作成する （How to make sexy buttons with CSS） - youmos
クールで質感のあるWeb2.0風ボタンを作成するツールキット「Button Devkit」:phpspot開発日誌