超超初心者向け漫画サイトのつくり方【メール送信ページをつくる。その２装飾する】

メール送信ページを装飾していきます。

装飾（CSSの記述）については、同じ結果でも方法は色々あります。

今回は、簡単シンプルに見た目を整えていきます。

ビフォーアフターを見てみる
CSSを記述していく
CSSの解説
まとめ

ビフォーアフターを見てみる

完成図から紹介します～

◆完成図

あーもう、見た目がアレですが。センスとかセンスとかセンスが皆無ですが。

色のチョイスで多少は変わってくると思うので、好きな色に変えてください。

ついでに、装飾前（CSS記述前）は

◆装飾前

こんな感じです。で、htmlは

こんな感じです。

htmlは今回は触りません。

CSSを記述していく

style.cssをテキストエディタ（サクラエディタ）で開いてください。

記述を始める場所は、一番下にしてください。

一気に記述コードを書いていきます。あとで解説します。

form p { color: #806046;}

form {
  background: #f5f5f5;
  width: 550px;
  margin: 0 auto;
}

.name { display: flex;}

.name p:first-child {　width: 180px;}

.e-mail { display: flex;}

.e-mail p:first-child { width: 180px;}

.message { display: flex;}

.message p:first-child { width: 180px;}

.message textarea {
  width: 300px;
  height: 100px;
}

.reply { display: flex;}

.reply p:first-child { width: 180px;}

form p:last-child {
  text-align: center;
  padding-bottom: 10px;
}

白状すると、もっとスマートな記述が可能です。

勉強が進むと見えてきますので、今回はこの方法で覚えてください。すでに違和感があるひともいるかも知れませんね。

CSSの解説

上から順に解説していきます。サイズ、色を自分好みに変えるひとは、どこを変更すればいいか確認してください。

★form p { color: #806046;}

適用範囲：＜form＞～＜/form＞の中の＜ｐ＞

適用内容：文字色を＃806046にする

なんで、p {#806046;}にしなかったかと言うと、他のページ（news.html）でｐタグを使っているので、ｐに適用しちゃうとそっちにも反映されてしまうからです。

あと、テキストカラーの変更なのでtext-colorとかfont-colorにしたくなりますが、colorのみでテキストカラーの変更になります。最初のうち、結構間違いがちです。

★form {
background: #f5f5f5;
width: 550px;
margin: 0 auto;
}

適用範囲：＜form＞～＜/form＞

適用内容：background→背景色を#f5f5f5にする。（色を変えたいひとは、ここを変更）
width: 550px;→横幅を550pxにする。（薄灰色の部分の幅を変えたいひとは、ここを変更）
margin: 0 auto;→中央寄せ

★.name { display: flex;}

適用範囲：＜div class=”name”＞～＜/div＞の中身

適用内容：横並び

★.name p:first-child { width: 180px;}

適用範囲：＜div class=”name”＞～＜/div＞の中のｐの最初の子

＜ｐ＞お名前＜/ｐ＞が、最初の子
＜ｐ＞＜input type=”text” name=”name” required>＜/ｐ＞が最後の子

適用内容：横幅を180pxにする。

横幅を指定した理由は、記入欄すべてを同じ位置から開始させるためです。

★.e-mail { display: flex;}
★.e-mail p:first-child { width: 180px;}
★.message { display: flex;}
★.message p:first-child { width: 180px;}
★.reply { display: flex;}
★.reply p:first-child { width: 180px;}

nameの解説を、それぞれe-mail、message、replyに置き換えたら全て同じ意味です。

★.message textarea {
width: 300px;
height: 100px;
}

適用範囲：＜div class=”message”＞～＜/div＞の＜textarea＞～＜/textarea＞

適用内容：width: 300px;→横幅を300pxにする。
height: 100px;→縦幅を100pxにする。

入力しやすい大きさにサイズアップしました。