閉じる
HP作成パーツ
HTMLのよく判らない者が折に触れてメモを取ったものをまとめました。間違いもあるかと思いますので、お気づきの点がありましたら、お知らせください。
   
額に影を付ける head内に

<style>
<!--

table.gakubuti{
box-shadow:10px 10px 10px -1px;
}
-->
</style>
フルスクリーンでウインドウを開く head内に

<SCRIPT language="JavaScript">
function openWindow() {fullscreen=yes}
</SCRIPT>

body内に

onClick="openWindow()"
背景画像を画面いっぱいに表示  body {
background: url(background-photo.jpg) center center / cover no-repeat fixed;
}
背景画像を繰り返さない  <style>
body {
background-image: url(img/star.png);
background-repeat:no-repeat
}
</style>
</head>
マーカーを塗る方法
1.マーカを付けたい部分をマウスやキーボードで範囲選択します。
2.Ctrl+Bキーを押します。
マーカを消したいときには、マーカが塗られている部分にマウスカーソルを置いて、Ctrl+Bキーを押します。なお、範囲選択後マウスを右クリックして、表示されたメニューから[マーカで塗る]([マーカを消す])でも可能です。
※マーカの一部分のみを消すことはできません。

マーカの色は、[箱]メニュー[箱の書式]の[マーカ色]から自由に設定できます。
[マーカ色]右側のボックスをマウスでクリックし、表示された[色の設定]画面から好きな色を指定してください。[箱の書式]で背景色を白以外に指定している場合、マーカ色は背景色と混ざって表示されるために、[マーカ色]で指定した色と異なる色で表示されることがあります。何度かマーカ色の設定を試してみて、見やすい色になるようにしてください。
右クリック禁止 <body oncontextmenu='return false'>

<body oncontextmenu="alert('右クリック禁止');return false;">
戻るボタン <input type="button" value="戻る" onClick="history.back()">
文字の行間を空ける <style type="text/css">
<!--
body {line-height: 130%;}
-->
</style>
文字間隔 head内に
start color str=(開始の色)<br>
endcolor str=(終わりの色)

<style type=text/css">
<!--
body {letter-spacing: normal } /*標準*/

p {letter-spacing: 1em; } /*文字間隔1文字分*/

div{letter-spacing: 0.5em: } /*文字間隔0.5文字分*/
-->
</style>
文字列に影をつける <p style="font-size: 23pt;<br>
font-weight: bold;
color: royalblue;<br>
filter: shadow(color=gray,direction=180);
width: 250pt;</p>
文字に背景色をつける 文字に背景色をつける
BGM ON OFボタン ●<form class="exp01" action="dummy">
<input type="button" onclick="document.getElementById('snd0').src='/sounds/music1.mid';" value="ON">
<input type="button" onclick="document.getElementById('snd0').src='';" value="OFF"><br>

文字をボタンの代わりにする。<br>
<span onclick="document.getElementById('snd0').src='/sounds/music1.mid';">ON</span> 
<span onclick="document.getElementById('snd0').src='';">OFF</span>
<bgsound src="" volume="1" id="snd0">
</form>">

●<script type="text/javascript">
<!--
bgm_file="growth.mp3"; //自分のBGMファイルを書く
sw_flg=2; //初期状態(0=演奏 1= 停止 2= スマホのみ停止)
//-->
</script>
<script type="text/javascript" src="http://qpon.quu.cc/mid/play_button.js">
</script>

<audio src="harunokomichi.mp3" controls loop class="bgm_size"></audio>
自動スタートする場合
<audio src="tamhe13.mp3" autoplay loop controls  class="bgm_size"></audio>
背景ぼかし ●横<br>
<table border="0" height="300" width="300" style="filter: progid:DXImageTransform.Microsoft.Gradient<br>
(gradientType=1,startColorStr=#99ff99,endColorStr=#ffff00);"><br>
<tr><td>
</td></tr>
</table><br>
<br>
●縦<br>
<table border="0" height="300" width="300" style="filter: progid:DXImageTransform.Microsoft.Gradient<br>
(gradientType=0,startColorStr=#99ff99,endColorStr=#ffff00);"><br>
<tr><td><br>
</td></tr><br>
</table><br>
<br>
●セル縦<br>
<table border="0"<br>
<tr><br>
<td height="150" width="300" style="filter: progid:DXImageTransform.Microsoft.Gradient<br>
(gradientType=0,startColorStr=#99ff99,endColorStr=#ffff00);"><br>
</td></tr><br>
<br>
●セル横<br>
<td height="150" width="300" style="filter: progid:DXImageTransform.Microsoft.Gradient<br>
(gradientType=0,startColorStr=#99ff99,endColorStr=#ffff00);"><br>
</td></tr>
<br>
<br>
start color str=(開始の色)<br>
endcolor str=(終わりの色)
テーブルの透明化 table style="background-color:#ffffff;
filter:alpha(opacity=50);" width="300" height="100">
<tbody>
<tr>
<td bgcolor="#ffffff" align="center"><FONT size="-1">ここに文字など♪</FONT><BR>
</td>
</tr>
</tbody>
</table>
お気に入りに登録 ●<input style='width:130;height:25;cursor:pointer;background:#cccccc;font-size:14;color:000000'type="button" value="お気に入りに登録" onclick="window.external.addfavorite('http://allabout.co.jp/','all about Japan');">

●<form><Input type="button" value="お気に入りに追加" onclick="javascript:window.external.addfavorite('http://heo.jp/tag/','みんなのタグ辞書')"></form>
ロールオーバー ボタンを表示させたい<body>~</body>の間に↓のソースを貼り付けてネ。

<img src="◆" border="0" onMouseOver="this.src='★'" onMouseOut="this.src='■'">

◆・・・最初に表示される画像名
★・・・カーソルが触れた時に表示される画像名
■・・・カーソルが離れた時に表示される画像名

リンクを挿入する場合 #の部分にファイル名を記入してね。
<a href="#"><img src="◆" border="0" onMouseover="this.src='★'" onMouseout="this.src='■'">
</a>
<HR size="2" style="color: #FFFFFF; filter:alpha(opacity=100,finishopacity=0,style=3)">
テーブル内で左右に空白をあける <table>内の余白は<table cellpadding="20">と書いてください。20を変えれれば変化します。
縦書きツール <div style="writing-mode:tb-rl;line-height:2.4em;font-size:20">縦書き</div>
テキストで縦書きしてルビを打つ方法
ルビの打ち方 <ruby><rb>亜米利加 </rb><rt>アメリカ </rt></ruby>対応ブラウザ向け
<ruby><rb>亜米利加 </rb><rp><rt>アメリカ </rt></rp></ruby> 未対応ブラウザ向け
プルダウンメニュー


<form><select onchange="location.href=this.options[this.selectedIndex].value;">
<option selected value="#">選択してください</option>
<option value="http://osoujidougu-kennsaku.seesaa.net/">台所</option
<option value="http://osoujidougu-kennsaku.seesaa.net/">浴室</option>
<option value="">洗面所</option>
<optionvalue="">トイレ</option>
<option value="">部屋</option>
<option value="">外部</option>
<option value="">照明器具</option>
<option value="">ガラス</option>
<option value="">エアコン</option>
</select></form>
アクセシビリティ alt="img" title="text"
<a href="index.html" title="このカテゴリーのトップへジャンプします">カテゴリートップへ</a>
間を空けない指定 <div style="position:absolute;left:10;top:0;visibility:visible;">    (デスクトップ)
テーブル内で左右に空白をあける <table>内の余白は
<table cellpadding="20">と書いてください。20を変えれれば変化します。
文字ばけを防ぐ <head>~</head>の間に下記タグを書き加えると防げます。↓
<meta http-equiv="content-type" content="text/html/;charset="shift_jis">
位置を指定する <DIV style="position:absolute;left:10;top:20;visibility:visible;">
戻るボタン <div style="position:absolute;left:10;top:0;visibility:visible;">
<table>
<tbody>
<tr>
<td align="center" width="65"><a href="../index.html" target="_top"><img src="../sozai/botan3.gif" width="50" height="12" border="0"></a></td>