株式会社オンズのブログ記事一覧

【CSS】スマホでリンクをタップしたときのハイライトを消す方法 スマートフォンでリンクやボタンをタップした際に、リンクエリアがハイライト（iOS Safari だとグレー / Android for Chrome だとオレンジ）で表示されることがあります。 このハイライト表示が不要なとき、CSSで無効化... 【CSS】スマホでリンクをタップしたときのハイライトを消す方法続きを読む →

【iOS】フォーム入力時に画面が自動拡大されるのを防ぐ方法 iPhoneやiPadなど、iOSデバイスで入力フィールドをクリックした時に、ウィンドウが自動でズームされる挙動を防ぐ方法紹介します。 解決方法は２つ。 ミニマムのフォントサイズを16px以上にする viewportにmaximum-sca... 【iOS】フォーム入力時に画面が自動拡大されるのを防ぐ方法続きを読む →

【iPhone】標準ブラウザのSafariでネット接続できない時でもウェブサイトを閲覧する方法 今日はiPhoneがオフラインや圏外の状態でネット接続できない場合でもWebページを閲覧できる便利なテクニックを紹介します。 利用するのはSafariのリーディングリストの機能。 コレ、かなり便利なんですが、ご存知ですか？ リーディングリス... 【iPhone】標準ブラウザのSafariでネット接続できない時でもウェブサイトを閲覧する方法続きを読む →

【iOS 11】iPhoneのコントロールセンターからナイトシフトを有効化する方法 iPhoneには、ディスプレイの色味を暖色系にして暗所での利用時に最適な『Night Shift』という機能があります。 iOS 10 まではコントロールセンターからスグに有効化できましたが、最新の iOS 11 からはその項目が無くなって... 【iOS 11】iPhoneのコントロールセンターからナイトシフトを有効化する方法続きを読む →

【iPhone】メール本文に挿入される「iPhoneから送信」を表示させない方法 iPhoneの標準のメールアプリでメールを送信するとき、メール本文の末尾に「iPhoneから送信」というテキストが自動で挿入される仕様になっています。 もしかすると毎回手動で削除してませんか？ 今日は、この「iPhoneから送信」をあらかじ... 【iPhone】メール本文に挿入される「iPhoneから送信」を表示させない方法続きを読む →

【CSS3】JavaScriptを使用せずに『慣性スクロール付きカルーセル』を実装するテクニック モバイルサイトでよく見かける、横にスライドするカルーセル・スライダー。 最近では単にスライドするだけでなく、フリックしたときに慣性スクロールで動くものが流行っています。 今日はこの『慣性スクロール付きカルーセル』を JavaScript 無... 【CSS3】JavaScriptを使用せずに『慣性スクロール付きカルーセル』を実装するテクニック続きを読む →

【iPhone】このwebサイトから自動的に電話をかけることは禁止されています。 ウェブサイトの動作確認を iPhone を使って行なっていたところ、意図せず『このwebサイトから自動的に電話をかけることは禁止されています。』というポップアップが表示されました。 電話番号をクリックすると表示されるこのダイアログ。 HTM... 【iPhone】このwebサイトから自動的に電話をかけることは禁止されています。続きを読む →

【2016年版】ウェブ制作者にオススメのiOSアプリ × 11選。 ウェブ制作者なら必ず押さえておきたいiOSアプリを厳選して紹介します。 普段はPCをメインに使っているアナタも、これから紹介するアプリを活用すれば iPhone & iPad で簡単な作業を引き継いで業務をスムーズに進行できるように... 【2016年版】ウェブ制作者にオススメのiOSアプリ × 11選。続きを読む →

ウェブブラウザ iOS 版の［Firefox］が登場したので早速ダウンロードしてみた。 ついにiOSでも［Firefox］が使えるようになりましたね。 Mozilla : Firefox for iOS 早速ダウンロードして使ってみたのでスクリーンショットを紹介します。 ［Firefox for iOS］を App Store... ウェブブラウザ iOS 版の［Firefox］が登場したので早速ダウンロードしてみた。続きを読む →

【iOS 9対応】iPhoneの説明書（ユーザガイド）が公開されています。 9月25日。いよいよ今日は新しい iPhone の発売日ですね。 皆さんはもう予約は済んでいますか？ オンズのスタッフはもちろん早々に予約をしたので、「iPhone 6s」「iPhone 6s Plus」共に近日中には事務所に届く予定です。... 【iOS 9対応】iPhoneの説明書（ユーザガイド）が公開されています。続きを読む →

【iOS】リンクをタップしても1回では挙動しない原因とは？ 「iOS」の「Safari」等、モバイル端末でウェブサイトを閲覧しているとき。 リンクをタップしても1回では反応せず、2回目でようやく画面が遷移するという現象が起きていませんか？ いま実機で調べた結果、この現象が起きるのは iPhone の... 【iOS】リンクをタップしても1回では挙動しない原因とは？続きを読む →

【iOS】サイトを「ウェブアプリケーション・フルスクリーンモード」で表示させる方法。 早速ですが。まずは以下の画像を見比べてください。 デバイスは最新のiPhone6を使用。アプリはデフォルトの「Safari」で、左の画像は普通に表示させたもの。そして右側が、今回紹介する「ウェブアプリケーション・フルスクリーンモード」でサイ... 【iOS】サイトを「ウェブアプリケーション・フルスクリーンモード」で表示させる方法。続きを読む →

【iOS】ウェブサイトのソースを閲覧できる［Srcfari］はウェブデザイナーの方にお勧めの神アプリです。 iPhoneやiPadでウェブサイトのソースを閲覧できる素晴らしいアプリ［Srcfari］が登場しました。 HTMLはもちろん、CSS、JacaScript、そしてJPG、PNG、GIFやSVG形式の画像まで。サイトのリソースをほぼすべて網... 【iOS】ウェブサイトのソースを閲覧できる［Srcfari］はウェブデザイナーの方にお勧めの神アプリです。続きを読む →

モバイルデバイス（iPad、iPhone等）でサイトを観覧時に、右側に空白ができてしまう時の解決策。 レスポンシヴデザインを採用したサイトに多く見られるのですが、iPadやiPhone、または各社のスマートフォン等のモバイルデバイスでの観覧時に、ウィンドウの右側、あるいはコンテンツの右側に、意図していない余分な空白ができてしまうことがありま... モバイルデバイス（iPad、iPhone等）でサイトを観覧時に、右側に空白ができてしまう時の解決策。続きを読む →

【iOS】遂に iPhone ＆ iPad でも［ATOK］が利用できるようになりました！ この日が来るのを待ち望んでいた方も多いのではないでしょうか。 とうとう iOS でも［ATOK］が利用できるようになりました。 ご存知のとおり、新しく発表された［iOS 8］では、サードパーティー製のキーボードが利用できるようになり、それに... 【iOS】遂に iPhone ＆ iPad でも［ATOK］が利用できるようになりました！続きを読む →

【iOS】リンクをタップしたときのカラーを変更する方法。 iPhone、iPad等、iOS デバイスでは、ウェブサイトのリンクをタップした際に、薄いグレーがハイライト表示されます。 これはデフォルトの仕様ですが、CSS で［-webkit-tap-highlight-color］というプロパティを... 【iOS】リンクをタップしたときのカラーを変更する方法。続きを読む →

一足早く iOS 8 の気分を味わえる壁紙です。 昨夜未明。正式に Apple から iOS 8 が発表されました。 現時点で公開されている iOS 8 はベータ版で、あくまで開発者に向けたもの。さらにインストールにはデベロッパ申請もいるし、お金もかかります。 一般ユーザーへの公開は今秋と... 一足早く iOS 8 の気分を味わえる壁紙です。続きを読む →

【iOS】Safari でウィンドウのスクロールを禁止する方法。 モーダルウィンドウなどを実装した際に、ページ全体のスクロールを禁止させたいという場面がよくあります。 追記：以前まで、PCやAndroidでは比較的簡単に実現させることができましたが、iOS Safariでは別の方法を使わなければうまくいき... 【iOS】Safari でウィンドウのスクロールを禁止する方法。続きを読む →

【iOS】Safariの表示領域を最大にする［minimal-ui］の設定方法。 iPhone の新しいOS［iOS 7.1］から、viewportの［minimal-ui］設定が可能になりました。 通常、iPhone でのウェブ観覧時には、画面の上部と下部にそれぞれナヴィゲーションやステータスバーが表示されますが、［m... 【iOS】Safariの表示領域を最大にする［minimal-ui］の設定方法。続きを読む →