HTML
&CSS
Quick Reference
当サイトで紹介するプルダウンメニューやアコーディオンなどの本来JavaScriptを要する動きについて、全てCSSのみで実現しています。よって極一部の例外（対象となる解説ページにその旨を記載しています）を除きAMPサイトでも正常に表示されます。
目次
JavaScript 2から順に素数を表示するプログラム Javascript
素数の個数を指定して表示 素数の範囲を指定して表示 2から順に素数を表示するプログラム Javascipt 1から順に素数を表示する 表示したい素数の個数を入力 表示する素数の個数: 表示する 2から順に素数を表示するプログラム <label for="numPrimes">表示する素数の個数:</label> <in...
JavaScript 指定範囲内の素数を表示するプログラム Javascript
素数の個数を指定して表示 素数の範囲を指定して表示 指定範囲内の素数を表示するプログラム Javascipt 指定した範囲内の素数を表示する 範囲を指定してください。 開始数: 終了数: 表示する 指定範囲内の素数を表示するプログラムのコード <label for="startNum">開始数:</label> <in...
JavaScript 積み上げ 横棒グラフメーカー HTMLとCSSをコピペできる
積み上げ 横棒グラフメーカー プログラム Javascipt 積み上げ 横棒グラフ %の入力 10項目まで入力できます。4つでよいときは、残り6つを0としてください。合計100としてください。 A B C D E F G H I J Update Chart .bar-chart { width: 100%; heig...
JavaScript シンプルオセロ 単純な時間つぶしオセロゲーム Javascript
オセロのプログラム Javascipt シンプルオセロ コンピュータは何も考えません。おける場所に置いていきます。 数独解答作成プログラム <div class="board"></div> .board { display: grid; grid-template-columns: repeat(8, 50px); ...
JavaScript ４マス数独の問題をランダムに作成 ワードやエクセルに貼り付けできる Javascript
4マス数独 - 入門 9マス数独 - 標準 16マス数独 - 難関 ４マス数独のプログラム Javascipt 数独の解答となるパネル 一般的な9マス数独ではなく、簡単な4マス数独です。１～４の数値を割り当てます。 作成・更新をタップすれば何度でも表示されます。 選択、コピーをしてワードやエクセルに張り付けることができ...
JavaScript 難関１６マス数独の問題をランダムに作成 ワードやエクセルに貼り付けできる Javascript
4マス数独 - 入門 9マス数独 - 標準 16マス数独 - 難関 難関！ １６マス数独のプログラム Javascipt 数独の解答となるパネル 一般的な9マス数独ではなく、16マス数独です。１～１６の数値を割り当てます。 作成・更新をタップすれば何度でも表示されます。 選択、コピーをしてワードやエクセルに張り付けるこ...
JavaScript 数独の問題をランダムに作成 ワードやエクセルに貼り付けできる Javascript
4マス数独 - 入門 9マス数独 - 標準 16マス数独 - 難関 数独のプログラム Javascipt 数独の解答となるパネル 以下が数独の解答パネルとなります。作成・更新をタップすれば何度でも表示されます。 選択、コピーをしてワードやエクセルに張り付けることができ、いくつかのセルの数値を消せば数独としての問題を作成...
HTML dl dt dd の横並びと縦並び スマートフォンとPCでの表示の切り替え Prog-lab
Prog-labの趣旨は解説よりも、メモ置き場に近い情報コーナーです。 タグの各意味と説明、目的 dl,dt,ddを用い、tableのように横並びに表示させる。スマートフォンなどについてはdd,dtで改行させる。 dl 説明リスト dt 説明たしい用語 dd 説明 用語が上揃えとなるパターン 下線(border-bot...
HTML&CSSリファレンス dtとddの間で改行しない コピペで使えるHTML+CSS
用語の説明などで用いられる<dt>はブロックレベル要素ですから、原則として横並びにはできない。ここでは改行をせず、きれいに横並び、かつ、縦方向にも揃えて表示する方法について解説します。
JavaScript 10連ガチャを作ろう! 第1回 設計 仕組みを考える 乱数とfor文をマスター シュレータ作りで学ぶプログラミング講座
第1回 設計〜仕組みを考える - 乱数とfor文をマスター 第2回 ★とキャラ番号を割り当てる - IF文をマスター 第3回 ★とキャラ名を表示する - 配列をマスター 本講座では10連ガチャシミュレータを作ることで、プログラミングの考え方を1から学びます。 必要なものはメモ帳(Windowボタン→Windowsアク...
HTML&CSSリファレンス スクロールするとdivが表示されるようにする コピペで使えるHTML+CSS+JavaScript
無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSSリファレンス ブラウザ右下に常に文章やBOX(div)を表示する コピペで使えるHTML+CSS
無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSSリファレンス 画像を加工せずに切り抜き表示する コピペで使えるHTML+CSS
無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSSリファレンス CSSのみで縦型の棒グラフをつくる コピペで使えるHTML+CSS グラフ編
無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSSリファレンス CSSのみで円グラフをつくる コピペで使えるHTML+CSS グラフ編
無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSSリファレンス 漢字を含む日本語全角文字を斜め斜体にする コピペで使えるHTML+CSS
ここでは文字の斜体化について説明します。em要素を適用することで斜体化されるわけですが、この方法では漢字や平仮名といった全角文字は斜めになりません。多くの日本語フォントが斜体を用意していないためです。そこで、全く別の方法によって、全角文字を斜体化します。 HTML全角文字の斜体化メーカー 文章を入力→コードを取得でHT...