人気ブログランキング | 話題のタグを見る

授業4回目 相対パスと絶対パス

A. 画像ファイルの位置指定の方法〜相対パスと絶対パス〜

1. 相対パス:自分を起点にして、対象となるファイルの場所を指定する。

⑴同じディレクトリ
ファイル名のみ記述
<img src="ファイル名">

⑵下の階層のディレクトリ
ディレクトリ名の後ろに「/」を記述
<img src="ディレクトリ名/ファイル名">

⑶上の階層のディレクトリ
上の階層へのパスは「../」を指定したいファイル名の前に記述
<img src="../ファイル名">

授業4回目 相対パスと絶対パス_f0397237_23283364.png



2. 絶対パス:リンク先のURLを入力する。URLが決まっていないと使えない。
<img src="http://......">



〜パスの考え方〜
道案内に例えると、以下のように考えることができる。
相対パスは今いる地点から目的地までのルートを伝える。
ex.2つ目の角を左に曲がって右にあります。

絶対パスは目的地の住所を伝える。
ex.〇〇区〇〇町〇〇番地にあります。


〜その他〜
*画像ファイルの指定のみではなく、リンクを貼る時にも使用する。<a href="">

*下の階層へのパスの場合、ディレクトリ名やフォルダ名が変わると表示されなくなってしまうため、名前の変更があった場合は書き換えなければならない。上の階層へのパスの場合は名前の変更の影響がない。
*ディレクトリ名、フォルダ名は半角英数字で作成する。
*画像が表示されない場合は、画像そのものの問題ではなく、ファイル名などの書き間違いが多い。


**フォルダとディレクトリの違い
フォルダは書類やファイルを入れる「入れ物」、ディレクトリはフォルダによって作られた領域を意味する。
ほとんど同義で使われているが、webサイト作成においてはディレクトリと呼ぶことが多い。


B. HTMLタグ
<img> 画像を表す
属性 src 画像ファイルのURLを指定する
   alt  画像を説明する代替テキストを記載する
終了タグなし

alt属性はSEO対策、音声読み上げブラウザ対応のためにも必ず記載する。
ただし、装飾目的の画像の場合は、alt=” ”と空白で記述をしておく。


C. ショートカット
段落を選択する 段落をトリプルクリックする。
語を選択する  語をダブルクリックする。
1つずつ選択する command+クリック


参考文献
『HTML&CSSとWebデザインが1冊できちんと身につく本』 服部雄樹(著)技術評論社

by zooori | 2017-12-16 23:49 | 授業まとめ(HTML編)

2017.11.27~webの学校の授業で学んだことをまとめています。


by zooori