ページデザイン

　ここでは、ページ内容のヘッダー、ナビメニュー、コンテンツ、フッターといった大まかな構成を CSS でレイアウトする方法を解説します。<body> エレメントの中身についてです

　webページは大まかに、ヘッダー、ナビゲーション、メイン内容、サブ内容、フッターと分けます。 HTML にはそのために <header>、<nav>、<main>、<aside>、<footer> タグが用意されていますのでこれらのタグを利用します。詳しくはページの構成　<header>,<nav>,<main>,<aside>,<footer>を参照してください。
　しかし、これらのタグのみでは内容が上から下へと羅列されるだけです。

　ここでは、HTML テキストによる羅列された内容をスタイルシート（ CSS ）を利用してデザイン性のあるページに仕立てていきます。

- ad -

Example

　以下の条件で、<header>、<nav>、<main>、<aside>、<footer> タグをレイアウトします。

<nav> 内の一覧はdisplay:flex;を使って横一列に並べる。
<main>、<aside> はdisplay:flex;を使って横に並べる。
<main>、<aside> は width プロパティで幅を 1200px として、padding プロパティまたは margin プロパティによって中心の揃える。
<aside> で min-height プロパティと height: auto !important; を使い最小の高さを設定する。

　<main> と <aside> のレイアウトのために <article> タグを利用しています。<article> タグは囲まれた部分が、1ページであることを示すタグエレメントです。

HTML

　以下の HTML テキストはページの構成　<header>,<nav>,<main>,<aside>,<footer>の例とほぼ同じものです。
　違いは、<main> と <aside> を <article> で囲んでいます。<main> と <aside> のレイアウトのためです。

CSS

　<nav> によるサイト内のページリンクは <ul> を利用しています。作成方法についてはTop Navigation Menuを参照してください。

　以下の確認ボタンをクリックしてみてください。上記の HTML や CSS の内容を反映したページを表示します。

　nav#top_navi といった部分で id 属性を利用してエレメントをセレクトしています。ここでは簡単な解説だけですが、今後 web ページを作成する上でセレクターで id 属性や class 属性を使用した方がよいでしょう。

　HTML テキストだけの状態よりもデザイン性が上がったのではないでしょうか。
　広告などの商用利用するにはまだまだデザイン性が低いです。いろいろなページを参考にしてみてください。

　ページデザインはワイヤーフレームというページの全体像をラフデザインするという技法があります。詳しくはワイヤーフレームで調べてみてください。

　A4 サイズの紙を横にしてページデザインを手書きで作成してみることをお勧めします。
　A4 サイズの紙だとページの最初の表示部分だけしか入りません。しかし、ユーザーが最初に目にする部分をデザインすることは重要です。そこに最も訴求している内容をもってきます。

　さらに、必要な事項があります。スマートフォン、タブレット、PCによってページレイアウトを変更して表示するレスポンシブ web デザインや Twitter、FaceBook といった SNS と連携する方法も必要になるでしょう。
　 Twitter、FaceBook といった SNS と連携する方法は OGP（ Open Graph protocol ）と呼ばれ、meta タグにそのための情報を設定します。

　現在のサイト制作は、デザイン、記事作成、コーディング、サイト設計、サーバー管理と分業で行われているケースが多いです。
　そのため、ウェブデザインとして組織的にが目標を達成するためのKPI（Key Performance Indicator）やKGI（Key Goal Indicator）といった指標を言及しています。
　このサイトではコーディングに必要なリファレンスを扱っています。一般的に、ウェブデザインとはデザイン、記事作成、コーディング、サイト設計、サーバー管理全般を指しているようです。