ページの幅960pxを基準にして、設計す
2011年2月18日http://seo.e873.net/
ページの幅960pxを基準にして、設計するグリッドデザイン | コリス
ページの幅960pxを基準にして、設計するグリッドデザイン|コリス#searchword{background-color:#fedad5;text-decoration:inherit;}hs.graphicsDir=’/shared/js/highslide/graphics/’;vartoAnchor=function(idName){if(!!idName)coliss.toAnchor(idName);elsecoliss.toAnchor();}$j(document).ready(function(){$j(’textarea.resizable:not(.processed)’).TextAreaResizer();//$j(’textarea.expanding’).autogrow();dp.SyntaxHighlighter.ClipboardSwf=’/shared/js/dp.SyntaxHighlighter/clipboard.swf’;dp.SyntaxHighlighter.HighlightAll(’code’);setAnchorAction();});varWRInitTime=(newDate()).getTime();コリスaboutcontactsitemapsearchサイト構築-デザインページの幅960pxを基準にして、設計するグリッドデザイン960GridSystemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。960GridSystemデモページ960pxを基準にする理由としては、下記の2つが挙げられています。最近のモニターは1024×768の解像度をサポートしており、960pxを表示するには十分である。960という数字は、2,3,4,5,6,8,10,12,15,16,20,24,30,32,40,48,60,64,80,96,120,160,192,240,320,480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることができます。またサイトでは、資料としてHTML+CSSをはじめ、PDFファイル、PSD・PNG・VSDファイルが一式でダウンロードできます。グリッドの詳細については、下記ページにもエントリーがあるので参照ください。グリッドシステム-サイトへの有効活用方法Poston:2008年3月25日[Bookmarklet]オリジナルのグリッドを表示するブックマークレット-GridMark[Bookmarklet]リアルタイムに変更できるグリッドを表示するブックマークレット-Gridv0.4オンラインで確認しながらグリッドの設計ができる-GridDesignerやなどの指定を無効化する方法[CSS3]W3C、GridPositioningModuleのドラフトをリリース[Bookmarklet]ウェブデザインの確認に最適なブックマークレット-Design紙をモチーフにデザインしたウェブサイト25選インスピレーションを与えるウェブデザインのコレクションサイト-Konigiビジュアルコミュニケーションの歴史を紐解く-TheHistoryofVisualCommunicationページのグリッドをチェックできるFirefoxのエクステンション-GridFoxsubmityuichison2008年3月26日印刷した際にA4用紙幅で収まることも、WEBページのレイアウトには欠かせないファクターだと思います。特に技術系や情報系サイトの場合。有益な情報は印刷したいと言う人はそれなりに多く、いざ印刷してみるとページが切れて・・・とかｗこれはCSSを多様するようになって問題が増えてきましたね。960pxは同意。でも３コラムにして、中央を700px、左右を130pxずつ振り分け、印刷する際は中央部分のみ印刷されるようにCSSを配慮する等。p.s.このサイトの確認ブラウザはsafari？firefoxは無難に表示されているけど、Ie6だと不表示部分がありますね（汗コリスon2008年3月26日おっと、IE6だと非表示になってたり、ずれたりしてしまうところがありますね。IE8のテストに夢中になってました。このサイトは実験的なことをするので（このtextareaとかも）、問題点は多数あります。すぐにIE6の修正はできないですが、ご了承ください。P.S. ページ幅やグリッド設計はプロジェクトにより異なるので、これが唯一だ、というのは無いと思います。方法論の一つとして、僕はとらえています。日々、ウェブデザインとネットニュースとゲームとか。on2008年3月26日モンスターハンターポータブル2ndＧ発売前日。…もう発売前日ですね。明日から、ここがモンハンプレイブログになりそうで怖いです。笑公式サイトで、ＯＰのムービーが公開されてます。私…(more…)takumaの「デザインはあれでアートはそれで」on2008年3月27日「960デザイン/設計」…デザイン好きです。コンテンツ設計大好きです。Takumaです。 【設計】１建造物の工事、機械の製造などに際し、対象物の構造・材料・…(more…)ページの先頭へ求人情報|転職|アルバイト|派遣1分間で学ぶ、ウェブサイトのユーザビリティショッピングの進捗状況を表すプログレスバーのデザインサンプル集[JS]マウスやキーボードのイベントのリファレンスとブラウザの対応状況紙をモチーフにデザインしたウェブサイト25選[JS]現在位置を示すナビゲーションを作成するチュートリアル[WordPressのプラグイン]ページをめくるような画像ギャラリー-DivvaFlip見出しやアクセントにつかえるフリーのフォント3種3Dの空間で、ダイナミックな動きをみせるFlashの画像ギャラリー-Flash3DWall[CSS]アイデア満載のスタイルシートのテクニック30選笑って許せる？ オフィスに仕掛けられたジョーク集[CSS]スタイルシートで描く、ホーマーのイラストさまざまなブラウザやメールでのレンダリングが確認できる-Litmusロシアのクールで美しいデザインを一覧できるギャラリーサイト[JS]軽量のスムーズに開閉するドロップダウンメニューのスクリプトWordPressのパスワードをマニュアルでリセットする方法サイト構築サイト構築-調査・分析サイト構築-制作サイト構築-デザインサイト構築-ライティングサイト構築-CSSサイト構築-JavaScriptサイト構築-スタイルガイドサイト構築-検証サイト構築-運用・更新サイト構築-携帯サイトSEO対策SEO対策-制作SEO対策-検索エンジンブラウザブラウザ-InternetExplorerブラウザ-Firefoxブラウザ-Operaブラウザ-SafariウェブサービスドメインHardwareHardware-キーボードSoftwareSoftware-WindowsVistaWordPressWordPressのプラグインDigresslifehack.orgMashable!SmashingMagazineSEOmozRead/WriteWebすきまう[エコ・音楽ブログ]WordPressif(typeofClickTale==’function’)ClickTale(7311,0.5);vargaJsHost=(("https:"==document.location.protocol)?"’"+gaJsHost+"google-analytics.com/ga.js’type=’text/javascript’%3E%3C/script%3E"));varpageTracker=_gat._getTracker("UA-1009443-1");pageTracker._initData();pageTracker._trackPageview();
ページの幅960pxを基準にして、設計するグリッドデザイン | コリス
ページの幅960pxを基準にして、設計するグリッドデザイン|コリス#searchword{background-color:#fedad5;text-decoration:inherit;}hs.graphicsDir=’/shared/js/highslide/graphics/’;vartoAnchor=function(idName){if(!!idName)coliss.toAnchor(idName);elsecoliss.toAnchor();}$j(document).ready(function(){$j(’textarea.resizable:not(.processed)’).TextAreaResizer();//$j(’textarea.expanding’).autogrow();dp.SyntaxHighlighter.ClipboardSwf=’/shared/js/dp.SyntaxHighlighter/clipboard.swf’;dp.SyntaxHighlighter.HighlightAll(’code’);setAnchorAction();});varWRInitTime=(newDate()).getTime();コリスaboutcontactsitemapsearchサイト構築-デザインページの幅960pxを基準にして、設計するグリッドデザイン960GridSystemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。960GridSystemデモページ960pxを基準にする理由としては、下記の2つが挙げられています。最近のモニターは1024×768の解像度をサポートしており、960pxを表示するには十分である。960という数字は、2,3,4,5,6,8,10,12,15,16,20,24,30,32,40,48,60,64,80,96,120,160,192,240,320,480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることができます。またサイトでは、資料としてHTML+CSSをはじめ、PDFファイル、PSD・PNG・VSDファイルが一式でダウンロードできます。グリッドの詳細については、下記ページにもエントリーがあるので参照ください。グリッドシステム-サイトへの有効活用方法Poston:2008年3月25日[Bookmarklet]オリジナルのグリッドを表示するブックマークレット-GridMark[Bookmarklet]リアルタイムに変更できるグリッドを表示するブックマークレット-Gridv0.4オンラインで確認しながらグリッドの設計ができる-GridDesignerやなどの指定を無効化する方法[CSS3]W3C、GridPositioningModuleのドラフトをリリース[Bookmarklet]ウェブデザインの確認に最適なブックマークレット-Design紙をモチーフにデザインしたウェブサイト25選インスピレーションを与えるウェブデザインのコレクションサイト-Konigiビジュアルコミュニケーションの歴史を紐解く-TheHistoryofVisualCommunicationページのグリッドをチェックできるFirefoxのエクステンション-GridFoxsubmityuichison2008年3月26日印刷した際にA4用紙幅で収まることも、WEBページのレイアウトには欠かせないファクターだと思います。特に技術系や情報系サイトの場合。有益な情報は印刷したいと言う人はそれなりに多く、いざ印刷してみるとページが切れて・・・とかｗこれはCSSを多様するようになって問題が増えてきましたね。960pxは同意。でも３コラムにして、中央を700px、左右を130pxずつ振り分け、印刷する際は中央部分のみ印刷されるようにCSSを配慮する等。p.s.このサイトの確認ブラウザはsafari？firefoxは無難に表示されているけど、Ie6だと不表示部分がありますね（汗コリスon2008年3月26日おっと、IE6だと非表示になってたり、ずれたりしてしまうところがありますね。IE8のテストに夢中になってました。このサイトは実験的なことをするので（このtextareaとかも）、問題点は多数あります。すぐにIE6の修正はできないですが、ご了承ください。P.S. ページ幅やグリッド設計はプロジェクトにより異なるので、これが唯一だ、というのは無いと思います。方法論の一つとして、僕はとらえています。日々、ウェブデザインとネットニュースとゲームとか。on2008年3月26日モンスターハンターポータブル2ndＧ発売前日。…もう発売前日ですね。明日から、ここがモンハンプレイブログになりそうで怖いです。笑公式サイトで、ＯＰのムービーが公開されてます。私…(more…)takumaの「デザインはあれでアートはそれで」on2008年3月27日「960デザイン/設計」…デザイン好きです。コンテンツ設計大好きです。Takumaです。 【設計】１建造物の工事、機械の製造などに際し、対象物の構造・材料・…(more…)ページの先頭へ求人情報|転職|アルバイト|派遣1分間で学ぶ、ウェブサイトのユーザビリティショッピングの進捗状況を表すプログレスバーのデザインサンプル集[JS]マウスやキーボードのイベントのリファレンスとブラウザの対応状況紙をモチーフにデザインしたウェブサイト25選[JS]現在位置を示すナビゲーションを作成するチュートリアル[WordPressのプラグイン]ページをめくるような画像ギャラリー-DivvaFlip見出しやアクセントにつかえるフリーのフォント3種3Dの空間で、ダイナミックな動きをみせるFlashの画像ギャラリー-Flash3DWall[CSS]アイデア満載のスタイルシートのテクニック30選笑って許せる？ オフィスに仕掛けられたジョーク集[CSS]スタイルシートで描く、ホーマーのイラストさまざまなブラウザやメールでのレンダリングが確認できる-Litmusロシアのクールで美しいデザインを一覧できるギャラリーサイト[JS]軽量のスムーズに開閉するドロップダウンメニューのスクリプトWordPressのパスワードをマニュアルでリセットする方法サイト構築サイト構築-調査・分析サイト構築-制作サイト構築-デザインサイト構築-ライティングサイト構築-CSSサイト構築-JavaScriptサイト構築-スタイルガイドサイト構築-検証サイト構築-運用・更新サイト構築-携帯サイトSEO対策SEO対策-制作SEO対策-検索エンジンブラウザブラウザ-InternetExplorerブラウザ-Firefoxブラウザ-Operaブラウザ-SafariウェブサービスドメインHardwareHardware-キーボードSoftwareSoftware-WindowsVistaWordPressWordPressのプラグインDigresslifehack.orgMashable!SmashingMagazineSEOmozRead/WriteWebすきまう[エコ・音楽ブログ]WordPressif(typeofClickTale==’function’)ClickTale(7311,0.5);vargaJsHost=(("https:"==document.location.protocol)?"’"+gaJsHost+"google-analytics.com/ga.js’type=’text/javascript’%3E%3C/script%3E"));varpageTracker=_gat._getTracker("UA-1009443-1");pageTracker._initData();pageTracker._trackPageview();
コメント