web ページデザイン
ここでは、web ページの内容として表示されるヘッダー、ナビメニュー、コンテンツ、フッターを スタイルシート でレイアウトする方法を解説します。
web ページで表示されるのは <body> エレメントの中身です。この <body> エレメントにヘッダー、ナビゲーション、メイン内容、サブ内容、フッターを設けるのが一般的です。
HTML にはそのために <header>、<nav>、<main>、<aside>、<footer> タグが用意されていますのでこれらのタグを利用します。
これらの HTML タグのみでは内容が上から下へと羅列されるだけです。スタイルシート によってそれぞれの大きさや色合い、配置などを変更していきます。
ここでは、HTML テキストによる羅列された内容をスタイルシート（ CSS ）を利用してデザイン性のあるページに仕立てていく方法を簡単に紹介します。
<body> 以下のタグについて詳しくはページの構成 <header>,<nav>,<main>,<aside>,<footer>
を参照してください。
ページ内 Index
Web ページのレイアウトと スタイルシート
web ページとして表示されるのは <body> エレメントの中身です。
<body> 以外には、HTML テキストの形式宣言である!DOCTYPE、HTML テキストの中身として <html>、web ページの表示方法について <head> があります。これらのタグは web ページを構成するものとして重要ですがページとして表示されることはありません。
<!DOCTYPE html>
<html lang="ja">
<head>
... <!-- ページの設定情報 -->
<head>
<body>
... <!-- web ページとして表示される内容 -->
</body>
</html>
<body> エレメントの内に web ページとして表示されるコンテンツを入れます。さらにヘッダーやサイトリンク、フッターを付けてユーザーがページを見やすく理解しやすく、サイトを巡回しやすくするのが一般的です。
ヘッダーには <header> タグを、サイトリンクは <nav>、フッターには <footer> タグを使用します。
以下は <body> タグの内容例です。
重要なページ内容は <main> タグを使用します。さらに備考的な、メインではない内容を加える場合は <aside> を加えます。
このようにタグによって web ページを役割ごとに分けるのですがそれだけではただ上から下へ内容が羅列されるだけです。
スタイルシート によって、<header>、<nav>、<main>、<aside>、<footer> タグの大きさや色合い、配置など変更しデザイン性を向上させます。
Example
<header>、<nav>、<main>、<aside>、<footer> タグを スタイルシート によって大きさや色合い、配置など変更しデザイン性をもたせる例です。
以下の条件で、<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ページであることを示すタグエレメントです。
現在のサイト制作は、デザイン、記事作成、コーディング、サイト設計、サーバー管理と分業で行われているケースが多いです。
そのため、ウェブデザインとして組織的にが目標を達成するためのKPI（Key Performance Indicator）
やKGI（Key Goal Indicator）
といった指標を言及しています。
このサイトではコーディングに必要なリファレンスを扱っています。一般的に、ウェブデザインとはデザイン、記事作成、コーディング、サイト設計、サーバー管理全般を指しているようです。