2009年1月8日 木曜日  著者:

テキストに下線を加える

指定したテキストに、下線を入れたい時には、「border-bottom」を使用します。また下線の種類・サイズ・色なども変更することができます。

何もなし none
何もなし hidden
1本線 solid
2本線 double
外側が明るい色の線 groove
外側が暗い色の線 ridge
破線 dashed
点線 dotted
立体的に窪んだ線 inset
立体的に盛り上がる線 outset

text-decoration01

線の大きさは、数値(px,em…)で指定する事ができます。色もカラーコードなど指定することができます。
text-decoration02

線の種類については、それぞれ以下のように表示されます。(サイズ10px,色#0033FFで固定してます。)
※ブラウザやバージョンの違いによって、表示されるスタイルが異なることがあります。
text-decoration03
線のスタイル
厳密にいえば、「border-bottom」は下のボーダーのスタイルを指定する時に使用しているので、同じように「border-top」「border-left」「border-right」とすれば、上・左・右のスタイルも指定することができます。

絶対パスと相対パス

リンクを貼る場合、「絶対パス」「相対パス」2種類の方法があります。

「絶対パス」とは、「http://」ではじまる通常のURLのことになります。外部のサイトにリンクする時などは、絶対パスでURLを記入します。

一方、「相対パス」とは、自分のホームページ内でページを移動したり、画像を貼る時に使われます。絶対パスとは違い、リンクを貼るページが基準としてURLを記入します。

例として以下のような階層でページがあるとします。
HPの階層
まずは、一番上にある「index.html」を基準にして各ファイルの相対パスを見ていきます。
基準はindex.html
同じ階層にある「test.html」と「01.jpg」は、そのまま「ファイル名」だけとなります。
例01
「a」フォルダ内(1つ下の階層)にある「a01.gif」と「text.html」は、「フォルダ名/ファイル名」となります。
例02
では、次に「a」フォルダ内にある「text.html」を基準としてみます。
基準は/a/text.html
「a」フォルダ内の「text.html」からみて、1つ階層が上にある「index.html」「01.jpg」は「../ファイル名」となります。
例01

では、ここで問題です。
「a」フォルダ内の「text.html」からみて、「b」フォルダ内の「photo.html」「b01.gif」の相対パスはどうなるでしょうか?
ヒントは「b」フォルダの位置です。

【正解】 click
「text.html」からみて「b」フォルダは1つ階層が上となります。なので「b」フォルダの相対パスは「../b」となります。「photo.html」「b01.gif」は「b」フォルダ内にあるので後ろにつなげるだけになります。
例02

target属性

target属性を使用するとリンクをクリックした時に、どう表示させるか設定することができます。リンクタグに「target=”値”」を追加します。

新規の画面でリンクを開く場合 _blank
今使用している画面でリンクを開く場合 _self
フレーム使用時に、フレームを解除させてリンクを開く場合 _top
フレーム使用時に、1分割フレームを解除してリンクを開く場合 _parent

リンクタグ
※ちなみにtarget属性の使用は、W3Cでは推奨されていませんですのであしからずご了承ください。

人気ブログランキング にほんブログ村 IT技術ブログへ

関連する投稿

カテゴリー: 7日で覚えるHTML  | タグ: , , ,

コメントはまだありません >コメントする

コメントはまだありません。

コメントする