9マス将棋

9マス将棋のルール

▶︎ 9マス将棋をプレイする 通常の将棋とのルールの違い 9マス将棋は、3×3の9マスの盤面で戦うミニ将棋です。駒の動かし方や基本的なルールは通常の将棋と同じです。 通常の将棋と違うところは次の通りです。 ・将棋盤のマス目数・初期配置・成れ...
独学プログラミング初心者の覚書(備忘録)

document.getElementById()は必要ない?HTMLのid名で要素が参照できる

getElementById() は、HTMLで指定したid名の要素を参照します。 <div id="test"></div> let test = document.getElementById("test") また、HTML内で指定した...
独学プログラミング初心者の覚書(備忘録)

【JavaScript】スクロール禁止してドラッグ操作を可能にする方法

何度も同じ内容を忘れては調べてるので、備忘録として要点をまとめたページを作りました。 要素をドラッグして移動するとき、サイト自体も一緒にスクロールしてしまうことがあります。 こちらがスクロールを無効にするJavaScriptです。 cons...
独学プログラミング初心者の覚書(備忘録)

【HTML】文書構造に使えるdiv以外のタグ「nav」「section」「article」「aside」

HTMLを作成するとき、こんな文書構造にしていませんか? <div> <div> <div> <div> <div> <div> HTMLで文書構造に使用できるタグには、div以外にも目的にあったタグが用意されています。 <header> ...
独学プログラミング初心者の覚書(備忘録)

アップデートでCSSやJavaScriptを即反映させる方法

何度も同じ内容を忘れては調べてるので、備忘録として要点をまとめたページを作りました。 外部ファイルのCSSやJavaScriptを修正しても更新されない理由は、ブラウザのキャッシュクリアができていないためです。 対策:クエリパラメータを付け...
独学プログラミング初心者の覚書(備忘録)

【CSS】要素を好きな位置に配置する「position: relative;」と「position: absolute;」

何度も同じ内容を忘れては調べてるので、備忘録として要点をまとめたページを作りました。 「position: absolute;」を使うとき、親要素に「position: relative;」または「position: absolute;」を...
独学プログラミング初心者の覚書(備忘録)

JavaScriptで矢印を描画するには「clipPath」を使う

CSSでは多角形を描画するために「clip-path」を使います。 clip-path: polygon(50px 0, 100px 100px, 0 100px); 頂点の座標(x, y)が、(50, 0) (100, 100) (0, ...
ソースコード

【CSS】どんな機種の解像度にもあうレイアウト

width: 24%; 幅を「画面の幅の24%」に指定します。 height: 70vw; 高さを「画面の幅の70%」に指定します。 一番最初にするべきこと ブラウザゲームやウェブアプリを作るときに一番最初にするべきことは、 ・画面のレイア...
ソースコード

JavaScriptでタイマーの作り方【setIntervalの使い方】

全体のソースコード まずは完成したソースコードをご覧ください。 HTMLのコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" hre...
プログラミングをはじめよう

JavaScript Anywhere「JSAnywhere」を使ってみよう【iPhone・iPad】

iPhoneのスマホやiPadのタブレットでJavaScriptをプログラミングするなら「JavaScript Anywhere JSAnywhere」がおすすめです。 とても使いやすく、面倒な設定なしでどこでもプログラミングできます。 J...