２．文章の記入と配置

(1) 前節で見出し(題目）が表示できたので、次は、文章の記入です。サンプル文を開いて最初の４行をコピーして下の画像のように題目の下に貼り付けて上書き保存してください。
TeraPadは、Default で80字で折り返すようになっています。この画面の中にすべてを入れる必要があるので、80字で折り返しで使います。80字は、簡単に変更できます。

(2) Edgeをアクティブにし「更新」ボタンをクリックすると、下の画像のようになっています。

(注) HTML文の中の半角スペース
HTML文の中では、行頭または行末に半角スペースを使っても無視されます。文章の中に使用すると1ヶのみ認識されます。半角スペースを連続して2ヶ打ち込んでも1ヶしか認識されません。

文章は、左端から右端いっぱいに表示されています。上の画像は、Edgeの幅を720pxにしていますが、更に横幅を広くするとそれに従って横幅いっぱいに文章が展開されます。
これでは、読みにくいので、ある幅に固定した方が見やすいです。そこで、ある決めた幅の枠を作ってその中に入れることにしましょう。
枠は、ブロック用タグの <div> で指定しますが、細かいことは、スタイルシートで指定します。

(3) idセレクタとclassセレクタ
スタイルシートのセレクタの中に、idセレクタとclassセレクタがあります。idセレクタは、基本的なものに使用するようになっており、そのページの中で１回しか使えません。一方、classセレクタは、何回でも使えます。

(注) 規格上は、idセレクターは、そのページで1回しか使えませんが、通常のブラウザは、2回以上使っても表示してくれます。というか、ブラウザは、2回以上を拒否するようには作られていません。ブラウザは、表示が目的であって、規格違反を取り締まるものではありません。 「ブラウザは、表示してくれるので、2回以上使う」ようなことはしないでください。2回以上使うということは、捕まらなければ、泥棒をやってもよいという考えと同じです。

今、作成しようとしている枠は、全体を包含する大枠ですから、idセレクタにします。名前は、通常wrapperとかcontainerという単語が使われています。日本語にするならば、oowaku（大枠）あたりになりますか。ここでは、wrapperという単語を使うことにします。wrap は、包み込むという意味で、wrapper は、包装紙です。サランラップなどよく使用するので、わかり易いでしょう。

(注) セレクタの名前は、アルファベットで開始し、任意の数のアルファベット、数字、ハイフン(-)、アンダースコア(_)が使えます。数字から開始しないようにします。大文字も使えますが、小文字だけ使いましょう。

では、具体的な指定法を説明します。枠の幅を600pxに指定しましょう。TeraPadで下の画面のように打ち込みます。シャープ(#) が id セレクタであることを表しています。classセレクタは、ドット(.)を使いますが、これについては、後ほど説明します。
width : 600px が、枠の幅指定です。border : solid 1px #ccc; は、本来不要ですが、枠であることがわかるように枠線を指定したものです。borderは、境界線で、solid は、実線です。1px は、線の幅で1ピクセルです。#ccc は、枠線の色で灰色です。実線は、solid ですが、点線は、dotted 、破線は、dashed です。solid と入れ替えて線の感じを確認しておいてください。薄くてよくわからないときは、線の色を黒の#000に変えて見てください。
<div>の中には、id="wrapper" を入れます。そして、文章の最後に終了タグの</div> を打ち込みます。すると、<div id="wrapper"> と </div> の間に挟まれたものが、幅600pxの枠の中に入ります。

(4) 上書き保存しEdgeをアクティブにし「更新」ボタンをクリックすると下の画面が表示されます。幅600pxの枠が作成されています。枠線表示を指定したのでよくわかると思います。この枠線は、このまま残し、一番最後に削除しましょう。ところで、枠の配置は、左配置になっています。左配置が好きな方は、このままでかまいませんが、サンプルは、中央配置になっています。

(5) 中央配置にするためには、スタイルシートに下のようにmargin : 0 auto;を記載します。

(6) 上書き保存後、Edgeをアクティブにし「更新」ボタンをクリックすると下の画像が表示され、中央配置になっています。

(7) スタイルシートに margin : 0 auto; と入れるとなぜ中央配置になるか理解できないと思います。理解してもらうために、以下に説明します。
まずは、下の図を見てください。

文章などを入れる領域をコンテンツ領域として薄緑色で示していますが、その境界線がborderです。marginとは、borderの外側の余白です。
margin-left : 40px; と指定したらコンテンツ領域の左側に40pxの余白を取りなさいということです。
同様に、上側は、margin-top : 20px; です。
　　　　右側は、margin-right : 10px; です。
　　　　下側は、margin-bottom : 30px; です。
topなどの付かない margin の指定には、４通りの指定法があります。下表を見てください。

margin : 10px;	上下、左右四面に10pxのmarginを取りなさい。
margin : 10px 20px;	上下に10px、左右に20px を取りなさい。
margin : 10px 20px 30px;	上に10px、左右に20px、下に30px取りなさい。
margin : 10px 20px 30px 40px;	上に10px、右に20px、下に30px、左に40px取りなさい。 (上を始点に右回りです。)

これで、margin の指定方法がわかったと思います。すると、margin : 0 auto; とは、上下は、0です。0は、0ですからpxは付けなくOKです。0ですから上下にmarginなしです。左右は、寸法を指定しないで、auto（自動）指定です。左右が自動ということは、中央配置にならざるを得ないと考えるべきでしょう。わかったような、わからないような！というより、ブラウザは、左右を auto で指定されると中央配置するようにできていると素直に解釈しましょう。なお、wrapper の上下にmarginを指定することができます。
例えば、上に30px、下に50px取るとすると、margin : 30px auto 50px; と指定することになります。
蛇足ですが、上の表の指定は、人間の目には、判り易いですが、機械は苦手です。
例えば、margin : 10px 20px 30px 40px; と指定したファイルをHTMLのアプリに読み込ませると、下のように記載変更されることが多いです。
　margin-top : 10px;
　margin-right : 20px;
　margin-bottom : 30px;
　margin-left : 40px;

(8) margin に類似したプロパティにpadding があります。これを以下に説明しておきます。下の図を見てください。

padding とは、詰め物を意味します。コンテンツ領域とborderの間に詰め物入れてborderを拡げます。詰め物を入れるということは、コンテンツ領域とborderの間に余白を作るというこです。指定方法は、marginと同じですから省略します。実例がないとわかり難いと思いますが、そのうちに出てきます。

(9) (1)のTeraPadの画面をよく見てください。文章は、改行されています。ところが、Edgeで表示された(6)の画面を見ると改行されていません。これは、TeraPadでの改行は、Edgeでは、改行とは認知しないからです。それでは、改行は、どうするか。改行したいところに下の画像のように<br>タグを入れます。

(10) 上書き保存後、Edgeをアクティブにし「更新」ボタンをクリックすると、改行された文章が表示されます。

　以上で第２節は終了です。次は、フォントの指定について説明します。