スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
第5回 レスポンシブWebデザインの敵は「ビットマップデータ」
前回は、CSSスタイルの切り替えでデバイスごとにレイアウトを最適化する「レスポンシブデザイン」について解説しました。レスポンシブデザインは、PC向けとスマートフォン向けで同じHTMLを表示します。コンテンツに唯一のURLを与えられる点が特徴です。 しかしネガティブな側面もあります。通信環境の違いに配慮していない点です。PCは光回線など高速な通信環境で利用できます。一方モバイルの多くは比較的低速の3G回線で、しかも移動しながら利用するので通信が途切れることもあります。このためモバイル用のページは、PC用より読み込みやすいコンテンツにチューニングすべきなのです。 とはいえ、スマートフォンがメインターゲットになるプロジェクトはまだ少なく、現状ではPC向けに最適化したページを見かけ上スマートフォン向けに調整する、といった方法が一般的です。この結果、モバイル端末から閲覧する際の使い勝手（ユーザビリテ
レスポンシブ・ウェブデザイン - メディアクエリのパワーを使いこなす
+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
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
ヤフー、モバイルコンテンツ変換サービス開始 - キャリア/機種対応を自動化 | エンタープライズ | マイコミジャーナル
ヤフーは10月29日、モバイルサイトのコンテンツ変換サービス「Yahoo!モバイルトランスコーダ」を発表した。11月1日より提供を開始する。 Yahoo!モバイルトランスコーダは、ユーザー側で作成したテンプレートを基に、3キャリアの新旧機種やiPhone、アンドロイド端末などのスマートフォンに適応したWebサイトを自動的に構築するサービス。運用実績豊富な「モバイル版Yahoo! JAPAN」で利用されているプラットフォームをベースにしている。 Yahoo!モバイルトランスコーダの概要 ランニングコストを低く抑えられる点が大きな特徴の1つとして挙げられており、月間499万PVまでであれば月額3万円で利用することができる。将来的には、アクセス結果を解析する各種ツールも提供される予定。 すでにゴルフダイジェスト・オンラインが採用を決めており、11月1日より同サービスのモバイルコマースサイトの運用
Top - FireMobileSimulator.org
FireMobileSimulatorはFirefox/Chrome版ともに配布・メンテナンスを終了しました。本ページの内容は記録のみの目的で残しています。 FireMobileSimulatorとは？ FireMobileSimulatorは、主要３キャリア（DoCoMo/Au/SoftBank）の携帯端末ブラウザをシミュレートして、モバイルサイト開発を容易にするために作成されたGoogle Chrome/Firefoxの拡張機能です。携帯端末のHTTPリクエスト、絵文字表示、位置情報送信機能などの動作をシミュレートすることができます。 モバイルサイトをPCで閲覧するために、従来からある方法として、キャリア公式シミュレータの使用、Proxyの使用、Firefoxのuseragentswitcher+modify headersの組み合わせ等、色々と手段はありましたが、これらの方法はそれぞ
携帯サイトを作成して公開した直後に知っておきたいこと | ウェブ力学
携帯サイトを作成したのはよいけど、検索エンジンにインデックスされない、アクセス解析ツールがうまく導入出来ない、といった悩みを抱えている人もいるのではないかと思います。 ここでは、携帯サイトの作成が一通り完了して、これから運用に入る際に是非とも知っておきたいことをまとめました。 携帯サイトを作成したばかりの人、これから携帯サイトを作成しようと思っている人向けの記事になります。 「0からモバイルSEOを学ぶ上で役に立った記事」と重なる部分もありますが、ご了承ください。 QRコードの作成 PCサイトを持っている場合、PCサイトに携帯サイトのQRコードを掲載することで、PCユーザーを携帯サイトに誘導させることが可能です。 QRコードは以下のサイトで簡単に作成することが出来ます。 ⇒ QRコード作成＆活用のススメ 【無料でQRコード】 検索順位の確認 検索エンジンごとの検索順位を確認したい場合、毎回
「これから携帯サイト作成」お役立ちサイト集 2010年version - Feel Like A Fallinstar
このブログは引用メインのまとめブログではないんですが、たまたま携帯サイトを個人的に1個作ることになったので、こんなエントリーを。 何だかんだ言っても、日本の携帯電話ってしばらくは生き延びる（＋普通に利用目的によってはスマートフォンより上）わけで、一度まとめておくと便利かな、ということで。 モバイルの利用状況とか、マーケ系 さすがに2010年のものばっかりはムリなので、ここ数年以内のもの中心で。 あんまり沢山見ても訳分からないので、絞りました。 携帯電話におけるインターネットおよび検索エンジンの利用状況（インデックス） 個人的にはもう少しGoogleが多いのかと思っていましたが、携帯でもYahooの方が多いんですね。 モバイルユーザー傾向DATABOX 2010年5月版 アクセス解析ソフトMyRTのデータが元になっていて、若干偏がありそう。 画像対応とか、ディスプレイサイズとか、最低限見てお
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
