JavaScript/HTMLおぼえがき

｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜

画面表示

テキストエリア　　　戻る

<!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 ini() {document.myform.inp.value ="文字の追加";}
function ad() {document.myform.out.value+=document.myform.inp.value+"\n";}
function cr() {document.myform.out.value="";}
// -->
</script>
</head>
<body onload="ini()">
<p>テキストエリア</p>
<hr>
<form name="myform">
<p>
<input type="text" name="inp" size="38" >
<p>
<input type="button" value="追加" onclick="ad()">
<input type="button" value="クリア" onclick="cr()">      
</p>
<p>
<textarea name="out" rows="5" cols="30">ここに文字を追加 </textarea>      
</p>   
</form>   
</body>
</html>

日付･時間・曜日の表示　　　戻る

<!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>
<!--
  week= new Array("日","月","火","水","木","金","土");
function today() {
  setTimeout("today()",1000); 
  day=new Date();
  cy=day.getYear();          //年
  cn=day.getMonth()+1;       //月
  cd=day.getDate();          //日
  cw=day.getDay();           //週  
  ch=day.getHours();         //時間
  cm=day.getMinutes();       //分
  cs=day.getSeconds();       //秒
  document.myform.dctime.value="  "+cy+"年"+cn+"月"+cd+"日（"+week[cw]+"）"+ch+"："+cm+"："+cs ;
  document.myform.d2.value=day.toLocaleString();  //ローカル編集
  document.myform.d3.value=day.toGMTString();     //世界標準時間
}
// -->
</SCRIPT>
</head>
<BODY onload="today()">
<p>時間の表示</p>
<hr>
<FORM Name="myform">
<p>編集して表示：
<INPUT NAME="dctime" value="" size=40><p>ローカル編集：
<INPUT NAME="d2" value="" size=40><p>世界標準時刻：
<INPUT NAME="d3" value="" size=40><p>
</form>
</BODY>
</HTML>

システム情報表示　　　戻る

<!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">
</head>
<body>
<p>システム情報</p>
<hr>
<script>
<!--
document.write("<p>ブラウザ名："+navigator.appName.toUpperCase()+"</p>");
document.write("<p>ユーザエジェント："+navigator.userAgent.toUpperCase()+"</p>");
document.write("<p>リンク元URL："+document.referrer + "</p>");
document.write("<p>ブラウザ横のサイズ："+document.body.clientWidth + "</p>");
document.write("<p>ブラウザ縦のサイズ："+document.body.clientHeight + "</p>");
document.write("<p>モニタ横のサイズ："+screen.width  + "表示可能領域（"+screen.availWidth  + "）");
document.write("<p>モニタ縦のサイズ："+screen.height + "表示可能領域（"+screen.availHeight + "）");
// -->
</script>
<p>
<p>
</body> 
</html>

文字サイズ・太さ・色、背景色の変更　　　戻る

<!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 cs(n) {document.body.style.fontSize=n;}
function ct(n) {
  if (n==0) {document.body.style.fontWeight="normal";
  } else if (n==1) {document.body.style.fontWeight="bold";}
}
function cl(n) {document.body.style.color=n;}
function bc(n) {document.body.style.backgroundColor=n;}
// -->
</script>
</head>
<body>
<p>文字サイズ・太さ・色、背景色の変更
</p>
<hr>
<p>文字サイズ【   
<a href="#" onclick="cs('18pt');" style="font-size:18pt;">18</a>| 
<a href="#" onclick="cs('14pt');" style="font-size:14pt;">14</a>| 
<a href="#" onclick="cs('12pt');" style="font-size:12pt;">12</a>| 
<a href="#" onclick="cs('10pt');" style="font-size:10pt;">10</a><a style="font-size: 10pt">】</a>太さ【 
<a href="#" onclick="ct('1');" style="font-weight:bold;">太字</a>| 
<a href="#" onclick="ct('0');" style="font-weight:normal;">標準</a>】
</p>
<p>色【 
<a href="#" onclick="cl('#000000');" style="Color:#000000">■</a> 
<a href="#" onclick="cl('#ff0000');" style="Color:#ff0000">■</a> 
<a href="#" onclick="cl('#0000ff');" style="Color:#0000ff">■</a> 
<a href="#" onclick="cl('#ffff00');" style="Color:#ffff00">■</a>】背景色【 
<a href="#" onclick="bc('#ffffff');" style="Color:#ffffff">■</a> 
<a href="#" onclick="bc('#e0e0e0');" style="Color:#e0e0e0">■</a> 
<a href="#" onclick="bc('#ffe0e0');" style="Color:#ffe0e0">■</a> 
<a href="#" onclick="bc('#e0e0ff');" style="Color:#e0e0ff">■</a> 
<a href="#" onclick="bc('#ffffe0');" style="Color:#ffffe0">■</a>】 
</p> 
<p>　</p> 
<p>　</p> 
</BODY> 
</HTML>

ｗｅｂフォント　　　戻る

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google 日本語のwebフォント</title> 
<meta name="viewport" content="width=device-width,initial-scale=1">        
<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
<style>
<!--
*{
  background-color: #ffffff;color: #000000;font-size: 18px;
}
.tate{
-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.f_mplus1p{
 font-family: "Mplus 1p";
}
.f_roundedmplus1c{
  font-family: "Rounded Mplus 1c";
}
.f_hannari{
  font-family: "Hannari";
}
.f_kokoro{
  font-family: "Kokoro";
}
.f_sawarabimincho{
  font-family: "Sawarabi Mincho";
}
.f_sawarabigothic{
  font-family: "Sawarabi Gothic";
}
.f_nikukyu{
  font-family: "Nikukyu";
}
.f_nicomoji{
  font-family: "Nico Moji";
}
.f_notosansjapanese{
  font-family: "Noto Sans Japanese";
}
-->
</style>
</head>
<body>
<p>Google 日本語webフォントが無料で利用可能です</p>
<p class="f_mplus1p">◎Google 日本語webフォントです。「M+ 1p」</p>
<p class="f_roundedmplus1c">◎Google 日本語webフォントです。「Rounded M+ 1c」</p>
<p class="f_hannari">◎Google 日本語webフォントです。「はんなり明朝」</p>
<p class="f_kokoro">◎Google 日本語webフォントです。「こころ明朝」</p>
<p class="f_sawarabimincho">◎Google 日本語webフォントです。「さわらび明朝」</p>
<p class="f_sawarabigothic">◎Google 日本語webフォントです。「さわらびゴシック」</p>
<p class="f_nikukyu">◎Google 日本語webフォントです。「ニクキュウ」</p>
<p class="f_nicomoji">◎Google 日本語webフォントです。「ニコモジ」</p>
<p class="f_notosansjapanese">◎Google 日本語webフォントです。「Noto Sans Japanese」</p>
<div class="tate">
<p class="f_mplus1p">◎Google 日本語webフォントです。「M+ 1p」</p>
<p class="f_roundedmplus1c">◎Google 日本語webフォントです。「Rounded M+ 1c」</p>
<p class="f_hannari">◎Google 日本語webフォントです。「はんなり明朝」</p>
<p class="f_kokoro">◎Google 日本語webフォントです。「こころ明朝」</p>
<p class="f_sawarabimincho">◎Google 日本語webフォントです。「さわらび明朝」</p>
<p class="f_sawarabigothic">◎Google 日本語webフォントです。「さわらびゴシック」</p>
<p class="f_nikukyu">◎Google 日本語webフォントです。「ニクキュウ」</p>
<p class="f_nicomoji">◎Google 日本語webフォントです。「ニコモジ」</p>
<p class="f_notosansjapanese">◎Google 日本語webフォントです。「Noto Sans Japanese」</p>
</div>
</body>
</html>

ソースコード色分け表示　　　戻る

Google Code Prettifyを使って、ソースコードを読みやすく色分けします。
<script>タグを記述するだけでJavaScriptとCSSなどの必要なライブラリを自動的に読み込んでcode-prettifyを使える状態にします。
スクリプトURLの最後にクエリ文字を追加してオプションを指定することができます。
また指定cssの追加・変更ににより、表示デザインの変更が出来ます。
表示するソースコードのＨＴＭＬにおける特殊文字（&、"、<、>）は、マークアップ文字（&amp、&quot、&lt、&gt）に変換しておく必要があります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>code-prettify</title>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
<style>
.prettyprint ol{
  padding: 1em 3em;      /* 間隔の調整（必要であれば）*/
  white-space: pre-wrap; /* 折り返し */
}
.prettyprint ol.linenums > li{
  list-style-type: decimal;      /* 1行ごとに行番号を表示 */
  border-left:solid 1px #ffffff; /* 区切り線を表示 */
  padding-left:0.5em;            /* 間隔の調整（必要であれば）*/
}
</style>
</head>
<body>
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;code-prettify&lt;/title&gt;
&lt;script src=&quot;https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert&quot;&gt;&lt;/script&gt;
&lt;style&gt;
.prettyprint ol{
  padding: 1em 3em;      /* 間隔の調整（必要であれば）*/
  white-space: pre-wrap; /* 折り返し */
}
.prettyprint ol.linenums &gt; li{
  list-style-type: decimal;      /* 1行ごとに行番号を表示 */
  border-left:solid 1px #ffffff; /* 区切り線を表示 */
  padding-left:0.5em;            /* 間隔の調整（必要であれば）*/
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;pre class=&quot;prettyprint linenums&quot;&gt;
&amp;lt;!--ここに表示するソースコードを設置します。--&amp;gt;
&lt;/pre&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</body>
</html>


｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜