【CodeCamp】HTML5/CSS3 教科書サンプル

HTML/CSSとは
■ HTMLとは
HTMLとはHyperText Markup Languageの略で、Webページを作成するためのマーク
アップ言語の1つです。マークアップ(Markup)とは、「文書の各部分がどのような役割を持
っているのかを示す」ことを指します。

桃太郎
むかしむかし、あるところにおじいさんとおばあさんが住んでいました。
おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。
おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな
桃が流れてきました。

例えば上記の文章を人が読んだ場合、「桃太郎」が見出しで「むかしむかし∼」と「おば
あさんが∼」の文章が段落と分かると思いますが、コンピュータはこのままでは判別できま
せん。見出し・段落・箇条書き・強調など、文書の中で各部分が果たしている役割をコンピ
ュータに分かるよう目印をつけるのがマークアップの役割です。

Copyright © TribeUniv All Rights Reserved.

HTML/CSSとは
ハイパーテキスト(HyperText)は、ハイパーリンクを埋め込むことができる高機能なテキ
ストを指します。Webページでよくみかけるクリックすると別ページへ移動するリンクはハ
イパーリンクの一種です。例) http://codecamp.jp/
ハイパーリンクを使うと画像・動画・音声など様々な情報をWebページに埋め込むこと
ができます。HTMLにはこのハイパーリンク機能で「関連する情報同士を結びつける」とい
う特徴があります。
例えばWebページに画像はよく見られると思いますが、これはHTMLのハイパーリンク
機能によりHTMLファイルと画像ファイルを結びつけ画像を埋め込むことで、1つのWebペ
ージとして表示しています。

+
HTMLファイル

画像ファイル

Webページ

HTML/CSSとは
Languageは、マークアップをどのようなルールで行うかの定義したもの、つまり文法と
いうような意味になります。

HTML(HyperText Markup Language)についてまとめると
■ HyperTextはハイパーリンクを埋め込むことができる高機能なテキスト
■ Markupは文書の各部分がどのような役割を持っているのかを示す
■ Languageはマークアップのルールを定義(文法)
であり、HTMLは「文章の構造を定義」する高機能なテキストファイルです。
注意事項として、あくまでHTMLは見出し、段落など文章の構造を定義するものであり、
文字の色や大きさ、レイアウトなど、Webページの見た目を整える役割はありません。文章
の見た目は後ほど説明するCSSを利用し指定します。


HTML/CSSとは
■ 要素とタグ
HTMLでは見出し・段落など文書の構造を要素(element)と呼び、文章の構造を定義する
ための記号としてHTMLタグが使用されます。
要素とHTMLタグの基本構成は以下となります。

開始タグ

終了タグ

<h1>桃太郎</h1>
要素

HTML/CSSとは
タグは「 < 」記号と「 > 」記号を用いて構成されるもので、開始タグと終了タグの2種
類があり、文書内の各部分がどのような意味なのか表現するのに使います。

<h1>桃太郎</h1>
上記の例で言うと、<h1>タグ(開始タグ)と</h1>(終了タグ)を用いて「見出し」が表現さ
れます。余談ですが、h1はheading1の略となります。
要素とは、開始タグと終了タグを用いて構成される全体を指します。

<h1>桃太郎</h1>
上記の例で言うと、開始タグから終了タグまでの間にある桃太郎という内容も含めて全部
が「要素」です。要素が見出しや段落などページの中での役割を決めます。
※終了タグが存在しない要素もあります。例) <img>
HTMLは、要素の組み合わせで構成されており、要素は全部で108種類あります。
※2013年8月時点


HTML/CSSとは
桃太郎のあらすじ冒頭をHTMLで表すと次のようになります。

<h1>桃太郎</h1>
<p>むかしむかし、あるところにおじいさんとおばあさんが住んでいまし
た。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p>
<p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大き
な桃が流れてきました。</p>

見出しと段落をそれぞれ開始タグと終了タグで囲みました。h1要素が先ほど説明した見
出しを表し、p要素はparagraphの略で、段落を表します。
しかし残念ながら上記でHTML完成とはなりません。HTMLには作成の上で必須となる要
素がいくつかあり、これを追記する必要があります。
詳しい説明は後ほど行いますので、次のお手本に従い必須要素を加えたHTMLをテキスト
エディタで作成し保存してください。


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ファ
イルをブラウザへドラック&ドロップしてください。

HTML/CSSとは

見出しと段落がブラウザで表示されました。
※文章の改行位置はブラウザの横幅によって異なります。
様々なタグをmomotaro.htmlに記述したと思いますが、実際にブラウザで閲覧した際に
表示されるのは桃太郎の文章だけとなります。しかし裏側ではHTMLタグをコンピュータが
解釈し、文書の構造を把握しています。
これにより、多種多様な機器で環境に左右されることなく、文章の内容をユーザーに正し
く伝えることができます。例えば音声でWebページを読み上げる機能があった際に見出し
(h1要素)だけ特定の音を鳴らして伝えるなど、区別することが可能です。
どんな環境でも正確な情報を提供できるよう、適切なマークアップを心掛けましょう。

HTML/CSSとは
■ 属性
属性とは、要素の中に付加的な情報を埋め込む役割を持ちます。

<a href="http://codecamp.jp/">
属性名

属性値

例えばハイパーリンクを表すa要素の場合、href属性でリンク先のアドレス情報を付与す
ることができます。属性の値は「"」(ダブルクォート)で囲った中に記載します。
実際にmomotaro.htmlの指定箇所にa要素を追記し、ブラウザで閲覧してみましょう。
<p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな
桃が流れてきました。</p>
<a href="http://codecamp.jp/">CodeCamp</a>
</body>
2つ目のp要素の下に追記

HTML/CSSとは

別なWebページへのリンクが表示され、クリックするとhref属性の属性値に指定した
URLへ移動します。
属性の利用には次のようなルールがあります。
■ 開始タグに記載する
■ 設定できる属性は要素ごとに異なる(全ての要素に設定できる属性もある)
■ 属性は1つの要素に複数設定することができる
属性にはたくさんの種類がありますが、CodeCampではよく利用するものを今後紹介し
ていきます。現時点では、属性には要素に付加的な情報を埋め込む役割があることと、属性
の書き方とルールを覚えておいてください。

HTML/CSSとは
■ CSSとは
CSS(Cascading Style Sheets)とは、HTML文書の装飾やレイアウトをほどこすための
言語です。CSSはHTMLで作成した要素に対して装飾をします。
先ほど作成した桃太郎の文章では、HTMLを利用し見出し・段落と文章の役割を定義しま
したが、デザインは白背景に黒文字のシンプルなものになりました。CSSは、HTMLだけで
は実現できない細かなデザインを指定するために利用されます。
Webページは「文章の構造を定義するHTML」と「デザインを指定するCSS」のセット
で基本的に作られています。

+

HTML/CSSとは
■ CSSの記述方法
CSSの基本書式は以下のようになります。

どこの（セレクタ） {
なにを（プロパティ）: どうする（値）;
}
例)
h1 {
color: red;
}
HTMLの「どこの部分の」「なにを」「どんな値にするか」を決まった書式に従い書い
ていくのがCSSの基本です。
例では「h1要素の」「文字の色を」「赤にする」と指定しています。

HTML/CSSとは
■ セレクタとプロパティ
CSSを適用する対象を指定するのがセレクタです。セレクタは要素や一部の属性を指定で
きます。指定したセレクタがHTMLに複数あった場合、全てにCSSは適用されます。属性の
指定については別途詳細を説明します。
セレクタで「どこの部分」を指定した後、「{ }」で囲まれた中にプロパティと値を書き、
適用するデザインを決定します。
CSSでは指定できるデザインがたくさん用意されています。例えば「文字の色」「文字サ
イズ」「背景色」などがあり、この選択肢をCSSのプロパティと呼びます。またCSSのプロ
パティに対して「どんな値にするか」を指定するものを値と呼びます。
プロパティと値の間は「: 」(コロン)で区切り、値を指定した後は「;」(セミコロン)をつ
けます。

どこの（セレクタ） {
なにを（プロパティ）: どうする（値）;
}

HTML/CSSとは
実際にmomotaro.htmlの指定箇所にCSSを追記し、ブラウザで閲覧してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>昔話</title>
</head>

head要素の中に追記
<style>
h1 {
color: red;
}
</style>

追記すると、CSSで指定したh1要素の「桃太郎」という文字が赤くなります。
CSSをHTMLに適用させる方法は何種類かあり、今回利用したstyle要素を含め、適用方
法の詳細については別途説明します。

HTML/CSSとは
■ 課題
momotarro.htmlにp要素の色を青にするCSSを追記してください。


【CodeCamp】HTML5/CSS3 教科書サンプル

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Dernier

Dernier (6)

【CodeCamp】HTML5/CSS3 教科書サンプル