閉じる |
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> 未対応ブラウザ向け |
プルダウンメニュー | |
アクセシビリティ | 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> |