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

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

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

★今日の内容

■横並びの設定
ニュースページのメインコンテンツ部分を作っていく。
2カラムの構成なので、2つのボックスを横に並べてレイアウトを組む。

〇レイアウトの骨組みを作成
Flexboxを使ってメインエリアとサイドバーを横に並べる。2つのボックスを親要素で囲む。
<div id="news" class="big-bg">と「footer」の間に「news-contents」「wrapper」クラスのついた<div>タグを書く。
さらにその中には記事を表す<article>タグでメインエリア部分を、補足説明を表す<aside>タグでサイドバー部分を作成。

〇レイアウトを組む
◆幅を指定する
<article>タグと<aside>タグに幅の指定。単位を「%」にすることで、画面幅が変わっても伸縮するようになる。
◆Flexboxで横並びにする
「.news-contents」に「display: flex;」を指定して横並びにする。
「justify-content: space-between;」を足すと子要素が両端に揃えられるので、自動的に2つのボックスの間に余白が生まれる。

■メインエリアを作る

〇記事の情報部分の作成
まずはHTMLで記事上部に表示するタイトル、日付、カテゴリー部分の作成。
<header class="post-info">部分を書く。
年は<span>タグで囲う。<span>タグはCSSで文字を装飾するための指定で、HTMLの構文には影響しない。
◆日付の装飾
<header>タグ内の「.post-info」に余白と「position: relative;」を指定。
「position」は要素の位置を決めるためのプロパティ。
続いて日付部分。背景色や、形を円にするための「border-radius」、及びサイズなどを指定。
「position: absolute;」を追加することで、前述の「.post-info」部分を基準にした絶対位置を指定できる。
続いて月日と年の間に薄く水平線を入れる。線は「border-top」で指定。ここでは、白い線を50%の割合で不透明にして表示。
◆タイトルとカテゴリーを装飾する
タイトル部分はフォントや文字サイズ、文字の太さを指定。
タイトルとカテゴリーを日付の右側に配置したいので、「margin-left」で調整。

〇画像と本文を書く
作成した<header class="post-info">の下に画像と本文を書く。
文章は段落ごとに<p>タグで囲む。
CSSで画像と本文に余白を足す。

■サイドバーを作る
〇見出しと文章の装飾
「news.html」の<aside>タグの中にサイドバーに掲載するコンテンツを書いていく。
カテゴリーリストは<ul>タグで作成。見出しにはCSSで下線をつけて装飾し、文字サイズや余白などを調整。
文章には「padding」で要素の内側に余白をつけて見やすくする。

〇カテゴリーリストの装飾
CSSのデフォルトではリスト項目に丸いマークがるいているので、「list-style: none;」で非表示にする。
<a>タグに「display: block;」を加えることで、通常テキスト部分しかクリックできないが、リスト項目の横幅いっぱいまでクリック範囲が広がる。
よりクリックしやすく、使いやすいWebサイトとなる。
「a:hover」ではカーソルを合わせたときの装飾をする。

以上です！