模写コーディングに初挑戦（１）の続きです。
書きかけです。
HTMLの全体コーディング・続き
コーディングの前作業に結構いろいろと注ぎ込んだけれど、ようやくメインの作業に入る。
レイアウトやパーツ名を書いた、構成図を出してくる。
それをみながら、index.html の<body> に全体の構成をいれる。図でいうと、オレンジ・緑・ピンクの部分を、サイトの骨組みとして記述するイメージ。
<body>
<header id="header"></header>
<main>
<div id="mainvisual"></div>
<section id="about"></section>
<section id="works"></section>
<section id="news"></section>
<section id="contact"></section>
</main>
<footer></footer>
</body>
模写コーディングの手順を読むと、ここで、HTMLにCSSを当てていくのがよいとあるので、CSSも書き始める。 css フォルダーを作成し、その中に style.css を作成。一行目に @charset "UTF-8"; と記述した。
HTML内の要素に、CSSを当てていこう。
現状の index.html にあるのは、
- html
- body
- header
- main
- div mainvisual
- section about
- section works
- section news
- section contact
- footer
になる。
1. html
まず、htmlに指定したいのは、サイト全体へのグローバルなスタイルの設定。
- 全体の高さと幅の設定
- フォント（サイズ/ファミリー）
- 色設定（テキスト色/背景色）
- ベースラインリセット
- スクロール設定
実際のサンプルサイトを見ながら、設定してみるとこんな感じに。
html {
min-height: 100%;
font-size: 62.5%; /* 基準が10pxになり、フォントサイズ計算が楽になる */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Yu Gothic", "Meiryo", sans-serif;
color: #333; /* テキストの色 */
background-color: #fff; /* 背景色 */
/* ブラウザデフォルトの余白をリセット */
margin: 0;
padding: 0;
scroll-behavior: smooth; /* スクロールの設定を滑らかに */
}
2. body
次に、bodyに指定したいのは、サイト全体の見栄えを整えるために、基本的なデフォルトスタイル。
- ブラウザデフォルトの余白とパディングをリセット
- レイアウト設定
その他、 htmlで指定した項目もここで指定することもできる。