#HTMLの学習その2
1つ目の投稿はこちら
HTMLの学習【新人エンジニア：未経験者向け】
・取り合えずメインの枠を最初につくっておく
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML講座2回目</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
・定義・説明リストを作ってみる
定義・説明リストとは、項目と説明がワンセットになったリスト構造のことを指します。
dl, dt, ddタグを用いて表現します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML講座2回目</title>
<style type="text/css">
</style>
</head>
<body>
<dl>
<dt>HTML</dt><dd>Hyper Text Markup Language</dd>
<dt>CSS</dt><dd>Cascading Style Sheets</dd>
</dl>
</body>
</html>
結果：
・HTML5になっての変更点
実は少しHTML4.01からニュアンスが変わったようです。
以前は「定義リスト」という用語で説明がされており、少し役割が限定的な形になって
いましたが、HTML5になって少し役割を広く使っていい、という形になったようです。
・情報のグループ化にはdiv要素を使う
div要素は「いくつかの情報をグループとしてくくります」という場合に用いられます。
特別な意味がある場合は別タグを使って表現するのが正しい書き方ですが、
他に適切な要素がない場合などに使われます。逆に言うと、他の要素で賄えるなら
他で頑張って表現しましょう、というのが推奨だそうです。
・では、一度書いてみましょう。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML講座2回目</title>
<style type="text/css">
</style>
</head>
<body>
<dl>
<div>
<dt>HTML</dt><dd>Hyper Text Markup Language</dd>
<dt>CSS</dt><dd>Cascading Style Sheets</dd>
</div>
<div>
<dt>SQL</dt><dd>Structure Query language</dd>
<dt>Java</dt><dd>Java</dd>
</div>
</dl>
</body>
</html>
結果：
・情報をグループ化しました。div要素のみを記載するだけでは、
特に表示の変化は起こりません。よくdivが使われるパターンとして、
枠として括った内容に対して、何か装飾を行いたい場合によく
使われます。
・上の括りに対して、文字を30pxにしてみましょう。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML講座2回目</title>
<style type="text/css">
.front{
font-size:30px;
}
</style>
</head>
<body>
<dl>
<div class="front">
<dt>HTML</dt><dd>Hyper Text Markup Language</dd>
<dt>CSS</dt><dd>Cascading Style Sheets</dd>
</div>
<div>
<dt>SQL</dt><dd>Structure Query language</dd>
<dt>Java</dt><dd>Java</dd>
</div>
</dl>
</body>
</html>
結果：
・指定されたdiv要素のclass属性に対してフォントサイズの指定を行うCSSを記載しました。
その結果、その枠内にある全ての要素に対して、そのフォントサイズが適用された形となります。
・入れ子(ネスト)という考えを理解しよう
Javaのプログラミングなどでもそうですが、コードの入れ子(ネスト)は
大体発生します。その入れ子はちゃんと把握しておかないと、そもそもHTMLの文書として
成り立たない状態になります。
・たとえば、一番大枠となるhtmlタグもそうです。
上のサンプルを見てもらうと、一番初めと一番最後にタグが記載されています。
これがたとえばこんな状態になってしまった場合↓
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML講座2回目</title>
<style type="text/css">
.front{
font-size:30px;
}
</style>
</head>
<body>
<dl>
<div class="front">
<dt>HTML<dd></dt>Hyper Text Markup Language</dd>
<dt>CSS</dt><dd>Cascading Style Sheets</dd>
<div>
</div>
<dt>SQL</dt><dd>Structure Query language</dd>
<dt>Java</dt><dd>Java</dd>
</div>
</dl>
</body>
</html>
結果：
本来やりたいことはHTMLとCSSの項目のみ、フォントサイズを30pxに指定したいのですが、
入れ子が変（逆になっている）が原因で、一つ目のdiv要素の中に何もないdiv要素があって、
一つ目のdiv要素は一番最後のdivで閉じている、という状態になります。
正しいネスト：
<p><a>なにかしらの文書</a></p>
間違ったネスト：
<p><a>なにかしらの文書</p></a>
というのに注意していただきたいと思います。
なのでその要素がどこまで有効な範囲かを分かりやすくするために
インデント(字下げ)を用いる、という事になります。
・画像を表示するには
画像を表示する際に使用するタグはimgタグとなります。
imgタグの中にsrc属性というのがあり、その属性にて画像ファイルのURLを指定します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML講座2回目</title>
<style type="text/css">
.front{
font-size:30px;
}
</style>
</head>
<body>
<dl>
<div class="front">
<dt>HTML<dd></dt>Hyper Text Markup Language</dd>
<dt>CSS</dt><dd>Cascading Style Sheets</dd>
</div>
<div>
<dt>SQL</dt><dd>Structure Query language</dd>
<dt>Java</dt><dd>Java</dd>
</div>
</dl>
<img src="./test.jpg" />
</body>
</html>
これで画像は表示されましたが、その画像サイズそのままドカンと
表示されている状態だと思います。サイズの指定を行ってみましょう。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML講座2回目</title>
<style type="text/css">
.front{
font-size:30px;
}
</style>
</head>
<body>
<dl>
<div class="front">
<dt>HTML<dd></dt>Hyper Text Markup Language</dd>
<dt>CSS</dt><dd>Cascading Style Sheets</dd>
</div>
<div>
<dt>SQL</dt><dd>Structure Query language</dd>
<dt>Java</dt><dd>Java</dd>
</div>
</dl>
<img src="./test.jpg" width="300" height="300" />
</body>
</html>
・このように指定を行うと、該当のサイズで画像が表示されます。
また、alt属性は画像が利用できない（表示されない）場合、そのガイドとしてテキストを
表示してくれます。画像が「×」で表示されている隣に指定のテキストを表示してくれます。
・HTML5での変更点
altの属性はHTML4.01では必須でしたが、HTML5では必須ではなくなりました。
HTML4.01ではimg要素に画像レイアウトを指定するための属性がいくつかありましたが、
HTML5で廃止となった属性があります。
1.align属性(配置指定) 2.border属性(罫線) 3.hspace属性(画像の左右余白指定) 4.vspace属性(画像の上下余白指定)
これらは全てCSSで指定する推奨となりました。
・絶対パス(absolute path)と相対パス(relative)
画像やリンクの指定は「パス」というのが必要になります。
リンクの場合、URLを指定しますが、結局のところ、その目的地にある該当の
HTMLファイルを表示するためのパス（=ファイルの場所)を指定する、という考えになります。
画像ももちろん、画像「ファイル」になるので、そのファイルの場所、つまりパスの指定が
必要になりますね。
・絶対パスは該当の箇所をどこからアクセスする場合でも同じ指定の方法になり、
相対パスは「今の場所からアクセスする場合の指定」となるのが大きな違いとなります。
・たとえば、上の画像を絶対パスで指定する場合ですが、仮にデスクトップに画像ファイルを
配置しているとします。その場合(for Windows)は
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML講座2回目</title>
<style type="text/css">
.front{
font-size:30px;
}
</style>
</head>
<body>
<dl>
<div class="front">
<dt>HTML<dd></dt>Hyper Text Markup Language</dd>
<dt>CSS</dt><dd>Cascading Style Sheets</dd>
</div>
<div>
<dt>SQL</dt><dd>Structure Query language</dd>
<dt>Java</dt><dd>Java</dd>
</div>
</dl>
<img src="C:/Users/(ユーザ名)/Desktop/test.jpg" width="300" height="300" alt="デスクトップ"/>
</body>
</html>
となります。
・相対パスの場合、上で一番最初に画像指定したのが相対パスの記載になります。
HTMLファイルと画像ファイルが同じ階層の場合、
「./ファイル名」または「ファイル名」での指定を行います。
同じ階層だけれども、別のフォルダに画像が格納されている場合、
「フォルダ名/ファイル名」または「./フォルダ名/ファイル名」で指定します。
今いる階層の1つ上の階層に画像ファイルがある場合、「../ファイル名」と指定します。
階層が一つ上になると、「../」を増やして指定します。
相対パスは起点がどこになるのかを把握しないと、パスの指定を間違ってしまい、
画像が表示されない、リンクが表示されないといった事がありますので、
フォルダ構成をしっかり把握しましょう。
・利用場面に応じて使い分けが出てくると思いますので、両方の使い方、指定方法を
理解しておけば間違いないと思います。
HTMLの超基礎講座2回目、ここまでとします。