ホームページ作成に関しての詳細
①HPの構成（HTML構造）
HTMLで構造組む⇨CSS作成
⑴ヘッダー
<header>
<nav~> ⇨メニューを作る
</nav>
<ul~> ⇨リストを作る
<li></li>
</ul>
</header>
⑵トップバナー （画像）
⑶セクション
<section> ⇨1つのまとまりを表す（HTML5から導入）
<h1></h1> ⇨タイトル
<p></p> ⇨段落ごとでpタグを囲む
</section>
⑷フッター
<footer>
Copyright<a href="~">サンプルHP</a>.All Rights Reserved.
</footer>
②問い合わせフォーム作成・CSS作成
・placeholder属性⇨フォームの中に文字を表示させる
・line-height⇨行間幅を指定
・width⇨横幅指定
・font-family⇨文字の種類を指定
（例）'フォント1','フォント2'(PCに入っていないフォントは表示されない)
ブラウアによって表示のされるCSSが変わる
・moz⇨Firefox
③ナビ〜フッターまでのCSS作成
cssファイル
=====================
/*ナビゲーション*/
#top-nav{
float: right;
width: 500px;
height: 200px;
position: relative; ※ここがボックスの基準
}
nav a{
padding: 10px 15px; ※10px（上下）15px（左右）
color: #444;
text-decoration: none; ※テキストの装飾を外す(aタグはデフォルトでは下線が付いている)
font-size: 14px;
font-weight: bold;
}
nav a:hover{
text-decoration: underline; ※カーソルが乗った時に下線を表示
}
#top-nav ul{
height: 40px;
width: 450px;
position: absolute; ※基準からボックス移動
bottom: 0;
right: 0;
list-style: none; ※リスト（・）を消す
}
#top-nav ul li{ ※構造 id属性⇨topnav⇨ul⇨liスタイル
float: left; ※左寄せ横並び・本来liタグはブロック要素なので縦に並ぶが「float」指定することで横並びに変更となる
}
/*コンテンツ横幅*/
.site-width{ ※class属性がsite-widthのものに対してスタイル指定
width: 980px;
margin 0 auto: ; ※ブロック要素を中央揃えにしたい時に“auto”を使用
}
section h1.title{
font-family: 'Montserrat',sans-serif;
text-align: center; ※フォントの配置（並び）指定
}
#about,#merit,#recruit{ ※複数の要素に同じスタイル指定したい時はカンマで区切る
margin-top: 80px; ※上の枠外余白
margin-bottom: 80px;※下の枠外余白
}
/*パネル*/ ※class属性「パネル」のスタイル指定
.panel{
background: #f6f5f5; ※背景色指定
border: 1px solid #eee; ※1px(太さ) solid(種類) #eee(色)
border-radius: 3px; ※ボックスの角を◯◯px分丸くする
-moz-border-radius: 3px;
margin: 0 15px;
padding: 15px; ※枠の余白を◯◯px分指定
width: 30%; ※親の要素に対して各ボックスの横幅指定(ここでは親要素はid属性のMERIT,980pxに対しての30%)
float: left;
box-sizing: border-box; ※横幅の中にborder幅やpadding幅を含めることができる。
（通常border幅やpadding幅はwidth heightで指定した幅には含まれない）
min-height: 380px; ※ボックスの最小の高さを指定
}
.panel h2{
dolor: #333;
text-align: center;
}
/*テーブル*/
table{
background: rgb(246,246,246);
border: 1px solid #eee;
width: 100%; ※親要素（980px）に対して横幅100%
※tableは中の文字数によってサイズが変わる
⇨横幅指定することで合わせられる
border-radius: 3px; ※“radius”⇨半径・枠の角を丸くする
-moz-border-radius: 3px;
padding: 10px; ※ボックス内の余白を指定
margin: 10px 0;
text-align: left;
font-size: 14px;
}
th,td{
padding: 5px 0;
border-bottom: 1px dotted #ccc; （※dotted⇨点線）
}
table thead tr th{
color: #333;
padding-bottom: 15px;
}
table thead tr th color1{
color: rgb(230,140,31);
font-size: 18px;
}
table tbody th{
color: rgb(147,130,113);
}
#merit{
overflow: hidden; ※パネルに対して指定されたfloatを解除
}
/*フッター*/
footer{
font-size: 12px;
margin-top: 30px; ※上の要素（上下80pxが適用されているので使わない）
padding: 15px;
background: #333;
text-align: center;
color: #f6f5f5;
}
footer a{
color: #f6f5f5;
}
=====================
④お問い合わせフォームのCSS
cssファイル
=====================
/*フォーム*/
form{
width: 50%; ※親要素「.site-width: 980px;」に対して50%の横幅
margin: 0 auto ※ボックス中央揃え
font-size: 16px; ※「input,textarea」で指定されているので決してOK
}
input,textarea{
font-size: 18px;
margin-bottom: 15px;
}
input[type="text"]{ ※input要素で且つtype属性名「text」にスタイル指定
width: 100%;
height: 60px;
border: none;
background: #f6f5f5;
padding: 10px;
box-sizing: border-box; ※枠線やpaddingをボックスの大きさに含める
}
textarea{ ※textarea要素に対してスタイル指定
width: 100%;
height: 400px;
border: none;
background: #f6f5f5;
padding: 10px;
box-sizing: border-box;
}
input[type="submit"]{
background: #333;
border: none;
padding: 15px 30px;
color: white;
float: right;
}
=====================
