WEB上で表示するカラーの指定およびカラーサンプルについてご紹介します。
何回もURLを指定する場合、リンクの基準となるURLを指定することで記述するパスを短くすることができます。
ブログの場合は ディレクトリなどが自動で生成されるため、現在のディレクトリからの相対パスではリンク先や画像URLを指定しづらくなりがちです。何回も指定する場合は、アップロード先を基準URLに指定しておくとよいでしょう。
<base href="基準URL">
という形式になります。サンプルソースはこちら。
<base href="http://www.appelle.jp/myblog/">
<img src="sample/cat.gif">
<img src="sample/bird.gif">
<img src="sample/dog.gif">
基準URLを指定しているので、画像 1つ1つのURLが短くて済みます。
段落文章を枠で囲んで表示する際に、色を指定することができます。
<div style="border-color:色番号または色名称">～</div>
という形式になります。『#FF0000』などの 16進数表記、または『 red 』などの色名称で指定します。カラー見本はこちらでご紹介しています。
|
この段落文章を、太さ 15ピクセルの赤色の枠で囲みます。
枠で囲むことで、文章を強調したり、見やすくすることができます。 |
このソースは、次のようになります。
<div style="border-color:red;border-width:15px">
この段落文章を、太さ 15ピクセルの赤色の枠で囲みます。<br>
枠で囲むことで、文章を強調したり、見やすくすることができます。
</div>
<div>タグの代わりに<p>タグでもＯＫですし、その他のブロックタグも使えます。
また、上記例は四辺の太さをを一括して指定していますが、個別に指定することもできます。
<hr>タグを使って水平線を表示する際に、水平線の色を指定することができます。
color="色番号または色名称"
という形式になります。『#FF0000』などの 16進数表記、または『 red 』などの色名称で指定します。カラー見本はこちらでご紹介しています。
|
色が青色、太さが 20ピクセル、長さが表示可能最大幅の 50％の水平線を表示してみます。
こんなふうに、表示されます。 |
赤字部分で、水平線の色を青色に指定しています。
色が青色、太さが20ピクセル、長さが表示可能最大幅の50％の水平線を表示してみます。
<hr color="blue" size="20px" width="50%">
こんなふうに、表示されます。
<a>タグ内の style指定で、リンク文字の背景色を指定することができます。
ソースは、次のようになります。赤字部分で『 TOP 』の背景色を黄色に、青字部分で『 RETURN 』の背景色をライム色に指定しています。
｜<a href="http://www.appelle.jp/myblog/" title="トップページへジャンプ"
style="background-color:yellow">TOP</a>
｜<a href="javascript:window.history.back();" title="一つ前のページへ戻る"
style="background-color:lime">RETURN</a>
｜
テーブルの背景色を指定することができます。
| 運賃 | おとな210円 | ことも110円 |
ソースは、次の通りです。色の指定は『 #00FFFF 』などの 16進数または 色名称で指定します。カラー見本はこちらでご紹介しています。
<table border="1" bgcolor="cyan">
<tr><td rowspan="2">運賃</td><td>おとな210円</td></tr>
<td>ことも110円</td></tr>
</table>
