【今日学んだこと】HTML CSS Webデザイン

今日は、Webデザインの勉強をしました。

今日の内容をまとめていきたいと思います。

★今日の内容

■2カラムのWebサイトを制作する

〇 2カラムのレイアウトとは
「カラム」とは縦の列のこと。
垂直方向にコンテンツを区切ってレイアウトを組むことを「カラムレイアウト」という。
〇2カラムのレイアウトのメリットと構成要素
2カラムのレイアウトとは「2列に並んだレイアウト」のこと。
コンテンツ量が多いニュースサイトやブログなどのWebサイトの見せ方として適している。
汎用性が高いので作り方を覚えておく。

〇2カラムの幅の比率
多くの場合は、メインエリアとサイドバーを「2:1」「3:1」という割合で作成している。
デザインや内容によっては半分で割ってみても良い。そのようなレイアウトを「スプリットスクリーン」と呼ぶ。

■2カラムページの制作の流れ
〇制作の流れ
01.ページ全体の見出しを作成
ページ全体の見出しを作成していき、ページ上部に背景画像とともにページタイトルを表示させる。
02.「footer」の作成
画面の最下部に表示するフッターを作成する。
03.横並びの設定
2カラムのレイアウトを組んておく。先にレイアウトを確定しておくことで、全体の構成が崩れにくくなる。
04.メインエリアの作成
画面左部分のメインエリアを作成。ニュースサイトやブログの記事によくある見出しや画像、文章を配置。
05.サイドバーの作成
カテゴリーの一覧リストや紹介文など、ページの補足説明となる部分をサイドバーに設置。
06.レスポンシブに対応させる
スマートフォンで見ると1カラムになるように変更。

■ページ全体の見出しを作成
ページ上部に表示させる見出しの部分から作成していく。背景画像は画面両端に広がるように、横長の画像を用意。
〇ファイルの準備
index.htmlを複製し、news.htmlという名前で保存。
共通部分が多い場合は、既存のファイルを複製して編集していくとミスが少なくて済む。

〇HTMLを編集
共通部分は残し、必要な箇所は編集していく。
◇「head」内の「title」を編集
ニュースページ用のタイトルに変更。
◇不要なコンテンツを削除
ホームページのコンテンツである<div class="home-content wrapper">部分はこのページでは不要なので削除。
◇ID名を変更
「home」とつけていたIDを「news」に変更
◇見出し部分を追加
「header」の下に見出しとして表示する部分を追加。

〇CSSで装飾
CSSファイルは新たに作成する必要はない。style.cssに書き足していく。
CSSファイルは先に制作してあるものを利用することができる。
背景画像や見出し部分の高さ、余白などを指定。

■フッター部分を作成
画面の一番下にコピーライトを記述。
〇フッターコンテンツを記述
<div id="news" class="big-bg">部分の下、</body>の上にフッターを記述する。
コピーライトは<small>タグで囲む。
<small>タグは免責や著作権などの注釈を表すタグ。
「©」はブラウザーで「©」と表示させる記述。

〇CSSで装飾しよう
CSSでは背景色や文字色、文字サイズ、余白などの指定をする。

以上です！