全国5万人が受講している「サイタ」

ホームページ作成・作り方講座

ホームページ作成・作り方講座を選ぶ

初回60分無料体験OK

まずは60分の体験レッスンからスタート。
無料で実際のレッスンを体感できます。

月々4,900円〜の低料金

先生ひとりじめの個人レッスンを、この価格でご提供。レッスンは全てプライベート形式の60分間です。

通わない月は0円

曜日と時間を選べるので、
無理なくマイペースに通えます。

詳しくはこちら

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)

前の記事

次の記事

この記事を書いたコーチ

250名以上の生徒を指導!テキスト通りにいかないケースも論理的に説明

初心者歓迎ホームページ作成講座
石川健太 (ホームページ作成)

新宿・新大久保・高田馬場・目白・池袋・初台・幡ヶ谷・笹塚・明大前・下高井戸・桜上水・...

ブログ記事 ページ先頭へ