テキストボックスの作り方について解説します。

コード（Codepen）

コードはこちらから見ることができます。

See the Pen Text-Box by Shin (@shin-ichi) on CodePen.

解説

【HTML解説】

HTML部分は、題名部分（<h1>タグ）と文章部分（<p>タグ）を作り、それを<div>タグで囲ってあります。（<div>タグは複数の要素をひとまとめにグループ化するための「透明な箱」のようなものです。）

【CSS解説】

/*ホームページ講座「テキストボックス」CSS*/
.text-box{
width: 90%; /*幅を画面幅の90%にします。*/
height: auto; /*高さは文字の量によって自動で決まります。*/
border-radius: 20px; /*角丸にします。*/
background-color: #efefef; /*テキストボックスの背景色を指定します。（ここでは灰色）*/
box-shadow: 4px 4px #d6d6d6; /*影をつけます。（ここでは右と下方向に影をつけています。）*/
margin: 20px auto;/*テキストボックスの外側に余白を作ります。*/
}

/*テキストボックスの題名CSS*/
.text-title{
padding: 20px 10px 5px 10px; /*文字とテキストボックスとの間に余白を作ります。*/
color: #ff6347; /*文字色を決めます。*/
text-align: center; /*文字を中央寄せします。*/
font-size: larger; /*文字サイズを指定します*/
}

/*テキストボックスの文章CSS*/
.text-sentences{
padding: 5px 30px 30px 30px;
文字とテキストボックスとの間に余白を作ります。（ここでは上5px、右30px、下30px、左30pxの余白を作っています。）
color: #000000; /*文字色を指定します。（ここでは黒にしています。）*/
font-size: medium;/*文字の大きさを指定します。*/
}