HTML/CSS/JavaScript– category –
-
【CSS】レスポンシブデザインに役立つプロパティ＆関数一覧
PC、タッチパネル、スマホなど、大きさが異なるデバイスに対応するための「レスポンシブデザイン」は今や欠かせません。本記事では、レスポンシブデザインに便利なCSSプ... -
【CSS】aspect-ratioを使って画像や動画の縦横比を簡単指定
CSSのaspect-ratioプロパティを使って、画像や動画などのメディア要素の縦横比（アスペクト比）を一定に保つ方法を紹介します。特にレスポンシブデザインにおいては、メ... -
【CSS】clamp()を使ったレスポンシブデザイン
clamp()はCSSで使われる関数。フォントサイズなどの値に最小値と最大値を設けたうえで、理想値を指定できるツールです。特にレスポンシブデザインでは、メディアクエリ... -
【JS】addEventListenerで使えるイベントタイプ一覧
addEventListener メソッドで使用できるイベントハンドラー（イベントタイプ）のうち、代表的なものをカテゴリ別に紹介します。一部を除き、実装例も載せました。また、... -
【JS / Local Storage】To-Doリストを実装してみた
先日、JavaScriptの「Local Storage」の基本的な使い方について記事をまとめました。 今回は、より実践的な使い方として「To Do リスト（ページを更新したり閉じたりし... -
【JS / fetch API】郵便番号から住所を検索して表示する方法
先日、JavaScriptの「fetch API」の基本的な使い方について記事をまとめました。 今回は、より実践的な使い方として「郵便番号から住所を取得する」というよくあるシチ... -
【JS】初心者ガイド：fetch API & DOMparser
JavaScriptの「fetch API」を使うことで、Webサイトやアプリからデータを取得したり、サーバーにデータを送信したりすることができます。本記事では、「fetch API」の簡... -
【JS API】初心者ガイド：Local Storage
「Local Storage」とは、ブラウザ内にデータを半永久的に保存できるJavaScript APIです。データはキーとバリューのペアで保存され、ブラウザを閉じても保持されます。容... -
【CSS】初心者ガイド：疑似クラスセレクター／:has()
特定の要素を選択するための「CSSセレクター」には、要素の状態や位置に基づいてスタイルを適用できる疑似クラスセレクター（:hoverなど）があります。本記事では、その... -
【CSS】テキストなどの要素をスライド表示するアニメーション
本記事では、以下のように指定したテキストなどをゆっくり／徐々に表示するアニメーション（スライドイン）の実装方法を紹介します。（ボタンをクリックすると、実装し... -
【JS&CSS】画像をクリックしたら拡大表示する方法（モーダルウィンドウ）
画像をクリック または タップすると、画面中央に原寸大の画像をフワッと表示する方法を紹介します。（右のレインボーの画像をクリック または タップしてみてください... -
【JS&CSS】モーダルウィンドウの作り方
ボタンクリックで、画面中央にフワッと別ウィンドウを表示させる方法（モーダルウィンドウの作り方）について、HTML / CSS / JavaScriptコードを公開します。 モーダル... -
【JS&CSS】ハンバーガーメニューの作り方
本記事では、ホームページなどでよく見かける画面右（左）上の三本線アイコン（ハンバーガーメニュー）の実装方法（HTML/CSS/JavaScriptコード）を、実装例とともに紹介... -
【JS】ダイアログボックス表示方法まとめ
JavaScriptでは、以下のような3つのダイアログボックスを表示する機能が備わっています。それぞれ alert(), prompt(), confirm() という関数を使用します。 実装例 Aler... -
【CSS】「もっと見る」ボタンの実装方法
HTMLとCSSのみ（JavaScript不要）で、『もっと見るボタン』を実装するには？ クリックすることで、ニュース記事やブログなどの一覧を表示してくれるボタンの実装方法を... -
【CSS】アイコンや画像を、テキスト先頭の好きな位置に表示させる方法
文頭にSNSなどのアイコンを表示させたいが、サイズや位置が上手く調整できない！CSSの「before疑似要素」を使うことで、テキスト先頭に配置するアイコンや画像を細かく... -
【JS&CSS】クリックやホバーで表示を切り替える（タブメニュー）
タイトルなどの見出し（タブ）をクリック または マウスホバーすると、それに応じた内容を表示させる『タブメニュー』の実装方法（HTML/CSS/JavaScriptコード）を、実装... -
【CSS】テキストを縦方向に回転 / 縦書きにする方法
transformやwriting-modeプロパティを使って、通常横書きになってしまうテキストを縦方向に回転させたり、小説や新聞のように縦書きにしたりする方法を紹介します。 実... -
【CSS】ヘッダーを上部に固定し、スクロールで追従させる方法
CSSプロパティposition: fixed;を使って、Webページの上部にヘッダーを固定し、画面をスクロールさせるとヘッダーがついてくる（ヘッダーが常時表示される）方法を紹介... -
【CSS】画像の外側 / 内側に影をつける方法
box-shadowプロパティを使って、画像の外側に影を付けて浮かび上がったように見せたり、逆に内側に影を付けて中心にフォーカスさせたように見せたりする方法を紹介しま...
