全国





HTML Tips

よく使うHTMLをTips化しました。コピペでOKです。

コメント タイトル キーワード サイト説明 重要視タグ 改行  

文字色の指定 文字サイズ 文字修飾  画像表示 ジャンプ 

リンク 別ウインドウ リスト 水平線 ページの中にページ 

お気に入り テーブル フォーム クリッカブルマップ


CSS Tips

よく使うCSSをTips化しました。コピペでOKです。

文字種変更 背景色の指定 文字色の指定 文字サイズ 文字修飾 

リンク下線 ホバー






















コメント

コメントの記述

コメント

<!--子猫の画像-->




















タイトル

タイトルの記述

<head>〜</head>
間に記述します。

<title>小さな子猫のおうち</title>




















キーワード

検索エンジンにキーワードを読み込ませる。

<head>〜</head>
間に記述します。

<meta name="Keywords" content="子猫,小子猫,里親">




















サイト説明

検索エンジンにサイト説明を読み込ませる。

<head>〜</head>
間に記述します。

<meta name="Description" content="猫サイトです。">




















重要視タグ

検索エンジンに評価されるタグです。
特にh1は重要視されます。
h1は普通に使うと大きくなりすぎますが、
コントロールはできます。

H1

H2


<h1>H1</h1>
<h2>H2</h2>

h1文字を小さく表示させる。

H1


<h1><FONT size="-2"> H1</FONT></h1>



















改行

改行

あああ
ああ

あああ<br>ああ




















色を指定する

Black Gray Silver White Red Yellow Lime Aqua
Blue Fuchsia Maroon Olive Green Teal Navy Purple

上記以外は色を表す数字で規定します。

赤い文字

<font color="red">赤い文字</font>




















画像表示





<IMG src="画像フォルダ/画像名" border="0">





















ジャンプ

ページ内でジャンプします






<a href="#aaaaa">A</a>





<a name="aaaaa">B</a>




















文字サイズ

文字サイズ

+4
-2

<FONT size="+4">+4</FONT>
<FONT size="-2">-2</FONT>




















文字修飾

文字サイズ

太字
斜体
下線
打消し

<b>太字</b>
<i>斜体</i>
<u>下線</u>
<s>打消し</s>




















リンク

文字リンクです。

Topへ移動

<a href="http://kokoneko.com/">Topへ移動</a>

画像リンクです。


<A href="http://kokoneko.com/"><IMG src="画像フォルダ/画像.gif" 
 border="0"></A>




















リスト

リスト表示の方法

  • りすと1
  • りすと2
  • りすと3

<ul>
<li>りすと1
<li>りすと2
<li>りすと3
</ul>
  1. りすと1
  2. りすと2
  3. りすと3

<ol>
<li>りすと1
<li>りすと2
<li>りすと3
</ol>




















水平線

水平線をひく




<hr width=50>
<hr width=50 color=Blue>




















ページの中にページ

ページの中にページを表示させます



<iframe width="150" height="150" 
src="http://kokoneko.com/" scrolling="auto"> 
</iframe>





















お気に入り

お気に入りに追加ボタン


<FORM>
<INPUT type="button" value="お気に入り" 
onclick="javascript:window.external.addFavorite
('http://kokoneko.com/','小子猫')">
</FORM>



















テーブル

横並び・線なし

 あいう
 えお
 あいう
 えお

<table border=0 bgcolor="#ffffff">
<tr>
<td>
あいう<br>えお
</td><td>
あいう<br>えお
</td>
</tr>
</table>



2段・線あり

あいう
えお
かきく
けこ
さしす
せそ
たちつ
てと

<table border=1 bgcolor="#ffffff" width=180>
 <tr><td >
あいう<br>えお
</td><td>
かきく<br>けこ
</td></tr>
 <tr><td>
さしす<br>せそ
</td><td>
たちつ<br>てと
</td></tr>
</table>




















別ウインドウを開く

リンクを新しいウインドウで開きます。

別ウインドウを開く


<a href="http://kokoneko.net/・・・/
            "target="_blank">





















フォーム

テキスト入力部品

aaa
bbb
ccc
ボタン


<FORM method="POST" action="送信用.php">
aaa <input type="text" size="5" name="aaa" value="表"/>
<br>
bbb <input type="text" size="10" name="bbb"  />
<br>
ccc <input type="text" size="15" name="ccc" />
<br>
ボタン<INPUT type="submit" value="OK">
</FORM>




さまざまな入力部品

テキストボックス


隠しデータ

チェックボックス


ラジオボタン



ボタン


データ消去


<FORM method="POST" action="送信用.php">
テキストボックス<br>
<input type="text" /><br>
<br>

隠しデータ
<input type="hidden" value="http://kokoneko.com/"/>
<br>
<br>

チェックボックス<br>
<input type="checkbox" /><br>
<br>

ラジオボタン<br>
<input type="radio" name="aaa" checked/><br>
<input type="radio" name="aaa"/><br>
<br>

ボタン<br>
<input type="submit" /><br>
<br>

データ消去<br>
<input type="reset" />
</FORM>























クリッカブルマップ

ひとつの画像に複数のリンクを張ります。

cmap 猫 歴史 PC


<img border="0" src="フォルダ名/画像ファイル" 
  usemap="#cmap" alt="cmap" width="80" height="50">
		  
<map name="cmap">
<area href="http://kokoneko.com" 
     shape="rect" alt="猫" coords="5,5,20,20">
<area href="http://kokoneko.net" 
     shape="rect" alt="歴史" coords="30,15,45,30">
<area href="http://kokoneko.com/index3" 
     shape="rect" alt="PC" coords="60,30,75,50">
</map> 





















文字種変更

HTML内にCSSで書く。
文字種はこちらを参考にしてください。

CSS!

<head>〜</head>間に、
<style type="text/css"> <!-- .csm {font-family:"Comic Sans MS";} --> </style>
と記述する。

HTMLに、
<div class="csm">CSS!</div>
と記述する。




















背景色の指定


色はこちらを参考にしてください。

これは見本です。
実際は背景全体。

<head>〜</head>間に、
<style type="text/css"> <!-- body{ background-color: #CCFFFF; } --> </style>
と記述する。





















色の指定

HTML内にCSSで書く。
色はこちらを参考にしてください。

CSS!

<head>〜</head>間に、
<style type="text/css"> <!-- .aka {color:Red;} --> </style>
と記述する。

HTMLに、
<div class="aka">CSS!</div>
と記述する。




















文字サイズ

HTML内にCSSで書く。

CSS!

<head>〜</head>間に、
<style type="text/css"> <!-- .moji {font-size: 150%;} --> </style>
と記述する。

HTMLに、
<div class="moji">CSS!</div>
と記述する。




















文字修飾

太字

CSS!

<head>〜</head>間に、
<style type="text/css"> <!-- .huto {font-weight: bold;} --> </style>
と記述する。

HTMLに、
<div class="huto">CSS!</div>
と記述する。


斜体

CSS!

<head>〜</head>間に、
<style type="text/css"> <!-- .naname {font-style:oblique;} --> </style>
と記述する。

HTMLに、
<div class="naname">CSS!</div>
と記述する。




















ホバー

マウスが乗った時、リンク色が変わるようにする。


<head>〜</head>間に、
<style type="text/css"> <!-- a:hover {color: #FF0000; background-color: #FFFFFF;} --> </style>
と記述する。





















リンクの下線

リンクの下線を消す。

小子猫


<head>〜</head>間に、
<style type="text/css"> <!-- a{text-decoration: none;} --> </style>
と記述する。