HTML– tag –

はじめに 前回の記事では、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...

はじめに 「要素を横並びにしたいのに、思い通りにいかない」「中央揃えのやり方がいまいち分からない」という経験はありませんか？ これらの多くは、flexbox（フレックスボックス）を使うことで簡単に解決できます。 前回の記事では、CSSの基本となるボッ...

はじめに 「余白を設定したのにレイアウトが崩れた」「paddingとmarginの違いがよくわからない」という経験はありませんか？ これらの多くは、CSSのボックスモデルを理解することで解決できます。 前回の記事では、テキストの配置や装飾に関するプロパティ...

Webページで文字列の配置や装飾を制御する「CSSテキスト関連プロパティ」の基本についての解説です。 はじめに Webページで「文字の位置を変えたい」「下線を引きたい」「文字間隔を広げてスッキリ見せたい」と思ったことはありませんか？ こういった文字...

Webページの文字デザインを決める「CSSフォント」の基本を初心者向けに解説します。 はじめに 文字デザインは、Webサイトの印象を大きく左右します。CSSでフォントを正しく指定することは、サイトの見やすさ（視認性）だけでなく、サイトの雰囲気を伝える...