capture属性を使ってみる
input type=fileに対して設定できるcapture属性について、いくつか設定を行い動作を試してみます。...
スマートフォンの記事一覧
iOS Safariでダブルタップで拡大しないようにする
iOS Safariでダブルタップした際に拡大表示する機能がありますが、例えばゲーム系のコンテンツで連打することがある場...
input type=”search” の虫眼鏡アイコンを非表示にする
iPhoneなどのiOS端末でinput type=”search”を閲覧した際に、input内の左側に虫眼鏡のアイコン...
スマホでタップ時に表示される枠を消す
スマホでリンク部分をタップした際に表示される枠を消したいという要望がたまにあるので、表示しないようにする方法をメモ。...
input type=”number” の代わりにinputmode=”numeric” を使用する
inputで数値入力をする際に使用するtype=”number”の代わりに、inputmode属...
スマホで全画面固定表示にした際にブラウザのUIが重なるのを考慮する
position: fixed と height: 100vh を使って全画面の固定表示をした際、スマホだとアドレスバー...
CSSで100vhを指定した際のiOSの対応
heightに100vhを指定して要素の高さを画面いっぱいにしたいという時がたまにありますが、iOSだとアドレスバーなど...
スマホ時のみクリックイベントを設定する
プルダウンやタブなどJavaScriptを使用したUIで、SP時とPC時で挙動を変えたいということがたまにあるので、どち...
iOS Safariでbackground-attachment:fixedが効かない
background-attachment: fixed で背景を固定表示した際に、iOSのSafariで固定されないと...
CSSでスマホ時のみ電話番号にリンクを設定する
スマホでの閲覧時のみ電話番号にリンクを張りたいということがあったので、CSSのメディアクエリで判別して一定の画面幅以下の...
フォントサイズを画面幅に合わせて変更する
スマートフォンのサイト実装時にフォントサイズを画面幅に合わせて拡大・縮小したいという要望がたまにあるので、vwを使った実...
Webインスペクタを使ってiPhoneのデバッグを行う
Mac SafariのWebインスペクタを使ってiPhoneのデバッグを行う方法をメモ。...
ファイル拡張子の「HEIF」について調べてみる
iOS11から導入されているHEIF形式の画像について調べてみました。...
PCとSPで改行位置を変更する
PCとSPで改行位置を変更したいことがよくあるので、設定方法をメモ。...
iOSでフォーム入力時に画面がズームされる
iOSでフォーム入力時時に、画面がズームされてしまう問題を対応する機会があったので、調べた内容をメモ。...
URLスキームを使ってブラウザからアプリを開く
URLスキームについて調べる機会があったので、設定方法などをメモしておきます。...
JavaScriptを使ってiOSでスクロールできないようにする
以前iOSでスクロールできないようにする記事を投稿しましたが、iOS10でうまくいかないことがあったので、別の対応方法を...
レスポンシブサイトでスマホ時のみ電話番号にリンクを張る
レスポンシブサイトでスマホ時のみ電話番号にリンクを張りたい場合がたまにあるので、実装方法をメモ。...
2列のリンクリストで最後が1つの場合は幅100%にする
スマートフォンサイトでよくある2列のリンクリストで、最後が1つの場合は自動で幅100%にする方法が少し悩んだので実装方法...
iOSでスクロールできないようにする
iOSでモーダルやハンバーガーメニューを開いている時に、スクロールで背景のコンテンツがスクロールされないようにする方法を...