body要素-bodyの装飾

body要素は先に書いたようにホームページ本体になります（ブラウザに表示され、ユーザーの目に見える部分になります。）

head要素まではhtmlファイルだけでしたが、body要素ではユーザーに見てもらうため装飾をするスタイルシートが必要になります。
表示するデザインを決めるスタイルシート（style.cssファイル）も書いていきます。

bodyの装飾

初めに書くのはホームページ本体全体に影響する装飾をbodyタグに書きます。
bodyセレクタには次のようなプロパティついて装飾を書きます。

背景
font-family
文字サイズ
文字色
文字揃え
横方向のはみ出し

それでは一つずつ見ていきましょう。

背景

画面全体の背景であったり、コンテンツ部の背景であったり、背景に配色あるいは画像を表示したりすることができます。
例えば、ベタ塗りする、グラデーションにする、画像で塗りつぶす、画像を1枚貼り付ける、画像を1列横に並べる、縦に並べる、数個の画像を配置する、など自由にできます。

font-family

使うfont-family（字体です）を指定します。
値の書き方としては左側から、使っているパソコンで使える字体を順にコンマで区切って書きます。
一番右は最後の砦で、たぶんどのパソコンにも入っているsans-serifという字体を指定します。
2番目のMS PGothicのように文字列に空が入っているときは(“)ダブルクォーテーションで挟む、この辺が決め事です。

cssソース

    font-family: Verdana,"MS PGothic",Osaka,Arial,sans-serif;

ネットからダウンロードしたfontを使うことができます。

手持ちのfontを使うことができます。

次はacgyosyo（AC行書）という無料fontを使う場合の設定です。
セレクタには@font-face、値にacgyosyo（fontの名称）を書きます。

プロパティにsrc（ソースと読む）、値にfontファイルのパスとfontのフォーマットを書きます。

このソースは書き方の例として見てください。

cssソース

/*====参考====*/
@font-face {
    font-family: "acgyosyo";
    src: url("../font/acgyosyo.woff") format("woff");
}

次は@font-faceで読み込んだacgyosyoを、例えばh1タグで使う場合の書き方です、参考として見てください。
プロパティfont-familyで値を”acgyosyo”にしています。

cssソース

/*====参考====*/
h1 {
    font-family: "acgyosyo";
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    padding-top: 50px;
}

文字サイズ

文字サイズは値の書き方が何通りもあります。
pt、px、%、rem、em、キーワードなど。
使い方としては、例えば
pt—————–14pt、16pt、18ptなど
px—————–14px、16px、18pxなど
%——————70%、80%、90%など
rem—————-0.9rem、1.0rem、1.1remなど
em—————–0.9em、1.0em、1.1emなど
キーワード——-xx-large … 最も大きいサイズ
x-large
large
medium … 標準サイズ（初期値）
small
x-small
xx-small … 最も小さいサイズ

%あるいはremを使いましょう。

cssソース

font-size: 80%;

font-size: 1.0rem;

文字色

どんな色でも指定できますが、背景が白、文字が黒、これがユーザーの目に優しいといえるでしょう。
真っ黒ではなく色目を少し落として#000ではなく#191919とか。

cssソース

color: #191919;

文字揃え

中央揃えにしておき、それぞれの要素で必要に応じて左揃え、右揃えを指定します。

cssソース

text-align: center;

横方向のはみ出し

コンテンツが表示領域から横方向へのはみ出しは非表示にします。

cssソース

overflow-x: hidden;

bodyセレクタのソースまとめ

bodyタグのソースコードをまとめてみましょう

cssソース

body {
    background: ;
    font-family: Verdana,"MS PGothic",Osaka,Arial,sans-serif;
    font-size: 80%;
    color: #191919;
    text-align: center;
    overflow-x: hidden;
}

まとめたソースコードをstyle.cssにコピペしましょう。