JavaScript/HTMLおぼえがき

JavaScriptJavaScript/HTMLサイトマップホーム

HTML/CSSの操作

表示スタイルの変更   戻る

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>表示スタイルの変更</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
<!--
function c(f) {
  switch (f) {
  case  11:m.style.fontStyle    = "normal"; break;
  case  12:m.style.fontStyle    = "italic"; break;
  case  21:m.style.fontWeight   = "normal"; break;
  case  22:m.style.fontWeight   = "bold";   break;
  case  31:m.style.fontSize     = "20pt";   break;
  case  32:m.style.fontSize     = "14pt";   break;
  case  33:m.style.fontSize     = "10pt";   break;
  case  41:m.style.fontFamily   = "MS Pゴシック";break;
  case  42:m.style.fontFamily   = "MS P明朝";    break;
  case  51:m.style.color        = "#000000";   break;
  case  52:m.style.color        = "#ff0000";   break;
  case  61:m.style.backgroundColor = "#ffffff";     break;
  case  62:m.style.backgroundColor = "#ffff00";     break;
  case  71:m.style.margin      = "10px";    break;
  case  72:m.style.margin      = "50px";    break;
  case  73:m.style.margin      = "30px";    break;
  case  81:m.style.borderWidth = "1px";     break;
  case  82:m.style.borderWidth = "3px";     break;
  case  83:m.style.borderWidth = "5px";     break;
  case  91:m.style.borderStyle = "none";    break;
  case  92:m.style.borderStyle = "solid";   break;
  case  93:m.style.borderStyle = "dotted";  break;
  case 101:m.style.borderColor = "#000000"; break;
  case 102:m.style.borderColor = "#ff0000"; break;
  case 103:m.style.borderColor = "#0000ff"; break;
  case 111:m.style.padding     = "10px";    break;
  case 112:m.style.padding     = "50px";    break;
  default:alert("OTHER");    break;
  }
}
//-->
</script>
</head>
<body>
<hr>
<div id="m">それぞれの文字キーワードをクリックするとそれぞれの表示スタイルが変わります。
<p>1.文字スタイル(<a href="#" onclick="c(11)">通常</a>、<a href="#" onclick="c(12)">イタリック</a>)</p>
<p>2.文字の太さ(<a href="#" onclick="c(21)">標準</a>、<a href="#" onclick="c(22)">太字</a>)</p>
<p>3.文字サイズ(<a href="#" onclick="c(31)">大</a>、<a href="#" onclick="c(32)">中</a>、<a href="#" onclick="c(33)">小</a>)</p>
<p>4.フォント名(<a href="#" onclick="c(41)">MS Pゴシック</a>、<a href="#" onclick="c(42)">MS P明朝</a>)</p>
<p>5.前景色(<a href="#" onclick="c(51)">(黒</a>、<a href="#" onclick="c(52)">赤 </a>)</p>
<p>6.背景色(<a href="#" onclick="c(61)">白</a>、<a href="#" onclick="c(62)">黄</a>) </p>
<p>7.マージン(<a href="#" onclick="c(71)">10px</a>、<a href="#" onclick="c(72)">50px</a>)</p>
<p>8.ボーダ幅(<a href="#" onclick="c(81)">3px、</a><a href="#" onclick="c(82)">5px) </a></p>
<p>9.ボーダスタイル(<a href="#" onclick="c(91)">無</a>、<a href="#" onclick="c(92)">実践</a>、<a href="#" onclick="c(93)">点線</a>)</p>
<p>10.ボーダカラー(<a href="#" onclick="c(101)">黒</a>、<a href="#" onclick="c(102)">赤</a>、<a href="#" onclick="c(103)">青</a>)</p>
<p>11. パディング(<a href="#" onclick="c(111)">10px</a>、<a href="#" onclick="c(112)">50px</a>)</p>
</div>
<hr>
</body>
</html>

スタイルの変更方法   戻る

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS変更</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style_a.css" disabled = "true"  id="style-a">
<link rel="stylesheet" href="style_b.css" disabled = "false" id="style-b">
<style>
<!--
.class_a{
  border-width:0px;
}
.class_b{
  border-width:3px;border-style:solid;border-color:#FF0000;
}
-->
</style>

</head>
<body>
<script>
function class_a() {
  dv.className = "class_a";
}
function class_b() {
  dv.className = "class_b";
}
function style_a() {
  hd.style.backgroundColor = "#000000";
  hd.style.color = "#ffffff";
}
function style_b() {
  hd.style.backgroundColor = "#ffff00";
  hd.style.color = "#0000ff";
}
function sheet_a() {
  document.getElementById("style-a").disabled = true;
  document.getElementById("style-b").disabled = false;
}
function sheet_b() {
  document.getElementById("style-a").disabled = false;
  document.getElementById("style-b").disabled = true;
}
</script>
  <h1 ID="hd">スタイルの変更方法</h1>
<div id="dv" class="class_a">
  <p>classの変更:<button onclick="class_a()">class a</button> <button onclick="class_b()">class b</button></p>
  <p>styleの変更:<button onclick="style_a()">style a</button> <button onclick="style_b()">style b</button></p>
  <p>stylesheetの変更:<button onclick="sheet_a()">sheet a</button> <button onclick="sheet_b()">sheet b</button></p>
</div>
</body>
</html>


HTMLの追加変更   戻る

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>HTMLの追加変更</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
<!--
function c(f) {
  switch (f) {
  case  1:m.innerHTML ="文字を表示します。" ; break;
  case  2:m.innerHTML ='<table border="1"><tbody><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></tbody></table>' ;break;
  case  3:m.innerHTML ='<input type="button" value="ボタン" onClick=al("ok")>' ;break;
  default:alert("OTHER");    break;
  }
}
//下記の様な書き方もあります。
//document.getElementById("dcvs").innerHTML =xxxxx

function al(a) {alert(a) ;}
//-->
</script>
</head>
<body>
<p>クリックしてください(<a href="#" onclick="c(1)">文字</a>、<a href="#" onclick="c(2)">表</a>、<a href="#" onclick="c(3)">ボタン</a>)</p>
<hr>
<div id="m">
<p>ここに表示します</p>
</div>
<hr>
</body>
</html>

HTMLの書込み   戻る

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLを書き込む</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
<!--
function ini() {
  form.out.value = '<!DOCTYPE html>' + '\n' +
        '<html lang="ja">' + '\n' +
        '<head>' + '\n' +
        '<meta charset="UTF-8">' + '\n' +
        '<title></title>' + '\n' +
        '</head>' + '\n' +
        '<body>' + '\n' +
        '<p>zzzzzzzzzzz</p>' + '\n' +
        '</body>' + '\n' +
        '</html>' ;
}
function go() {
  var page = window.open("", "", "width=400,height=200") ;//新しいページを開く
  page.document.open();
  page.document.write(form.out.value) ;//HTMLを書き込む
  page.document.close();
}
// -->
</script>
</head>
<body onload="ini()"> 
<form name="form">
<p>テキストエリアのHTMLを実行する。</p>
<input type="button" value="実行" onclick="go()"><br>
<textarea name="out" rows="12" cols="30"></textarea>      
</form>   
</body>
</html>

JavaScriptJavaScript/HTMLサイトマップホーム