スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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><div id="sh_fc2blogheadbar">
	<div class="sh_fc2blogheadbar_body">
		<div id="sh_fc2blogheadbar_menu">
			<a href="https://blog.fc2.com/" rel="nofollow">				<img src="//static.fc2.com/image/headbar/sh_fc2blogheadbar_logo.png" alt="FC2ブログ" />
			</a>		</div>
		<div id="sh_fc2blogheadbar_search">
			<form name="barForm" method="get" action="" target="blank">
				<input class="sh_fc2blogheadbar_searchform" type="text" name="q" value="" maxlength="30" onclick="this.style.color='#000000';" onfocus="this.select();" onblur="this.style.color='#999999'" />
				<input type="hidden" name="charset" value="utf-8" />
				<input class="sh_fc2blogheadbar_searchbtn" type="submit" value="ブログ内検索" />
			</form>
		</div>
		<div id="sh_fc2blogheadbar_link_box" class="sh_fc2blogheadbar_link" style="visibility: hidden;"></div>
	</div>
</div>

<a href = "http://search.yahoo.co.jp/" target = "_blank" title = "Yahoo!検索サイト">Yahoo!検索</a>

<!-- passive:ad:171 -->
<div id="fc2_bottom_bnr" style="position:fixed;z-index:10000;left:0;bottom:0;width:100%;display:block;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#70000000,EndColorStr=#70000000);background:rgba(0,0,0,0.7);"><div id="fc2_bottom_bnr_img" style="display:block;width:728px;height:94px;margin:0px auto;padding:10px 0px 14px;"><iframe src='//assys01.fc2.com/1345' style='width:728px;height:90px;border:none;' scrolling='no'></iframe><!-- FC2管理用 --><img src="//media.fc2.com/counter_img.php?id=1505" width="1" height="1"><!-- FC2管理用 --><div style="color:#C0C0C0;text-align:center;font-size:9px;margin:0px;padding:2px 0px 0px;">上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。</div></div><span id="fc2_bottom_bnr_close" style="cursor:pointer;display:block;position:absolute;padding:5px;top:0;right:0;width:20px;height:20px;opacity:0.8;max-width:100%;max-height:100%;"><img src="//blog-imgs-61.fc2.com/t/e/s/test0006/fc2_bottom_bnr_close.png" width="20" height="20" style="border:none;width:20px;height:20px;max-width: 100%;" /></span></div>
<script type="text/javascript">(function(w, d) {var area = d.getElementById('fc2_bottom_bnr'),areaStyle = area.style;var getScrollMax = function() { return d.documentElement.getBoundingClientRect().height - w.innerHeight; };var getScrollCurrent = function() { return d.documentElement.scrollTop || d.body.scrollTop; };var overlayPosition = function() {if (getScrollMax() > getScrollCurrent()) {areaStyle.bottom = 0;areaStyle.top = 'auto';} else {areaStyle.bottom = 'auto';areaStyle.top = 0;}};var closeBtn = d.getElementById('fc2_bottom_bnr_close'),close = function() { area.style.display = 'none'; };if (w.addEventListener) {w.addEventListener('resize', overlayPosition, false);w.addEventListener('scroll', overlayPosition, false);closeBtn.addEventListener('click', close, false);} else {w.attachEvent('onresize', overlayPosition);w.attachEvent('onscroll', overlayPosition);closeBtn.attachEvent('onclick', close);}})(window, document);</script>
</body>
<script type="text/javascript" src="//static.fc2.com/js/blog/headbar_ad_load.js?genre=46&20141111" charset="utf-8"></script>
<script type="text/javascript" src="//static.fc2.com/js/blog/ad_ref.js?20121115"></script>
</html>


上記表示
Yahoo!検索
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。

【上記を押すと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><div id="sh_fc2blogheadbar">
	<div class="sh_fc2blogheadbar_body">
		<div id="sh_fc2blogheadbar_menu">
			<a href="https://blog.fc2.com/" rel="nofollow">				<img src="//static.fc2.com/image/headbar/sh_fc2blogheadbar_logo.png" alt="FC2ブログ" />
			</a>		</div>
		<div id="sh_fc2blogheadbar_search">
			<form name="barForm" method="get" action="" target="blank">
				<input class="sh_fc2blogheadbar_searchform" type="text" name="q" value="" maxlength="30" onclick="this.style.color='#000000';" onfocus="this.select();" onblur="this.style.color='#999999'" />
				<input type="hidden" name="charset" value="utf-8" />
				<input class="sh_fc2blogheadbar_searchbtn" type="submit" value="ブログ内検索" />
			</form>
		</div>
		<div id="sh_fc2blogheadbar_link_box" class="sh_fc2blogheadbar_link" style="visibility: hidden;"></div>
	</div>
</div>

<a href = "http://search.yahoo.co.jp/" target = "_blank" title = "Yahoo!検索">表示される文字</a>

<!-- passive:ad:171 -->
<div id="fc2_bottom_bnr" style="position:fixed;z-index:10000;left:0;bottom:0;width:100%;display:block;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#70000000,EndColorStr=#70000000);background:rgba(0,0,0,0.7);"><div id="fc2_bottom_bnr_img" style="display:block;width:728px;height:94px;margin:0px auto;padding:10px 0px 14px;"><iframe src='//assys01.fc2.com/1345' style='width:728px;height:90px;border:none;' scrolling='no'></iframe><!-- FC2管理用 --><img src="//media.fc2.com/counter_img.php?id=1505" width="1" height="1"><!-- FC2管理用 --><div style="color:#C0C0C0;text-align:center;font-size:9px;margin:0px;padding:2px 0px 0px;">上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。</div></div><span id="fc2_bottom_bnr_close" style="cursor:pointer;display:block;position:absolute;padding:5px;top:0;right:0;width:20px;height:20px;opacity:0.8;max-width:100%;max-height:100%;"><img src="//blog-imgs-61.fc2.com/t/e/s/test0006/fc2_bottom_bnr_close.png" width="20" height="20" style="border:none;width:20px;height:20px;max-width: 100%;" /></span></div>
<script type="text/javascript">(function(w, d) {var area = d.getElementById('fc2_bottom_bnr'),areaStyle = area.style;var getScrollMax = function() { return d.documentElement.getBoundingClientRect().height - w.innerHeight; };var getScrollCurrent = function() { return d.documentElement.scrollTop || d.body.scrollTop; };var overlayPosition = function() {if (getScrollMax() > getScrollCurrent()) {areaStyle.bottom = 0;areaStyle.top = 'auto';} else {areaStyle.bottom = 'auto';areaStyle.top = 0;}};var closeBtn = d.getElementById('fc2_bottom_bnr_close'),close = function() { area.style.display = 'none'; };if (w.addEventListener) {w.addEventListener('resize', overlayPosition, false);w.addEventListener('scroll', overlayPosition, false);closeBtn.addEventListener('click', close, false);} else {w.attachEvent('onresize', overlayPosition);w.attachEvent('onscroll', overlayPosition);closeBtn.attachEvent('onclick', close);}})(window, document);</script>
</body>
<script type="text/javascript" src="//static.fc2.com/js/blog/headbar_ad_load.js?genre=46&20141111" charset="utf-8"></script>
<script type="text/javascript" src="//static.fc2.com/js/blog/ad_ref.js?20121115"></script>
</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><div id="sh_fc2blogheadbar">
	<div class="sh_fc2blogheadbar_body">
		<div id="sh_fc2blogheadbar_menu">
			<a href="https://blog.fc2.com/" rel="nofollow">				<img src="//static.fc2.com/image/headbar/sh_fc2blogheadbar_logo.png" alt="FC2ブログ" />
			</a>		</div>
		<div id="sh_fc2blogheadbar_search">
			<form name="barForm" method="get" action="" target="blank">
				<input class="sh_fc2blogheadbar_searchform" type="text" name="q" value="" maxlength="30" onclick="this.style.color='#000000';" onfocus="this.select();" onblur="this.style.color='#999999'" />
				<input type="hidden" name="charset" value="utf-8" />
				<input class="sh_fc2blogheadbar_searchbtn" type="submit" value="ブログ内検索" />
			</form>
		</div>
		<div id="sh_fc2blogheadbar_link_box" class="sh_fc2blogheadbar_link" style="visibility: hidden;"></div>
	</div>
</div>

<span style = "color:red;">文字の色</span>  ←①
<div style = "color:#0000FF;">文字の色</div> ←②
<div class = "aaa">文字の色</div>       ←③
<div id = "bbb">文字の色</div>        ←④

<!-- passive:ad:171 -->
<div id="fc2_bottom_bnr" style="position:fixed;z-index:10000;left:0;bottom:0;width:100%;display:block;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#70000000,EndColorStr=#70000000);background:rgba(0,0,0,0.7);"><div id="fc2_bottom_bnr_img" style="display:block;width:728px;height:94px;margin:0px auto;padding:10px 0px 14px;"><iframe src='//assys01.fc2.com/1345' style='width:728px;height:90px;border:none;' scrolling='no'></iframe><!-- FC2管理用 --><img src="//media.fc2.com/counter_img.php?id=1505" width="1" height="1"><!-- FC2管理用 --><div style="color:#C0C0C0;text-align:center;font-size:9px;margin:0px;padding:2px 0px 0px;">上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。</div></div><span id="fc2_bottom_bnr_close" style="cursor:pointer;display:block;position:absolute;padding:5px;top:0;right:0;width:20px;height:20px;opacity:0.8;max-width:100%;max-height:100%;"><img src="//blog-imgs-61.fc2.com/t/e/s/test0006/fc2_bottom_bnr_close.png" width="20" height="20" style="border:none;width:20px;height:20px;max-width: 100%;" /></span></div>
<script type="text/javascript">(function(w, d) {var area = d.getElementById('fc2_bottom_bnr'),areaStyle = area.style;var getScrollMax = function() { return d.documentElement.getBoundingClientRect().height - w.innerHeight; };var getScrollCurrent = function() { return d.documentElement.scrollTop || d.body.scrollTop; };var overlayPosition = function() {if (getScrollMax() > getScrollCurrent()) {areaStyle.bottom = 0;areaStyle.top = 'auto';} else {areaStyle.bottom = 'auto';areaStyle.top = 0;}};var closeBtn = d.getElementById('fc2_bottom_bnr_close'),close = function() { area.style.display = 'none'; };if (w.addEventListener) {w.addEventListener('resize', overlayPosition, false);w.addEventListener('scroll', overlayPosition, false);closeBtn.addEventListener('click', close, false);} else {w.attachEvent('onresize', overlayPosition);w.attachEvent('onscroll', overlayPosition);closeBtn.attachEvent('onclick', close);}})(window, document);</script>
</body>
<script type="text/javascript" src="//static.fc2.com/js/blog/headbar_ad_load.js?genre=46&20141111" charset="utf-8"></script>
<script type="text/javascript" src="//static.fc2.com/js/blog/ad_ref.js?20121115"></script>
</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><div id="sh_fc2blogheadbar">
	<div class="sh_fc2blogheadbar_body">
		<div id="sh_fc2blogheadbar_menu">
			<a href="https://blog.fc2.com/" rel="nofollow">				<img src="//static.fc2.com/image/headbar/sh_fc2blogheadbar_logo.png" alt="FC2ブログ" />
			</a>		</div>
		<div id="sh_fc2blogheadbar_search">
			<form name="barForm" method="get" action="" target="blank">
				<input class="sh_fc2blogheadbar_searchform" type="text" name="q" value="" maxlength="30" onclick="this.style.color='#000000';" onfocus="this.select();" onblur="this.style.color='#999999'" />
				<input type="hidden" name="charset" value="utf-8" />
				<input class="sh_fc2blogheadbar_searchbtn" type="submit" value="ブログ内検索" />
			</form>
		</div>
		<div id="sh_fc2blogheadbar_link_box" class="sh_fc2blogheadbar_link" style="visibility: hidden;"></div>
	</div>
</div>

テスト

<!-- passive:ad:171 -->
<div id="fc2_bottom_bnr" style="position:fixed;z-index:10000;left:0;bottom:0;width:100%;display:block;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#70000000,EndColorStr=#70000000);background:rgba(0,0,0,0.7);"><div id="fc2_bottom_bnr_img" style="display:block;width:728px;height:94px;margin:0px auto;padding:10px 0px 14px;"><iframe src='//assys01.fc2.com/1345' style='width:728px;height:90px;border:none;' scrolling='no'></iframe><!-- FC2管理用 --><img src="//media.fc2.com/counter_img.php?id=1505" width="1" height="1"><!-- FC2管理用 --><div style="color:#C0C0C0;text-align:center;font-size:9px;margin:0px;padding:2px 0px 0px;">上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。</div></div><span id="fc2_bottom_bnr_close" style="cursor:pointer;display:block;position:absolute;padding:5px;top:0;right:0;width:20px;height:20px;opacity:0.8;max-width:100%;max-height:100%;"><img src="//blog-imgs-61.fc2.com/t/e/s/test0006/fc2_bottom_bnr_close.png" width="20" height="20" style="border:none;width:20px;height:20px;max-width: 100%;" /></span></div>
<script type="text/javascript">(function(w, d) {var area = d.getElementById('fc2_bottom_bnr'),areaStyle = area.style;var getScrollMax = function() { return d.documentElement.getBoundingClientRect().height - w.innerHeight; };var getScrollCurrent = function() { return d.documentElement.scrollTop || d.body.scrollTop; };var overlayPosition = function() {if (getScrollMax() > getScrollCurrent()) {areaStyle.bottom = 0;areaStyle.top = 'auto';} else {areaStyle.bottom = 'auto';areaStyle.top = 0;}};var closeBtn = d.getElementById('fc2_bottom_bnr_close'),close = function() { area.style.display = 'none'; };if (w.addEventListener) {w.addEventListener('resize', overlayPosition, false);w.addEventListener('scroll', overlayPosition, false);closeBtn.addEventListener('click', close, false);} else {w.attachEvent('onresize', overlayPosition);w.attachEvent('onscroll', overlayPosition);closeBtn.attachEvent('onclick', close);}})(window, document);</script>
</body>
<script type="text/javascript" src="//static.fc2.com/js/blog/headbar_ad_load.js?genre=46&20141111" charset="utf-8"></script>
<script type="text/javascript" src="//static.fc2.com/js/blog/ad_ref.js?20121115"></script>
</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コード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。