JavaScript(ジャバスクリプト) JavaScriptでiframeの幅と高さを画面サイズ（ウィンドウ幅）に合わせて自動調整するスクリプトの作り方
iframeを使うと、別のサイトやページを埋め込むことができ、自分のWebページに他のコンテンツを追加することができます。 そこで、JavaScriptを使用してiframeの幅を画面サイズに合わせて調整する方法を紹介します。前回は「幅」を...
JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト) JavaScript(ジャバスクリプト) JavaScriptでiframeの幅を画面サイズ（ウィンドウ幅）に合わせて調整するスクリプトの作り方
Webページ上に外部のコンテンツを埋め込むために、よく使用されるのがiframeです。iframeを使うと、別のサイトやページを埋め込むことができ、自分のWebページに他のコンテンツを追加することができます。 しかし、iframeを使用する...
JavaScript(ジャバスクリプト) 【JavaScript】テキストをクリップボードにコピーする方法 (Text Copy)
JavaScriptで画像をクリップボードにコピーする方法について解説します。実際にサンプルコードを用いながら学びましょう。 JavaScriptでテキストをクリップボードにコピーする JavaScriptでテキストをクリップボードにコピー...
JavaScript(ジャバスクリプト) 【JavaScript】マウスカーソルを追従する図形（マウスストーカー）を作る｜CSS
CSSとJavaScriptを使って、マウスに追従する図形や色を作ってみます。 サンプルはこちら マウスに追従する図形を作る流れ 以下は、CSSを使用してマウスに追従する図形を作成するための基本的な手順です。 HTMLファイルで、マウスに追...
JavaScript(ジャバスクリプト) 【JavaScript】リダイレクトする方法（location.href）
ページを開いた時に別のページにリダイレクトさせるJavaScriptです。 ページをリダイレクトさせる（location.href） location.href location.hrefは、locationオブジェクトのプロパティです。こ...
JavaScript(ジャバスクリプト) 【DOM】DOM (Document Object Model) とは？ツリー構造について
DOM (Document Object Model) とは？ DOM (Document Object Model) とは、HTML ページや XML 文書を構成する要素を树状構造として表現する仕組みです。この DOM を操作することで、...
JavaScript(ジャバスクリプト) 加算代入演算子 (+=)とは？【JavaScript】
加算代入演算子 (+=)とは？ 加算代入演算子(+=)は、変数に対して値を加算するための演算子です。 以下のように使用します。 変数 += 値 加算代入演算子の実行例 例えば、下記のようなプログラムを実行したとします。 下記のようなコードを...
JavaScript(ジャバスクリプト) 【JavaScript】画面移動時にアンカーの位置がズレる？ときの対応方法
そんなことがあるのかな…？と思ったら、そんなことがありましたので記録として残しておきたいと思います…。 アンカー要素がfixedの場合にずれる？ アンカー要素の position が fixedの場合が考えられます。上部のヘッダーが固定され...
JavaScript(ジャバスクリプト) 【JavaScript】document.createElement(“a”);リンク・リンクターゲット設定方法
document.createElement("a");にリンクやターゲットを設定してみます。 document.createElement("a");だけではリンクが設定されない document.createElement("a");で...
JavaScript(ジャバスクリプト) fetch(url)で中身を取り出す（Object.values()・Object.keys()・Object.entries()）
前回の続きです。Object.values()・Object.keys()・Object.entries()で中身のデータを取り出していきます。 Object.values() まずは、Object.values()でデータを取得してみます...
JavaScript(ジャバスクリプト) object Objectの中身を取り出す（Javascript）
前回、Fetch APIでGASを使って「object Object」を取り出すことに成功しましたが、この続きです。 object Objectの中身は？ このFetch APIでGASを使って公開側のページでJavascriptを使った結...
JavaScript(ジャバスクリプト) .textContentと.innerHTMLの違いについて（JavaScript）
JavaScriptでテキストを出力する.textContentと.innerHTMLの２つの違いについて。 .textContent .textContentは、文字をそのまま出力します。 HTMLがテキストとしてそのまま出力されました。...
JavaScript(ジャバスクリプト) 【JavaScript】続・ボタンクリックで画面を表示非表示させる方法｜style.display
前回、JavaScriptを使ってボタンクリック時に画面に要素を表示させる方法をお話しましたが、その続きです。今回はクリックで「表示・非表示」できるようにします。 前回のお話はこちら▼ 要素を非表示にする（display:none） こちら...
JavaScript(ジャバスクリプト) 【JavaScript】ボタンクリックで画面に要素を表示させる方法｜style.display
JavaScriptを使って、ボタンや要素のクリック時に画面に要素を表示させる方法です。 document.getElementById("id").～ 「document.getElementById」を使って、要素のidを取得します。 ...
JavaScript(ジャバスクリプト) 【JavaScript入門】JavaScriptで使える演算子の一覧
JavaScriptを扱っていると、毎回使える演算子が分からなくなるので、メモ。 加算(+) 足し算です。 <script> const a = 20; const b = 10; const c = a + b; document.wri...
JavaScript(ジャバスクリプト) 【JavaScript】new 演算子とは？基本と使い方について
JavaScriptの「const sample = new Sample('A', 'B', 'C');」という書き方について解説していきます。 new 演算子は組み込みオブジェクト型のインスタンスを作成する ひとことで言うと「組み込みオ...
JavaScript(ジャバスクリプト) 【JavaScript】.addEventListener() とは？
JavaScriptを学んでいると「.addEventListener()」がよく出てきますが、よく分からなかったので・・・メモ。 .addEventListener() addEventListener() は EventTarget イ...
JavaScript(ジャバスクリプト) 【JavaScript】document.currentScriptについて
document.currentScript document.currentScriptを実行すると、現在実行しているscript要素を取得することができます。 Document.currentScript プロパティは、現在処理中で、 ...
JavaScript(ジャバスクリプト) Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML’)
「Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')」というメッセージで詰まってしまいました。 このエラー…何？？ 全体のコード 本文の「こんにちは...
JavaScript(ジャバスクリプト) 【Javascript】ルビを削除するブックマークレットを作る方法
HTML上で文字にルビ（ふりがな）が付けられている際に、こちらのルビを消した状態で表示したいと思った時に使える方法です。 青空文庫のルビを削除するブックマークレットを作る 「ブックマークレート」という機能を使うことで、ルビを消した状態で同じ...
