カラーピッカーはライブラリを使わなくても自作することができるのをご存知でしょうか。 ツールアプリやECサイトなど、色んな場面でカラーピッカーは登場するので知らない人はこの機会に覚えてしまいましょう。 また動画もあるので必 […]
Tips
カラーピッカーで選択した色をJavaScriptで取得する【input type=”color”】
Tips
Tips
JavaScriptでスライダーの値を取得、表示する【input type=”range”】
「体力ゲージ」「音量バー」「明るさ調整」など、スライダーを使った値の操作はinputを使うと簡単に実装できます。 もちろんライブラリを使っても良いですが、JavaScriptについて深く理解していないとカスタマイズできな […]
Tips
HTMLで入力フォーム、ラジオボタン、チェックボックス、セレクトタブを作る方法からファイル添付とプレビューまで一気に解説【input,label,textarea,select,optgroup, file, FileReader, readAsText, readAsDataURL, 画像, テキスト(.txt), csvデータ】
「コーディング作業の中でフォームを作るのが苦手に感じている」「クライアントや上司から色んな種類の入力項目を求められて毎回大変」「ReactやVueになってから突然inputタグにvalueが登場して意味が分かっていない」 […]
Tips
JavaScriptで音楽や音声を再生する方法【audioタグ】
JavaScriptを使った音楽データや音声データの操作はとても簡単です。 Webサイトやアプリに音楽プレーヤーを実装することは一見難しそうに見えますが、事前に色んなプロパティやメソッドが用意されています。 また再生や停 […]
Tips
Webサイトに動画を埋め込む方法【HTML、JavaScript】
Webサイトに動画を埋め込むのはとても簡単です。 プログラミング初学者であれば画像の埋め込みはご存じだと思いますが、動画の埋め込みも同じような手順で実現できます。 近年は動画を使ったサービスや情報発信が増えているので、サ […]
Tips
JavaScriptで画像を操作（表示、変更、サイズ指定）する方法
JavaScriptで画像を操作する方法はとても簡単です。 HTMLでimgタグを使った画像の表示ができるのであれば問題ないように、事前にJavaScriptで便利なプロパティが用意されているからです。 本日はJavaS […]
Tips
はみ出たテキストを(…)省略して表示するCSSのテクニック【text-overflow, overflow, white-space】
ウェブデザインにおいて、テキストがコンテナからはみ出てしまうことはよくある課題の一つです。 Web制作ではブログ記事など長文のテキストを抜粋文のような形で途中で省略して表示する場面がありますよね。 限られたスペース内に多 […]
Tips
CSSで縦横比を保ったレスポンシブな正方形を作る方法
「正方形を作ることはできるけどレスポンシブ対応ができない」「pxを使った数値指定の方法でしか正方形を作ることができない」「ネットにあるコードをコピペしたけど上手く表示されなかった」 本日はそんな方に向けてCSSで縦横比を […]
Tips
CSSのみでマウスを乗せると画像やボタンを透けさせる方法【opacity】
Web制作でマウスホバーに関するアニメーションを作ることは多いです。 その代表的な例として「マウスを乗せると画像やボタンが透ける」というものがあり、こちらCSSのみで作成できるので覚えておくと便利です。 また動画もあるの […]
Tips
クリックしたらハンバーガーメニューが閉じるやつの作り方（ドロワーメニュー）
ハンバーガーメニューの作り方でググると表示方法はたくさん見つかるのですが、閉じる方法については解説されていないことが見られます。 閉じる方法はとても簡単な仕組みで実現できるので今回紹介するものをコピペで保存してもらえると […]