黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、１つの値
美しいレイアウトを計算してくれるツール :: Love & Design ::
以前 Webデザインと黄金比の関係 でご紹介した、白銀比、黄金比、白金比、第二黄金比を使った美しいレイアウトを計算してくれるツールが、さらに再分割できるようになりパワーアップしました。 電脳狂想曲 レイアウトの小技 使い方と説明 実際に画像を表示しながら分割ができるので、サイドバーや画像の大きさを決めるときや、ロゴやメニューを配置するときに便利です。 【使用例】段組（２カラム）するとき 横幅780px の場合 黄金比：横幅 / 552px / 228px 白銀比：横幅 / 512px / 268px 白金比：横幅 / 571px / 209px 第二黄金比：横幅 / 565px / 215px ↓もしかして黄金比？ これまでテキトーに決めていたという方も、Webデザインだけでなく、プレゼンの資料などにも活用できそうなので、ぜひ一度お試しください。 参考記事 「見えない線」に沿ってページをレ
段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
有益なwebコンテンツの生み出すための5つのノウハウ*ホームページを作る人のネタ帳
人がもう一度訪れてみたいと思うサイトには、確実に良質なコンテンツが眠っている。 曖昧で、捕らえにくく、何それ美味しいの？とも言える『コンテンツ』。 そもそもコンテンツとは何なのか？ 一般的に言われているコンテンツとwebコンテンツとの違いはなんなのか？これを解決できるお手伝いになればと思います。 webサイトを成功に導くのはコンテンツであると言う事実 前日書いたエントリー。 webサイトを作る時に顧客とあらかじめシンクロしておくと良い7つの基礎の攻略をしていきたいと思います。 基礎その６のサイト必須7項目の一つに『何度か訪問したくなるコンテンツページ』と書いたのですが、すぐに何通かのメールが届きました。 具体的に良いコンテンツと言っても、どのように捕らえればよいのかわからず、作るのも大変だと思いますが、どのようにコンテンツを作っているのですか？ コンテンツと言っても、簡単ではないのは当然で
困った時のカラーイメージ＿WEBデザイナーのすすめ
サイトのイメージを左右する配色決めに悩んだ事ありませんか？クライアントに企業のイメージカラーがある場合も、どういった配色をすればもっともイメージカラーを生かせるか・・・また、イメージカラーがない場合、サイトに対する「思い」や「イメージ」に近い色使いにするためには・・・？そんな時のちょっとしたヒントになれば嬉しく思います。
ページ全体に枠線をつけるCSSテクニック:phpspot開発日誌
CSS Trick: Creating a?Body-Border - CSS-Tricks Hicksdesign has been “fiddling” with their site design. ページ全体に枠線をつけるCSSテクニック。 ↓ブラウザのサイズを変更しても、水色の枠が画面にフィットするCSSサンプルです。 まず、マークアップ。上下左右用にdivを作成 <div id="left"></div> <div id="right"></div> <div id="top"></div> <div id="bottom"></div> 次にCSS。left,right,top,bottomのtop,left,rightなどを調節して、上下左右に設定して枠線を表現しています。 #top, #bottom, #left, #right { background: #a5ebff
小粋なインターフェースを実現する25のコード （パート2） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
[JS]ブラウザの種類を検出して、CSSのセレクタで実装できるスクリプト | コリス
jQuery Browserは、スクリプトでブラウザの種類を検出して、CSSのセレクタとして実装できるスクリプトです。 jQuery Browser jQuery Browserは、ブラウザのもつplatformやuserAgentから、OSやブラウザの情報を取得し、セレクタを利用して、ブラウザごとのスタイルシートを適用することが可能です。 jQuery Browserでのスタイルシートの記述例 <textarea name="code" class="css" cols="60" rows="5"> div#browser-test{ border: 2px solid #000; padding: 10px; } ■Internet Explorer用 div#browser-test.msie{ background-color: #f00; } ■Firefox用 div#brow
プロが語るデザインの極意
お客様が希望されるデザインの条件は「かっこいいデザイン」 打合せでお客様のご要望をお聞きすると、多くのお客様が「カッコいいデザイン」とか「できるだけ安く」とか「急いでいるので早急に」とか、この3つを必ずおっしゃいます。 もちろんお客様のご要望は第一ですし、金銭的なものや時間的なことに関してはお気持ちを察し、対応させて頂きます。しかし、本当にそれだけで良いのでしょうか？ 本当に必要なデザインのポイントは効果を上げるために工夫すること。 デザインで一番大切なこと、それが抜けてしまっていては販促物での効果を得ることはできません。どんなにコストを安く抑えたとしても、効果がなければ利益も上がらず、結果的には損をしてしまうことになります。 ですから、私たちはテーマ（目的）をお客様と確認し合った上で、仕事を始めさせて頂くのです。 ここで言うテーマとは販促物で反応を得るということ。 そんなこ
Bridge Word
This shop will be powered by Are you the store owner? Log in here
Flashムービー上で右クリックを可能にするサンプル:phpspot開発日誌
Uza’s Blog & More Blog Archive SOLVED: Right Click in AS3 A day or two ago polyGeek has revived an old and challenging idea that one could make use of custom right-click functionality in Flash (AS3 Javascript).Flashムービー上で右クリックを可能にするサンプル。 Flash上では通常、右クリックするとFlashメニューが現れます。 ただ、この機能により、Flash上で右クリックが使えず、マウスの左右ボタンを使ったゲームなどが作れないという欠点がありました。 今回紹介するサンプルを使えば「デモ」のようにFlash上で右クリックが出来るようになります。 このサンプルを応用して、Flas
JavaScriptライブラリExtを使った伸縮するクールメニュー実装ライブラリ「Ext.Accordion」:phpspot開発日誌
JavaScriptライブラリExtを使った伸縮するクールメニュー実装ライブラリ「Ext.Accordion」 2007年06月20日- Ext.Accordion Widget Example by Saki This page is about the InfoPanel and Accordion javascript classes and its purpose is to allow the potential users to get the feel-and-touch of the user interface they provide. It contains also step by step instructions on how to integrate the Accordion to a web page. JavaScriptライブラリExtを使った伸縮する
ウェブデザインと海外のFlashや動画 | mBlog by mantiddesign
ウェブデザイン(Web Design)、CSS、Javascript、洋楽、ガンダム情報、海外のおもしろムービーやFlashなどを紹介。PENTAX K10Dや、Nikon D80, 70で撮影した写真
Online Generators | Developer's Toolbox | Smashing Magazine
Responsive design is a default these days, but we are all still figuring out just the right process and techniques to better craft responsive websites. That’s why we created a new book — to gather practical techniques and strategies from people who have learned how to get things done right, in actual projects with actual real-world challenges. Neatly packed in a gorgeous hardcover, the book featur
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの謎
知っておくといいかもしれないCSS、8つの小技 | IDEA*IDEA
A Handy CSS Debugging Snippet