| クリックで表示/非表示 | |
#box{
display:none;
}
<script type="text/javascript">
<!--
var i=0;
function disp(){
if(i%2==0)
document.getElementById("box").style.display="block";
else
document.getElementById("box").style.display="none";
i++;
}
//-->
</script>
<input type="button" name="draw" value="表示/非表示" onclick="javascript:disp();">
<div id="box" ></div>
|
|
| 背景 | |
| 背景画像指定 | background="hoge.gif" |
| 背景固定 | body { background-repeat: no-repeat; /* 背景を繰り返さない */ background-position: 50% 50%; /* 背景画像の位置は画面中央 */ background-attachment:fixed; /* 背景画像を固定する */ } |
| 複数の背景画像を表示 | body { background-image: url(rozuneo.gif), url(rozuneo.gif), url(haikei.gif); background-repeat: no-repeat, repeat-y, repeat; background-position: top left, center center,50% 85%; } 最初に指定したものほど上に重ねて表示 |
| 背景色 | background-color:yellow; |
| HTML | |
| 文字コードを宣言 | HTML5 <!DOCTYPE html> 文字コードの指定 <meta charset="UTF-8"> HTML4 <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> IE <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> |
| style | <style
type="text/css"> </style> |
| WEBサイトに<などHTMLのタグを表示 | <は <
> は > &は & 複数行表す場合は、<pre>タグで囲む <pre> < html> < head> </pre> |
| スペース |
たくさんスペースを入力する際には、<pre></pre> |
| クラス指定２つ | <span class="one
two">〜</span> （クラス名の間に半角スペース） .one.two{ font-weight: bold; } |
| スクロールバーを 表示しない | overflow-y:hidden |
| .ore{ border: 1px solid rgb(255, 153, 0); } <hr class="ore"> |
|
| <hr style="color:#feb674;" HSPACE=50 VSPACE=10 > | |
| 余白なし |
body{margin:0;} |
| 表示しない 表示する |
visibility:hidden visibility:visible |
| |
body{margin-left:300;margin-top:0;margin-bottom:0;} |
| 右クリック禁止 | onContextmenu="return false" |
| |
true false |
| 行間隔 | <div style="LINE-HEIGHT: 140%;"></div> |
| height="190" width="700" height:190; width:700; |
|
| style="cursor:hand;" | |
| JavaScriptの外部ファイル | |
| hoge.js ファイル
< script type="text/javascript"> < /script> この記述は書かない |
HTMLのヘッダーに
< script type="text/javascript" src="hoge.js">< /script> |
| 位置指定 | |
| 絶対位置指定 | <div style="position:absolute;top:0px;left:0px;"></div> |
 
|
<div
style="position:relative;"> <img src="pumo_s.png" style="position:absolute;top:0px;left:20px;"> <img src="hiyokogif"style="position:absolute;top:25px;left:3px"> </div> |
| フレーム | |
| インラインフレーム |
<IFRAME
src="hoge.html" name="namae" width="500" height="500" frameborder="0" scrolling="AUTO" align="left" marginwidth="50" marginheight="50" align="left"> インラインフレーム非対応の場合に表示する文字 </IFRAME> インラインフレームにリンクを貼るには <A href="hoge.htm" target="namae">リンク</A> 同一ページに複数のインラインフレームを使用する場合は､ それぞれに違う名前（name）を付ける リンクのターゲット（target）を指定する事で､ 指定したインラインフレームにリンクを貼ることが出来る。 |
| カーソルを画像にする | <style type="text/css"> body{ cursor: url(ファイル名.gif), default;} a{cursor:url(カーソル画像のurl);} /*リンク部分のカーソル*/ </style> Firefoxの場合は、GIFやJPEG、PNGなども使用できる IEはカーソル（.cur）とアニメーションカーソル（.ani）だけ iConvert |
| マウスオンで 画像がかわる |
<img src="hoge.gif" alt="メッセージ"
onmouseover="this.src='hoge2.gif'" onmouseout="this.src='hoge.gif'"
> |
| ファビコン 拡張子 ico を作る |
head内に <link rel="icon" href="http://hoge/favicon.ico" type="image/x-icon" /> <link rel="Shortcut Icon" type="image/x-icon" href="http://hoge/favicon.ico" /> ファイル名はfavicon.icoのまま（ブラウザによりfavicon.icoしか表示されないため） 16×16 32×32 両方用意するのがよい |
| バナーの設置 | 88×31 |
| 均等割付 | |
| かわいらしい メールフォーム |
Pink
Bunny 文字から入って→ITEM→SKIN→OPEN→MAIL FORMのFineとか 2apesからapeboard+のダウンロードする必要あり |
| サンプル | .shadow { -moz-box-shadow: 2px 2px 3px #969696; -webkit-box-shadow: 2px 2px 3px #969696; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); } |