サイトの中ってどう言う風になっているの？
基本的にはHTMLコードと言われるコンピューター言語を読み取って表示されています。
表示される際に他の機能を追加したりしながらデザインが作られています。
HTML内で必ず使われる名称とその意味
<!DOCTYPE html>
＜!DOCTYPE html＞ びっくりマーク！を使って宣言します。「宣誓！」みたいなイメージです。笑
document typeはHTML方式を使用します。と宣言してコードを書き始めていきます。
「index.html」と言う名前で保存します。
<!Doctype html><html>
＜html＞ここからがHTMLファイルの情報ですと言う案内のタグです。
各タグは必ず＜name＞で始まり＜/name>で終わらせるのがルールになっています。
さて、テキストソフトにこのタグを書き込めば準備はできました。
でも、まだ工程はありますよ。焦らず丁寧にいきましょう。
<!Doctype html>
<html>
</html><HEAD>
＜html＞＜/html＞で囲まれた間に最初の行に＜head＞＜/head＞タグを入れます。
HEADのなかには様々な情報を入れます。どんな情報かと言うとサイトのタイトル、追加機能などへのリンク情報（Webフォント、CSS、JQuery、JavaScriptなど）などが主に入ります。
まずは基本だけなのでその他の細かい説明は省きます。
<!Doctype html>
<html>
<head></head>
</html><body>
＜head＞＜/head＞まずはbodyです。これはサイトで見えている部分を指しています。
<!Doctype html>
<html>
<head></head>
<body></body>
</html>bodyの中に実際に見える部分を書き込んでいく
<header>
ヘッダータグと言われるタグを使います。このタグはサイトの上の部分を指します。
<!Doctype html>
<html>
<head></head>
<body>
<header></header>
</body>
</html><section>
次にセクションタグなどを使ってコンテンツ内の部分を指示します。
<!Doctype html>
<html>
<head></head>
<body>
<header></header>
<section></section>
</body>
</html><footer>
最後にフッタータグを使います。これはサイトの下の部分を指します。
<!Doctype html>
<html>
<head></head>
<body>
<header></header>
<section></section>
<footer></footer>
</body>
</html>これで基本的なサイトの骨組みが出来上がりました。こんな感じでサイトの内容をブロックごとに作り入れ子のようにコードを書き込みます。
場所の指定ができたところで次は、わかりやすいように背景色をそれぞれの場所に指定してみます。
HTML内のデザインを指示する際にはCSSファイルを使用します。
CSSファイルを準備する
新しい書類を作り、「style.css」と言う名前で保存します。
たくさんCSSファイルを作る予定であればcssという名のフォルダに入れて管理すると便利です。
このCSSファイルですが、内容としては骨組みであるHTMLのデザインを表示しています。
このCSSを使ってデザインしていきますと言うことで、HTMLファイルと紐づけるためにHTML内にあるHEADの部分にリンクを以下のように書き込んでいきます。
<link href='style.css' rel="stylesheet" type="text/css">HTML
<html>
<head>
<title>ここにタイトルを入れる</title>
<link href='style.css' rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>これでCSSで記述された内容がHTMLへ反映されました。
CSSファイルの書き方
CSSファイルにはまだ何も書き込みがない状態です。
CSSには宣言文がありませんので直接書き込んで行きます。
記述の仕方は以下のとおりです。
■セレクタ：
セレクタには指定する場所の名前を記述する。
■プロパティ：
属性とも言われます。ここには指示の内容を記述する。
■値：
ここには具体的な指示の数値を記述します。
■波カッコ：
指定する内容は全てこの波かっこに入れなければならないルールがあります。
■コロン：
コロンは英文で使用される意味合いと全く同じで「すなわち」と言う意味で＝（イコール）のような意味と覚えると良いです。
■セミコロン：
セミコロンも同様に英文で使用される意味と同じで「and」つまり追加していく意味があります。
CSSの場合は指定した後には必ずつけるようにしましょう。
CSSにコードを記述する
先ほど作ったHTMLの部分が見えるように背景に色をつけて見てみましょう。
プレビューでまたはindex.htmlをブラウザーで開くと表示されるので実際の画面をみながらコードを打ち込んでいくとわかりやすいです。
bodyの中にあるheader, section, そしてfooterの3つに指示をしていきます。
まずはヘッダ部分から書き込みます。ヘッダ部分の高さを150px、そして背景色を薄いブルーにしてします。
CSS
header{
height:150px;
background-color:#96c6eb;
}
このブルーの部分はheaderの中になります。
section部分には内容の部分の高さを800pxにし、背景色をつけていきます。
CSS
section {
height:800px;
background-color: #E5E4E2;
}
最後にfooter部分にも同じような書き込みをしていきます。
高さを200pxにし、背景色をつけていきます。
CSS
footer{
height:200px;
background-color:#4C787E;
}
今回は場所の確認とコードの配置について色をつけてみやすく説明しました。
次回ではサイトのコンテンツを作る準備について離そうと思います。
Webサイトを作る vol.2
