※この説明のHTMLファイル自体が教材になっています。ソースを表示したり、編集しながら読んでください。

HTMLについて

簡単な例

 

以下に、段落と強調を指定したHTMLの例を書きます。

こんにちは。

今日はいい天気ですね。時折、心地よい風がそよぎ、澄み渡る空の下に広がる光景は、まさに自然の美しさそのものでございます。この素晴らしい晴天のもと、日々の喧騒を忘れ、静かに心を落ち着け、ただただこの瞬間を楽しむことができることの幸せを感じております。 太陽の温かな光が私たちを包み込み、その恵みを存分に受けることができる今日のような日は、まさに大自然の恵みを実感するにふさわしい日であると言えるでしょう。空気の清々しさ、木々の緑の深さ、そして花々の色彩が織り成すこの景色に、心から感動を覚えるとともに、改めて生かされていることの喜びを感じずにはいられません。

というわけで、布団が…吹っ飛んだ!…なーんてね~~。

ブロック要素

styleで、スタイルを変更できます。上の例では、背景の色を設定しています。


例1: 内側の余白 padding

こんにちは。

例2: 外側の余白 margin

こんにちは。

例3: 両方を指定

こんにちは。

上の例では、余白を設定しています。余白には二種類あり、ブロックの内側と外側の余白を別に指定できます。


こんにちは。

上の例では、枠線を設定しています。

p 要素も、段落として表示するのにちょうどよいスタイル(余白)があらかじめ設定された、ブロック要素の一種です。

クラス

スタイルがあらかじめ設定された「クラス」を設定することでも色を設定できます。

こんにちは。

「クラス」は複数指定できます。複数指定するには、空白で区切って並べます。

こんにちは。

入れ子構造

divの中にdivを入れられます。

divの中にdivを入れ、その中にdivを入れ…とします。

スクリプト

スクリプトで、タグの中身を見ることができます。

また、スクリプトでスタイルを変更することもできます。

入れ子のタグの中身を見るには、childrenを使います。

タグを作成するには、document.createElementを使用し、新しく作ったタグを追加するには、appendChildを使います。

for文を使用して、たくさん作れます


発展的な課題

div の中にdivを入れ、その中にdivを入れ、というのを20回繰り返したものを、スクリプトを使って作ってください。