会員登録後、有料プランで広告を非表示に
詳しくはこちら
おみくじの結果を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…
ボタンを押すと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> <…
過去記事で作成した乱数が取得できるプログラムの数字を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…
過去記事で作成したプログラムで表示できる数字を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(…
ボタンを押すと乱数が取得できるプログラムの作る方法について 1～10までの乱数を取得するプログラム まとめ ボタンを押すと乱数が取得できるプログラムの作る方法について サイコロやおみくじのプログラムを作った際に使用した「Math.floor(Math.random())」を利用する。 1～10までの乱数を取得するプログラム 乱数を取得する部分で10＋1とすることで、1～10までの乱数を取得することができる。 <form><input type="button" value="乱数の取得" onClick="random()"> <span id="ransuu">表示場所</span></fo…
おみくじの確率を変える方法について 確率を変えるには 確率を変えたおみくじ まとめ おみくじの確率を変える方法について 前回作成したおみくじの記述を変えることで、おみくじで出るくじの確率を変えることができる。前回の記事 htmlst.hatenablog.jp 確率を変えるには ・Math.floor(Math.random())で生成する乱数を大きくする。 ・if文内で確率を変える。この部分を変えることで、出るおみくじの確率を変えることができる。 確率を変えたおみくじ ボタンを押すと「表示場所」におみくじの結果が表示される。 （「大吉」になる確率が高いおみくじの場合） <form><inpu…
おみくじを作る方法について 表示場所に表示する方法 まとめ おみくじを作る方法について サイコロを作った際に使用した、「Math.floor(Math.random()」とif文を使うことでおみくじを作ることができる。サイコロを作った記事 htmlst.hatenablog.jp htmlst.hatenablog.jp 表示場所に表示する方法 ボタンを押すと「表示場所」におみくじの結果が表示される。 <form><input type="button" value="おみくじ" onClick="random()"> <span id="omikuji">表示場所</span></form>…
サイコロの目をalertで出力して表示もするには 両方の表示を行うようにするには まとめ サイコロの目をalertで出力して表示もするには 記述を変えることで、alertでの出力と、表示場所への表示を行うことができる。前回の記事 表示場所に表示する方法 htmlst.hatenablog.jpalertで表示する方法 htmlst.hatenablog.jp 両方の表示を行うようにするには onclick内の記述を「;」セミコロンを使って増やすことで、両方の表示を行うことができるようになる。（記述例） onClick="alert(Math.floor(Math.random() * 6) +…
サイコロの目をalertで出力するには alertで乱数を出力する場合 サイコロの目にする場合 別記事で作成したサイコロとの比較 まとめ サイコロの目をalertで出力するには alert();を使うことで出力をすることができる。 alertで乱数を出力する場合 alert();を使って乱数を表示する場合、下記の記述で行うことができる。（例）1～10の乱数を表示する場合 inputタグ内でボタンを作成し、onclickでボタンを押すことで乱数を表示させるようにしている。 <input type="button" onclick="alert(Math.floor(Math.random() *…
乱数の生成を利用してサイコロを作る方法について サイコロの説明とサンプルコード サイコロの表示例 まとめ 乱数の生成を利用してサイコロを作る方法について 乱数をつくる記述「Math.random()」を使用してサイコロをつくる。 サイコロの説明とサンプルコード ・formとinputタグでボタンをつくる。 ・ボタン内の表示を「サイコロ」にする。 ・「サイコロ」ボタンを押すと「表示場所」にランダムなサイコロの目が出る。 <form><input type="button" value="サイコロ" onClick="random()"> <span id="saikoro">表示場所</span…
時刻をリアルタイムで更新させる場合 まとめ 時刻をリアルタイムで更新させる場合 現在の時刻を表示する方法 htmlst.hatenablog.jp曜日も表示させる方法 htmlst.hatenablog.jpコードを追加することで、時刻をリアルタイムで更新させることができる。追加する記述 timer = setInterval('clock()',1000); //時刻の更新 function clock() { document.getElementById("viewTime").innerHTML = getNow(); }曜日を表示させたものに、現在の時刻をリアルタイムで更新させるよう…
曜日も表示させる場合 まとめ 関連記事 htmlst.hatenablog.jp ↑現在の時刻の表示 曜日も表示させる場合 現在の時刻の表示を行う記述の値の取得部分と出力部分に、 下記の記述を加える。値の取得部分 var you = now.getDay(); //曜日 //曜日の配列（日～土） var youbi = new Array("日","月","火","水","木","金","土");出力部分 (" + youbi[you] + ")";を加える。まとめると下記のようになる。 <body> <span id="viewTime"></span> <script type="text…
onloadの使い方について bodyタグ内で「onload」を使用する場合 window.onloadを使う場合 まとめ onloadの使い方について 「onload」を使用することで、ページなどの読み込み時に処理を行うことができる。 onloadにはいくつかの使い方がある。(例) body onload="実行したい処理"; window.onload = function() {実行したい処理}; bodyタグ内で「onload」を使用する場合 「onload」の後に実行したい処理を書く。・ページが表示された後にalertでテキストを表示させたいとき（使用例） <body onload=…
絶対パスと相対パスの違いについて 絶対パスとは 相対パスとは まとめ 絶対パスと相対パスの違いについて HTMLで、特定の場所にアクセスする方法は2つあり、 それぞれ絶対パスと相対パスと呼ばれる。 絶対パスとは そのページに直接アクセスするパスを絶対パスという。（使用例） 絶対パスを利用してアクセスする場合 <a href="http://○○.com/"> 相対パスとは 今いる場所を基準にしてアクセスするパスを相対パスという。（使用例） 同じフォルダ内にあるsampleファイルにアクセスする場合 <a href="./sample">※「./」の部分はアクセスする階層によって異なる まとめ …
メモ張にHTMLファイルを保存するときの注意点 文字化けしないようにする 「〇〇.html」という名前で保存する メモ張にHTMLファイルを保存するときの注意点 文字化けしないようにする メモ帳に保存したときに文字化けしないように、文字コードを変更する。WebページのHTMLをファイルを保存するときに、 HTMLファイルの文字コードの指定を「UTF-8」にしている場合、保存するときの文字コードを「UTF-8」 に変更して保存する。 「〇〇.html」という名前で保存する sampleというページを保存する場合、「sample.html」という名前で保存する。読まれている記事 htmlst.ha…
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…
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> フッター部分…
当ブログに掲載される広告について 当ブログでは、第三者配信の広告サービスGoogleアドセンス、A8.net、Amazonアソシエイト、楽天アフィリエイトなど）を利用しています。 このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当ブログや他サイトへのアクセスに関する情報『Cookie』（氏名、住所、メールアドレス、電話番号は含まれません）を使用することがあります。 またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをクリックしてください。 当ブログが使用しているアクセス解析ツ…
HTMLで文字化けしないようにするには 記述を行う場所 文字コードを指定する 文字化けしない記述を書かないとどうなるか まとめ HTMLで文字化けしないようにするには HTMLで文字化けしないようにするためには、 headタグ内で文字コードを指定する記述を行う。 （日本語が出現する前に文字コードを指定する） 記述を行う場所 <html> <head> この部分に記述を行う <title>タイトル</title> </head> <body> ページの内容 </body> </html> 文字コードを指定する ・UTF-8で指定する場合 <meta http-equiv="Content-Typ…
別タブでリンクを開くようにするには 別タブでリンクを開くようにするには 別タブでリンクを開くようにする場合、 <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…
CSSの書き方の種類 CSSでのページのデザインの記述方法の種類 ページのデザインは基本的にCSSで記述できる。 CSSには3種類の書き方がある。 ・HTMLタグに埋め込む タグに直接記述を行う。一度しか使用できない。 ・HTMLファイル内に埋め込む HTMLファイル内へまとめて記述を行う。 一度設定を行えば、一つのWEBページで同じ設定が繰り返し使用できる。 ・CSSファイルに記述 HTMLファイルとは別に、スタイルシートの設定のみを記述した外部ファイルを用意する。 用意したそのファイルをHTMLファイルとリンクさせ、スタイルシートを実行させる設定の方法。いちばんやさしいHTML5＆CSS3…
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>と記述す…
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…
HTMLとCSS HTMLとは・・・ 「HyperText Markup Language(ハイパーテキスト マークアップ ラングエージ)」の略。 ページの要素や構造を指定する。 CSSとは・・・ 「Cascading Style Sheets(カスケーディング スタイル シート)」の略。 HTMLで作った要素を装飾するスタイルを指定する。 文字の大きさや行間、色や位置といった文書の装飾やレイアウトなどの指定を行うことができる。[rakuten:rakutenkobo-ebooks:13436580:detail]
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…
JavaScriptの書き方 <script>～</script> の間に記述を行う。 (使用例) <script type="text/javascript"><!--JavaScriptのソース// --></script> 「Hello!!」と表示させるプログラムの場合 <html><head><title>タイトル</title></head><body><script type="text/javascript"><!--document.write("Hello!!");// --></script></body></html>
背景の色を変更する場合 <body bgcolor="○○"></body> 文字の色を変更する場合 <font color ="○○"></font> 表全体の背景色を変更する場合 <table bgcolor="○○"></table> 行単位で背景色を変更する場合 <tr bgcolor="○○"></tr> セル単位で背景色を変更する場合 <td bgcolor="○○"></td> ○○の部分には「#FF0000」や「red」等の記述を行い、色の指定を行う。 htmlst.hatenablog.jp
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="文字列">テキ…
HTMLで改行する方法 HTMLで改行を行う場合、<br>タグを使用する。 （例） ・本文<br> ・本文 <br> のように記述を行う。 （使用例） ーーーーーーーーーーーーーーーーーーー HTML文 1行目の本文<br> 2行目の本文<br> 表示 1行目の本文 2行目の本文 ーーーーーーーーーーーーーーーーーーー 読まれている記事 htmlst.hatenablog.jp htmlst.hatenablog.jp htmlst.hatenablog.jp
<p>タグは文書の段落を表す。 <p></p>の形で使用する。 （使用例） ーーーーーーーーーーーーーーーーーーー html文 <p>これは1つ目の段落です</p> <p>これは2つ目の段落です</p> 表示 これは1つ目の段落です ←1行分改行される これは2つ目の段落です ←1行分改行される ーーーーーーーーーーーーーーーーーーー
「ブログリーダー」を活用して、hnさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
