PC用とスマホ用の表示切り替えをCSSだけで行う方法(その1) - ホームページ制作・システム構築・ＤＢ設計のユタシステム
ホームページ制作 に関連する記事です。 PCサイトはもちろんスマホで閲覧することは可能だけれど、やはりスマホにはスマホ用のサイトを表示してあげることがユーザビリティ的にも必須であると考えている。 お使いいただいている方ならご存知であると思うが、スマホでPCサイトを閲覧するには文字が非常に小さく、拡大表示しないと閲覧不能なサイトも多い。 現在iphoneは「4」の時点だけれど、フラッシュは読めないし、何気に正確に意思伝達がなされないサイトが多々ある。 また、リンクが小さくなってしまいがちで、指でクリックするにはいささか小さすぎるように思える。 スマホ用のサイトといえばやはり、リンクが大きく、クリックしやすく、表示文字もおおきく、画面サイズに忠実に表示されてるサイトを使いやすく感じるのである。 基本的にスマホ用のサイトというものはPCサイトから余分なものを削って、必要最低限の情報だけを表示する
外部CSSを1枚追加して、ブログをスマホ最適化する5つのフロー | Mnemoniqs Web Designer Blog : Web Design and Web Development
レスポンシブWEBデザインを用いて、外部CSSを一枚追加するだけでiPhone/androidに最適化するまでの流れを書いておきます。スマホ用のCSSをスマホにだけ読み込ませて、全体のCSSを上書きするだけなので、ブログのデザインによっては結構手軽に出来ます。 はじめにスマホ最適化後の要素配置を考える <head>にviewport設定とスマホ用CSSの記述を書く 固定幅をリキッドデザインで組みなおす フォントのサイズ、マージン、中央･水平揃えを調整 画像を2倍のサイズで用意する はじめにスマホ最適化後の要素配置を考える スマホは画面も小さいし、容量が重いとそれだけページの表示速度も落ちます。 ロゴ・メニュー・記事など最低限の要素だけ残し、あとはdisplay:none;で消してしまいましょう。 このブログのトップだと、オレンジで囲んだのがスマホで表示させない部分です。 残った要素を、最
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
携帯コンテンツを大成功させるノウハウと運営・製作の知識
携帯コンテンツを大成功させるノウハウと運営・製作の知識。モバイル・コンテンツ・プロデューサー村上裕が「携帯コンテンツビジネス：携帯ネット広告・携帯オンラインゲーム・モバイルコマース・携帯アフィリエイト」について運営、製作、開発のノウハウと知識を公開しています。 (備忘録として私的日記とも化します) １．My life is likely to last ten to fifteen years． Any separation from you will painful for me. Remember that before you buy me． 私の一生は10～15年くらいしかありません。 ほんのわずかな時間でもあなたと離れていることは辛いのです。 私のことを飼う前にどうかそのことを考えてください。 ２．Give me time to understand what yo
モバイル版Googleマップのちょっと進んだ使い方
5. 本日の内容 • モバイル版のGoogleマップのイロハ ・ GoogleStaticMapsAPIの概要と基本的な使い方 ・ マーカーの設置、ラインの描画 • もう少し凝った使い方 ・ 複数のマーカーやラインを切り替えてみよう ・ 様々なラインを引いてみよう ・ 地図を操作できるようにしてみよう • 質疑応答 6. モバイル版Googleマップのイロハ(1) 概要 ケータイでGoogleMapを表示するには 「Google Static Maps API」を利用する 出来ることは静止画の表示のみ - ただし次の項目が設定可能 - ・表示する座標と拡大率の指定 ・画像サイズ指定 (例：220ドット×300ドット) ・フォーマットの切替 (JPG, GIF, PNGを選択可能) ・マーカーの指定 (複数のマーカーを設置可能) ・ラインの指定 (色の指定、透明度の指定が可能、ラインは1本の
» 携帯サイトでGoogle Analyticsを利用する方法（サーバサイドでPHPを使う） - Magic Linux Power
モバイルや、携帯は Javascriptに徐々に対応しようとしてはいるが、現状で現在は対応していない機種がほとんど対応してないである。 このため、便利なGoogle Analyticsもjavascriptを利用しているので使えない。 コレを解決するのが以下のPHPコードである。 <?php /* google analytics for mobile START */ $var_utmac=’UA-xxxxxx-x’; // Google AnalyticsのID $var_utmhn=’test.com’; // 解析するサイトのドメイン $var_utmn=rand(1000000000,9999999999); $var_cookie=$session; //cookie number $var_random=rand(1000000000,2147483647); $var_t
モバイルサイトで Google Analytics - Ian Lewis
会社のモバイルサイトで、 Google Analytics のトラッキングを導入した。Google Analyticsはブラウザーでいろな情報を集めてGoogleサーバに送るものなので、トラッキングをするには JavaScriptが必要な部分がある。しかし、モバイルや、携帯は JavaScriptに徐々に対応しようとしてると思うけど、現在はほとんど対応してない。なので、サーバ側でトラッキングするほうが標準。他の携帯向けのサイトもあるけども、そのサイトは大体、そのサイトのURLをお客さんに渡して、それで、お客さんがそのサイトに行ってトラッキングデータを記載して、それから、自分のサイトにリダイレクトするやつだから、嫌な部分がたくさんある。 一つははお客さんに自分のサイトじゃなくて、別のサイトの変なurlを渡すから、お客さんに嫌な気分をかける。二つ目はサイトに入る後にサイトの中にどんなページを見
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。 どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。 ■画像形式 GIFとJPEGであれば大丈夫なようです。 ・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ ・KDDI au: 技術情報 > 機種別情報一覧 ・ソフトバンク 端末情報 Part1 ～ ソフトバンク 端末情報 Part4 ・Mobile Creation 対応フォーマット一覧 ただ、SoftBankの場合、 ソフトバンク 端末情報 と気になる記述があったりするのですが、この2機種は、 ・V801SHをご利用のお客さまへ ・V-NM701/V801SAをご利用のお客さま
ここギコ！: 携帯サイトで位置情報の詐称を許さない方法
Web2.0ワークショップで紹介したように、様々なケータイやPHSでユーザの現在位置が取れるようになってきていて、それを使っていろいろアプリケーションが作れるようになってきている。 その中には、実用アプリだけでなく、私も前管理人をしていたアンテナ奪取や、ケータイ国盗り合戦、Ittemiaのようなエンタメアプリも考えられるわけですが、その際に問題になってくるのが「現在位置の詐称」問題です。 ケータイ、PHSでの位置取得は、SoftBank簡易位置情報のようにHTTPヘッダ、DoCoMoのiエリアのようにPOST等で返ってくる場合もありますが、多くの場合、GETのクエリストリングとして返ってきます。 なので、一旦URLを得てしまえば、クエリストリング中の経緯度を書き換えさえすれば、簡単に詐称できてしまうのです。 実用アプリならば、飽くまで位置情報はユーザの調べる位置を現在位置とするため
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
