HTML/CSS/JavaScript– category –
-
【Webデザイン集】コピペで使えるWebコーディング（HTML/CSS/JavaScript）
Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例を纏めました。（随時更新中）実装方法などは別記事にコードなどを公開していますので、気になる実装... -
【JavaScript】ドラッグ＆ドロップで表示を入れ替えるUI
本記事では、ドラッグ＆ドロップで複数のアイテムの順番を入れ替える実装方法を解説します。 実装例）To Do リストの順番を入れ替える Task 1 Task 2 Task 3 Task 4 【H... -
【JavaScript】ドラッグ＆ドロップの実装方法
本記事では、以下のように直感的にアイテムを操作できるドラッグ＆ドロップの基本的な実装方法について紹介します。 こちらのブロックをドラッグできます。 ドラッグし... -
【JavaScript】<iframe>の高さを引用先ページの高さに自動調節（別ドメイン）
先日、引用先ページが同一ドメインの場合の<iframe>の高さ（height）を、引用先ページの高さに揃える方法について紹介しました。 ただしこの方法は、引用先ページ... -
【JavaScript】<iframe>の高さを引用先ページの高さに自動調節（同一ドメイン）
<iframe>タグを用いると、一つのWebページに別のHTMLページを埋め込むことができます。他のサイトはもちろん、Youtube動画やGoogleマップなどを表示することもで... -
【CSS】レスポンシブデザインに役立つプロパティ＆関数一覧
PC、タッチパネル、スマホなど、大きさが異なるデバイスに対応するための「レスポンシブデザイン」は今や欠かせません。本記事では、レスポンシブデザインに便利なCSSプ... -
【CSS】aspect-ratioを使って画像や動画の縦横比を簡単指定
CSSのaspect-ratioプロパティを使って、画像や動画などのメディア要素の縦横比（アスペクト比）を一定に保つ方法を紹介します。特にレスポンシブデザインにおいては、メ... -
【CSS】clamp()を使ったレスポンシブデザイン
clamp()はCSSで使われる関数。フォントサイズなどの値に最小値と最大値を設けたうえで、理想値を指定できるツールです。特にレスポンシブデザインでは、メディアクエリ... -
【JavaScript】addEventListenerで使えるイベントタイプ一覧
addEventListener メソッドで使用できるイベントハンドラー（イベントタイプ）のうち、代表的なものをカテゴリ別に紹介します。一部を除き、実装例も載せました。また、... -
【JavaScript / Local Storage】To-Doリストを実装してみた
先日、JavaScriptの「Local Storage」の基本的な使い方について記事をまとめました。 今回は、より実践的な使い方として「To Do リスト（ページを更新したり閉じたりし...
