ホームページ作成までのメモ
１HTML構造作成
・thタグ→表の中の項目名
・tdタグ→内容
サイト作成の流れ
・HTMLで構造を組む→CSS作成
サイト構造
・ヘッダー
・トップバナー
・セクション
・フッダー
２問い合わせフォーム作成＆CSS作成
・placeholder属性→フォームの中に文字を表示させる
・line-heightg→行間の幅を指定
・width→横幅指定
・font-family→文字の種類を変える
・font-family: 'フォント名１', フォント名２;
・PCに入ってないフォントは表示されない。フォント１が表示されなかった時、フォント２が表示される。
ブラウザによって表示されるCSSが変わる
・webkit→クローム、Safari
・moz→ファイアフォックス
・//→コメントアウト→記述したコード（文字）を処理させたくない（ブラウザに表示させたくない）時に用いる→コードの説明、コメントなど
３ナビ〜フッターまでのCSS作成
cssファイル
——————————————————————
/*ナビゲーション*/
#top-nav{
float: right;
width: 500px;
height: 200px;
position: relative; //ここがボックスの基準
}
nav a{
padding: 10px 15px; //10px (上下）15px（左右）
color: #444;
text-decoration: none; //linkタグ特有の下線を消す
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属性＞top-nav＞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属性「パネル」のスタイルを指定
.pane1{
background: #f6f5f5; //背景色指定
border（枠線指定）: 1px solid #eee; //1px（太さ） solid（種類） #eee;（色）
border-radius: 3px; //ボックスの角をpx分丸くする
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
margin: 0 15px;
padding: 15px; //枠の余白をpx分指定
width: 30%; //親の要素に対して各ボックスの横幅を指定、ここでの親要素はid属性のMELIT、980pxに対しての30%
float: left;
box-sizing: border-box; //横幅の中にborderの幅やpaddingの幅を含めることができる、通常borderの幅やpaddingの幅はwidth heightで指定した幅には含まれない
min-height: 380px; //ボックスの最小の高さを指定
}
.pane1 h2{
color: #333;
text-align: center; //中央揃え
}
/*テーブル*/
table{
background : rgb(246,246,246);
border: 1px solid #eee;
width: 100%; //親の要素（980px）に対して横幅100％）、tableは中の文字数によってサイズが変わる→横幅を指定することで合わせられる
border-radius: 3px; //radius→半径、枠の角を丸くする
-webkit-border-radius: 3px;
-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-width980pxに対して50％の横幅
margin: 0 auto; //ボックス中央揃え
font-size: 16px;✖ →消す //input,textareaで指定されてるから
}
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;}
——————————————————————
