HTMLに慣れてみよう – レベル2.1

今回はHTML実践編レベル２の続きです！

まずお詫びです

この記事を作成するタイミングで気付いた事があります。

「”」←うちのサイトからこの記号をコピーして貼り付けると「”」←この様に自動で全角になってしまう事が解りました。

何が問題なのかというと、HTMLは「ダブルコーテーション」と呼ばれるこの記号をよく使う為、ブログの手順通りにやってもコードがちゃんと動かなかった可能性があります。

この「HTMLに慣れてみよう」シリーズの記事でも、上記が原因で、進めなかった方がいらっしゃったと思うので、改めてお詫びいたします。

申し訳ございませんでしたぁぁぁ

これはWordPressの仕様が原因で起こるのですが、現在はPHPの内容を一部変更して、この問題が起こらない様に修正済みです。

ここから本題です

前回は「相対パス」の話をさせていただきました。

今回説明したいのは「絶対パス」という指定方法についてお話させていただきます。

前回の相対パスより考え方は簡単です。

まだ前回の記事を読んでない人は、こちらを読んでからやっていただくとスムーズに出来ると思います！

vol.1

HTML・CSS・JSに慣れてみよう

vol.2

HTMLに慣れてみよう – レベル1

vol.3

HTMLに慣れてみよう – レベル2

では、今回もメモ帳を使って楽しく遊んでみましょう！

※MACユーザーの方もテキストエディットで以下の様に開けば遊べます！

【ファイル】>【新規】と選択して【フォーマット】>【標準テキストにする】

前回の振り返り

前回は最終的にこんな感じにファイルが配置された階層になりましたよね。覚えてますでしょうか？

ウェブサイトへアップロードした場合

前回はPCの中にフォルダを作ってやってみましたが、通常はウェブサイトにアップロードします。

アップロードするとどうなるでしょう？

アップロードすると、アップ先のURLに沿って、それぞれのファイルにURLが与えられるのです。

例えばよっしーTECHのサイト(https://yossy.tech)にファイルをファイルをアップするとこうなります。

https://yossy.tech/<ファイル名>

例として【demo1.html】をアップロードするとこんな感じになります。

https://yossy.tech/demo1.html

また、ウェブでもPC同様フォルダを作る事ができるので、フォルダがある場合URLはこうなります。

https://yossy.tech/＜フォルダ名＞/<ファイル名>

例として【contents】というフォルダの中に【demo1.html】がある場合

https://yossy.tech/contents/demo1.html

この考え方をもとにフォルダを含めたアップロード後のURLをイメージするとこんな感じになります。

※URLの一番後ろの表示に注目してファイル名やフォルダ名と比較してみてください！

絶対パス

つまりアップロードすると、それぞれのファイルにURLが付与されているんです。

従って直接ブラウザでURLを指定すればファイルをみる事ができるんです！

例として、今回は既に私の方でhttps://yossy.tech に【contents】というフォルダを作っています。

そして、更にその中に【demo1.html】というファイルをアップロードしています。

なので下記のURLをクリックすると直接【demo1.html】にアクセスできるんです！

https://yossy.tech/contents/demo1.html

この方法をリンク先に指定すると、前回の様に自分の位置を基準にしなくてもいいんです。

つまり遷移先をURLで直接指定するだけなので、シンプルな考え方でリンクを貼る事ができます。

この指定のやり方を「絶対パス」といいます

こういうのって普通に最初に書いてない？

あれ？前もこんな会話あった？デジャヴ？

早速次の項目でやってみましょう！

URLを直接指定したリンクを貼ろう！

恒例のこれをメモ帳（Macはテキストエディット）に貼り付けて下さい。

そしてまた【index.html】と名前を付けて保存してください。

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>よっしーTECHで遊ぼう</title>
<meta name=“description” content=“ここはとても簡単なページなんですよ”>
<meta name=“keywords” content=“簡単,よっしーTECH,IT業界初心者,SaaS”>
</head>
<body>
<h1>トップページ</h1>
<p>ここが最初のページですこのページを起点としてリンクを貼っていきましょう</p>
</body>
</html>

そして今回もまた、このサンプルを使います。

<a href=“遷移先へのパスを記入“>の部分に遷移先のURLを直接書きます。

<a href=“遷移先へのパスを記入“>遷移先Aへ移動します</a>

今回はURLで直接遷移先を指定するので、赤字部分の様に追加してみましょう

そうするとこの様にページにリンクが追加されますのでクリックして画面が遷移する事を確認してください

URLでの画像指定

画像ファイルも【image】というフォルダを作りその中に【test.png】というファイルをアップしてあります。

この画像もURLで指定すれば直接開きますので、アクセスしてみてください。

https://yossy.tech/image/test.png

そうするとこんな感じで画像だけがブラウザに表示されますよね。

よくアプリケーションで「画像をURLで指定して下さい」って設定がたまにあったりします。

この設定はアップロード先のURLから画像を毎回ダウンロードして表示させてるイメージなんです。

そう！絶対パスはURLなので、別なサイトから画像を取得もできます！

また、違うドメインのページにもリンクできるのが大きな特徴です！

リンクを文字ではなく画像にする方法

では、最後に今回も前回同様、文字ではなく画像をクリックするとリンク先に飛ぶように設定してみましょう！

先ほど「遷移先Aへ移動します」になっていた部分を以下の様に画像のURLに書き換えてみましょう。

「index.html」の「遷移先Aへ移動します」の部分を以下の様に書き換えるとこうなります。

<html>
<head>
<meta http-equiv=”content-type” content=“text/html; charset=UTF-8″>
<title>よっしーTECHで遊ぼう</title>
<meta name=”description” content=”ここはとても簡単なページなんですよ”>
<meta name=”keywords” content=”簡単,よっしーTECH,IT業界初心者,SaaS”>
</head>
<body>
<h1>トップページ</h1>
<p>ここが最初のページですこのページを起点としてリンクを貼っていきましょう</p>
<a href=”https://yossy.tech/contents/demo1.html”><img src=”https://yossy.tech/image/test.png”></a>
</body>
</html>

今回もこんな感じになっていれば成功です。画像をクリックして画面が遷移する事を確認してください。

最後に

今回は2回に分けて「相対パス」と「絶対パス」の説明をさせていただきました。

今回説明した「絶対パス」の方が考え方的にはシンプルかもしれません。

しかしながら「絶対パス」はURLなのでサイトのお引越しでURLで変わったときは変更が必要です。

でもこれがURLを使わない「相対パス」だったら変更がいりません。

この様にそれぞれメリット・デメリットがあるのを考えてみてください。

「ウェブサイトにはこっちを使うべき」という決まりはないので好きな方を使って良いと思います。

慣れて来たら使い分けをしてみてください！

今は家でFFでもやってすごそう！

FFに君みたいな敵いるよな

誰がボムじゃ

フォロー待ってます!

シェア大歓迎！