「表」を横スクロールできるようにする スマートフォンのようなタテ型画面で「表（テーブル）」を表示すると、表の中の文字が縦書きのような状態になってしまい見づらくなる場合があるので、あまりにも酷い場合はCSSで横スクロールができるように設定しまし…

折れ線グラフを作ってみよう Chart.js を使った折れ線グラフの作り方です。ちょっとコツが必要ですが Chart.js を使うと動的にグラフが作成できます。 ※今回作成するグラフのイメージ画像 ※この有料記事で Chart.js を使用した折れ線グラフの基本的な作り方…

画面の横サイズに対応してCSSスタイルを切り替える 画面の横サイズ（ピクセル）に応じてCSSを切り替える方法です。ウェブページをレスポンシブ化する場合に役に立ちます。 ※この記事では画面の横サイズに応じてCSSを切り替える方法を有料（100円）でご紹介し…

～ もくじ ～ JavaScript のサンプル jQuery のサンプル CSS のサンプル HTML のサンプル JavaScript のサンプル Chart.js で動的に折れ線グラフを作る方法 JavaScript でデバイス（端末）を判別して CSS を切り替える方法 ボタンをクリックするとサウンドフ…

// = 600){ $("#p-top-x").fadeIn("slow"); } else if(sc ↑ ページの先頭に戻るボタンを作る 今回は jQuery を使用して長いページをスクロールした時に右下に表示されるページの先頭に戻るためのボタンを作ります。 ※こちらがボタンのイメージです。 ↑ ＜ お…

JavaScript でデバイスを判別して CSS を切り替える 今回は、JavaScript で取得したユーザーエージェントの文字列からデバイスを判別して CSS を切り替える方法です。 var get_useragent = navigator.userAgent; ～ 主な仕様 ～ JavaScript でユーザーエージ…

jQuery と CSS でハンバーガーメニューを作る 今回は jQury と CSS でスマートフォンサイトに欠かせないハンバーガーメニューを作ります。 ～ 主な仕様 ～ ・テキストで作ったメニューアイコンを配置する。・メニューアイコンをタップすると、画面の左に隠れ…

CSSで文字に影をつけたい CSSで文字に影を付けるには「text-shadow」プロパティを設定します。 text-shadow : a b c d e; a・・・右方向にずらす量b・・・下方向にずらす量c・・・ぼかし量d・・・色 /* 右方向と下方向に5pxずらしたグレーで3pxぼけた影を付…

オブジェクトに不透明度を設定したい オブジェクトに不透明度を設定するには「opacity」プロパティを設定します。※不透明度・・・オブジェクトの裏側が見えなくなる割合です。 #sample { opacity: 0.5 } /* オブジェクトの不透明度を0.5（50%）にする */ サ…

オブジェクトを任意の角度で回転させたい オブジェクトを任意の角度で回転させるには「transform」+「rotate」を設定します。 #sample { transform: rotate(25deg) } /* オブジェクトを25度回転する */ サンプルコード（CSS） #kakudo { border: solid red; …

要素のプロパティを初期値（規定値）にしたい 要素のプロパティを初期値または規定値にするには「initial」を設定します。 #sample { color: initial } /* color プロパティを初期値にする */ サンプルコード（CSS） #ao { color : blue;} #shoki { color : …

「マージン」と「パディング」の違いは？ ホームページを作っていて良く間違ってしまうのがマージン（margin）とパディング（padding）です。 マージンとパディングの違いは、スペースをオブジェクトの外側に作るのか、または、内側に作るのかの違いだけなの…

文字列の最初にインデントをつける CSSで文字列の一行目にインデントをつけるには「text-indent」を指定します。 例）text-indent: 1em; ※単位は em px ex % など CSSコード 以下では「indent」という ID を付けた div 要素内の p 要素の一行目に1文字分のイ…

CSSだけで徐々にスタイルを変化させる JavaScript を使わず CSSだけでスタイルを徐々に変化させるには「transition-property」と「transition-duration」を使用します。 transition-property・・・変化させるプロパティtransition-duration・・・変化にかけ…

CSSで画像を中央に配置する CSSで画像を中央に配置するには任意の要素に以下のプロパティを設定します。 CSSコード img { display: block; margin: 0 auto;} ＜表示結果＞ 画像が中央に配置されました。 備考・その他 text-align に center を指定しても画像…

CSSとは？ Cascading Style Sheets — CSS — はHTML を学んだら、まず次に勉強すべき技術です。 HTML はコンテンツの構造と意味論を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。 例えばフ…

Audioでサウンドファイルを再生する JavaScript でサウンドファイルを再生させるには「Audio」オブジェクトを使用します。まず、Audio()のコンストラクタをインスタンス化し、サウンドファイルを指定します。 ※この記事では、JavaScript を使ってサウンドフ…

要素をマウスで移動できるようにする 今回は、jQuery を使って画面上にある任意の要素をマウスドラッグできるようにするサンプルを作ってみましたので、ぜひ参考にしてください。 では、下のサンプルを試してみて下さい。 ※この記事では、画面上にある任意の…

要素をマウスで移動できるようにする 今回は、jQuery を使って画面上にある任意の要素をマウスで移動できるようにするサンプルスクリプトを作ってみましたので、マウスで要素を移動する方法が今ひとつわからない場合は今回のサンプルを参考にしてください。 …

～ 要素を非表示にする ～ jQueryで要素を非表示にするには「hide()」メソッドを使用します。 例）$("#youso").hide(); // 要素を非表示にする HTML ソース <p id="youso">Hello World</p><p><input id="btn" type="button" value="非表示にする" /></p> JavaScript コード ボタン（id=btn）を押すと要素（id=youso）が非表示になります。 $(…

jQueryで要素にダブルクリックイベントを設定する jQueryを使って要素にダブルクリックイベントを設定するには、セレクトした要素に「dblclick()」を接続し、( )内に実行したいスクリプトを記述します。 セレクトした要素.dblclick(); 例）$("#btn").dblclic…

jQuery で要素にクリックイベントを設定する jQuery を使って要素にクリックイベントを設定するには、セレクトした要素に「click()」を接続し、( )内に実行したいスクリプトを記述します。 セレクトした要素.click(); 例）$("#btn").click(); // id="btn"の…

jQueryで要素をフェードインさせる jQuery で要素をフェードインさせるには「fadeIn()」に時間、または、既定値（slow＝ゆっくり、normal＝ふつう、fast＝速い）を設定して使用します。 要素.fadeIn(時間); 時間：ミリ秒,"slow","normal","fast" 例）$("#tes…

jQueryで要素のCSSを変更するには「css」にプロパティ名と値を設定します。 要素.css(プロパティ名,値); 例）$("p").css("background","red"); jQuery + JavaScript ソース 「test-botan3」というIDが付いた要素をクリックすると「sample27」というIDが付い…

～ 指定した日付の曜日を取得する ～ 指定した日付の曜日を取得するには「getDay」メソッドを使用します。曜日は0～6の数値で返されます。 0：日曜日 1：月曜日 2：火曜日 3：水曜日 4：木曜日 5：金曜日 6：土曜日 // mydate で指定した日の曜日を取得する…

～ 1970年1月1日0時0分0秒から現在までの経過時間をミリ秒で取得したい ～ 1970年1月1日0時0分0秒から現在までの経過時間をミリ秒で取得するには「Date.now()」メソッドを使用します。 // 現在までの経過時間をミリ秒で取得する例）var genzai = Date.now();…

～ 文字列をJavaScriptコードとして評価する ～ 文字列をJavaScriptコードとして評価するには「eval」関数を使用します。 // 文字列（var a = "TEST";）をJavaScriptコードとして評価する例）eval('var a = "TEST";'); JavaScript サンプルコード eval('var …

～ 小数点以下を切り捨てる ～ 数値の小数点以下を切り捨てるには「Math.floor」関数を使用します。 // 数値「a」の小数点以下を切り捨てた後、結果を「kekka」に返す例）var kekka = Math.floor(a); JavaScript サンプルコード var a = 9.9999;var kekka = …

～ 小数点以下を四捨五入する ～ 数値を小数点以下で四捨五入するには「Math.round」関数を使用します。 // 数値「a」を小数点以下で四捨五入した結果（整数）を返す。例）var kekka = Math.round( a ); JavaScript サンプルコード var a = 1.85;var kekka =…

～ 乱数を発生させる ～ 乱数を発生させるには「Math.random」関数を使用します。乱数は浮動小数点で発生します。 // 0～100までの乱数を発生させる例）var kekka = Math.random() * 100; JavaScript サンプルコード var kekka = Math.random() * 100;docume…