htmlタグの使い方サンプル

色わくの文字を選択したらCtrl_Cキーを押してコピー
左プログラム画面の好きなところをクリックして、Cntrl_V で張り付ける。

タグ入力練習
1.大きな文字で題 <h1>シンデレラ城</h1>
2.ふつうサイズの文字で本文 <br /> <p>モデルになったお城はいくつかあるそうです。</p>
3.リストにして並べる <ul> <li>ノイシュバンシュタイン城</li> <li>ショーモン城</li> <li>シャンポール城</li> <li>シュノンソー城</li> </ul>
4.表(テーブル)を作る <table> <tr><td>ノイシュバンシュタイン城</td><td>ドイツ</td><td>photo1.jpg</td></tr> <tr><td>ショーモン城</td><td>フランス</td><td>photo2.jpg</td></tr> <tr><td>シャンポール城</td><td>フランス</td><td>photo3.jpg</td></tr> <tr><td>シュノンソー城</td><td>フランス</td><td>photo4.jpg</td></tr> </table>
5.画像を入れる <img src="upload/1p.jpg"/>

コピ&ペ―ストしたら更新ボタン

CSSの使い方サンプル

文字を選択したらCtrl_Cキーを押してコピー
左プログラム画面の番号のあたりをクリックして、Cntrl_V で張り付け

タグ入力練習
1.文字を中央にする <div style="text-align:center;"> <h1>シンデレラ城</h1> </div>
2.背景に色をつける <div style="background-color:#F9F;"> <p>モデルになったお城はいくつかあるそうです。</p> </div>
3.abcという目印をつけたところの背景に色 <style> #abc{background-color:#9FC;} </style> <ul id="abc"> <li>ノイシュバンシュタイン城</li> <li>ショーモン城</li> <li>シャンポール城</li> <li>シュノンソー城</li> </ul>
4.pictと印をつけた画像を50%サイズに <style> .def{width:50%;} </style> <img src="upload/1p.jpg" class="def"/>

コピ&ペ―ストしたら更新ボタン

jQueryの使い方サンプル

ctrl_c と cntrl_v でコピー、ペースト

タグ入力練習
1.ボタンを押すと文が入れ替わる <p id="tex1">モデルになったお城はいくつかあるそうです。</p> <button id="btn1"> 文をさし替える </button> <script src="tool/jquery-3.3.1.min.js"></script> <script> $(function(){ $("#btn1").on("click", function(){ $("#tex1").text("ディズニーランドの城が有名です"); }); }); </script>
2.ボタンを押して項目を消す <ul> <li class="L1">ノイシュバンシュタイン城</li> <li class="L2">ショーモン城</li> <li>シャンポール城</li> <li>シュノンソー城</li> </ul> <button id="btn2"> 項目を消す </button> <script src="tool/jquery-3.3.1.min.js"></script> <script> $(function(){ $("#btn2").on("click", function(){ $(".L2").hide(); }); }); </script>
3.ボタンを押してで画像を入れ替える <img src="upload/1p.jpg" class="pict"/> <button id="btn3"> 写真を入れ替える </button> <script src="tool/jquery-3.3.1.min.js"></script> <script> $(function(){ $("#btn3").on("click", function(){ $("img").attr("src","upload/2p.jpg"); }); }); </script>