HOME ≫ [19] [20] [21] [22] [23] [24] [25] [26] [27] [28] [29]
ほーむぺーじ初歩の初歩 5
2008.07.05 ｜Category …初歩の初歩
「パス」について。「相対パス」「絶対パス」とか言われるものですが。
「ディレクトリ間でのファイルの位置関係を示す方法」。自分のホームページから他のサイトへのリンクとかには「URL」を使いますが、この所謂「パス」てのは自分のホームページ内に限って使うものだと思ってください（厳密には違うけど「ホームページ作成」の初歩段階ではそんな感じでＯＫ）。
「絶対パス」はひとまず置いといて、「相対パス」。
仮にホームページ用の「home」というフォルダを作り、画像もHTMLファイルも全部同じフォルダ内に置いてしまう場合。
◆例えば「index.html」に
・画像「001.gif」を表示させる時は
⇒<img src="001.gif" alt="画像説明">
・HTMLファイル「gallery.html」へのリンクを表示させる時は
⇒<a href="gallery.html">ギャラリーへ</a>
こんな感じで「index.html」に「src="ファイル名"」「href="ファイル名"」と、ファイル名だけ書き込む形で済みます。実はこの書き方が「パス」の最初の一歩。
最初の内はこんな風に１つのフォルダに全ファイル放り込むのが一番楽。しかしファイルが増えてくると、同じフォルダ内では同じファイル名が使えないとか、あのファイルどれだっけーとか、段々整頓するのが厳しくなってくるので、下層フォルダ（ディレクトリ）を作って管理するようになるのですが、その段階で「パス」を使いこなす必要が出てきます。
例えばこんなディレクトリ構成だとして。
◆「wwwフォルダのindex.html」に
・「imgフォルダ内の001.jpg」を表示させたい場合は
⇒<img src="img/001.jpg" alt="画像説明">
・「sub01フォルダ内のindex.html」をリンクさせたい場合は
⇒<a href="sub01/index.html">sub01へ</a>
と「wwwフォルダのindex.html」に書き込みます。
「src="フォルダ名/ファイル名"」「href="フォルダ名/ファイル名"」。
「現在地（wwwのindex.html）」から見て「同じ階層（フォルダ、ディレクトリ）」内の「xxフォルダ」内の「xx.xxファイル」へ、という書き方。これが「相対パス」。
※別の書き方で「src="./img/001.jpg"」「href="./sub01/index.html"」となりますが、「./（ピリオド・スラッシュ）」というのが「同じ階層内」という意味で、この「./」は省略可能。
◆さて「sub01フォルダ内のindex.html」に
・「sub01フォルダ内のimgフォルダ内の001.jpg」を表示させたい場合は
⇒<img src="img/001.jpg" alt="画像説明">
・「sub01フォルダ内のpage1.html」をリンクさせたい場合は
⇒<a href="page1.html">ページ01へ</a>
となります。さっきまでと要領は同じですな。
◆同じく「sub01フォルダ内のindex.html」に
・「wwwフォルダ内のimgフォルダ内の001.jpg」を表示させたい場合は
⇒<img src="../img/001.jpg" alt="画像説明">
・「wwwフォルダ内のindex.html」をリンクさせたい場合は
⇒<a href="../index.html">トップページメニューへ</a>
・「sub02フォルダ内のindex.html」をリンクさせたい場合は
⇒<a href="../sub02/index.html">sub02へ</a>
※「../（ピリオド・ピリオド・スラッシュ）」というのが「１階層上」の意味。２階層上なら「../../」となります。
文字で説明読んでも分かりにくいかと思いますが、実際に作って試すとすんなり分かるかも。要領飲み込めるまで、れっつとらい。
「絶対パス」というのはピリオド使わないスラッシュ「/」から始まる書き方ですが、ホームページ初心者にはスルー推奨かも。自分のパソで適当にフォルダ作ったホームページをレンタルWebサーバにアップするには、相対パスのが楽だったりします。相対パスを自然に書けるなら、絶対パスの概念も分かるんではないかなーとか（概念自体は単純）。「ルートディレクトリ」とか、サイトのディレクトリのスタート地点の認識が必要になるのですが、Webサーバスペースレンタル屋さんによって扱いが色々な感じで把握が（とゆーか説明が）面倒。解説サイト様によっては「URL（http://〜）」使うのが絶対パスという説明をされてるところもあるですが、実際はちと違うもの。のはず。
例として、この忍者ブログでテンプレートHTMLに「<a href="/">トップページへ</a>」と書くと、「自分のブログ」の一番最初（トップ）のページへのリンク、「<a href="/Category/0/">カテゴリー０へ</a>」で「カテゴリー０」へのリンクとなるのですが、これが「絶対パス」な書き方。「スタート地点（トップページ）」を「"/"」として、下層ディレクトリへと単純に一方向に下がる書き方なのでした。
文月 '08
2008.07.01 ｜Category …雑文
忍者カウンターの天下一武道会は投票期間へ。15日迄と期間が短いので投票するならお早めに。てなことで５つに投票。コメント入れないと何だか不審者のようだな。。
一般的なニュースサイトのタイトル拾い読みしてるとテンション上がらないなー。現実を知ることは必要だが、部分的に抽出された情報には意図的若しくは無意識に偏向操作が入っていることが少なくない。とゆーか偏向を完全排除など出来るものではないけれど。極力偏向と思われる部分を濾過しても、残った物を消化するには結局自分の偏向が入るのだし。…ちょいと脳内フィルターが目詰まり起こしてるようなので掃除でもするか。ヽ(´ｰ`)ﾉ
借り物
2008.06.28 ｜Category …天麩羅揚げ
今までここでは借り物は意図的に避けてたけど、プロの写真というものはやはり綺麗なのですよな。
写真入れたかっただけなのでヘッダ以下は適当。
いつものことで。ヽ(´ｰ`)ﾉ
いいかげんきちんとしたものを作りたいものだ。。
と言いつつ幾星霜。
ほーむぺーじ初歩の初歩 4
2008.06.22 ｜Category …初歩の初歩
HTMLファイルが作れたら、どしどしページを増やしますな。index.htmlを目次ページにして、写真の展示ページに日記ページに掲示板や…ぼんやりとでも「ホームページ」の形が頭に浮かぶかと思いますが、それを「サイトマップ」として意識してみましょう。サイトの構造図。
その段階で耳にするかもしれない、「ディレクトリ」とか「（絶対 or 相対）パス」などについて。
「ディレクトリ」てのは、パソ画面では「フォルダ」として見えたりする、パソがファイルを整頓するための構造でございますが。
（OS9で見た図）
仮に「www」というホームページ用のフォルダを作ったら。その中に「index.html」ファイル、画像ファイル用の「img」フォルダ、下層コンテンツ用の「sub1」「sub2」フォルダを作り…という具合に作っていきますが、このフォルダが「ディレクトリ」。
※ファイルやフォルダの名前は、半角英数字で分かり易ければ何でもよいのです。写真展示の「gallery」フォルダとか、日記は「diary」フォルダとか。
ツリー表示にするとこんな感じ。
www┳index.html ┣common.css ┣common.js ┣img┳01.gif ┃ ┣02.jpg ┃ ┗xxx.jpg ┣sub1┳index.html ┃ ┣page1.html ┃ ┣page2.html ┃ ┗img┳xxx.gif ┃ ┗xxx.gif ┗sub2┳index.html
以下略。こんな感じでサイト構造を考えて、htmlでリンクリンクー。の時に必要なのが「パス」ですが。
…えーと本日はタイムアウト。続きはまた。