FC2ブログ

HTML基本 リンクその2

リンク色の設定方法

<html>
<head>
<style type = "text/css">
<!--
a:link{color:blue;}   ←①
a:visited{color:brown;} ←②
a:active{color:red;}   ←③
a:hover{color:green;}  ←④
-->
</style>
<link href="https://static.fc2.com/css_cn/common/headbar/120710style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<a href = "http://search.yahoo.co.jp/" target = "_blank" title = "Yahoo!検索サイト">Yahoo!検索</a>

</body>
</html>


上記表示
Yahoo!検索
【上記を押すとYahoo!検索が新ページで表示されます。】

①は、まだ訪問していないリンク先の色
②は、すでに訪問したリンク先の色
③は、クリック時の色
④は、カーソルをリンク上に乗せた時の色


Yahoo!検索
「text-decoration」を使えば上記のように下線なども装飾できます。

使い方
a:link{color:blue;}
    ↓
a:link{color:blue;text-decoration:underline;}
線の種類
underline下線
overline上線
none線なし
line-through打ち消し線
スポンサーサイト



テーマ : 趣味と日記
ジャンル : 趣味・実用

tag : リンク色 text-decoration

HTML基本 リンク

リンクの設定方法

<html>
<head>
<link href="https://static.fc2.com/css_cn/common/headbar/120710style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<a href = "http://search.yahoo.co.jp/" target = "_blank" title = "Yahoo!検索">表示される文字</a>

</body>
</html>


上記表示
表示される文字
【上記の「表示される文字」を押すとリンク先に設定されているところ(Yahoo!検索)が新ページで表示されます。】

「href = ""」リンク先を入力
「target = ""」表示する場所を指定する
「title = ""」カーソルを乗せたときに表示されるリンク先の説明

場所の指定の仕方
「target = ""」のダブルクオーテーション(")の間に
新たなページで表示させる場合は[_blank]を入力
現在のページで表示させる場合は[_self]を入力

テーマ : こんなの作りました♪
ジャンル : 趣味・実用

tag : リンク

HTML基本 文字の色の変更の仕方

文字の色の変更例と解説です。

<html>
<head>
<style type = "text/css">
<!--
.aaa{color:orange;}  ←③´
#bbb{color:#9900CC;}  ←④´
-->
</style>
<link href="https://static.fc2.com/css_cn/common/headbar/120710style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<span style = "color:red;">文字の色</span>  ←①
<div style = "color:#0000FF;">文字の色</div> ←②
<div class = "aaa">文字の色</div>       ←③
<div id = "bbb">文字の色</div>        ←④

</body>
</html>


・上記の表示例
文字の色
文字の色
文字の色
文字の色

・<span style = "color:red;">文字の色</span>・・・①
・<div style = "color:#0000FF;">文字の色</div>・・・②
 spanとdivの違いは、spanはインライン要素(改行されない)で
 divはブロック要素(改行される)です。spanとdivの違いはまた詳しく書こうと思います。

 color:red;とcolor:#0000FF;は色を指定している箇所で、
 red(#FF0000)の様にカラーネーム
 または#0000FF(blue)の様にカラーコードどちらでも使用することが出来ます。

 カラーコード(#FF0000など)やカラーネーム(redなど)は下記のサイトを参照してください。
              ↓
 http://www.tagindex.com/color/color_name.html


・<div class = "aaa">文字の色</div>・・・③
・<div id = "bbb">文字の色</div>・・・④
 タグ(<div・・・・・>など)にカラーを直接書き込まず
 ③と④の様に<head>~</head>内にカラーなどを指定して
 「class = ""」「id = ""」を使い呼び出して使用することもできます。

 指定場所
 <style type = "text/css">
 <!--
 -->
 </style>
 上記の<!-- ・・・ -->内に指定します。

 指定方法
 classを使用する場合は指定するネーム(③´の場合はaaa)の前に、
 .(ドット)を入力します。

 idを使用する場合は指定するネーム(④´の場合はbbb)の前に#を使用します。

 ③´(.aaa{color:orange;})のaaaの部分はabcでもefgでも何でも良いのですが、
 ③(<div class = "aaa">文字の色</div>)のaaaの部分も③´と同じネームに
   しなければなりません。

(例)
 <html>
 <head>
 <style type = "text/css">
 <!--
 .クラス名{color:色;} ←class
 #ID名{color:色;}   ←id
 -->
 </style>
 </head>
 <body>
 <div class = "クラス名">文字</div>
 <div class = "ID名">文字</div>
 </body>
 </html>


 classとidの違い
 classは1ページで複数回使用できるのに対して、
 idは1ページに1回しか使用できません。

 HTMLを作成する際に全てclassを使っても良いのですが、
 classとidを使い分けるようにした方が分かりやすいと思います。

テーマ : こんなの作りました♪
ジャンル : 趣味・実用

tag : color class id

HTMLの基本 その1

基本的なHTMLを書いてみました。

<html>
<head>
<link href="https://static.fc2.com/css_cn/common/headbar/120710style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
テスト

</body>
</html>



上記のコードを入力すると「テスト」と表示されます。

<html></html>で囲んだ、
<head></head>とは、文書に関連した情報を示した部分です。
<head></head>にはサイトのタイトルやスタイルシート(css)等の情報を記します。

<body></body>とは、文書の本文が記述されます。


下記のサイトで上記のコードを試せます。
     ↓
Real-time HTML Editer
http://htmledit.squarefree.com/

テーマ : こんなの作りました♪
ジャンル : 趣味・実用

tag : HTML body head

ブログ始めました!!

ブログ始めました。

気になったことを書いていこうと思います。

テーマ : こんなの作りました♪
ジャンル : 趣味・実用

プロフィール

barg23

Author:barg23
FC2ブログへようこそ!

最新記事
最新トラックバック
月別アーカイブ
カテゴリ
カウンター
ユーザータグ

head body HTML color class リンク色 リンク id text-decoration 

RSSリンクの表示
リンク
検索フォーム
Amazon検索
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード