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

Copyright © TribeUniv All Rights Reserved.

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

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

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

http://corporate.tribe-univ.com/



ハイパーテキスト(HyperText)は、ハイパーリンクを埋め込むことができる高機能なテキストを指します。Webページでよくみかけるクリックすると別ページへ移動するリンクはハイパーリンクの一種です。例) http://codecamp.jp/

ハイパーリンクを使うと画像・動画・音声など様々な情報をWebページに埋め込むことができます。HTMLにはこのハイパーリンク機能で「関連する情報同士を結びつける」という特徴があります。

例えばWebページに画像はよく見られると思いますが、これはHTMLのハイパーリンク機能によりHTMLファイルと画像ファイルを結びつけ画像を埋め込むことで、1つのWebページとして表示しています。

HTML/CSSとは

+HTMLファイル画像ファイル Webページ



http://codecamp.jp/

http://codecamp.jp/


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はheading1の略となります。

要素とは、開始タグと終了タグを用いて構成される全体を指します。

上記の例で言うと、開始タグから終了タグまでの間にある桃太郎という内容も含めて全部が「要素」です。要素が見出しや段落などページの中での役割を決めます。 ※終了タグが存在しない要素もあります。例) <img>

HTMLは、要素の組み合わせで構成されており、要素は全部で108種類あります。 ※2013年8月時点

<h1>桃太郎</h1>

<h1>桃太郎</h1>




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

見出しと段落をそれぞれ開始タグと終了タグで囲みました。h1要素が先ほど説明した見出しを表し、p要素はparagraphの略で、段落を表します。

しかし残念ながら上記でHTML完成とはなりません。HTMLには作成の上で必須となる要素がいくつかあり、これを追記する必要があります。詳しい説明は後ほど行いますので、次のお手本に従い必須要素を加えたHTMLをテキストエディタで作成し保存してください。

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




HTML/CSSとはファイル名: momotaro.html

ファイルが作成できたらブラウザで閲覧してみましょう。作成したmomotaro.htmlファイルをブラウザへドラック&ドロップしてください。

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>昔話</title></head><body><h1>桃太郎</h1><p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p><p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。</p></body></html>




HTML/CSSとは

見出しと段落がブラウザで表示されました。 ※文章の改行位置はブラウザの横幅によって異なります。

様々なタグをmomotaro.htmlに記述したと思いますが、実際にブラウザで閲覧した際に表示されるのは桃太郎の文章だけとなります。しかし裏側ではHTMLタグをコンピュータが解釈し、文書の構造を把握しています。

これにより、多種多様な機器で環境に左右されることなく、文章の内容をユーザーに正しく伝えることができます。例えば音声でWebページを読み上げる機能があった際に見出し(h1要素)だけ特定の音を鳴らして伝えるなど、区別することが可能です。

どんな環境でも正確な情報を提供できるよう、適切なマークアップを心掛けましょう。




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

例えばハイパーリンクを表すa要素の場合、href属性でリンク先のアドレス情報を付与することができます。属性の値は「"」(ダブルクォート)で囲った中に記載します。

実際にmomotaro.htmlの指定箇所にa要素を追記し、ブラウザで閲覧してみましょう。

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

属性名属性値

<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」のセットで基本的に作られています。

+




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

例)

HTMLの「どこの部分の」「なにを」「どんな値にするか」を決まった書式に従い書いていくのがCSSの基本です。例では「h1要素の」「文字の色を」「赤にする」と指定しています。

HTML/CSSとは

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

h1 { color: red;}




■ セレクタとプロパティ CSSを適用する対象を指定するのがセレクタです。セレクタは要素や一部の属性を指定できます。指定したセレクタがHTMLに複数あった場合、全てにCSSは適用されます。属性の指定については別途詳細を説明します。セレクタで「どこの部分」を指定した後、「{ }」で囲まれた中にプロパティと値を書き、適用するデザインを決定します。

CSSでは指定できるデザインがたくさん用意されています。例えば「文字の色」「文字サイズ」「背景色」などがあり、この選択肢をCSSのプロパティと呼びます。またCSSのプロパティに対して「どんな値にするか」を指定するものを値と呼びます。プロパティと値の間は「: 」(コロン)で区切り、値を指定した後は「;」(セミコロン)をつけます。

HTML/CSSとは

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




HTML/CSSとは実際にmomotaro.htmlの指定箇所にCSSを追記し、ブラウザで閲覧してみましょう。

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

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>昔話</title></head>

<style>h1 { color: red;}</style>

head要素の中に追記




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



Education

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