サイタWeb・デザインスクールホームページ作成講座東京 初心者歓迎ホームページ作成講座 スクールブログ 【練習ファイル...

【練習ファイル有り】初心者の壁、「パス」を攻略せよ!

今日は、HTMLの初心者が一番最初につまずきやすい、パスに関して書いていきます。パスにも、いくつかの種類がありますが、今回は、基本となる相対パスに関して書いていきます。

HTMLで画像等の外部ファイルを読み込むときは、「パス」という考え方をしていきます。
この「パス」の考え方は、HTMLだけでなく、他にも色々な所で出てくるので、しっかり覚える必要があります。


■-□-■-□-■-□-■-□-■-□-■
自分からみて、相手がどこにいるか
■-□-■-□-■-□-■-□-■-□-■
相対パスの考え方は、「自分からみて、相手がどこにいるか」です。

例えば、HTMLファイルと同じフォルダーの中のneko.jpgの画像を表示するには、
<img src="neko.jpg">
となります。
src属性の中のパスは、ファイル名だけで大丈夫です。

HTMLファイルと同じフォルダーにある、imgフォルダーの中にあるneko.jpgの画像を表示するには、
<img src="img/neko.jpg">
となります。
src属性の中のパスは、「img」の中の「neko.jpg」になるので、
img/neko.jpgとなります。

HTMLファイルの一つ上のフォルダーにある、neko.jpgの画像を表示するには、
<img src="../neko.jpg">
となります。
src属性の中のパスは、「一つ上のフォルダ」の「neko.jpg」になるので、
../neko.jpgとなります。
このように、フォルダーを一つ上に上がる為には、「../」を一つ付けます。
もし、フォルダーを2つ上がる為には、「../」を2つ付けて、「../../」となります。


■-□-■-□-■-□-■-□-■-□-■
ファイルの移動や、名前の変更に注意
■-□-■-□-■-□-■-□-■-□-■
相対パスは、慣れないと難しく感じてしまうかもしれませんが、慣れれば簡単です。
あくまで、「自分からみて相手がどこにいるか」です。
「記述するHTMLファイルからみて、表示したい画像ファイルがどこにあるか」です。

この時に注意しなければならないのが、ファイルの移動や、名前の変更です。

日常的にパソコンを使う分には、ファイルの名前や保存場所など、それほど気にしなくてもいいかもしれませんが、
ホームページを作る場合は、「パス」という考え方があるので、むやみにファイルの移動等はしない方が無難です。

相対パスは、あくまで、「自分からみて相手がどこにあるか」です。
もし自分か、相手が移動してしまえば、パスも変わってしまいます。
結果、ファイルを移動する前まではきちんとパスがつながっていたのに、
ファイルを移動したとたん、パスが切れてしまうという事が起こります。

こんな事が起こらない様に、ファイルの保存先等は、ホームページを作る前段階で、
しっかり決めておくのが望ましいです。


■-□-■-□-■-□-■-□-■-□-■
まとめ
■-□-■-□-■-□-■-□-■-□-■
パスは、初心者がつまずきやすい、一番最初のハードルだと思います。
こちらの記事で、練習ファイルを用意していますので、練習してみて下さい。
相対パスに関して

また、文章だけの記事だと解りにくい場合は、無料体験でもお伝え出来るので、
是非ご活用下さい。
無料体験はこちら


■-□-■-□-■-□-■-□-■-□-■
今日の出来事
■-□-■-□-■-□-■-□-■-□-■
どうやら、ガリガリ君にモンブラン味が登場する様です☆
セブンイレブンと共同開発みたいです。
ただ、実は僕は、モンブランがちょっと苦手なので、買う事は無さそうです(笑)

モンブラン好きの人は、是非買ってみて下さい☆

http://news.mixi.jp/view_news.pl?media_id=143&id=3073009

それではまた♩


■-□-■-□-■-□-■-□-■-□-■
石川健太(イシカワケンタ)
無料体験はこちら

記事の一覧ページはこちら

こちらでも、webサイト制作に関しての情報を書いています。
webサイト作成方法の紹介ページ
■-□-■-□-■-□-■-□-■-□-■

 

(2014年9月29日(月) 13:58)

前の記事

次の記事

目的・種類別にホームページ作成・作り方講座を探す

新着記事

今日はCMSに関して書いていきます。 一般的に、ブログの更新の様に、HTMLタグを知らなくても、 ホームページを更新していく事が出来る仕組みを、CMS(コンテンツマネジメントシステム)と呼びます。 企業が独自で開発したもの、有料の物、無料の物、色々あります。 現状一番人気で、世界的...

今日は、CSSの子孫セレクタと複数セレクタに関してです。 特に子孫セレクタは、HTMLのツリー構造をしっかり理解していないと、 使いこなす事が出来ないので、しっかり練習しましょう。 ■-□-■-□-■-□-■-□-■-□-■ HTMLのツリー構造とは? ■-□-■-□-■-□...

今日は、よく使うCSSのセレクタに関してです。 CSS3の登場で、非常に多くの、有用なセレクタが出てきて、とっても便利になりました。 とはいえ、一気に覚えるのは大変なので、まずは基本的な物を覚えていきましょう。 基本的なセレクト方法だけでも、工夫する事で大体のホームページは作れます。 ...

今日は、CSSの文法に関してです。 ルールをきちんと覚えてしまえば、さほど難しく無いので、是非覚えましょう ■-□-■-□-■-□-■-□-■-□-■ 「何に」、「何を」、「どうするか」 ■-□-■-□-■-□-■-□-■-□-■ CSSは、無理矢理日本語に翻訳するなら、 ...

今日は、HTMLの初心者が一番最初につまずきやすい、パスに関して書いていきます。パスにも、いくつかの種類がありますが、今回は、基本となる相対パスに関して書いていきます。 HTMLで画像等の外部ファイルを読み込むときは、「パス」という考え方をしていきます。 この「パス」の考え方は、HTM...

レッスン無料相談窓口のご案内

サイタでは、ホームページ作成レッスンに関する疑問に
専門カウンセラーがお電話にてご案内しております。
お気軽にご利用ください。

お電話相談窓口はコチラ

ブログ記事 ページ先頭へ