今回は今までの勉強ノートの内容を使ってwebページを作っていくものです。
今回も気楽に見ていただければと思います。
全体のHTML構造をつくる
ヘッダーの作成
ヘッダーなどを作る際それを大きな要素として扱うためにdivを使って箱として扱う。htmlの構造とcssによるデザインの調整が容易になる。また、作った際にそれに応じてidやclassを設定して扱いやすくする。
次にメインコンテンツを入れる場所を作成。
<div id="main"> </div>
フッターの作成
最後にフッター部分を作成します。
<div id="footer"> </div>
まとめ_1
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="header">
</div>
<div id="main">
</div>
<div id="footer">
</div>
</body>
</html>
コンテンツをいれてゆく！
サイト名を入れる！
h1を使用してページのタイトルをページの上に入れる。そうすることでサイトの名前がページの上に存在するので、入ったときに目的のページにいることを安心付けられます。
<div id="header"> <h1>Sample website</h1> </div>
コンテンツを入れる！（見出し）
h2を使用して、コンテンツの見出しにいれていきます。divのmainとidを入れたときに入れときます。
<div id="main"> <h2>Heading</h2> </div>
コンテンツを入れる！（本文）
p要素を使用して、本文をコンテンツとして入れていく。本文は段落を示すpタグで入れていく。同様にフッターにもpたぐをつかう。
<div id="main"> <h2>Heading</h2> <p> </p></div>
まとめ_2
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="header">
</div>
<div id="main">
<h2>Heading</h2>
<p> </P>
</div>
<div id="footer">
<p> </p>
</div>
</body>
</html>
ヘッダー部分を装飾！
準備!
CSSでヘッダー要素を編集するための準備を行う！
#header { }
背景色!
CCSにおいては一般的に、「スタイルを適用する:値;」という形で記述で行われる。
#header { background-color: #C00; }
隙間！
要素の内側に上下左右10pxの隙間を入れる
要素の内側に余白を調整するには、padding属性を使用する。
#header { background-color: #C00; padding: 10px;}
空白を埋める！
通常の場合は、ページの表示部全体とコンテンツ部分に余白が入ります。margin属性はある要素とほかの要素との間を調整するための属性。
body { margin: 0px; }
ヘッダー内の見出しの装飾！
ID[header]を持つ要素の直下にあるh1要素を編集する場合は要素名 > その要素の直下の要素名というように記述する。
#header > h1 { }
見出しの文字色を変更！
#header > h1 { color: #FFF; }
見出しのフォントの種類を変更！
フォントの種類を変更する場合は、font-familyという属性を使用する。
#header > h1 { color: #FFF; font-family: serif; }
見出しの余白を変更！
見出しの余白を0に設定。ある要素とほかの要素との余白を調整する。marginを使っていく。
#header > h1 { color: #FFF; font-family: serif; maring: 0; }
コンテンツ部分の装飾！
準備!
CSSでID名「main」の要素を編集するために準備を行う！
#main { }
枠!
CSSでID名「main」の要素に枠線をつかう。
枠線を指定する際はborderという属性をつかう。
値の部分には、指定したい戦の色や太さを指定する。
代表的な線の種類として、solid(通常の枠線)、dotted(破線)がある。
#main {border: 1px solid #FCC}
横幅!
ID名「main」の要素の横幅を80%にする。
要素の内側の隙間を調整する際は、widthという属性を使用する。
#main {border: 1px solid #FCC width:80%;}
隙間!
ID名「main」の要素の内側に上下左右10pxの隙間を入れる。
ここでも隙間を入れるのには、#main {border: 1px solid #FCC width:80%; padding: 10px;}
余白!
ID名「main」の要素のほかの要素との間隔を上下0にし中央に配置する。先同様、間隔の調整にはmaringという属性を使用。
``#main {border: 1px solid #FCC width:80%; margin:0 auto; padding: 10px;}`
コンテンツ内の見出し部分の装飾！
ID名「main」を持つ要素の直下にあるh2要素を編集する準備を行う。先ほどと同様に準備する。
#main > h2 { }
見出しの部分の左に線を引く！
ID名「main」を持つ要素の直下にh2要素を装飾していく
左にのみ枠線を指定する際はborder-leftを使用する。
#main > h2 { border-left: 5px solid #C00;}
見出し部分の左に枠線！
ID名「main」を持つ要素の直下にあるh2要素の内側で、左側に20pxの隙間を空ける。
#main > h2 { border-left: 5px solid #C00; padding-left: 20px;}
見出しの文字のサイズを調整！
ID名「main」を持つ要素の直下にあるh2要素の文字の大きさを変更する。文字の大きさを変更するにはfont-size属性をつかう。
#main > h2 { border-left: 5px solid #C00; font-size: 20px padding-left: 20px;}
コンテンツ内の本文の装飾！
ID名「main」を持つ要素の直下にあるp要素の文字を編集する準備を行う。
これも、今までの要素をもとに決めていく。
#main > p{ }
本文の文字サイズを調整する
ID名「main」を持つ要素の直下にあるp要素の文字を編集する準備を行う。
#main > p{ font-size: 14px;}
本文の余白を調整する！
ID名「main」を持つ要素の直下にp要素の余白を調整する。
これまで同様に、marginという属性を使用する。
#main > p {font-size: 14px; margin: 10px 25px;}
フッター部分の装飾！
準備！
CSSでID名「footer」の要素を編集するため準備する。
これも前回までと同様に進める。
#footer { }
余白！
ID名「footer」の要素のほかの要素との間隔を使う。
#footer { margin: 10px; }
文字の中央揃え！
ID名「footer」の要素内にある文字を中央揃えにする。
text-align属性を使用し、その値をcenterにする。
#footer { margin: 10px; text-align:center; }
フッタ内の装飾！
ID名「footer」を持つ要素の直下にあるp要素を編集する準備をする！
#footer > p{ }
文字色
ID名「footer」を持つ要素の直下にあるp要素の文字色を変更！
#footer > p{ color: #600; }
文字の大きさ
ID名「footer」を持つ要素の直下にあるp要素の文字の大きさを変更！
文字のサイズを変更するには、font-sizeという
まとめ
@charset "UTF-8";
body {
margin: 0;
}
# header {
background-color: #C00;
padding: 10px;
}
# header > h1 {
color: #FFF;
font-family: serif;
margin: 0;
}
# main > h2 {
border-left: 5px solid #C00;
font-size: 20px;
padding-left: 20px;
}
# main > p {
font-size: 14px;
text-align: center;
}
# footer {
margin: 10px;
text-align: center;
}
# footer > p {
color: #600;
font-size: 12px;
}
こんな感じで基礎基本としてはwebページを作成できます。
まだまだ、足りないところはたくさんありますが、そこらへんはまたこれからつき足していきます。