HTML CSS アウトプット用メモ

webページを制作するときはまず枠組みを考える。

後共通で使えそうな設定のcss関係も

とりあえずHTMLはheader footerは絶対で次にそれ以外を使う一つのコンテンツでほとんど完結するなら<article>多分sectionとかmainとかで作った方が分かりやすいかも？

<header>

</header>

<div>

</div>

 <section>

</section>

 <section>

</section>

 <section>

</section>

<footer>

</footer>

みたいな感じ？ 

よくあるのはheader内には左にロゴ右にnavとか

HTML記述例

<header>

ロゴ画像ではなく文字で書く場合ここに記述

        ↓↓↓↓↓↓

<h1>サンプル</h1>

ここにメニューとか概要とか

   <nav　class="クラス名>

      <ul>

          <li>メニュー</li>

          <li>概要</li>

      </ul>

   </nav>

</header>

このままだと縦に並んでしまうのでcssで調整する

ここからcss

まずは高さとか色々

header {

height : 70px;  ⇦ヘッダー全体の枠の高さ

display:flex;  ⇦横並びにする　flexbox使える

justify-content : space-between;⇦なんか両端にいい感じなるやつ

line-height: 〜px;⇦行の高さ

padding:〜px; ⇦余白の設定

復習で色々やってたけどそんなに書けない・・・

合ってるかもわからん

疲れたからまた明日

確認用で色々書かなきゃ