本日  昨日
 
04/25(Thu) 22:14

oディレクトリについて知っておこう

絶対パスと相対パス

Win95ユーザやMacユーザには馴染みがないかもしれませんが、ディレクトリというのは、Win95やMacなどのフォルダと同じようなものです。URLにも、このディレクトリを使います。このURLの記述方法には2種類あり、それぞれ絶対パス、相対パスといいます。

  • 相対パスとは
    • 現在表示しているファイルを基準にして、他のファイルの位置を指定する方法です。自分のホームページと、自分の作ったいろいろなページとのリンクには、たいていこちらの相対パスを使います。
    • 今のファイルより1つ上のディレクトリにあるファイルは"../"で指定します。また、今のファイルと同じディレクトリ(カレントディレクトリといいます)にあるファイルは"./"で指定します。(パス指定がない場合はカレントディレクトリが指定されたと見なされます)
  • 絶対パスとは
    • 1番上のディレクトリから見たファイルの位置を指定する方法です。
    • こちらで指定する場合には、"/"から始めます。

    パス指定の例
    AA-----BB------aa.html 左の構造を前提にパス指定の実際を示します。 | |--bb.html (大文字はディレクトリ、小文字はファイル) |--cc.html

  • 絶対パスによる指定
    • aa.htmlの絶対パス指定 --- <A HREF="/AA/BB/aa.html">
    • cc.htmlの絶対パス指定 --- <A HREF="/AA/cc.html">
  • 相対パスによる指定
    • aa.htmlからbb.htmlを参照する --- <A HREF="./bb.html"> (同一ディレクトリBB内のファイル参照)
    • aa.htmlからcc.htmlを参照する --- <A HREF="../cc.html"> (上層ディレクトリAA内のファイル参照)
    • cc.htmlからaa.htmlを参照する --- <A HREF="./BB/aa.html"> (下層ディレクトリBB内のファイル参照)


    o色の指定のしかたと文字・背景色の組み合わせ例

    色の指定のしかた

    色の指定には、光の3原色であるRGB(赤緑青)のそれぞれに、2桁の16進数 00〜FFまでの256階調で指定します。一番小さい数 00 が暗い色(黒)に近く、一番大きい数 FF が明るい色(白)に近くなります。
    (下記以外の組み合わせ例はカラー名とカラーコード対応表をご覧ください。)

    ・基本的な色の組み合わせ
    #000000 - 黒 #FF0000 - 赤 #00FF00 - 緑 #0000FF - 青
    #FFFFFF - 白 #FFFF00 - 黄 #FF00FF - 紫 #00FFFF - 青緑
    ・以下の16色は、直接名前で指定することができます。
    black - 黒 red - 赤 green - 緑 blue - 青
    white - 白 yellow - 黄 purple - 紫 teal - 青緑
    aqua - 水色 fuchsia - ピンク gray - 灰色 lime - 黄緑
    maroon - 茶色 navy - 紺色 olive - オリーブ色 silver - 明灰色


    使える文字・背景色と組み合わせ例

    ネットサーフィンで見つけた、使えそうな背景と文字色の例です(私の好みもありますが)。画面の見やすさや色の組み合わせのバランスは良いと思います。
    迷ったときは、まずこの組み合わせで作ってみて、あとであなたの好みに変えていくのも1つの手かもしれません。

    ・背景/LINK/VLINK/ALINKの組み合わせ例
    #FFE6F0 - 背景 #CC285F - LINK #0000B3 - VLINK #00E64C - ALINK
    #FFFFFF - 背景 #FF0000 - LINK #8B0000 - VLINK #7FFF00 - ALINK
    #000044 - 背景 #FFFF00 - LINK #8080FF - VLINK #FF00FF - ALINK
    #000044 - 背景 #FFFF00 - LINK #93DB70 - VLINK #CC3232 - ALINK

    ・背景色・文字色の例
    #EFDEB5 - 背景 #F5E6BE - 背景 #FFE4C4 - 背景 #FFFFCC - 背景
    #FFFFDO - 背景 #FFFFE1 - 背景 #CCDDAA - 背景 #D8EFBD - 背景
    #E066E0 - 背景 #C0C080 - 背景 #E0FFE0 - 背景 #66CC99 - 背景
    #808080 - 背景 #246355 - 文字 #9191FF - 文字 #FFBF00 - 文字


    o <DL>タグを使ったカラフルな項目リストの作り方

    項目リストを作る時、皆さんはどんなタグを使いますか?
    普通は、マーク付きのリスト<UL>や番号付きリスト<OL>を使いますね。これはこれで十分役に立ちますが、もう少し、項目リストをカラフルに、グラフィカルにしたいと思ったことはありませんか?そんな方のためのノウハウです。

    <DL>タグを使ったカラフルな項目リストの作り方。

    <DL>タグは、もともと言葉の定義などについての解説をするためのタグとして使われます。このタグを使った場合、項目の先頭にマークも番号も付かないという性質を利用し、項目の先頭にGIF画像を貼り<UL>に似せたカラフルなリスティングを作るという応用技です。

    ソース

      <DL>
        <DT><DD><font color=red>■</font>こんな項目
        <DT><DD><font color=red>■</font>あんな項目
        <DL>
          <DT><DD><font color=blue>■</font>そんな項目
          <DL>
            <DT><DD><font color=green>■</font>どんな項目
          </DL>
        </DL>
      </DL>
      
    表示
    (注)Netscapeでは改行なしで表示されますが、Internet Explorerでは<DL>、<DT>毎に改行がはいります。
    こんな項目
    あんな項目
    そんな項目
    どんな項目

  •  
     
    ©1997- Kikuchisan's workshop All rights reserved //

    スポンサーリンク

    関連コンテンツ