研修講師のネタ帳

ラジオボタンを選択した際の色を変えたい

cssのプロパティaccent-colorを使って以下のように色を変えることができます。 ラジオボタンのラベルの色を変化させて押しやすくする　最後までお読みいただきありがとうございます。

データが入力できるダイアログを表示したい

ポイントは10行目のprompt()というメソッドです。 このメソッドの戻り値がダイアログで入力した値です。 ダイアログを出すメソッドは全部で以下の3つがあります。 メソッド 説明 事例 alert(文字列) 警告ダイア […]

画像を使ったスライドショーを作りたい

以下は3枚の画像を使ったスライドショーです。 Bootstrap5を使っています。 参考リンク スライドショーはBootstrapでCarousel（回転木馬）と呼ばれます。 なお、写真はLorem Picsumをつかっ […]

ビデオを再生したい

以下はビデオを再生するサンプルです。 ポイントは9行目でビデオタグを指定している点、10行目でソースを指定している点です。 9行目の属性について説明を加えます。 autoplay:自動で再生します。以下のmutedと組み […]

アラートボックスを閉じるボタンで閉じたい

以下は閉じるボタンを使ってアラートボックスを閉じるサンプルです。 Bootstrap5を使っています。 参考リンク

一定時間経過後に処理を実行させたい

以下は5秒後に注意書きを消すサンプルです。 setTimeout()を使うことで一定時間経過後に処理を実行させることができます。 この関数の第一引数は実行させたい関数名です。 第二引数は経過時間でミリ秒単位で指定します。 […]

フォーカスされたら1行テキスト入力の枠色を変えたい

:focus擬似クラスを使用することで、1行テキスト入力が操作で要素がフォーカスされた際のスタイルを指定することができます。 以下のサンプルのポイントは、8～10行目のところです。 擬似クラスを使いフォーカスがあたった際 […]

マウスイベントを検知したい

addEventListenerメソッドをDOMに追加することによってマウスイベントを検知することができます。(Sample) 以下の3つの例はいずれもHello Worldという文字列の色を変化させる処理です。 add […]

定期的に処理を実行させたい

setIntervalメソッドを使用することで一定間隔で処理を実行させることができます。(Sample) setIntervalメソッドの第一引数は定期的に実行したい処理、第二引数は実行間隔をミリ秒単位で設定します。 こ […]

棒グラフを表示させたい

Chart.jsというJavaScriptのライブラリを使用することで簡単に棒グラフを作成することができます。(Sample) ポイントは以下の3点です。 ①　8行目のリンクでCDNを読み込んでいる点 ②　22行目でグラ […]

円グラフを表示させたい

Chart.jsというJavaScriptのライブラリを使用することで簡単に円グラフを作成することができます。(Sample)

折れ線グラフを表示させたい

Chart.jsというJavaScriptのライブラリを使用することで簡単に折れ線グラフを作成することができます。(Sample) ポイントは以下の3点です。 ①　8行目のリンクでCDNを読み込んでいる点 ②　20行目以 […]

画像をスライドさせたい

swiperというJavaScriptのライブラリを使用することで簡単にスライドショーを作成することができます。

画像を丸く切り抜きたい

「border-radius:50%」とすることで正方形の画像の４隅を丸く加工することができます。radiusとは半径のことです。ボーダーを正方形の1辺の半分を半径とする円にする、ということになります。 ただし、2つ目の […]

グーグルウェブフォントを使いたい

グーグルウェブフォントを使いたい　最後までお読みいただきありがとうございます。

スピナーを表示してユーザーの処理待ちのストレスを軽減したい

スピナーを表示してユーザーの処理待ちのストレスを軽減したい　最後までお読みいただきありがとうございます。

日付を表示させたい

ポイントは15行目です。月は1月が0番目の月ということで0から数えます。 最後までお読みいただきありがとうございます。

モーダルウィンドウを作る

【modal】とは「モードに入っている」という程度の意味です。 後ろの画面は制御できないようにすることで前画面に集中してもらいます。 モーダルウィンドウを作る　最後までお読みいただきありがとうございます。

ブラウザバックのリンクを作成したい

最後までお読みいただきありがとうございます。

データ送信を確認するダイアログを出したい

ポイントは8行目の <form onSubmit = "イベント発生時の処理">という書き方です。 onSubmitというのは「送信した時」という意味のイベントハンドラ【event handler】です。 入 […]

フォーム部品をグループ化してわかりやすくする

フォーム部品を囲む枠をfiledset、枠につける表題をlegendといいます。 フォーム部品をグループ化してわかりやすくする　最後までお読みいただきありがとうございます。

ラジオボタンのラベルの色を変化させて押しやすくする

イメージ ラジオボタンのラベルの色を変化させて押しやすくする　最後までお読みいただきありがとうございます。

時計を表示させたい

以下のようなリアルタイムの時計をJavaScriptを使って表示します。 ポイントは2点。 1．数値を2桁で表示するために1桁の場合は先頭に'0'を挿入するという分岐処理をしています。 2．setIntervalメソッド […]

確認ダイアログを表示する

下にスクロールしたら「ページトップへ戻る」を表示させたい

ポイントは、24行目のaddEventListener(イベント,コールバック関数)という書き方です。 add(加える)Event(イベントを)Listener(聞くものを)ということでイベントを感知するメソッドであるこ […]

サーブレットでXSS対策をしたい

次のようなメソッドを持つクラスを作成してstaticメソッドに任せてはどうでしょうか？ 実行結果は以下の通り。 サーブレットでXSS対策をしたい　最後までお読みいただきありがとうございます。

中央ぞろえにしたい

上下中央揃え おそらく最も手軽な方法は画像等の親要素にdisplay: flex;を設定する方法です。(Sample) height: 100vh;という指定は高さをウィンドウサイズと同じにするためです。この指定がないと […]

マウスを載せたら画像を変化させたい

cssを使って以下のようにすることができます。 あるいは、以下のシンプルな方法もあります。 最後までお読みいただきありがとうございます。