チェック用HTML | ログポッド
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

ログポッド

_

チェック用HTML

こんにちはアオクマ さとです



LINEスタンプを作成し、PNGで書き出した画像を、ブラウザでチェックするHTMLファイルのソースです

素人の私が手打ちしているので、キレイなソースとは言えないかもしれませんが、お許しをw

私のHTMLの知識は、随分昔に止まっているのですぴょん



意味分からない人は、とことん分からないとは思いますが、誰かの役に立つかも？ってことで、載せてみました

ファイル２つ用意しました
000check1sp.html…１列表示用
000check4sp.html…４列表示用

この記事の後半にありますテキストをコピーして、テキストエディタ等に貼り付けし、指定したファイル名で保存してください




【使い方】

PNG画像は
01.png、02.png、～、40.png
main.png
tab.png
と名前を付けること

２つのHTMLファイルとPNG画像を、同じフォルダに入れてください

HTMLファイルのどちらでもいいので、ダブルクリック

ブラウザが起動します

こんな感じに表示されたら成功
　↓矢印 
  
 
２つのファイルは、相互にリンクされているので、どちらか１つを開けばOKです

ブラウザによっては「この～ ActiveX ほにゃらら」的なメッセージが出ますが、気にせず許可してくださいだよねー



以上マメルリハ






保存時のファイル名：000check1sp.html

だよねー枝枝　ここから　枝枝枝

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>１列チェック</title>
</head>
<BODY BGCOLOR="chocolate" TEXT="#ffffff">
<A HREF="000check4sp.html">４列</A><BR>
<BR>


<script type="text/javascript">
<!--
function changeBackgroundColor( id, color ){
     document . getElementById( id ) . style . backgroundColor = color;
}
// -->
</script>

 


<style type="text/css">
 <!--
ul#change-background-color {
     list-style-type: none;
}
 ul#change-background-color li {
     float: left;
     margin: 0px;
     padding: 0px;
     width: 60px;
     text-align: center;
     font-size: 14px;
     cursor: pointer;
}
 -->
 </style>


<div id="cbc" style="background-color:cadetblue;">
<ul id="change-background-color">
<li style="background-color:black;color:white;" onClick="changeBackgroundColor( 'cbc', 'black' )">Black</li>
<li style="background-color:red;color:white;" onClick="changeBackgroundColor( 'cbc', 'red' )">Red</li>
<li style="background-color:pink;color:black;" onClick="changeBackgroundColor( 'cbc', 'pink' )">Pink</li>
<li style="background-color:purple;color:white;" onClick="changeBackgroundColor( 'cbc', 'purple' )">Purple</li>
<li style="background-color:blue;color:white;" onClick="changeBackgroundColor( 'cbc', 'blue' )">Blue</li>
<li style="background-color:cadetblue;color:white;" onClick="changeBackgroundColor( 'cbc', 'cadetblue' )">Cadetblue</li>
<li style="background-color:green;color:white;" onClick="changeBackgroundColor( 'cbc', 'green' )">Green</li>
<li style="background-color:lime;color:black;" onClick="changeBackgroundColor( 'cbc', 'lime' )">Lime</li>
<li style="background-color:orange;color:black;" onClick="changeBackgroundColor( 'cbc', 'orange' )">Orange</li>
<li style="background-color:yellow;color:black;" onClick="changeBackgroundColor( 'cbc', 'yellow' )">Yellow</li>
<li style="background-color:beige;color:black;" onClick="changeBackgroundColor( 'cbc', 'beige' )">Beige</li>
<li style="background-color:burlywood;color:black;" onClick="changeBackgroundColor( 'cbc', 'burlywood' )">Burlywood</li>
</ul>
<div style="clear: both; padding: 30px;">

<table border="2" cellpadding="5" cellspacing="10">
<tr><td>main<BR><img src="main.png"></td></tr>
<tr><td>tab<BR><img src="tab.png"></td></tr>
<tr><td>01<BR><img src="01.png"></td></tr>
<tr><td>02<BR><img src="02.png"></td></tr>
<tr><td>03<BR><img src="03.png"></td></tr>
<tr><td>04<BR><img src="04.png"></td></tr>
<tr><td>05<BR><img src="05.png"></td></tr>
<tr><td>06<BR><img src="06.png"></td></tr>
<tr><td>07<BR><img src="07.png"></td></tr>
<tr><td>08<BR><img src="08.png"></td></tr>
<tr><td>09<BR><img src="09.png"></td></tr>
<tr><td>10<BR><img src="10.png"></td></tr>
<tr><td>11<BR><img src="11.png"></td></tr>
<tr><td>12<BR><img src="12.png"></td></tr>
<tr><td>13<BR><img src="13.png"></td></tr>
<tr><td>14<BR><img src="14.png"></td></tr>
<tr><td>15<BR><img src="15.png"></td></tr>
<tr><td>16<BR><img src="16.png"></td></tr>
<tr><td>17<BR><img src="17.png"></td></tr>
<tr><td>18<BR><img src="18.png"></td></tr>
<tr><td>19<BR><img src="19.png"></td></tr>
<tr><td>20<BR><img src="20.png"></td></tr>
<tr><td>21<BR><img src="21.png"></td></tr>
<tr><td>22<BR><img src="22.png"></td></tr>
<tr><td>23<BR><img src="23.png"></td></tr>
<tr><td>24<BR><img src="24.png"></td></tr>
<tr><td>25<BR><img src="25.png"></td></tr>
<tr><td>26<BR><img src="26.png"></td></tr>
<tr><td>27<BR><img src="27.png"></td></tr>
<tr><td>28<BR><img src="28.png"></td></tr>
<tr><td>29<BR><img src="29.png"></td></tr>
<tr><td>30<BR><img src="30.png"></td></tr>
<tr><td>31<BR><img src="31.png"></td></tr>
<tr><td>32<BR><img src="32.png"></td></tr>
<tr><td>33<BR><img src="33.png"></td></tr>
<tr><td>34<BR><img src="34.png"></td></tr>
<tr><td>35<BR><img src="35.png"></td></tr>
<tr><td>36<BR><img src="36.png"></td></tr>
<tr><td>37<BR><img src="37.png"></td></tr>
<tr><td>38<BR><img src="38.png"></td></tr>
<tr><td>39<BR><img src="39.png"></td></tr>
<tr><td>40<BR><img src="40.png"></td></tr>
</table>
</div>
</div>
</BODY>
</html>

枝枝枝　ここまで　枝枝枝








保存時のファイル名：000check4sp.html

だよねー枝枝　ここから　枝枝枝

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>４列チェック</title>
</head>
<BODY BGCOLOR="darkolivegreen" TEXT="#000000">
<A HREF="000check1sp.html">１列</A><BR>
<BR>

 

<script type="text/javascript">
<!--
function changeBackgroundColor( id, color ){
     document . getElementById( id ) . style . backgroundColor = color;
}
// -->
</script>


<style type="text/css">
 <!--
ul#change-background-color {
     list-style-type: none;
}
 ul#change-background-color li {
     float: left;
     margin: 0px;
     padding: 0px;
     width: 60px;
     text-align: center;
     font-size: 14px;
     cursor: pointer;
}
 -->
 </style>

 


<div id="cbc" style="background-color:cadetblue;">
<ul id="change-background-color">
<li style="background-color:black;color:white;" onClick="changeBackgroundColor( 'cbc', 'black' )">Black</li>
<li style="background-color:red;color:white;" onClick="changeBackgroundColor( 'cbc', 'red' )">Red</li>
<li style="background-color:pink;color:black;" onClick="changeBackgroundColor( 'cbc', 'pink' )">Pink</li>
<li style="background-color:purple;color:white;" onClick="changeBackgroundColor( 'cbc', 'purple' )">Purple</li>
<li style="background-color:blue;color:white;" onClick="changeBackgroundColor( 'cbc', 'blue' )">Blue</li>
<li style="background-color:cadetblue;color:white;" onClick="changeBackgroundColor( 'cbc', 'cadetblue' )">Cadetblue</li>
<li style="background-color:green;color:white;" onClick="changeBackgroundColor( 'cbc', 'green' )">Green</li>
<li style="background-color:lime;color:black;" onClick="changeBackgroundColor( 'cbc', 'lime' )">Lime</li>
<li style="background-color:orange;color:black;" onClick="changeBackgroundColor( 'cbc', 'orange' )">Orange</li>
<li style="background-color:yellow;color:black;" onClick="changeBackgroundColor( 'cbc', 'yellow' )">Yellow</li>
<li style="background-color:beige;color:black;" onClick="changeBackgroundColor( 'cbc', 'beige' )">Beige</li>
<li style="background-color:burlywood;color:black;" onClick="changeBackgroundColor( 'cbc', 'burlywood' )">Burlywood</li>
</ul>
<div style="clear: both; padding: 30px;">

<table border="0" cellpadding="2" cellspacing="0">
  <tr>
    <td><img src="main.png" width="240"></td>
    <td><img src="tab.png" width="96"></td>
    <td> </td>
    <td> </td>
   </tr>
  <tr>
    <td><img src="01.png" width="250"></td>
    <td><img src="02.png" width="250"></td>
    <td><img src="03.png" width="250"></td>
    <td><img src="04.png" width="250"></td>
   </tr>
  <tr>
    <td><img src="05.png" width="250"></td>
    <td><img src="06.png" width="250"></td>
    <td><img src="07.png" width="250"></td>
    <td><img src="08.png" width="250"></td>
   </tr>
  <tr>
    <td><img src="09.png" width="250"></td>
    <td><img src="10.png" width="250"></td>
    <td><img src="11.png" width="250"></td>
    <td><img src="12.png" width="250"></td>
   </tr>
  <tr>
    <td><img src="13.png" width="250"></td>
    <td><img src="14.png" width="250"></td>
    <td><img src="15.png" width="250"></td>
    <td><img src="16.png" width="250"></td>
   </tr>
  <tr>
    <td><img src="17.png" width="250"></td>
    <td><img src="18.png" width="250"></td>
    <td><img src="19.png" width="250"></td>
    <td><img src="20.png" width="250"></td>
   </tr>
  <tr>
    <td><img src="21.png" width="250"></td>
    <td><img src="22.png" width="250"></td>
    <td><img src="23.png" width="250"></td>
    <td><img src="24.png" width="250"></td>
   </tr>
  <tr>
    <td><img src="25.png" width="250"></td>
    <td><img src="26.png" width="250"></td>
    <td><img src="27.png" width="250"></td>
    <td><img src="28.png" width="250"></td>
   </tr>
  <tr>
    <td><img src="29.png" width="250"></td>
    <td><img src="30.png" width="250"></td>
    <td><img src="31.png" width="250"></td>
    <td><img src="32.png" width="250"></td>
   </tr>
  <tr>
    <td><img src="33.png" width="250"></td>
    <td><img src="34.png" width="250"></td>
    <td><img src="35.png" width="250"></td>
    <td><img src="36.png" width="250"></td>
   </tr>
  <tr>
    <td><img src="37.png" width="250"></td>
    <td><img src="38.png" width="250"></td>
    <td><img src="39.png" width="250"></td>
    <td><img src="40.png" width="250"></td>
   </tr>
</table>
</div>
</div>
</BODY>
</html>

枝枝枝　ここまで　枝枝枝





ではではさとくま


 
 
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
　
　　　　↓矢印 ↓矢印 ↓矢印 ↓矢印 ↓矢印

アオクマbana

とりさんbana