初学者の方の難敵の一つに「非同期処理」というものがあります。 そもそも考え方が難しいですし、学習教材やスクールでは同期処理をメインに学ぶからですね。 とはいえ近年のサイトやアプリでは非同期処理やそれに近い処理は当たり前の […]
Tips
非同期処理の理解はsetTimeoutとsetIntervalからがおススメ！
Tips
Tips
HTMLのみ！画像の表示をレスポンシブで切り替える方法【レティーナ対応、webp画像】
スマホとパソコンで違う画像を出し分けるようなレスポンシブ対応は今では当たり前になりました。 方法は色々あってCSSでのメディアクエリやJavaScriptの条件分岐での方法が主流かと思いますが、初学者の方には少し難しいの […]
Tips
CO₂、X²など小さい文字をHTMLで表現する方法【sub,sup,上付き文字,下付き文字】
「2乗はx^2のような書き方しか知らない」「上付き文字、下付き文字はCSSで作る方法しか知らない」「特殊なテキストは全て画像にして貼り付けていた」 本日はそんな方に向けた内容になります。 化学式や数式をHTMLで直接入力 […]
Tips
ライブラリなし！進行状況を表示するプログレスバーの作り方【progress】
ファイルのアップロードやメール送信などで見かける、進行状況を表現するプログレスバーは簡単な仕組みで構成されています。 もちろんライブラリを使った仕様も良いのですが、仕組みを知っておけばライブラリのカスタマイズにも生かせる […]
Tips
HTMLのみ！フォームに日付選択や時間選択の項目を作る方法【input】
Webサイトやアプリのフォームで日付に関する項目を作ることがよくあります。 近年は便利なライブラリもあるのですが、JavaScriptが使えなくても日付に関するフォームは簡単に作ることができます。 今回はinputタグを […]
Tips
HTMLのみ！検索フォームに入力候補を表示して自動補完させる方法【input,datalist】
本日は入力候補を自動補完させる検索バーの作り方を解説していきます。 ライブラリやバックエンド言語が必要だと思われているかもしれませんが、基本的にはHTMLのみで実装できるので初学者の方やデザイナーの方でも作れちゃいます。 […]
Tips
CSSのみ！ヘッダー固定でアンカーリンクがずれるを解決【ページ内スクロール、スムーススクロール】
「ヘッダーの固定をすると下の背景と重なってしまう」「ヘッダー固定しながらアンカーリンクさせると思った場所にスクロールされない」「スクロール位置の調整をJavaScriptで書いているけど上手く動かない」 本日はそんな方に […]
Tips
【JavaScript】nullとundefinedの違いって分かりますか？
今回はJavaScriptにおけるnullとundefinedの違いについて考察していきたいと思います。 こんな感じで記事を書いていますが自分もあまりよく分かっていないのが正直なところです。 あくまで考察ですが初学者の方 […]
Tips
Youtube、Twitterタイムライン、GoogleMapを埋め込む方法
サイトやアプリにSNSを埋め込むのは当たり前になりました。 それぞれ簡単な仕組みで表示させることができるので、主要なSNSについて表示方法を解説していきます。 また動画もあるので必要に応じて活用してください。 Webサイ […]
Tips
JSなし！画像がダウンロードできるボタン(リンク)を設置する方法【img download】
画面に表示している画像をダウンロードさせるボタンの作り方をご存知でしょうか。 ボタンに関するイベント処理は色んな種類がありますが、今回はJavaScriptを使わずに実装できる内容なので初学者の方でも理解して頂ける内容に […]