プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】
近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こんなマークを見たことがありませんか？大抵右上か左上にこの三本線マークがあるのではないかと思います。これはメニューのマークです。このボタンを押す事で画面外の上からか横からメニューが出て来る仕様にしているサイトがほとんどです。このメニューはドロワーメニュー、若しくはハンバーガーメニューと呼ばれています。三本線がハンバーガーみたいだからでしょうね。 その理由はメニューをサイト上に表示してしまうと画面のほとんどを専有してしまいます。元々表示する情報量が少ないスマートフォンですので、メニューは常時表示せずボタンを押す事で表示するようになっています。 この仕様は Google のアプリ
スマートフォンで写真を大きく表示させる SmartPhoto.js をリリースしました | JavaScript | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
スマートフォンで写真をタップすると、もともと表示されているサイズより小さく表示されるような体験をしたことはありませんか？ 2017年にリリースした SmartPhoto.js は、スマートフォンで写真を大きく見たいを実現するために用意したライブラリーです。 弊社の Github 公開しているライブラリの中では、一番 ★ の多いライブラリーで、2024年5月6日現在で 894 となっています。よろしければ https://github.com/appleple/SmartPhoto の右上にある ★ のクリックをお願いします。 SmartPhoto.js では、大きく表示させることを一番に考え、写真の短辺側が画面の最大になるところまで拡大表示されるフォトビューアーとして作られました。下のデモコンテンツでは、長辺側ははみ出して表示されることになりますが、ドラッグして動かしたり、ピンチイン・ピン
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Android のユーザーエージェントの検出について
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Pttrns — Mobile User Interface Patterns
Stay ahead of the curve and become a better interface designer. With a Pttrns membership, gain access to thousands of curated mobile design patterns, get online advice, and connect with other designers from all over the world. What you get UX and UI Patterns Learn and follow industry best practices that can be applied to your app to help ensure the best user experience possible. App database Save
スマートフォン用サイトで動画を扱う時のポイント | ベイジの社長ブログ
最近スマートフォン用サイトの引き合いが増えてきていますが、そこで培ったノウハウもこのブログで紹介していこうと思います。今回は、スマートフォン（およびタブレット）用サイトでの動画の取り扱いについて。 スマートフォンで動画というと、真っ先に思いつくのはYoutubeにアップしてリンクを張り付ける方法ですが、企業の内規や動画の性質によっては、Youtube上に動画をアップすることができない場合もあります。先日担当したキャンペーンサイトもまさにそうでした。というわけで、ここではYoutube貼り付けじゃない方法での、スマートフォン/タブレット端末用サイトで動画を掲載する際のポイントをご紹介します。違ってるところがあればコメントでご指摘いただけると幸いです。 ちなみに、プラットフォームやOS毎の実装状況をひとまずまとめると以下の通り。なお、スマートフォン/タブレット版はデフォルトブラウザでの利用が前
MdN Design｜総合情報サイト
「PCはFlashを使用してリッチな動画コンテンツに。ただ、スマートフォンでも簡単な動画は見せたい。」 最近は制作の際、このようなオーダーが増えている。ただ、PCと共通したソースで動画を実装するには、いろいろなブラウザ状況を考慮しなければならない。ユーザーによってはJavaScriptやFlashをオフにしている場合があるからだ。 そのようなユーザーに対しても、代替 要素を表示させ、コンテンツ欠如を避ける対策も行う必要がある。 大きく分けると【1】のようなパターンのときに対応が必要だ。 今回、Flash の表示にはswfobject.jsを使用する。swfobject.jsを使用すれ ば、Flashを表示させたいidを指定すると、そのid内にFlashが埋め込まれる。 JavaScriptやFlashがオフのときは、そのままid内のHTMLが表示されるので、ソースを汚さずに実装が可能、とい
スマートフォンサイトのパフォーマンスチューニング | DevelopersIO
スマートフォンサイトのパフォーマンス測定とチューニングに関して調べたことをまとめます。 パフォーマンス測定のツールはKeynote社のMITEを使用します。MITEのバージョンは2.3で試しています。 MITEは性能テストの他に自動テストなどを行えるテストツールです。 MITEのインストール まずはMITEのインストールからです。 MITEは以下のサイトからインストーラーをダウンロードできます。 http://mite.keynote.com/ 無料でダウンロードできますがアカウントを作成する必要があります。インストール後、起動すると以下のようなダイアログが表示されます。 ここには作成したアカウントのユーザー名とパスワードを入力します。 起動した後ですがスマートフォンの端末情報(Profile)を最新に更新するかどうかを聞かれると思います。 最新に更新する場合は"はい"をクリックします。更
“モバイルファースト”の本当の意味と、Web担当者が知っておきたい基本＆実践3ステップ | Web担当者Forum
「モバイルファースト」というキーワードをご存知だろうか。その名の通り、まずモバイルサイトを中心にコンテンツを考え、PCなど他のデバイスへと対応させていく考えだが、その本当の意味を勘違いしている人も多いようだ。 スマートフォンの登場で注目を集めているモバイルファーストでは、「ワンソースから各デバイスに対応していく考え方」がポイントになる。そのとき重要になるのが、コンテンツを一元管理できるマルチデバイス対応CMSの存在だ。 この記事では、Webサイト制作現場だけでなく、企業Web戦略の面でも重要な意味を持つ、モバイルファーストの基本について解説する。 スマートフォンの普及で見直しが迫られるPCサイトスマートフォンの普及が加速している。ケータイキャリアのプロモーションや新製品ラインナップを見れば、これは当然の流れだろう。インターネットにアクセス可能なデバイスとして見ると、PC、フィーチャーフォン
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
にわかに流行中の『スマホ×紙広告』のまとめ « INFOBAHN
新しい広告の形として最近よく見るのが『スマホ×紙の広告』タイプのもの。 雑誌などの広告にスマートフォンをかざすことで動きが生まれたり、ストーリーが始まったりなどインタラクティブな面白さをプラスしています。今回はそんな事例をまとめてみました。 『O Boticário』 化粧品ブランドの『O Boticário』の広告にスマホをかざせばアイメイクの仕方を教えてくれます。 『MURAT PARIS』 アクセサリーブランドの『MURAT PARIS』の事例では、ブレスレットを装着した状態の手の画像を見ることができるようになります。数種類のブレスレットが用意されていてスワイプすればそれらが切り替わっていきます。 『AXA』 保険会社『AXA』も面白い広告を展開していました。街の真ん中で積み重なった車をiPhoneを通して見ることによって、「なぜ」そうなったのかを教えてくれる、保険の大切さを
スマートフォンサイトに適したユーザビリティとは？【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト
このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、今回の制作にあたり役に立ったサイトをまとめました。 このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、 今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。 敢えて紹介するまでもないのですが一応。 現在のバージョンは1.0RC2（2011.11.01現在）です。そろそろ正式版がでる予定です。 jQuery Mobile 1.0b1 日本語リファレンス jQuery Mobile 1.0b1 日本語リファレンス バージョン1までの内容ですがjQuery
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhoneでもiframeを使ってスクロールさせて、かつ、PCとも外観を揃える方法 - Qiita
Mobile Web Design | Best Mobile Websites | Mobile Website Gallery
Mobile Patterns - UI UX Inspirational Gallery for iOS and Android
Mobile HTML5
html5-css3.jp - このウェブサイトは販売用です！ - スマートフォン 編集者 方法 サイズ 日本 ツール ブラウザ テスト リソースおよび情報