新しいGoogleマップをレスポンシブ対応で埋め込む方法 | ライフハッカー・ジャパン
Digital Inspiration：新しくなったGoogleマップでは、ウェブページに地図を埋め込むことが可能となりました。Googleマップのサイトを開き、埋め込みたいエリアをズームインします。右下の歯車アイコンをクリックして、メニューから「地図を埋め込む」オプションを選択すれば、埋め込みコードを取得できます。 埋め込みコードを使ったサンプルページがこちらです。デフォルトでは、Googleマップがレスポンシブに対応していません。スマートフォンなどでページを開くと、地図のサイズがデバイス画面にフィットせず、はみ出してしまいます。 同じGoogleマップをレスポンシブ対応で埋め込んだサンプルがこちら。ブラウザをリサイズしたり、スマートフォンからページを開いても、画面に合わせて地図のサイズを自動調整してくれます。 Googleマップをレスポンシブに埋め込む方法 以下がGoogleマップのデ
Googleが推奨しているHTML/CSSコーディングガイドラインをまとめてみました。 | NIWAKASOFT
webサイトを作るにあたり、HTMLをどう記述するのがBESTなのか？CSSはどう記述するのがBESTなのか？悩むことが多々あるのではないかと思います。今回はGoogleが推奨しているHTML/CSSコーディングルールを抜粋してご紹介していこうと思います。既に数多のwebサイトで紹介されてしまっていますので個人的に「そうだったの！？」と思った項目に焦点を合わせようと思います。 ちなみに、 Googleガイドライン こちらが本家です。 プロトコル http/httpsのそれぞれのファイルを両方のプロトコル上で利用できない場合を除き、画像やその他のメディアファイル、スタイルシート、およびスクリプトを指しているURLからプロトコルを省略する事が推奨されています。 <!-- 非推奨 --> <script src="http://www.google.com/js/gweb/analytics/a
Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2
SEO対策でmeta keywordsは不要です！ | KA Partner
こんにちは、金田です。 SEO対策を実践している方で、meta keywordsの設定をしている方はどれぐらいいらっしゃるのでしょうか？ 本で読んだり、人に聞いて入れているという方も多いと思います。 meta keywordsとは 「meta keywords」とはmetaタグの一種で、検索エンジンに対してページのキーワードを伝えるためのタグでSEOに効果があると言われていたものです。 <meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5"> 結論から申し上げると、meta keywordsの設定は不要です。 キーワード大量に詰め込むなどのスパム行為を行っていないのであれば、マイナス要素に働くことは無いでしょう。 よって、わざわざ消す作業をする必要は無いですが、今後は入れたり・チューニングする必要は無いと考えて下
【SEO都市伝説】display:none;でテキストを隠すと、本当にスパム判定されるのか
Googleのガイドラインが、隠しテキスト＝スパムであるかのような書き方をしているため、長いことdisplay:none;の利用をためらっていた@web_shufuです。しかし、レスポンシブデザインの都合上使用する程度なら問題ないようです。 ガイドラインを一見するとスパム判定されそう 隠しテキストに限らず、ウェブ制作で行っていることがスパムに該当しないかどうかを考える場合、このページを見ないと始まりません。 [img-link url=”http://www.w3schools.com/cssref/pr_text_text-transform.asp” title=”CSS text-transform property”] グーグルのスパムやペナルティーに対する考え方が凝縮されています。 これを見ると、 品質に関するガイドライン – 具体的なガイドライン 次のような手法を使用しないよう
Robots Meta Tags Specifications | Google Search Central | Documentation | Google for Developers
SEO fundamentals Introduction Search Essentials SEO Starter Guide How Google Search Works Do you need an SEO? Crawling and indexing Sitemaps robots.txt Meta tags Crawler management Removals Canonicalization Redirects JavaScript SEO Ranking and search appearance Visual Elements gallery Title links Snippets Images Videos Structured data Favicons Site-specific guides Ecommerce International and multi
Google Maps APIをコピペで使い倒せ！Web初心者でもカスタマイズできるgmaps.js | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアののびすけです。 最近はひさしぶりに浅草をランニングして健康オタクを気取っています。 さて、ランニングといえば、アプリを使ってタイム測定をしている人も多いのではないでしょうか。大半のアプリには地図が内蔵してあり、特にGoogle Mapsを呼び出しているものが多いですね。 そこで今回は、そのGoogle Mapsをカンタンに導入できるgmaps.jsを使ってみたいと思います。コピペで試せるので、JavaScriptが得意ではないデザイナーやコーダーの方にもおすすめです。 http://hpneo.github.io/gmaps/ gmaps.jsはGoogle Maps APIを使いやすくしてくれるライブラリです。 そのメリットは大きく3つあります。 1. シンプルなコード 記述方法がとてもカンタンで、通常のGoogle Maps APIよりも分かりやすいソースコード
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
