今回は今までの勉強ノートの内容を使ってwebページを作っていくものです。
今回も気楽に見ていただければと思います。
全体のHTML構造をつくる
ヘッダーの作成
ヘッダーなどを作る際それを大きな要素として扱うためにdivを使って箱として扱う。htmlの構造とcssによるデザインの調整が容易になる。また、作った際にそれに応じてidやclassを設定して扱いやすくする。
次にメインコンテンツを入れる場所を作成。<div id="main"> </div>
フッターの作成
最後にフッター部分を作成します。<div id="footer"> </div>
まとめ_1
<!DOCTYPE html><htmllang ="ja"><head><metacharset="UTF-8"></head><body><divid="header"></div><divid="main"></div><divid="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><htmllang ="ja"><head><metacharset="UTF-8"></head><body><divid="header"></div><divid="main"><h2>Heading</h2><p></P></div><divid="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:5pxsolid#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ページを作成できます。
まだまだ、足りないところはたくさんありますが、そこらへんはまたこれからつき足していきます。