ウェブページの構成に関するリソースを探しています。
さまざまなページレイアウトの長所と短所、およびページ内で目を動かすテクニックについて知りたいのですが。
ウェブページの構成に関するリソースを探しています。
さまざまなページレイアウトの長所と短所、およびページ内で目を動かすテクニックについて知りたいのですが。
回答:
質問には、何日も何日も勉強する必要があるかなり広い答えがある可能性がありますが、私は短いものを試してみます。
紙のように目に見えないグリッドに従ってレイアウトを設計する必要があります。これは、Webのように、すべてを適切な配置と整頓に保つのに役立ちます。問題は、Webではサイズと比率が変更可能であり、コンテンツは多くの側面（設定の設定、モニターの調整、照明、モニターのサイズ、ブラウザー、オペレーティングシステムなど）で動的であることです。
このため、物事のプロポーションは考慮せず、クラシックなセットアップに集中しましょう。古典的なレイアウトは、上部にヘッダー、下部にフッター、中央に3列（左右は中央よりも小さい）です。それは2列以上のウェブサイトである可能性があります。すべては、持っている情報の量、表示したい量、または持っている情報の間に置きたい "空気"（別名：空白）の量によって異なります。 。
注：列を埋めるコンテンツが異なる場合、列（同じ水平行にある列）を同じ高さに揃えるなど、CSSの技術的な制限があることに注意してください。ブラウザーが最新の標準でCSSレンダリングを更新するまで、人々は クリエイティブソリューションで修正しようとしています
4つの可能なレイアウトがあります。
1）固定レイアウト：ブラウザ内に表示される特定のサイズ内に収まるすべてのdivをpxで定義します（例：800x600内）。
pro：デザインは安定していますcon：ユーザー画面によっては余白が多くなる可能性があります
このソリューションでは、左（大きなギャップが右にあり、グラフィックの背景で遊ぶことができることを知っている）または中央に揃える（左と右の空白を分割し、左揃えよりも量を減らす）かを決定できます。
2）流動的なレイアウト：ページは画面のサイズに適応し、コンテンツを移動して適応させます
プロ：常に制御されていない空白を残さずにページを埋めますcon：プロポーションとコンテンツを配置するグリッドの制御を失います（例：より高い画面解像度で1つの長い単一行の文になる、より多くの行の1つの段落）。
3）オリジナルのレイアウト：レイアウトとグリッドのルールを破ることに基づいています。彼らは古典的な列レイアウトを使用せず、ウェブサイト全体に情報を表示するなどのグラフィックデザイン効果に主に基づいており、他のソリューションよりも絶対的な配置を使用しています。Webでの芸術的な楽しみやクレイジーなポートフォリオに適しています（私はそれには反対しませんが、Webデザインコミュニケーションのルール、技術的、そしてクリエイティブな努力の知識が必要です）。
申し訳ありませんが、現時点では例が見つかりません。
プロ：美的で独創的な欠点：商用ウェブサイトやブログなど、大量の情報を含むものには使用できません。
4）動的な固定レイアウト：私の個人用Webサイト、およびWebサイトを柔軟であるが制御下に置くために時間を費やす時間のあるクライアントWebサイトに、現在使用しています。それは単なる固定レイアウトにすぎませんが、常に画面サイズをチェックし（サイズ変更の場合やサイズを判別するため）、そのサイズに適切なCSSを渡すJavaScriptを使用します。したがって、画面のサイズに関係なく、常に適切に制御できます。たとえば、3列のレイアウトがある場合、ブラウザーのサイズを変更すると、3番目の列が非表示になり、フッターの前のコンテンツの下部に移動するように決定できます。
pro：完全な制御+柔軟性con：将来的に新しいコンテンツを追加し、すべてが正常に機能する必要があるため、問題がないことを確認するために費やす時間の設計とデバッグに多くの労力を費やします。
私がインスピレーションを得た記事 （今日、jqueryはresize（）で素晴らしい仕事をしています。3年前、私はそのために長い長いスクリプトを持っていました:)）
最後の注意 今日、グラフィックWebデザイナー（プログラマーよりグラフィックデザイナーの方が多い）には新しいトレンドがあり、固定レイアウトを使用して、ブログの各ページを雑誌のようにデザインしています。クリエイティブで、すべての記事を彼自身のスタイルでデザインしています。
その他の記事：
そこにもっと記事があります。「cssレイアウト」を探します。または、シグナル対ノイズのように、使いやすさとデザインについて話をしている場所に従ってください
作曲に関して知っておくべきことは、経験と研究、またはユーザビリティテスト（試行錯誤）だけです。あなたのウェブサイトの前に誰かを置いて、彼らがあなたのデザインにどのように反応するか見てください。またはアイトラッキングデバイス:)
私は独学で作曲に関する本について提案することはできませんが、グリッドレイアウトに関する優れた本はあなたを大いに助けてくれます。
Webデザインのレイアウトに優れたシステムが必要な場合は、960グリッドシステムをご覧ください。ほとんどのレイアウトで使用しています。また、PhotoshopやInDesignなどのさまざまなパッケージで使用するための優れたテンプレートや、すべてのWebサイトの落書きのニーズに対応する印刷可能なテンプレートもあると思います。
また、さまざまなレイアウトの良い例をここで見ることができます：http : //designshack.co.uk/articles/layouts/10-rock-solid-website-layout-examples