WEB開発– category –
-
JavaScript
JavaScript 文章のロードが完了してからコードを実行する方法
JavaScriptでコードを実行する際、文章のロードが完了してから実行する方法を紹介します。 JavaScriptでコードを書くとき、ページの文章がすべて読み込まれてから実行する方法を知りたいんだけど、どうしたらいいでしょうか? ページの文章がすべて読み込まれてからJavaScriptコードを実行する方法は、DOMContentLoadedイベントを使った方法... -
HTML/CSS
HTMLでの要素の挿入方法:iframeタグとsrcdoc属性の使い方、リンクのターゲット指定について
HTMLには、他のページインラインフレームとして埋め込むことができる機能があります。この記事では、iframeタグやsrcdoc属性を使用して、外部のページや要素をページ内に挿入する方法について解説します。また、リンクのターゲット指定についても紹介します。 HTMLで、他のページをフレームとして埋め込むことができるって知ってる? それはi... -
HTML/CSS
HTMLでの画像、音楽、動画の挿入と表示方法の解説と使い方
HTMLを使えば、ウェブページに画像、音楽、動画を簡単に挿入することができます。しかし、どのようにして正しく表示するかを知らなければ、見苦しいページになってしまうかもしれません。 本記事では、HTMLでの画像、音楽、動画の挿入と表示方法について詳しく解説し、正しい使い方を学ぶことができます。 HTMLで画像や音楽、動画を挿入する... -
JavaScript
JavaScriptで使えるブラウザ上のイベントまとめ
JavaScriptでブラウザ上で使えるイベントについて、初心者でも理解しやすい解説とサンプルコードを紹介します。 ブラウザ上で利用できるJavaScriptのイベントってどんなものがありますか? マウスのクリックイベントや、キーボードの入力のイベント、フォーム操作時のイベントなどがあります。 ブラウザ上で利用できるイベントまとめ イベン... -
JavaScript
JavaScript スタイルクラスを動的に設定、削除する方法
JavaScriptを使用してHTML要素のスタイルクラスを動的に設定したり削除したりする方法を解説します。 Webページのスタイルクラスを動的に設定したいんですが、どうやってやるんですか? スタイルクラスを動的に設定するには、classListプロパティとclassNameプロパティの2つの方法があります。 classListプロパティを使用する方法 スタイル... -
WEB開発
「Dirty Markup」でHTML・CSS・JavaScriptを圧縮した状態から整形する方法
「Dirty Markup」というWebサービスを利用して、HTML・CSS・JavaScriptを圧縮された状態から元の形式に戻す方法を解説します。 HTML・CSS・JavaScriptを圧縮された状態から元の形式に戻す方法ってありますか? 「Dirty Markup」というオンラインツールを利用すると、圧縮されたHTML・CSS・JavaScriptを元の形式に戻すことができます。 「Dirt... -
JavaScript
JavaScript 異なる要素同士を入れ替える方法(replaceChild , replaceWith)
JavaScriptの「replaceChildメソッド」「replaceWithメソッド」を使って、異なる要素同士を入れ替える方法とその違いについて解説します。 replaceChildメソッドを使って異なる要素同士を入れ替える方法を教えてください。 replaceChildメソッドは、親要素の中にある指定した既存の子要素を、新しい子要素に置き換えることができるメソッドで... -
JavaScript
JavaScript 要素を複製するcloneNodeの使い方
JavaScriptのcloneNodeメソッドを使用してHTML要素を複製する方法を解説します。 HTML要素を複製する方法ってありますか? cloneNodeメソッドを使用することで要素を複製することができます。 cloneNodeメソッドとは cloneNodeメソッドは、指定された要素の複製を作成するメソッドです。このメソッドは、指定された要素のツリー構造全体を... -
JavaScript
JavaScript 初回クリック時のみ処理を実行する方法:addEventListenerのonceオプション
JavaScriptで初回クリック時のみ処理を実行する方法を解説します。 初回クリック時のみ処理を実行する方法を教えてください! addEventListenerのonceオプションを使えば、初回クリック時のみ処理を実行することができます。 addEventListenerメソッドのonceオプションとは 初回クリック時の処理を実行する方法には、様々な方法がありますが... -
HTML/CSS
HTML リンクの完全ガイド:a要素からmedia属性、base要素まで
ウェブサイト上での重要な情報伝達手段であるリンク。しかし、HTMLでのリンクの設定方法は複数あり、それぞれの設定によってリンクの挙動が変わるため、混乱することもあります。 この記事では、HTMLでのリンクについて、基本的な a 要素から、外部ファイルとの関係を示す rel 属性、画面幅などによって読み込むCSSファイルを指定する media ... -
HTML/CSS
HTML テーブルの作り方と活用法:表組みの基本から応用まで
HTMLを使用したテーブルは、ウェブページで情報を整理するために非常に有用なツールです。テーブルは、複数の列と行を持ち、表形式でデータを表示することができます。 本記事では、HTMLのテーブルを作成する方法、境界線の設定方法、データセルやヘッダーセルの記述方法、セルの結合方法など、テーブル作成に必要な基本的な情報から応用的な... -
HTML/CSS
HTML リスト: 順序あり・順序なし・名前と値の関連付けリストの使い方と属性解説
HTMLにおけるリストは、ウェブページで情報を整理するために不可欠な機能です。順序ありリスト、順序なしリスト、名前と値の関連付けリストのそれぞれの使い方や属性を理解し、最適な形式を選択することで、より使いやすく、わかりやすいウェブページを作成することができます。 本記事では、HTMLのリストの基本的な使い方から、より高度なカ... -
HTML/CSS
HTMLテキスト表示要素解説:段落、改行、強調、引用、ルビなど
HTMLは、Webページの構造を定義するための重要な言語であり、テキストの表示に関する多くの要素が提供されています。段落や改行、強調表示や引用、ルビなど、これらの要素は、テキストをより明確かつ効果的に表現するために利用されます。 本記事では、HTMLで利用できる主要なテキスト表示要素について詳しく解説します。 HTMLでのテキスト表... -
HTML/CSS
HTMLセクションタグの使い方と解説:header 、 main 、 section 、 aside 、 footer
HTMLにおけるセクションタグは、ウェブページの構造と意味を定義するための重要な要素です。 < header >、< main >、< section >、< aside >、< footer >などのセクションタグを使い分けることで、ウェブページの構造を分かりやすくマークアップすることができます。 本記事では、それぞれのセクションタグの... -
HTML/CSS
HTMLの基礎 – ページタイトル、文字エンコード、meta情報、スマートフォン対応、見出し、div要素、span要素の使い方
Webページを作成する上で、HTMLは非常に重要な言語です。しかし、HTMLには様々な要素があり、初めて触れる人にとっては混乱することがあるかもしれません。 この記事では、HTMLにおけるSEO対策に必要な基礎的な要素について解説します。具体的には、ページタイトルの設定、文字エンコード方式の指定、検索エンジン用meta情報の設定、スマー... -
HTML/CSS
HTML 初心者向けHTML文章の構造とDOCTYPE宣言について
HTMLで文章を作成する上で必要な構造とDOCTYPE宣言について解説します。 HTMLで文章を作成する時の構造について教えて下さい。 HTMLで文章を作成する場合、headやbodyなどの構造を意識する必要があります。それに加えて、DOCTYPE宣言も忘れずに記述する必要があります。 HTML文章の構造について HTML文章は、文章を作成する際に必要な構造で... -
JavaScript
JavaScript フォーム入力値の妥当性を判定する方法
JavaScriptを使ってフォームの入力値の妥当性を判定し、確認する方法を解説します。 フォームの入力値を妥当性を確認する方法を教えてください。 HTMLでもJavaScriptでも、フォームの入力値を検証することができます。 HTMLでフォームの入力値を検証する方法 1つ目は、HTML5で導入されたフォームのinput要素の属性を使用して検証する方法で... -
JavaScript
JavaScript insertBeforeの使い方:新規の要素を任意の箇所に挿入する方法
JavaScriptのinsertBeforeメソッドを使って新規の要素を任意の箇所に挿入する方法を解説します。また、既存の要素を移動する方法を解説します。 JavaScriptで要素を動的に追加する方法を調べているのですが、insertBeforeメソッドを使う方法があるようです。使い方を教えてください! insertBeforeメソッドは親要素の中に新規の要素を挿入す... -
JavaScript
JavaScript 入力判定時にスタイルの切り替え、検証メッセージのカスタマイズをする方法
JavaScriptの疑似クラスを使用して、フォーム検証の結果に応じてスタイルを切り替える方法、検証時のメッセージをカスタマイズする方法を紹介します。 フォーム検証の結果に応じて、スタイルを切り替える方法が知りたいです。どうすればよいですか? 疑似クラスを使用することでフォーム検証に成功した要素に対しては緑色の枠線を、失敗した... -
JavaScript
JavaScript ファイル情報を参照する:fileプロパティを使った方法
JavaScriptを使ってHTMLのinput要素で選択したファイルの情報を取得する方法について詳しく解説します。 HTMLのinput要素で選択したファイルの情報を取得するにはどうしたらいいですか? fileプロパティを使うことで取得することができます。 fileプロパティを使ったファイル情報の取得方法 fileプロパティとは、HTMLのinput要素で選択した...