【CodeCamp】HTML5/CSS3 教科書サンプル
- 1. HTML/CSSとは
■ HTMLとは
HTMLとはHyperText Markup Languageの略で、Webページを作成するためのマーク
アップ言語の1つです。マークアップ(Markup)とは、「文書の各部分がどのような役割を持
っているのかを示す」ことを指します。
桃太郎
むかしむかし、あるところにおじいさんとおばあさんが住んでいました。
おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。
おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな
桃が流れてきました。
例えば上記の文章を人が読んだ場合、「桃太郎」が見出しで「むかしむかし∼」と「おば
あさんが∼」の文章が段落と分かると思いますが、コンピュータはこのままでは判別できま
せん。見出し・段落・箇条書き・強調など、文書の中で各部分が果たしている役割をコンピ
ュータに分かるよう目印をつけるのがマークアップの役割です。
Copyright © TribeUniv All Rights Reserved.
- 5. HTML/CSSとは
タグは「 < 」記号と「 > 」記号を用いて構成されるもので、開始タグと終了タグの2種
類があり、文書内の各部分がどのような意味なのか表現するのに使います。
<h1>桃太郎</h1>
上記の例で言うと、<h1>タグ(開始タグ)と</h1>(終了タグ)を用いて「見出し」が表現さ
れます。余談ですが、h1はheading1の略となります。
要素とは、開始タグと終了タグを用いて構成される全体を指します。
<h1>桃太郎</h1>
上記の例で言うと、開始タグから終了タグまでの間にある桃太郎という内容も含めて全部
が「要素」です。 要素が見出しや段落などページの中での役割を決めます。
※終了タグが存在しない要素もあります。 例) <img>
HTMLは、要素の組み合わせで構成されており、要素は全部で108種類あります。
※2013年8月時点
Copyright © TribeUniv All Rights Reserved.
- 7. HTML/CSSとは
ファイル名: momotaro.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>昔話</title>
</head>
<body>
<h1>桃太郎</h1>
<p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。
おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p>
<p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな
桃が流れてきました。</p>
</body>
</html>
ファイルが作成できたらブラウザで閲覧してみましょう。作成したmomotaro.htmlファ
イルをブラウザへドラック&ドロップしてください。
Copyright © TribeUniv All Rights Reserved.
- 11. HTML/CSSとは
■ CSSとは
CSS(Cascading Style Sheets)とは、HTML文書の装飾やレイアウトをほどこすための
言語です。CSSはHTMLで作成した要素に対して装飾をします。
先ほど作成した桃太郎の文章では、HTMLを利用し見出し・段落と文章の役割を定義しま
したが、デザインは白背景に黒文字のシンプルなものになりました。CSSは、HTMLだけで
は実現できない細かなデザインを指定するために利用されます。
Webページは「文章の構造を定義するHTML」と「デザインを指定するCSS」のセット
で基本的に作られています。
+
Copyright © TribeUniv All Rights Reserved.