WEBページの作り方－相対パス・<a>タグの使い方－
皆さん、こんにちは🥵
7月に入り各地で猛暑日が続くなど、厳しい暑さに
なっていますね。
熱中症にならないよう水分補給をしながら
エアコンも活用して体調管理に気を付けて
いきましょうね！
前回は、ヘッダーの作り方という事で
<div>タグを使った領域の確保や、
<nav>タグを使ったナビゲーションメニューの
設置方法を見てきました。
前回の記事をご覧になりたい方は下記URLより読んでみて下さいね！
URL：WEBページの作り方－ヘッダーの作成－ - ゆるゆるWEBブログ
今回はパスを使った画像の指定方法や<a>タグを使った
リンクを飛ばす方法について解説していこうと思います！
この記事で学べること！
- パスには絶対パスと相対パスがあり、相対パスがよく使われる
- 相対パス：
ドット(.)が同じ位置のディレクトリを指し
スラッシュ(/)を挟んで下のディレクトリが指定できる。
- リンクは<a>タグを使って飛ばす
- <a></a>の間に飛ばしたい要素を挟むことで
リンクを飛ばすことが出来る
それでは、始めていきましょう(^^)/
目次
1.パスとは？絶対パスと相対パスを理解しよう！
『パス』という言葉を始めて聞いた方も
いらっしゃるかもしれません。
また、既に勉強されてる方も、少し手間取った
思い出があるかもしれません(*´Д｀)
ここではパスの種類と指定の方法を画像を使いながら
簡潔に解説していこうと思います！
その前にまず『ディレクトリ』という言葉だけ覚えて
しまいましょう。
①『ディレクトリ』とは
『ディレクトリ』とは一言でいうと
フォルダ又はファイルのある場所を言います。
『common.html』のあるドキュメントフォルダー内で
右クリック→『新規作成』→『フォルダー』
→『images』の順で新しいフォルダーを
作ってみましょう。
『images』フォルダーは
『ドキュメント』フォルダーの下にあり
1つ下のディレクトリあると言います。
また、『common.html』ファイルと
『ドキュメント』フォルダーは同じ場所にあるので、
同じディレクトリにあると言います。
それそれで表してみましょう。
②『images』フォルダーを絶対パスで表す
絶対パスとはデスクトップ画面から
順を追って『images』フォルダーを指定する方法です。
しまいましょう)
③『images』フォルダーを相対パスで表す
『images』フォルダーを指定する方法です。
図2から相対パスで『images』フォルダーを
指定するには下記のように指定します。
前回記述した<img>タグにsrc属性を使い、
相対パスを使うことで『images』フォルダーを
指定することが出来ます。
※ドット(.)が『ドキュメントフォルダー』を指し
スラッシュ(/)で下の『images』フォルダーを
指定できます。
④『images』フォルダーの下に
更に『logo』フォルダーを作って相対パスで参照する
『images』フォルダーまで作っているので、
『images』フォルダーをクリック
→フォルダー内で右クリック→『新規作成』
→『フォルダー』→『logo』の順で新しいフォルダーを
作ってみましょう。
この『logo』フォルダーを相対パスで指定すると
下記のようになります。
※スラッシュ(/)を入れることで下の『logo』フォルダーが指定できます。
更に『logo』フォルダーにlogoの画像を入れ、
スラッシュ(/)でつなぐことで画像を指定することが出来ます。
2.画像を相対パスで指定する
1.④で相対パスで『logo』フォルダーまで
指定しているので、あとはlogo画像を用意しましょう。
①logo画像を用意する
logo画像を用意する方法はいろいろありますが、
個人で利用するならmyfreelogomakerがおすすめです！
URL:https://myfreelogomaker.com/
無料でバリエーションが多いので一見の価値ありです！
②logo画像を『logo』フォルダーに保存し、相対パスで
指定する
logo画像を『logo』フォルダーに保存しましょう。
下記のように保存できているか確認してみましょう。
(ご自身のお好きなlogo画像を保存してくださいね(*'ω'*))
保存が出来ていれば相対パスで指定可能なので
下記のように指定します。
※スラッシュ(/)を入れることでlogo画像『logo.jpg』が指定できます。
③拡張機能『Go Live』でlogo画像を表示確認する
VSCode画面右下の『Go Live』をクリックして
logo画像とナビゲーションメニューが表示されているか
確認してみましょう！
logo画像とナビゲーションメニューが表示さていれば成功です(^_-)-☆
3.<a>タグでリンクを飛ばす
皆さんはどこかのWEBページを見ている時
文字や画像をクリックして別のページに飛んだ経験はありませんか？
ここからは<a>タグを使ってWEBページ同士を
リンクさせる方法を見ていきます。
①logo画像にリンクを設定する
前回記述した<div class="header-inner">タグの
横をクリックしエンターを押して改行し、
<a>タグを下記のように記述する。
href属性で飛ばしたい先の相対パスを指定することで
リンクを飛ばすことが出来ます。
(index.htmlはcommon.htmlと同じディレクトリに
これから作成します)
index.htmlはcommon.htmlと同じディレクトリに
あるので、相対パスで指定する際は
href="./index.html"と指定します。
②<a>タグにclass属性で名前をつける
<a>タグに名前をつける事でCSSでスタイリングできるようにします。
下記のように名前をつけましょう。
<a>タグは<img>タグを囲っていて、
<img>はインライン要素というそのままでは
CSSで大きさの変更などが出来ない要素になるので、
<a>タグに名前をつけます。
③</a>タグの位置を<img>タグに下に置く
<a>タグを入力すると自動で</a>も
一緒に記述されますがこのままではリンクが
作動しないので、<img>タグを囲むように
</a>タグの位置を修正しましょう。
<img>タグの横をクリックしエンターを押して改行し、
<a>タグを下記のように貼り付ける。
貼り付けた時、</a>タグの位置が<a>タグの位置と
ずれている時は、『左クリックで範囲を選択』
→『右クリック』→『選択範囲のフォーマット』
の順で位置を調整する。
④<a>タグでナビゲーションメニューにリンクを設定する
logo画像と同様にナビゲーションメニューも
<a>タグで囲むとリンクを飛ばすことが出来ます。
<li>タグの横をクリックし、<a>タグを下記のように記述する。
href属性で飛ばしたい先の相対パスを指定することで
リンクを飛ばすことが出来ます。
(私の場合は『adjustment-disaster.html』・・・
としましたが、ご自身のつけたいファイル名にして
くださいね)
このまま、フッターもやってしまいたいところですが
パスの指定方法、<a>タグの使い方を整理してほしい
ので、今回はこれで終わりにしましょう(^^)/
4.本日の文法まとめ
- パスには絶対パスと相対パスがあり、相対パスがよく使われる
- 相対パス：
ドット(.)が同じ位置のディレクトリを指し
スラッシュ(/)を挟んで下のディレクトリが指定できる。
- リンクは<a>タグを使って飛ばす
- <a></a>の間に飛ばしたい要素を挟むことで
リンクを飛ばすことが出来る
次回はパスの指定や<a>タグの使い方を復習しながら
フッターを作っていきましょう(^^♪
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
