HTML Tips
よく使うＨＴＭＬをＴｉｐｓ化しました。コピペでＯＫです。
コメント タイトル キーワード サイト説明 重要視タグ 改行
文字色の指定 文字サイズ 文字修飾 画像表示 ジャンプ
リンク 別ウインドウ リスト 水平線 ページの中にページ
お気に入り テーブル フォーム クリッカブルマップ
ＣＳＳ Tips
よく使うＣＳＳをＴｉｐｓ化しました。コピペでＯＫです。
文字種変更 背景色の指定 文字色の指定 文字サイズ 文字修飾
リンク下線 ホバー
コメントの記述
タイトルの記述
検索エンジンにキーワードを読み込ませる。
|
|
<meta name="Keywords" content="子猫,小子猫,里親">
|
検索エンジンにサイト説明を読み込ませる。
|
|
<meta name="Description" content="猫サイトです。">
|
検索エンジンに評価されるタグです。
特にh1は重要視されます。
h1は普通に使うと大きくなりすぎますが、
コントロールはできます。
h1文字を小さく表示させる。
|
|
<h1><FONT size="-2"> Ｈ１</FONT></h1>
|
改行
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 name="aaaaa">Ｂ</a>
|
文字サイズ
|
|
<FONT size="+4">+4</FONT>
<FONT size="-2">-2</FONT>
|
文字サイズ
|
|
<b>太字</b>
<i>斜体</i>
<u>下線</u>
<s>打消し</s>
|
文字リンクです。
|
|
<a href="http://kokoneko.com/">Topへ移動</a>
|
画像リンクです。
|
|
<A href="http://kokoneko.com/"><IMG src="画像フォルダ/画像.gif"
border="0"></A>
|
リスト表示の方法
|
|
<ul>
<li>りすと１
<li>りすと２
<li>りすと３
</ul>
|
|
|
<ol>
<li>りすと１
<li>りすと２
<li>りすと３
</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>
|
２段・線あり
|
|
<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">
|
テキスト入力部品
|
|
<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>
|
ひとつの画像に複数のリンクを張ります。
|
|
<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>
|
ＨＴＭＬ内にＣＳＳで書く。
文字種は
こちらを参考にしてください。
|
|
<head>〜</head>間に、
<style type="text/css">
<!--
.csm {font-family:"Comic Sans MS";}
-->
</style>
と記述する。
ＨＴＭＬに、
<div class="csm">CSS!</div>
と記述する。
|
色は
こちらを参考にしてください。
|
|
<head>〜</head>間に、
<style type="text/css">
<!--
body{ background-color: #CCFFFF; }
-->
</style>
と記述する。
|
ＨＴＭＬ内にＣＳＳで書く。
色は
こちらを参考にしてください。
|
|
<head>〜</head>間に、
<style type="text/css">
<!--
.aka {color:Red;}
-->
</style>
と記述する。
ＨＴＭＬに、
<div class="aka">CSS!</div>
と記述する。
|
ＨＴＭＬ内にＣＳＳで書く。
|
|
<head>〜</head>間に、
<style type="text/css">
<!--
.moji {font-size: 150%;}
-->
</style>
と記述する。
ＨＴＭＬに、
<div class="moji">CSS!</div>
と記述する。
|
太字
|
|
<head>〜</head>間に、
<style type="text/css">
<!--
.huto {font-weight: bold;}
-->
</style>
と記述する。
ＨＴＭＬに、
<div class="huto">CSS!</div>
と記述する。
|
斜体
|
|
<head>〜</head>間に、
<style type="text/css">
<!--
.naname {font-style:oblique;}
-->
</style>
と記述する。
ＨＴＭＬに、
<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>
と記述する。
|
