ZERO WEB スタッフブログ

気になった情報や今後の展開など

Entries for the ‘HTMLについて’ Category

絶対パスとは 相対パスとは

パスについてお話します。
パスには、
相対パス絶対パス
の二つがあります。
相対パスは、たとえばAというファイルからみたときのBというファイルへの道順になります。絶対パスは、どのファイルが主体だろうと、Bというファイルへアクセスできるような道順になります。
といっても、よくわかりません。
住所で考えてみたいと思います。
あなたの家から友人の家はどうやって行きますか?
と聞かれたら、多くの人がこんな感じで答えるはずです。
「まっすぐいって信号を左にまがって、二軒目が友人の家です」
この場合、自分の家を主体として、友人の家までの道順を記しているといえます。
これは相対パスです。
しかし、友人に手紙を書こうと思ったら、どうでしょう。
このように書きませんか?
沖縄県 那覇市 ○○町 1-1-1
住所ですしるせば、どこから手紙を出そうと必ずそこへたどり着きます。
これが、絶対パスというわけです。
では、インターネット上の住所はどのようになっているのでしょうか。
ホームページアドレスとよばれる、
http://simazake.jugem.jp/
このような形が住所です。
ですので、http://から始まるパスは、絶対パスとなります。
相対パスにも記述にルールがあって、まずは
・「/(スラッシュ)」は、フォルダ(階層)に入る・「../(ドットドットスラッシュ)は、フォルダ(階層)を一つ上にあがる」
の二つを覚えてください。
test1.html
というファイルが
http://simazake.jugem.jp/
というアドレスの中に入っていたとすると、絶対パスでのアクセス方法は、
http://simazake.jugem.jp/test1.html
となります。
さらに、todayというフォルダにtest2.htmlというファイルがある場合には、
http://simazake.jugem.jp/today/test2.html
となります。
フォルダを記すには、フォルダ名の後ろに「/(スラッシュ)」をつけるだけです。
では、test1.htmlからtest2.htmlにアクセスしたい場合はどのようにしたらいいでしょうか。
この場合は、test1.htmlが主体となりますので、相対パスが適当です。
実際には以下のようになります。
today/test2.html
どうでしょう。
http://simazake.jugem.jp/
がとれただけですね。
どうして、このようになるのかというと、実はtest1.htmlとtodayは、同じ階層にあるのです。
test2.htmlは、test1.htmlよりも一つ深い階層にあるという事にも注目です。
反対にtest2.htmlを主体として、test1.htmlにアクセスする場合は、
../test1.html
となります。
けっして、
today/test1.html
とはなりませんので、気をつけてください。
上記の場合ですと、test2.htmlとtodayフォルダは同じ階層にある事になり、test1.htmlはさらに一つ深いところにある事になってしまいます。
少々難しかったでしょうか。
この考え方は、習得するには頭で理解するよりも手を動かす事が大切です。
次回は手を動かして覚えるために、パスを使うタグ「リンクタグ」を解説します。

Leave a Comment

htmlで画像を表示する方法

ホームページを作るうえで、もっとも重要な要素は、テキストです。
もともとは、論文を沿革で共有して見るためのものだったのです。
その為には、テキストを見出しとして意味づけたりリストとして意味づけたりする必要があったわけです。
とはいうものの、現在のホームページはただのテキストの羅列ではありません。
画像という大きな要因があります。
今回は、画像を表示させてみたいと思います。
その前に、覚えておいてほしいのですが、実はここまでのタグでもページを作成する事は可能です。
画像は、あくまでも補助的なもので、メインはテキストである事を忘れないでください。
もちろん、例外もありますが最初のうちは画像は補助的なものとして扱ってください。
まずは、画像を用意します。
画像がないという方は、以下の画像をデスクトップに保存して使ってください。
保存の仕方は、右クリックして「名前をつけて画像を保存」です。
画像の名前は、
001.gif
とします。

用意はできましたか?
では、テキストエディターで、以下を入力してください。
<img src=”001.gif” alt=”画像です” />
ブラウザで確認します。
表示されましたか?
一発で表示されたのならスバラシイですよ!
今、画像を用意することによって、二つのファイルが存在することになります。
そうです、index.htmlというファイルと、001.gifというファイルです。
index.htmlにはhtmlを書く事ができますが、画像を張る事はできません。
ではどのようにするのかというと、画像を読み込む命令を書き込むのです。
それが<img>タグの力です。
このとき重要なのは、index.htmlに対して001.gifがどこにあるのかという事。
デスクトップに両方保存されているのなら、
<img src=”001.gif” alt=”画像です” />
でもいいのですが、それぞれ別の場所に保存していた場合は、表示に失敗してしまいます。
これを「リンク切れ」といいます。
だんだんと難しくなってきましたね。
ケーススタディでみてみましょう。
ショッピングサイトを作ったとします。
商品点数が、100点もあると、フォルダの中はhtmlやら画像やらで探しにくくなってしまいます。
htmlはhtml、画像は画像で分けておくと、変更や追加を加えるときに便利です。
通常、画像はimagesという名前をつけたフォルダに全て入れてしまいます。
この場合、index.htmlからみて001.gifは、imagesというフォルダに入ったファイルという事になります。
以下、実際のhtmlです。
<img src=”images/001.gif” alt=”画像です” />
先ほどとの違いはお分かりでしょうか。
あらたに
images/
という部分が書き加えられています。
これが意味するのは、
「imagesというフォルダの中に入っているよ」
という意味なのです。
このように特定のファイルまでの道筋を
「パス」
といいます。
とても重要なので、しっかりと理解できるまで先に進まないでください。
パスには、絶対パスと相対パスがありますが、次回に取って置きましょう。
とにかく今は、index.htmlと001.gifが同じフォルダーの中にあるか、デスクトップにある事を確認してください。
このタグの説明を行います。
画像を表示するタグは、<img>タグなのですが、複数の要素を書き込まなければ正しく表示されません。
よくみると、
src
alt
という二つの要素が入っています。
srcは、表示する画像までのパス。altは、その画像の代替テキストです。
代替テキストは、画像の上にずっとマウスを乗せておくとでてきたり、画像がうまく表示されなかったり、目が見えない人の為のブラウザでサイトを閲覧する際に読み上げてもらったりと、地味ながら重要な役割をはたしています。
そして、最後は「/」で終わっていますが、実はimgタグには終了タグがないのです。
一つで完結してしまうタグです。
その代わり、最後に「/」で閉じなければいけないのです。
パスの考え方を理解しようとすると難しいので、これも練習を繰り返す必要があります。
自分でも画像を用意して、フォルダ関係をバラバラにしてパスを研究してみてください。
次回、もう少し踏み込んだパスの話をします。

Leave a Comment

テキストを定義づけするdlタグ

定義型のリストと呼ばれるものが、<dl>です。
たとえば、
赤い野菜はトマト
というテキストがあります。
ここでは、赤い野菜という質問に対して、トマトと定義づけされているわけです。
難しく考える必要はありません。
例をはたくさんあります。
住所 は 東京
ケータイ は ドコモ
テレビ は フジテレビ
時間 は 11時
などなど、いくらでも自分で設定できるわけです。
さて、赤いトマトに戻ります。
リストタグは、
<ul>
<li></li>
</ul>
という具合に、
リストの領域を決める<ul>タグと各項目である<li>タグで構成されています。
しかし、この定義型のリストは、項目が二つあります。
「赤い野菜」と「トマト」です。
ですから、普通のリストタグとは違って、3つのタグで構成されます。
以下、このようになります。
——————————————————-
<dl> <dt>赤い野菜</dt> <dd>トマト</dd></dl>
——————————————————-

まず、<dl>タグで定義リストの領域を決めます。それから、<dt>タグで最初の項目、つまり質問にあたる部分を決めます。最後に、<dd>タグでその問いに答えます。
日本であらわすと
——————————————————-
<定義リストはここから始まります>
<質問はここからです>赤い野菜</質問はここで終わりです>
<答えはここからです>トマト</答えはここまでです>
</定義リストはここで終了です>
——————————————————-
となります。
赤い野菜だけでなく、
緑の野菜
紫の野菜
茶色の野菜
などと続けたい場合は、
——————————————————-
<dl>
<dt>赤い野菜</dt>
<dd>トマト</dd>
<dt>緑の野菜</dt> <dd>きゅうり</dd> <dt>茶色の野菜</dt> <dd>じゃがいも</dd>
</dl>
——————————————————-
という具合に、<dt>タグと<dd>タグがワンセットになって繰り返されます。
よく使うシーンとしては、
会社概要や年表、沿革、メニューなどによく使われます。

Leave a Comment

項目を一覧にするリストタグ

前回は、
h1h2p
を覚えました。
hタグは、1から6まであります。
どのように使うかは、自由ですがルールが一つあります。
h1は、ページ内で1度しか使えません。
よく、サイト内で1つ勘違いするケースがあるので、忘れないように。
ページ内で1つです。
今日は、新たにリストを覚えます。
まずは、htmlのbodyの中に、以下を記入します。
———————————————
<h3>登場人物</h3><ul> <li>おじいさん</li> <li>おばあさん</li> <li>桃太郎</li> <li>犬</li> <li>猿</li> <li>雉</li> <li>鬼</li></ul>
———————————————
ちなみに、htmlのbodyの中といえば、
———————————————
<html>
<head>
<title></title>
</head>
<body>
ここに記述
</body>
</html>
——————————————–
でしたね。
「ここに記述」というところに、あらたなタグを入力してください。
出来ましたか?
それでは、ブラウザで確認します。
いかがでしょうか。
リスト表示されている事が分かりますか。
登場人物が、一覧になっているはずです。
詳しく説明しましょう。
<ul></ul>というタグは、
「この領域はリスト表示にします」
という役割をもっています。
そして、
<li></li>というタグは、
「各項目です」
という役割をもっており、日本語に直すと、
<ここからリスト表示します>
<項目その1はここから>おじいさん</項目その1はここまで>
<項目その2はここから>おばあさん</項目その2はここまで>
<項目その3はここから>桃太郎</項目その3はここまで>
<項目その4はここから>犬</項目その4はここまで>
<項目その5はここから>猿</項目その5はここまで>
<項目その6はここから>雉</項目その6はここまで>
<項目その7はここから>鬼</項目その7はここまで>
</リスト表意は、ここで終わりです。>
という具合になります。
ちなみに、<ul>を<ol>に変えると、「・」が「数字」になります。
ぜひやってみてください。
さらに、関連タグとして<dl>というのがありますが、これは次回にします。
htmlは、量稽古です。
失敗をおそれず、何度も試してみてください。

Leave a Comment

bodyタグに入る最初のhtml

<body>タグに何か入力すると、画面に反映される事がわかりました。
いよいよhtmlの醍醐味に入ってきました。
まずは、以下のようなテキストを<bodyタグ>の中に入力してください。
—————————————————
日本昔話
桃太郎
昔々おじいさんと、おばあさんがいました。
—————————————————
おなじみ桃太郎です。
全文を書く必要はありませんよ。
いま、書いていただいたテキストは、日本昔話という本の桃太郎という章であることをイメージしてください。
本のタイトルは、日本昔話。
章のタイトルは、桃太郎。
本文は、「昔々おじいさんと、おばあさんがいました。」
という事になります。
ブラウザで確認してみましょう。
文字だけがつらつらと、改行もされずに表示されているとおもいます。
まずは、日本語でマークアップしてみます。
<本のタイトルはここから>
日本昔話
<ここまでが本のタイトル>
<章のタイトルはここから>
桃太郎
<ここまでが章のタイトル>
<本のタイトルはここから>
昔々おじいさんと、おばあさんがいました。
<ここまでが本のタイトル>
このようにすると、それぞれのテキストがどのような役割を担っているのか分かりますね。
といっても、これはヒトが分かるようにかいており、コンピューターには分かりません。
そこで、htmlを使って、コンピューターに理解できるように書き直してみます。
このようになります。
<h1>
日本昔話
</h1>
<h2>
桃太郎
</h2>
<p>
昔々おじいさんと、おばあさんがいました。
</p>
ものすごくシンプルになったと思いませんか。
htmlは、実にカンタンな言語なのです。
今つかったタグは、
h1
h2
p
の3つですね。
それぞれを先ほどの役割に当てはめると以下のようになります。
h1 = 本のタイトル(もっとも重要なテキスト)
h2 = 章のタイトル(次に重要なテキスト)
p = 本文
ほら!いっきに3つのタグの役割を覚えてしまいましたね。
今回勉強する事は、これだけです。
ブラウザで確認してみてください。
h1がもっとも大きくて太く、次にh2。
pは、本文という役割ですが、より具体的には段落という意味を持っています。
htmlで書かれたテキストは、ブラウザによって解釈され、以上のように表示されるわけです。
今後は、どんどんそうしたタグを覚えていきましょう。

Leave a Comment