HTML– tag –

はじめに 前回の記事では、function 関数名() { }の形で、名前を付けた関数を作る方法を解説しました。 今回は、名前を付けずにその場で作る関数である無名関数と、それをさらに短く書けるアロー関数を解説します。あわせて、関数を渡して使うarray_filter...

はじめに JavaScriptシリーズでは、Webページに動きや反応を加える方法を全21回にわたって解説してきました。 今回から新しいシリーズとして、PHPについて基本から解説していきます。PHPは、このサイト（kurumico.com）自体を動かしているWordPressの中身...

はじめに 前回の記事では、<img>タグ（イメージ）をJavaScriptで操作する方法を解説しました。 今回は、お問い合わせフォームや検索窓など、Webサイトに欠かせないフォーム（<form>タグ）をJavaScriptで操作する方法を解説します。フォーム要...

はじめに 前回の記事では、<a>タグ（リンク）をJavaScriptで操作する方法を解説しました。 今回は、Webページに欠かせないもう1つの要素、イメージ（<img>タグ）をJavaScriptで操作する方法を解説します。srcの書き換えによる画像切り替え、読...

はじめに 前回の記事では、addEventListenerを使ったイベント処理の基本と、イベント委任の仕組みについて解説しました。 今回は、そのイベント処理の知識も使いながら、Webページに欠かせないリンク（<a>タグ）をJavaScriptで操作する方法を解説し...

はじめに 前回の記事では、documentオブジェクトを使ったHTML要素の取得・操作方法について解説しました。 今回は、「ボタンがクリックされた」「フォームが送信された」「キーが押された」といった、ユーザーの操作やブラウザの状態変化に反応するイベン...

はじめに 前回の記事では、alert・confirm・promptを使ったダイアログボックスの表示方法について解説しました。 今回は、windowオブジェクトの子オブジェクトであるdocumentを使って、HTML要素を取得・操作する方法を解説します。ボタンをクリックしたら...

はじめに 前回の記事では、window.open()を使ったウィンドウの開閉・移動・リサイズについて解説しました。 今回は、ブラウザが標準で用意しているダイアログボックス（alert・confirm・prompt）の使い方を解説します。「保存しました」といった通知や、「...

はじめに 前回の記事では、windowオブジェクトを頂点とするブラウザの仕組み（BOM）について解説しました。 今回は、そのwindowオブジェクトを使って新しいウィンドウを開く・閉じる・移動する・サイズを変えるといった、ウィンドウそのものを操作する方法...

はじめに 前回の記事では、JavaScriptとは何か、そして<script>タグを使った基本的な書き方について解説しました。 今回は、JavaScriptが動作する土台となっている「ブラウザ」そのものについて解説します。JavaScriptは「Webページ（HTML）」だけで...

はじめに 「ボタンを押したら画面の表示が切り替わる」「入力欄に何も書かずに送信すると注意メッセージが出る」――こうした動きのあるWebページを見たことはありませんか？ これらはすべて、JavaScriptというプログラミング言語によって実現されています。...

はじめに 「表を作ったら枠線が二重になってしまう」「セルの中の余白をうまく調整できない」「スマホで見ると表がはみ出して崩れてしまう」という経験はありませんか？ これらはすべて、CSSのテーブル関連プロパティを理解すれば解決できます。 前回の記...

はじめに 「箇条書きの先頭にある黒丸（マーカー）を消したい」「番号付きリストの数字をアルファベットに変えたい」「ナビゲーションメニューを作ろうとしたら、なぜか変な余白やマーカーが残ってしまう」という経験はありませんか？ これらはすべて、CSS...

はじめに 「ボタンにマウスを乗せたとき、色がパッと切り替わるだけで味気ない」「読み込み中のくるくる回るアイコンをCSSだけで作りたい」「同じ動きを自動で繰り返すアニメーションを付けたい」という経験はありませんか？ これらはすべて、CSSのアニメ...

はじめに 「背景に画像を敷きたいけど、思った位置に表示されない」「背景画像がタイル状に繰り返されてしまう」「画面いっぱいに背景画像を敷いたのに、リサイズすると崩れる」という経験はありませんか？ これらはすべて、CSSの背景（background）関連プ...

はじめに 「マウスを乗せたときだけボタンの色を変えたい」「リストの1番目の要素だけ余白をなくしたい」「アイコンをCSSだけで追加したい」という経験はありませんか？ これらはすべて、疑似クラス（pseudo-class）と疑似要素（pseudo-element）というCSS...

はじめに 「スクロールしてもヘッダーを画面上部に固定したい」「バッジやアイコンを要素の右上にピタッと重ねたい」という経験はありませんか？ これらの多くは、position（ポジション）プロパティを使うことで簡単に解決できます。 前回の記事では、縦横...

はじめに 「flexboxだと縦横のレイアウトが思うように組めない」「カード一覧をきれいに整列させたい」という経験はありませんか？ これらの多くは、Grid（グリッド）レイアウトを使うことで簡単に解決できます。 前回の記事では、要素を1方向に並べるflex...