文章を表示させるための第一歩
HTMLには色々なタグがあります。よく使う物からあまり使わない物まで、本当に色々あります。
すべてを紹介出来るかは解りませんが、頑張ってみます。
<p></p>
まずは
<p>タグです。
これは
段落を作る時のタグです。
この中に入れた文章が、一つの段落とされます。
<p>今日の天気は晴れだけど、なぜか傘を持たされた。</p><p>いくらなんでも心配性が過ぎる。</p>
これはこうなります。
今日の天気は晴れだけど、なぜか傘を持たされた。
いくらなんでも心配性が過ぎる。
段落分けされましたね?
ちなみに、HTMLではファイルの中でいくら改行したとしても、
反映されません。
改行にもタグが必要なのです・・・。面倒ですね。
それでは、段落の中で
改行したい場合はどうすれば良いのでしょうか?
もちろんタグが用意されています。
<br>
こうです。例を挙げてみましょう。
<p>今日の天気は晴れだけど、なぜか傘を持たされた。<br>いくらなんでも心配性が過ぎる。</p>
同じ文章ですが、一つの段落にしてあります。
さて、どうなるでしょうか?
今日の天気は晴れだけど、なぜか傘を持たされた。
いくらなんでも心配性が過ぎる。
結果はほぼ同じですが、文字の離れ具合が全然違いますね。
段落と段落は一文字分くらいのスペースが空くのですが、
改行だと空かない。
ケースバイケースで使い分けるのが良いと思います。
さて。皆さん気付かれたでしょうか?
<p>タグには終了タグがあるのに、<br>タグには終了タグがありません。
これはなぜでしょうか?
私も詳しい事は解りませんが、
文字などを挟んで効果が現れる物には終了タグが存在し、そのタグ単体で効果が現れる物には存在しないと言う様な感じの気がします。
これは公式見解ではありません。私が勝手に思っている事です。
そんな風にイメージされると何となく解る様な気がします。
ちなみに、終了タグの無いタグの事を空タグと言います。
ページの上へ
その二歩目
さぁ、文章を表示させる事が出来るようになりましたね?
この二つのタグが理解出来ていれば、ブラウザ上に文章を表示させる事は出来るでしょう。
しかし、これだけでは物足りない・・・。
色んな飾りを付けたいよ。と皆さん思っていらっしゃるでしょう。
ホームページに飾りや彩りを持たせたり、デザイン性を持たせたりするのには、
CSS(スタイルシート)が必要なのですが、それはまだ後に置いておくとして、HTMLでも若干の飾り付けを出来るので、それを紹介したいと思います。
<hr>
これを書いてみましょう。
<p>今日の天気は晴れだけど、なぜか傘を持たされた。<hr>いくらなんでも心配性が過ぎる。</p>
先ほどの文章の改行のかわりに
<hr>を書いてみました。
さて、どうなるでしょうか?
今日の天気は晴れだけど、なぜか傘を持たされた。
いくらなんでも心配性が過ぎる。
はい。罫線が引かれましたね。
<hr>は罫線を引くタグです。
文章と文章を区切りたい時などに使えますね。
スタイルシートによって、太さや長さ、色が変えられます。
なので、スタイルシートと組み合わせる事によって、
ホームページを飾る事が出来るのです。
ページの上へ
見出しをつけてみよう
新聞記事などには、大きな見出しが付けられています。
見出しは本文の文字よりも大きく、すぐに目につきます。
よって、この記事はどんなテーマで書かれているんだよ。と言う事が一目で分かるとても便利な物なのです。
HTMLにもそんな便利な機能がついているのです。
<h1></h1>
これです。
この
<h1>タグに挟まれた文字が見出しとなって大きく表示されるのです。
それでは例を挙げてみましょう。
<h1>今日からモンハン解禁だ!</h1>
あくまで例なのでモンハンは特に関係ありません。
さて。どうなるのでしょうか?
今日からモンハン解禁だ!
文字が大きくなりました。
<h1>から<h5>まであるので、試してみましょう。
<h1>今日から</h1><h2>モンハン</h2><h3>解禁</h3><h4>だ</h4><h5>!</h5>
今日から
モンハン
解禁
だ
!
あれ?
横に並べたのに勝手に改行されてる・・・。
これは実はタグの特性と言うか属性に関係する物なのです。
インライン要素とブロック要素と言う物がありまして、<h1>タグはブロック要素なんです。
なんのこっちゃい解らんと思います。
簡単に言うと
ブロック要素は、
画面いっぱいまでそのタグが適応されます。
逆に
インライン要素は、その場所だけにしか適応されません。
つまり、ブロック要素を並べると、画面では改行されてしまうんです。
(画面の左端から右端までが<h1>タグの中身とされるため)
今はまだ、そんな小難しい話は気にしないので良いのですが、
そんな事もあるんだなぁ。と言う感じで頭の片隅にでも置いておいてください。
ページの上へ
表を作ってみよう
次にご紹介するのは
テーブルと言う物です。
食卓などのテーブルではなく、タイムテーブルのテーブルです。
つまりは、
表ですね。
<table>です。
これは少し今までのタグと違い、これ単体では効果が表れません。
この<table>タグは、表を作りますよ。と言う宣言だと思ってください。
表には何が必要でしょうか?
縦列と横列ですね。
皆さんは縦が何行、横が何列と言う風に考えながら、表を作ると思います。
HTMLでも同じです。
<tr>で横列の宣言をします。
続いて、
<td>でいくつその列にマスがあるかと言うのを宣言します。
横5縦3の表を作るとするとこうです。
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
</table>
長いですね・・・。
早速どうなるか見てみましょう。
1-1 |
1-2 |
1-3 |
1-4 |
1-5 |
2-1 |
2-2 |
2-3 |
2-4 |
2-5 |
3-1 |
3-2 |
3-3 |
3-4 |
3-5 |
<td>と</td>に挟まれた物が、一つのマス(セルと言います)に入ります。
内枠も外枠も何も無いので、正直
見にくいですね・・・。
そんな時はこうしましょう。
<table>タグに
ボーダープロパティをつけます。
いきなりプロパティと言われてもピンと来ないでしょう。
プロパティと言うのは、情報と言う意味です。確か。
ボーダー。つまり
枠線の情報を付けてあげましょうと言うことです。
書き方はこちらです。
<table border="3px #000000">
これを先ほどの例題につけてみましょう。
1-1 |
1-2 |
1-3 |
1-4 |
1-5 |
2-1 |
2-2 |
2-3 |
2-4 |
2-5 |
3-1 |
3-2 |
3-3 |
3-4 |
3-5 |
ほら!見違えるようになりましたね!!
先ほどのプロパティは、
枠線が3ピクセルで色は黒です。と言う指定をしています。
#000000と言うのは
十六進数(0〜fで表す)で色を表しているのです。
十六進数の事が詳しく知りたいという方は、調べてみてください。
rgbと言うのを聞いた事はありますか?
光の三原色と言うやつですね。確か。
この色を混ぜれば、どんな色でも作れるのです。
二桁ずつ、赤・緑・青と言う順番で指定して行くと、色が出来上がると言う事です。
ちなみに白は#ffffffです。
さて。表ですが、セルが埋まっていればこれで良いのですが、そうとは限りませんよね?
時には空白がある事もあります。そんな時、どうしますか?
<td></td>を一つ消せば良いと思ったでしょう?
試しにやってみましょう。
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
</table>
1-5を消してみました。
さてどうなるでしょうか?
1-1 |
1-2 |
1-3 |
1-4 |
2-1 |
2-2 |
2-3 |
2-4 |
2-5 |
3-1 |
3-2 |
3-3 |
3-4 |
3-5 |
なんだ。これでいいんじゃん。と思いましたよね?
今回は、端だったので違和感はありませんが、真ん中だった場合どうなるでしょうか?
1-1 |
1-2 |
1-3 |
1-4 |
1-5 |
2-1 |
2-2 |
2-4 |
2-5 |
3-1 |
3-2 |
3-3 |
3-4 |
3-5 |
なんとなく気持ちが悪いですよね?
これを成形するには、空の<td></td>をその場所に入れます。
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td></td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
</table>
1-1 |
1-2 |
1-3 |
1-4 |
1-5 |
2-1 |
2-2 |
|
2-4 |
2-5 |
3-1 |
3-2 |
3-3 |
3-4 |
3-5 |
真ん中だけが空いた表が出来上がりました。
実際、こんな表は無いと思いますが、
掃除当番の表だとかを作る時など空白が必要なときは、
この知識が必要になってきます。
|
月 |
火 |
水 |
木 |
金 |
教室 |
青木 |
|
|
|
奥菜 |
廊下 |
|
木村 |
|
剣道 |
近藤 |
トイレ |
|
|
清水 |
|
|
昇降口 |
|
|
|
天道 |
|
こんな感じに。
どんだけ不潔な所だよ。と言う感じになってしまいましたが、
とにかく、そう言う風にすると言う事が解って頂けたら良いです。
さきほどの表の空白部分を結合させてみましょう。
酷な事ですが月曜日は、青木君がすべての掃除場所を担当するとします。
<table border="3px">
<tr>
<td></td>
<td>月</td>
<td>火</td>
<td>水</td>
<td>木</td>
<td>金</td>
</tr>
<tr>
<td>教室</td>
<td rowspan="4">青木</td>
<td></td>
<td></td>
<td></td>
<td>奥菜</td>
</tr>
<tr>
<td>廊下</td>
<td>木村</td>
<td></td>
<td>剣道</td>
<td>近藤</td>
</tr>
<tr>
<td>トイレ</td>
<td></td>
<td>清水</td>
<td></td>
<td></td>
</tr>
<tr>
<td>昇降口</td>
<td></td>
<td></td>
<td>天道</td>
<td></td>
</tr>
</table>
|
月 |
火 |
水 |
木 |
金 |
教室 |
青木 |
|
|
|
奥菜 |
廊下 |
木村 |
|
剣道 |
近藤 |
トイレ |
|
清水 |
|
|
昇降口 |
|
|
天道 |
|
こうなりました。
青木君には悪いのですが、毎週月曜日は掃除を一日やってもらう事になりそうですね。
rowspanと言うプロパティをセルに持たせました。
縦の長さと言う意味です。このセルは何行分ですよ。と言う事を言ってる訳ですね。
そして、その分、
空白の<td></td>タグを消しています。
消さないと、一列増えてしまうのです。
青木君の列が4行分あるのに、セルを五個書いておいたら、全部で六個になってしまいますよね?
なので、青木君のセルの下の空白だったセルは
消さなければならないのです。
横のセルの結合は
colspanで行います。
試しにやってみましょう。
<table border="3px">
<tr>
<td></td>
<td>月</td>
<td>火</td>
<td>水</td>
<td>木</td>
<td>金</td>
</tr>
<tr>
<td>教室</td>
<td colspan="4">青木</td>
<td>奥菜</td>
</tr>
<tr>
<td>廊下</td>
<td></td>
<td>木村</td>
<td></td>
<td>剣道</td>
<td>近藤</td>
</tr>
<tr>
<td>トイレ</td>
<td></td>
<td></td>
<td>清水</td>
<td></td>
<td></td>
</tr>
<tr>
<td>昇降口</td>
<td></td>
<td></td>
<td></td>
<td>天道</td>
<td></td>
</tr>
</table>
|
月 |
火 |
水 |
木 |
金 |
教室 |
青木 |
奥菜 |
廊下 |
|
木村 |
|
剣道 |
近藤 |
トイレ |
|
|
清水 |
|
|
昇降口 |
|
|
|
天道 |
|
表のレイアウトが崩れてしまいましたが、青木君は月曜から木曜日まで教室を担当する事になりましたね。
テーブルはとても
よく使うので、覚えておきましょう!
<<前へ
次へ>>
ページの上へ