本日は入力候補を自動補完させる検索バーの作り方を解説していきます。 ライブラリやバックエンド言語が必要だと思われているかもしれませんが、基本的にはHTMLのみで実装できるので初学者の方やデザイナーの方でも作れちゃいます。 […]
Tips
HTMLのみ！検索フォームに入力候補を表示して自動補完させる方法【input,datalist】
Tips
Tips
CSSのみ！ヘッダー固定でアンカーリンクがずれるを解決【ページ内スクロール、スムーススクロール】
「ヘッダーの固定をすると下の背景と重なってしまう」「ヘッダー固定しながらアンカーリンクさせると思った場所にスクロールされない」「スクロール位置の調整をJavaScriptで書いているけど上手く動かない」 本日はそんな方に […]
Tips
【JavaScript】nullとundefinedの違いって分かりますか？
今回はJavaScriptにおけるnullとundefinedの違いについて考察していきたいと思います。 こんな感じで記事を書いていますが自分もあまりよく分かっていないのが正直なところです。 あくまで考察ですが初学者の方 […]
Tips
Youtube、Twitterタイムライン、GoogleMapを埋め込む方法
サイトやアプリにSNSを埋め込むのは当たり前になりました。 それぞれ簡単な仕組みで表示させることができるので、主要なSNSについて表示方法を解説していきます。 また動画もあるので必要に応じて活用してください。 Webサイ […]
Tips
JSなし！画像がダウンロードできるボタン(リンク)を設置する方法【img download】
画面に表示している画像をダウンロードさせるボタンの作り方をご存知でしょうか。 ボタンに関するイベント処理は色んな種類がありますが、今回はJavaScriptを使わずに実装できる内容なので初学者の方でも理解して頂ける内容に […]
Tips
カラーピッカーで選択した色をJavaScriptで取得する【input type=”color”】
カラーピッカーはライブラリを使わなくても自作することができるのをご存知でしょうか。 ツールアプリやECサイトなど、色んな場面でカラーピッカーは登場するので知らない人はこの機会に覚えてしまいましょう。 また動画もあるので必 […]
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サイトに動画を埋め込むのはとても簡単です。 プログラミング初学者であれば画像の埋め込みはご存じだと思いますが、動画の埋め込みも同じような手順で実現できます。 近年は動画を使ったサービスや情報発信が増えているので、サ […]