基本のHTML&CSS【第1回】
WEBページの表示の仕組みを知る
松寿 英次こんにちは。
今回は、簡単なWEBページを一つ表示させてみます。どのような仕組みでページとして表示されるのでしょうか。
目次 | Index
Webページは基本的に『HTML』と『CSS』というテキスト文書で書かれています。どのように書いているのか見てみます。
1.まず、HTMLという箱を書く
HTMLでページを表示するための箱をまず用意します。HTMLはテキスト文で書かれていて、最もシンプルに書くとこうなります。
HTML
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>WEBページの表示の仕組みを知ろう！</title> </head> <body> </body> </html>
※そのままコピーできますが、ソースコードのエリア内をダブルクリックするとソースコードのみを全選択できます。
ウィンドウのタイトル以外、なにも表示されません。空っぽの状態で、文字通り「箱」です。Webページとして表示させるには「中身」が必要です。最初の完成demoは以下の5つから出来ています。
1.タイトル『Learn the Basic_HTML+CSS』
2.イラスト画像
3.コピー『HTMLってなんだろう…？ CSSってなんだろう…？』
4.文章『自分でホームページを作らなくても、知っておいたら役に立つ! Webの仕組みをちょっとづつ覚えていって、日々の業務に活かしましょう。』
5.便箋の背景画像
2.箱の中に入れるものを書く
5つの中身をHTMLテキストで書きます。
HTML
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>WEBページの表示の仕組みを知ろう！</title> </head> <body> <div> <div> <h1>Learn the Basic_HTML+CSS </h1> <img src="img/illustration.jpg" alt="イラスト"> <h2>HTMLってなんだろう...？ CSSってなんだろう...？</h2> <div> <p>自分でホームページを作らなくても、<br>知っておいたら役に立つ! <br>Webの仕組みをちょっとづつ覚えていって、<br>日々の業務に活かしましょう。</p> </div> </div> </div> </body> </html>
※そのままコピーできますが、ソースコードのエリア内をダブルクリックするとソースコードのみを全選択できます。
Webページとして中身の5つが表示されました。
HTMLテキストを書き加えた場所は、＜body＞から＜/body＞という文字列（タグ）の間です。ページに表示させる要素のほとんどは、ここに書きます。
完成デモと見比べると、大きさも場所もごちゃごちゃです。これは中身をただ置いただけで、まだなにも「整えて」ないからです。整えるためにはCSSを使います。
3.中に入れたものを整える
CSSもテキスト文で書きます。上記い続いてCSSを書き加えます。
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WEBページの表示の仕組みを知ろう！</title>
<style>
*{
margin: 0;
padding: 0;
font-size: 16px;
}
.contents-inner{
width: 640px;
margin: auto;
}
img{
width: 600px;
height: 300px;
}
.letter{
background-image: url('img/letter.jpg');
width: 600px;
height:195px;
background-size: cover;
}
</style>
</head>
<body>
<div id="contents">
<div class="contents-inner">
<h1>Learn the Basic_HTML+CSS </h1>
<img src="img/illustration.jpg" alt="イラスト">
<h2>HTMLってなんだろう...？ CSSってなんだろう...？</h2>
<div class="letter">
<p class="sentence">自分でホームページを作らなくても、<br>知っておいたら役に立つ! <br>Webの仕組みをちょっとづつ覚えていって、<br>日々の業務に活かしましょう。</p>
</div>
</div>
</div>
</body>
</html>
※そのままコピーできますが、ソースコードのエリア内をダブルクリックするとソースコードのみを全選択できます。
だいぶ表示が整いました。
CSSテキストを書き加えた場所は、新たに挿入された＜style＞から＜/style＞という文字列（タグ）の間です。この＜style＞タグは＜head＞から＜/head＞内に収めるのが決まりです。
以上から、HTMLとCSSは書く場所が違うのがわかります。
4.整えたものを綺麗にする
最後に完成デモと同じ表示になるように、仕上げのCSSを書き加えます。
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WEBページの表示の仕組みを知ろう！</title>
<style>
*{
margin: 0;
padding: 0;
font-size: 16px;
}
.contents-inner{
width: 640px;
margin: auto;
}
h1 {
font-size: 26px;
color: #744c19;
margin-left: 5px;
}
img{
width: 600px;
height: 300px;
border-radius: 20px;
}
h2{
font-size: 18px;
color: #1d6700;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.sentence{
color: #4c4c4c;
line-height: 25px;
padding-top: 38px;
padding-left: 32px;
}
.letter{
background-image: url('img/letter.jpg');
width: 600px;
height:195px;
background-size: cover;
}
</style>
</head>
<body>
<div id="contents">
<div class="contents-inner">
<h1>Learn the Basic_HTML+CSS </h1>
<img src="img/illustration.jpg" alt="イラスト">
<h2>HTMLってなんだろう...？ CSSってなんだろう...？</h2>
<div class="letter">
<p class="sentence">自分でホームページを作らなくても、<br>知っておいたら役に立つ! <br>Webの仕組みをちょっとづつ覚えていって、<br>日々の業務に活かしましょう。</p>
</div>
</div>
</div>
</body>
</html>
※そのままコピーできますが、ソースコードのエリア内をダブルクリックするとソースコードのみを全選択できます。
最初の完成demoと同じ表示になりました。
ここまでの書き加えてきたテキストをよく見比べて、どのように表示が変わっていったか見てください。
まとめ
・Webページを表示させるためには、基本的に『HTML』と『CSS』という2つのテキスト文書を用います。
・HTMLは＜body＞タグ内に書きます。
・CSSは＜head＞タグ内のさらに＜style＞タグ内に書きます。
実際のホームページはこの2つを基本として、さらに複雑な仕様を取り入れて表示させています。今回は細かな説明は省きましたが、次回以降はもう少し具体的な内容にしたいと思います。
※ブログで使用している.thmlおよび.cssの動作確認は、ご自身のPCでのみご利用ください。
※この内容を直接業務に使用されますと、Web制作サイドに多大なご迷惑をお掛けする恐れがあります。くれぐれも直接的な業務使用はおやめください。
※このソースを利用して生じた問題や損害について、弊社では一切責任を負いません。
この投稿へのコメント