HTML勉強メモ - にほんブログ村

おみくじの結果をalertで出力する方法

おみくじの結果をalertで出力する方法についてまとめおみくじの結果をalertで出力する方法について別記事で作成したおみくじの結果をalertで出力する。別記事 htmlst.hatenablog.jpjavascript内で取得した乱数に対応したif文の条件の結果をalertで表示する。 <form><input type="button" value="おみくじ" onClick="random()"> </form> <script type="text/javascript"> function random() { var rand = Math.floor( Math.r…

2017/05/28 00:00

ボタンを押すと1～10000までの乱数が取得できるプログラム

過去記事で作成した乱数が取得できるプログラムの数字を1～10000に変更したもの。過去記事 htmlst.hatenablog.jp htmlst.hatenablog.jp htmlst.hatenablog.jp 1～10000までの乱数を取得するプログラムまとめ 1～10000までの乱数を取得するプログラム数字部分を変更することで、取得できる乱数を1～1000にする。 <form><input type="button" value="乱数の取得" onClick="random10000()"> <span id="ransuu10000">表示場所</span></form> <…

2017/05/21 00:00

ボタンを押すと1～1000までの乱数が取得できるプログラム

過去記事で作成した乱数が取得できるプログラムの数字を1～1000に変更したもの。過去記事 htmlst.hatenablog.jp htmlst.hatenablog.jp 1～1000までの乱数を取得するプログラムまとめ 1～1000までの乱数を取得するプログラム数字部分を変更することで、取得できる乱数を1～1000にする。 <form><input type="button" value="乱数の取得" onClick="random1000()"> <span id="ransuu1000">表示場所</span></form> <script type="text/javascri…

2017/05/07 00:00

ボタンを押すと1～100までの乱数が取得できるプログラム

過去記事で作成したプログラムで表示できる数字を1～100までにする。過去記事 htmlst.hatenablog.jp 1～100までの乱数を取得するプログラムまとめ 1～100までの乱数を取得するプログラム <form><input type="button" value="乱数の取得" onClick="random100()"> <span id="ransuu100">表示場所</span></form> <script type="text/javascript"> function random100() { var num = Math.floor( Math.random(…

2017/05/06 00:00

ボタンを押すと1～10までの乱数が取得できるプログラム

ボタンを押すと乱数が取得できるプログラムの作る方法について 1～10までの乱数を取得するプログラムまとめボタンを押すと乱数が取得できるプログラムの作る方法についてサイコロやおみくじのプログラムを作った際に使用した「Math.floor(Math.random())」を利用する。 1～10までの乱数を取得するプログラム乱数を取得する部分で10＋1とすることで、1～10までの乱数を取得することができる。 <form><input type="button" value="乱数の取得" onClick="random()"> <span id="ransuu">表示場所</span></fo…

2017/03/17 20:00

おみくじの確率を変える方法

おみくじの確率を変える方法について確率を変えるには確率を変えたおみくじまとめおみくじの確率を変える方法について前回作成したおみくじの記述を変えることで、おみくじで出るくじの確率を変えることができる。前回の記事 htmlst.hatenablog.jp 確率を変えるには・Math.floor(Math.random())で生成する乱数を大きくする。・if文内で確率を変える。この部分を変えることで、出るおみくじの確率を変えることができる。確率を変えたおみくじボタンを押すと「表示場所」におみくじの結果が表示される。（「大吉」になる確率が高いおみくじの場合） <form><inpu…

2017/03/16 13:52

おみくじを作る方法

おみくじを作る方法について表示場所に表示する方法まとめおみくじを作る方法についてサイコロを作った際に使用した、「Math.floor(Math.random()」とif文を使うことでおみくじを作ることができる。サイコロを作った記事 htmlst.hatenablog.jp htmlst.hatenablog.jp 表示場所に表示する方法ボタンを押すと「表示場所」におみくじの結果が表示される。 <form><input type="button" value="おみくじ" onClick="random()"> <span id="omikuji">表示場所</span></form>…

2017/03/15 05:07

サイコロの目をalertで出力して表示もする方法

サイコロの目をalertで出力して表示もするには両方の表示を行うようにするにはまとめサイコロの目をalertで出力して表示もするには記述を変えることで、alertでの出力と、表示場所への表示を行うことができる。前回の記事表示場所に表示する方法 htmlst.hatenablog.jpalertで表示する方法 htmlst.hatenablog.jp 両方の表示を行うようにするには onclick内の記述を「;」セミコロンを使って増やすことで、両方の表示を行うことができるようになる。（記述例） onClick="alert(Math.floor(Math.random() * 6) +…

2017/03/12 23:12

サイコロの目をalertで出力する方法

サイコロの目をalertで出力するには alertで乱数を出力する場合サイコロの目にする場合別記事で作成したサイコロとの比較まとめサイコロの目をalertで出力するには alert();を使うことで出力をすることができる。 alertで乱数を出力する場合 alert();を使って乱数を表示する場合、下記の記述で行うことができる。（例）1～10の乱数を表示する場合 inputタグ内でボタンを作成し、onclickでボタンを押すことで乱数を表示させるようにしている。 <input type="button" onclick="alert(Math.floor(Math.random() *…

2017/03/09 02:39

乱数の生成を使用してサイコロを作る方法

乱数の生成を利用してサイコロを作る方法についてサイコロの説明とサンプルコードサイコロの表示例まとめ乱数の生成を利用してサイコロを作る方法について乱数をつくる記述「Math.random()」を使用してサイコロをつくる。サイコロの説明とサンプルコード・formとinputタグでボタンをつくる。・ボタン内の表示を「サイコロ」にする。・「サイコロ」ボタンを押すと「表示場所」にランダムなサイコロの目が出る。 <form><input type="button" value="サイコロ" onClick="random()"> <span id="saikoro">表示場所</span…

2017/03/01 02:03

時刻をリアルタイムで更新させる方法

時刻をリアルタイムで更新させる場合まとめ時刻をリアルタイムで更新させる場合現在の時刻を表示する方法 htmlst.hatenablog.jp曜日も表示させる方法 htmlst.hatenablog.jpコードを追加することで、時刻をリアルタイムで更新させることができる。追加する記述 timer = setInterval('clock()',1000); //時刻の更新 function clock() { document.getElementById("viewTime").innerHTML = getNow(); }曜日を表示させたものに、現在の時刻をリアルタイムで更新させるよう…

2017/02/21 01:38

現在の時刻の他に曜日も表示させる方法

曜日も表示させる場合まとめ関連記事 htmlst.hatenablog.jp ↑現在の時刻の表示曜日も表示させる場合現在の時刻の表示を行う記述の値の取得部分と出力部分に、下記の記述を加える。値の取得部分 var you = now.getDay(); //曜日 //曜日の配列（日～土） var youbi = new Array("日","月","火","水","木","金","土");出力部分 (" + youbi[you] + ")";を加える。まとめると下記のようになる。 <body> <span id="viewTime"></span> <script type="text…

2017/02/20 00:37

onloadの使い方

onloadの使い方について bodyタグ内で「onload」を使用する場合 window.onloadを使う場合まとめ onloadの使い方について「onload」を使用することで、ページなどの読み込み時に処理を行うことができる。 onloadにはいくつかの使い方がある。(例) body onload="実行したい処理"; window.onload = function() {実行したい処理}; bodyタグ内で「onload」を使用する場合「onload」の後に実行したい処理を書く。・ページが表示された後にalertでテキストを表示させたいとき（使用例） <body onload=…

2017/02/18 23:34

絶対パスと相対パスの違い

絶対パスと相対パスの違いについて絶対パスとは相対パスとはまとめ絶対パスと相対パスの違いについて HTMLで、特定の場所にアクセスする方法は2つあり、それぞれ絶対パスと相対パスと呼ばれる。絶対パスとはそのページに直接アクセスするパスを絶対パスという。（使用例）絶対パスを利用してアクセスする場合 <a href="http://○○.com/"> 相対パスとは今いる場所を基準にしてアクセスするパスを相対パスという。（使用例）同じフォルダ内にあるsampleファイルにアクセスする場合 <a href="./sample">※「./」の部分はアクセスする階層によって異なるまとめ …

2017/02/05 16:21

メモ張にHTMLファイルを保存するときの注意点

メモ張にHTMLファイルを保存するときの注意点文字化けしないようにする「〇〇.html」という名前で保存するメモ張にHTMLファイルを保存するときの注意点文字化けしないようにするメモ帳に保存したときに文字化けしないように、文字コードを変更する。WebページのHTMLをファイルを保存するときに、 HTMLファイルの文字コードの指定を「UTF-8」にしている場合、保存するときの文字コードを「UTF-8」に変更して保存する。「〇〇.html」という名前で保存する sampleというページを保存する場合、「sample.html」という名前で保存する。読まれている記事 htmlst.ha…

2017/01/31 03:37

meta keywordsの書き方

meta keywordsの書き方書き方について書く内容などについて meta keywordsの書き方書き方について meta keywordsは単語を「カンマ（,）」で区切って使う。 ×：<meta name="keywords" content="ブログ HTML CSS"> 〇：<meta name="keywords" content="ブログ,HTML,CSS"> 書く内容などについて・単語区切りで書く・ページのコンテンツとマッチしていることを書く・最大10単語程度で書く読まれている記事 htmlst.hatenablog.jp htmlst.hatenablog.jp…

2017/01/22 15:17

HTML5で追加されたタグ

HTML5で追加されたタグ2つ・headerタグ・footerタグ HTML5で追加されたタグ2つ・headerタグ文書やセクションのヘッダーを表す。 <header>～</header> ・footerタグ文書やセクションのフッターを表す。 <footer>～</footer>（使用例） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <header> ヘッダー部分 </header> <div>コンテンツ部分</div> <footer> フッター部分…

2017/01/21 22:45

プライバシーポリシー

当ブログに掲載される広告について当ブログでは、第三者配信の広告サービスGoogleアドセンス、A8.net、Amazonアソシエイト、楽天アフィリエイトなど）を利用しています。このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当ブログや他サイトへのアクセスに関する情報『Cookie』（氏名、住所、メールアドレス、電話番号は含まれません）を使用することがあります。またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをクリックしてください。当ブログが使用しているアクセス解析ツ…

2017/01/17 00:00

HTMLで文字化けしないようにする方法

HTMLで文字化けしないようにするには記述を行う場所文字コードを指定する文字化けしない記述を書かないとどうなるかまとめ HTMLで文字化けしないようにするには HTMLで文字化けしないようにするためには、 headタグ内で文字コードを指定する記述を行う。（日本語が出現する前に文字コードを指定する）記述を行う場所 <html> <head> この部分に記述を行う <title>タイトル</title> </head> <body> ページの内容 </body> </html> 文字コードを指定する・UTF-8で指定する場合 <meta http-equiv="Content-Typ…

2017/01/15 07:00

別タブでリンクを開くようにする方法

別タブでリンクを開くようにするには別タブでリンクを開くようにするには別タブでリンクを開くようにする場合、 <a href="" target="_blank"></a>を使用する。(使用例) <a href="Webサイト等のURL/" target="_blank">Webサイト名等</a>このブログの場合、 <a href="http://「設定したURL」.hatenablog.jp" target="_blank">HTML勉強メモ</a>と記述することで、「HTML勉強メモ」のリンクをクリックすると別タブでこのブログのトップページが開く。関連記事 htmlst.hatenabl…

2017/01/12 23:15

CSSの書き方の種類

CSSの書き方の種類 CSSでのページのデザインの記述方法の種類ページのデザインは基本的にCSSで記述できる。 CSSには3種類の書き方がある。・HTMLタグに埋め込むタグに直接記述を行う。一度しか使用できない。・HTMLファイル内に埋め込む HTMLファイル内へまとめて記述を行う。一度設定を行えば、一つのWEBページで同じ設定が繰り返し使用できる。・CSSファイルに記述 HTMLファイルとは別に、スタイルシートの設定のみを記述した外部ファイルを用意する。用意したそのファイルをHTMLファイルとリンクさせ、スタイルシートを実行させる設定の方法。いちばんやさしいHTML5＆CSS3…

2017/01/12 21:04

HTML4とHTML5の違い

HTML5という言葉を聞きますが、 HTML4と比べてどのような違いがあるか調べてみました。 HTML4とHTML5の違いソースコード内の「DOCTYPE宣言」が異なる文字コードの指定が異なる今まで難しかったことが簡単にできるまとめ HTML4とHTML5の違いソースコード内の「DOCTYPE宣言」が異なる HTML4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> と記述する。HTML5 <!DOCTYPE html>と記述す…

2017/01/05 21:56

JavaScriptで現在の時刻を表示する方法

JavaScriptで現在の時刻を表示する方法まとめ JavaScriptで現在の時刻を表示する方法 JavaScriptを使うことでページに現在の時刻を表示することができる。 <body> <span id="viewTime"></span> <script type="text/javascript"> document.getElementById("viewTime").innerHTML = getNowTime(); function getNowTime() { var now = new Date(); var year = now.getFullYear();//年 va…

2016/12/31 14:14

HTMLとCSS

HTMLとCSS HTMLとは・・・「HyperText Markup Language(ハイパーテキストマークアップラングエージ)」の略。ページの要素や構造を指定する。 CSSとは・・・「Cascading Style Sheets(カスケーディングスタイルシート)」の略。 HTMLで作った要素を装飾するスタイルを指定する。文字の大きさや行間、色や位置といった文書の装飾やレイアウトなどの指定を行うことができる。[rakuten:rakutenkobo-ebooks:13436580:detail]

2016/12/26 07:05

JavaScriptで乱数を表示する方法

JavaScriptで乱数を表示する方法まとめ JavaScriptで乱数を表示する方法乱数を発生させる場合、Math.random()を使用する。・0～1の乱数を取得する var rand = Math.random();・0～9の乱数を取得する var rand = Math.floor(Math.random() * 10);・1～100の乱数を取得する var rand = Math.floor(Math.random() * 100) + 1; ・5～15の乱数を取得する var rand = Math.floor(Math.random() * 11) + 5;（Math.fl…

2016/12/25 08:00

JavaScriptの書き方

JavaScriptの書き方 <script>～</script> の間に記述を行う。 (使用例) <script type="text/javascript"></script> 「Hello!!」と表示させるプログラムの場合 <html><head><title>タイトル</title></head><body><script type="text/javascript"></script></body></html>

2016/12/21 20:00

HTMLで背景や文字の色を変更する場合

背景の色を変更する場合 <body bgcolor="○○"></body> 文字の色を変更する場合 <font color ="○○"></font> 表全体の背景色を変更する場合 <table bgcolor="○○"></table> 行単位で背景色を変更する場合 <tr bgcolor="○○"></tr> セル単位で背景色を変更する場合 <td bgcolor="○○"></td> ○○の部分には「#FF0000」や「red」等の記述を行い、色の指定を行う。 htmlst.hatenablog.jp

2016/12/20 20:00

HTMLでのリンクの作り方

HTMLでリンクを作る場合 <a href=""></a> を使用する。（使用例） <a href="Webサイト等のURL/">Webサイト名等</a> ・画像からリンクをする場合 <a href="Webサイト等のURL/"> <img src="画像のURL" width="10" height="10"alt="画像"></a> ・新しいタブで開かせる場合 <a href="Webサイト等のURL/" target="_blank">Webサイト名等</a> ページ内リンクを作る場合リンク元 <a href="#文字列">テキスト</a> リンク先 <a name="文字列">テキ…

2016/09/27 23:21

HTMLで改行する方法

HTMLで改行する方法 HTMLで改行を行う場合、<br>タグを使用する。（例）・本文<br> ・本文 <br> のように記述を行う。（使用例）ーーーーーーーーーーーーーーーーーーー HTML文 1行目の本文<br> 2行目の本文<br> 表示 1行目の本文 2行目の本文ーーーーーーーーーーーーーーーーーーー読まれている記事 htmlst.hatenablog.jp htmlst.hatenablog.jp htmlst.hatenablog.jp

2016/09/20 21:02

<p>タグの意味

<p>タグは文書の段落を表す。 <p></p>の形で使用する。（使用例）ーーーーーーーーーーーーーーーーーーー html文 <p>これは1つ目の段落です</p> <p>これは2つ目の段落です</p> 表示これは1つ目の段落です ←1行分改行されるこれは2つ目の段落です ←1行分改行されるーーーーーーーーーーーーーーーーーーー

2016/09/20 21:01