HTML勉強メモ

HTMLやJavaScriptなどのことについて書いています。

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

おみくじの結果をalertで出力する方法について まとめ おみくじの結果をalertで出力する方法について 別記事で作成したおみくじの結果をalertで出力する。 別記事 htmlst.hatenablog.jpjavascript内で取得した乱数に対応したif文の条件の結果をalertで表示す…

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

過去記事で作成した乱数が取得できるプログラムの数字を1~10000に変更したもの。過去記事 htmlst.hatenablog.jp htmlst.hatenablog.jp htmlst.hatenablog.jp 1~10000までの乱数を取得するプログラム まとめ 1~10000までの乱数を取得するプログラム 数字部…

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

過去記事で作成した乱数が取得できるプログラムの数字を1~1000に変更したもの。過去記事 htmlst.hatenablog.jp htmlst.hatenablog.jp 1~1000までの乱数を取得するプログラム まとめ 1~1000までの乱数を取得するプログラム 数字部分を変更することで、取得…

ボタンを押すと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.ra…

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

ボタンを押すと乱数が取得できるプログラムの作る方法について 1~10までの乱数を取得するプログラム まとめ ボタンを押すと乱数が取得できるプログラムの作る方法について サイコロやおみくじのプログラムを作った際に使用した「Math.floor(Math.random())…

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

おみくじの確率を変える方法について 確率を変えるには 確率を変えたおみくじ まとめ おみくじの確率を変える方法について 前回作成したおみくじの記述を変えることで、おみくじで出るくじの確率を変えることができる。前回の記事 htmlst.hatenablog.jp 確率…

おみくじを作る方法

おみくじを作る方法について 表示場所に表示する方法 まとめ おみくじを作る方法について サイコロを作った際に使用した、「Math.floor(Math.random()」とif文を使うことでおみくじを作ることができる。サイコロを作った記事 htmlst.hatenablog.jp htmlst.ha…

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

サイコロの目をalertで出力して表示もするには 両方の表示を行うようにするには まとめ サイコロの目をalertで出力して表示もするには 記述を変えることで、alertでの出力と、表示場所への表示を行うことができる。前回の記事 表示場所に表示する方法 htmlst…

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

サイコロの目をalertで出力するには alertで乱数を出力する場合 サイコロの目にする場合 別記事で作成したサイコロとの比較 まとめ サイコロの目をalertで出力するには alert();を使うことで出力をすることができる。 alertで乱数を出力する場合 alert();を…

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

乱数の生成を利用してサイコロを作る方法について サイコロの説明とサンプルコード サイコロの表示例 まとめ 乱数の生成を利用してサイコロを作る方法について 乱数をつくる記述「Math.random()」を使用してサイコロをつくる。 サイコロの説明とサンプルコー…

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

時刻をリアルタイムで更新させる場合 まとめ 時刻をリアルタイムで更新させる場合 現在の時刻を表示する方法 htmlst.hatenablog.jp曜日も表示させる方法 htmlst.hatenablog.jpコードを追加することで、時刻をリアルタイムで更新させることができる。追加する…

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

曜日も表示させる場合 まとめ 関連記事 htmlst.hatenablog.jp ↑現在の時刻の表示 曜日も表示させる場合 現在の時刻の表示を行う記述の値の取得部分と出力部分に、 下記の記述を加える。値の取得部分 var you = now.getDay(); //曜日 //曜日の配列(日~土) …

onloadの使い方

onloadの使い方について bodyタグ内で「onload」を使用する場合 window.onloadを使う場合 まとめ onloadの使い方について 「onload」を使用することで、ページなどの読み込み時に処理を行うことができる。 onloadにはいくつかの使い方がある。(例) body onlo…

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

絶対パスと相対パスの違いについて 絶対パスとは 相対パスとは まとめ 絶対パスと相対パスの違いについて HTMLで、特定の場所にアクセスする方法は2つあり、 それぞれ絶対パスと相対パスと呼ばれる。 絶対パスとは そのページに直接アクセスするパスを絶対パ…

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

メモ張にHTMLファイルを保存するときの注意点 文字化けしないようにする 「〇〇.html」という名前で保存する メモ張にHTMLファイルを保存するときの注意点 文字化けしないようにする メモ帳に保存したときに文字化けしないように、文字コードを変更する。Web…

meta keywordsの書き方

meta keywordsの書き方 書き方について 書く内容などについて meta keywordsの書き方 書き方について meta keywordsは単語を「カンマ(,)」で区切って使う。 ×:<meta name="keywords" content="ブログ HTML CSS"> 〇:<meta name="keywords" content="ブログ,HTML,CSS"> 書く内容などについて ・単語区切りで書く ・ページのコンテンツとマッチしていることを</meta></meta>…

HTML5で追加されたタグ

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

プライバシーポリシー

当ブログに掲載される広告について 当ブログでは、第三者配信の広告サービスGoogleアドセンス、A8.net、Amazonアソシエイト、楽天アフィリエイトなど)を利用しています。 このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示す…

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

HTMLで文字化けしないようにするには 記述を行う場所 文字コードを指定する 文字化けしない記述を書かないとどうなるか まとめ HTMLで文字化けしないようにするには HTMLで文字化けしないようにするためには、 headタグ内で文字コードを指定する記述を行う。…

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

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

CSSの書き方の種類

css

CSSの書き方の種類 CSSでのページのデザインの記述方法の種類 ページのデザインは基本的にCSSで記述できる。 CSSには3種類の書き方がある。 ・HTMLタグに埋め込む タグに直接記述を行う。一度しか使用できない。 ・HTMLファイル内に埋め込む HTMLファイル内…

HTML4とHTML5の違い

HTML5という言葉を聞きますが、 HTML4と比べてどのような違いがあるか調べてみました。 HTML4とHTML5の違い ソースコード内の「DOCTYPE宣言」が異なる 文字コードの指定が異なる 今まで難しかったことが簡単にできる まとめ HTML4とHTML5の違い ソースコード…

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

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

HTMLとCSS

HTMLとCSS HTMLとは・・・ 「HyperText Markup Language(ハイパーテキスト マークアップ ラングエージ)」の略。 ページの要素や構造を指定する。 CSSとは・・・ 「Cascading Style Sheets(カスケーディング スタイル シート)」の略。 HTMLで作った要素を装飾…

JavaScriptで乱数を表示する方法

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

JavaScriptの書き方

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>

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

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

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="文字列">テキ…</a>

HTMLで改行する方法

HTMLで改行する方法 HTMLで改行を行う場合、<br>タグを使用する。 (例) ・本文<br> ・本文 <br> のように記述を行う。 (使用例) ーーーーーーーーーーーーーーーーーーー HTML文 1行目の本文<br> 2行目の本文<br> 表示 1行目の本文 2行目の本文 ーーーーーーーーーーーーーー…

<p>タグの意味

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