15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
スマートフォンっぽいUIを、JQueryを使わずに作ってみる1 - BASHI_BASHI
JQueryをなるべく使わずに、スマフォっぽいUIを作ってみようということで、試しにつくってみたので、そのサンプルを。 パターン1 mobageさんのものですが、とても使いやすいので試しに作ってみました。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル1</title> <meta name="viewport" content="width=320px"> <style type="text/css"> ul#mypage_menu { list-style:none; padding:0; } ul#mypage_menu li { width:50%; height:60px; float:left; text-align:center; border-bottom: 1px sol
直接お金は受け取れるの？
キャッシングサービスとは、要するにお金を借りることで、最近はインターネットを活用して業者に融資申請をして、指定の銀行口座へ現金振り込みをしてもらえるという、大変便利なサービスを利用することができます。しかし、キャッシングをしているという事実を家族にばらしたくないという方も多いので、銀行口座への振込は履歴が残ってばれる可能性があるから、望ましくないと考える方も多くいます。そんな時には、キャッシング業者の店舗に足を運んで、直接受け取りの方法を選択することができます。キャッシング業者のほとんどが無人ATM機を導入していて、土日祝日関係なく、いつでも融資申請をすることができます。その場で所定の手続きを進め、審査に通過することができれば現金を手にすることができます。この方法だと、銀行口座を経由することなく、融資金を借り入れすることが可能となります。一度所定の手続きを踏めば、キャッシング専用のカードが
スマートフォンサイトの作り方(8/8) - 入力フォームの最適化 - シンプルな暮らし。 - 家族とWEBマーケティングな日々
数字用キーパッドの指定 PC画面の場合はさほど問題になりませんが、スマートフォンで入力値が数値の場合(郵便番号や電話番号など)には、数字入力用キーパッド(HTMLのinput type="number"input type="text"にpattern="[0-9]*"を指定してあげるとユーザービリティーが向上します。pattern属性は、正規表現で入力文字を制限する指定で、[0-9]*は数字に限定するという意味です。[0-9]*を指定すると自動的に英字キーボードの場合に数字用キーパッドが表示されます。input type="number"は、iOS4では問題なかったのですが、iOS5のSafariの仕様変更により連続した数字3桁を入力した場合に自動的にカンマが挿入されるのと、先頭に「0(ゼロ)」が入力できなくなったので避けたほうが無難です。 ただし、PC版のほとんどのブラウザではHTML
スマートフォンサイトの作り方(4/8) - フォントサイズの最適化 - シンプルな暮らし。 - 家族とWEBマーケティングな日々
スマートフォンでの文字サイズ スマートフォンの場合、PCのブラウザよりも画面が小さいわけですからそれなりに文字サイズも大きくする必要があります。 スマートフォンの画面解像度はPCよりも高いので、小さな文字もくっきりと移りますが、人間の視力でどの程度の大きさであれば可視性を保てるのか？というのが最終的には問題になります。大方の場合はPC版で12px程度が主流だと思っているのですが、スマートフォンの場合では最低12px程度としておいた方が良さそうでした。 今回の構築サイトでは、PC版は基本12pxですが、スマートフォンは12pxの120%としています。 注意点 注意しなければいけないのが、WebKitの仕様。WebKitでは、コンテナタグの横幅を判断して文字サイズを自動制御する仕組みがあるようです。重要そうな情報であれば文字を大きくして、重要そうでなければ小さくなるようにしているんでしょうね。
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
スマートフォン最適化を実施する際に最低限抑えておきたいこと : LINE Corporation ディレクターブログ
こんにちは。livedoor グルメを担当している澤田です。 livedoor グルメでは3月に、iPhone版Safariブラウザでの表示最適化に対応いたしました。これは、iPhone版Safariブラウザでlivedoor グルメを閲覧した際に、PC版の画面ではなく、iPhoneの表示サイズや使い方に合わせてカスタマイズされた画面を表示させるものです。 最適化されてないサイトの場合は、基本的にPCと同じ画面がiPhoneに表示されるので、表示される画面が小さく、大量の画像データなどを読み込むため表示に時間もかかります。 この「最適化」の作業を行うことで、iPhoneユーザーにとって必要な機能を、より使い易いナビゲーションで提供できるようになります。 今回はその画面開発時に、ユーザーの使い勝手に留意して設計した、いくつかのポイントについてご紹介します。iPhoneをお持ちの方は、ぜひSa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
