スマートフォンサイトの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つ - Design Color
もくじ サイト幅はリキッドレイアウト&リンク領域は大きめに 動画やGoogleマップも画面サイズに応じて伸縮するように なるべく画面遷移をしないように PC版のデザインでも見れるように 最後までスクロールした後のことも考える 1.サイト幅はリキッドレイアウト&リンク領域は大きめに サイト幅は基本的には320px想定で作っています。ですが、一言で「スマホ」といっても様々な解像度がありますよね。特にAndroidとか！しかも、スマホを横向きにするとまた解像度が変わってきます。 なので、ある程度どのサイト幅でも対応できるようにリキッドレイアウトで画面サイズに応じてサイト幅が変わるようにしています。 また、スマホは指で操作するため、リンク領域はなるべく大きめにするよう心がけました。（とはいえ、タグやはてブのリンクまでは大きくできなかったのですが）一部を除いては基本的にはリンク要素は「44px以上」
新しいGoogleマップをレスポンシブ対応で埋め込む方法 | ライフハッカー・ジャパン
Digital Inspiration：新しくなったGoogleマップでは、ウェブページに地図を埋め込むことが可能となりました。Googleマップのサイトを開き、埋め込みたいエリアをズームインします。右下の歯車アイコンをクリックして、メニューから「地図を埋め込む」オプションを選択すれば、埋め込みコードを取得できます。 埋め込みコードを使ったサンプルページがこちらです。デフォルトでは、Googleマップがレスポンシブに対応していません。スマートフォンなどでページを開くと、地図のサイズがデバイス画面にフィットせず、はみ出してしまいます。 同じGoogleマップをレスポンシブ対応で埋め込んだサンプルがこちら。ブラウザをリサイズしたり、スマートフォンからページを開いても、画面に合わせて地図のサイズを自動調整してくれます。 Googleマップをレスポンシブに埋め込む方法 以下がGoogleマップのデ
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
個人ブロガーなら今すぐ設定したい、著者情報(Authorship)が遂に日本のGoogleでも導入開始
[対象: 上級] Google日本 (google.co.jp)で著者情報の表示の導入が始まったようです。 この記事を書いている時点で公式発表がないのでテストの可能性は否定できませんが、ブラウザを変えてもCookieを削除してもGoogleアカウントのログイン・ログオフを切り替えても先週後半から続けて確認できるので高い確率での本採用の気配です。 海外SEO情報ブログのGoogleの検索結果に表示された僕の著者情報です。 「著者」ではなく「作成者」になってますね。 Google+のサークルに入れられている人数は他の国と同様に付いています。 こちらは僕が寄稿しているWeb担当者Forumの連載コーナーのページに対して表示されている著者情報です。 また仕様が少し変わって同一著者によるページが検索結果のなかに複数ある場合は最初のページにだけ写真が付くようになったようです（Google.comでも確
Googleウェブマスターツール完全マニュアル｜αSEO(アルファSEO)
2008年最初の特集は、「Googleウェブマスターツール完全マニュアル」。まだ活用していない方も多いようですが、実はサイト運営者にとってSEOに役立つ機能が多く搭載されています。今回は、サイト運営の「ありがちな問題」をピックアップし、「Googleウェブマスターツール」を使って解決する方法を教えます！SEOの必須ツール「Googleウェブマスターツール」を活用して、SEO対策を効率UPさせましょう。 ◆Googleウェブマスターツールとは？ 「Googleウェブマスターツール」とは、Googleが無料で提供するサイト運営者のためのツールです。例えば、Googleに適切にサイト内をクロールさせることや、適切に検索エンジンに評価されているか確認することが可能です。 導入方法も簡単。無料で取得できるGoogleアカウントがあれば利用することが可能です。 まずは、Googleウェブマスターツール
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
