Google、SEOに適したLazyloadの仕様を公開 | 海外SEO情報ブログ

2018/11/06 324 users LazyLoad SEO 指針 仕様 ドキュメント

[レベル: 上級] SEO と相性がいい Lazyload の実装を解説するドキュメントを Google はデベロッパー向けサイトで公開しました。 3つのアドバイスドキュメントには3つの指針が書かれています。 1. viewport 内で見えるようにするviewport 内にあるコンテンツは、必ず Google にも見えるようにしておきます（viewport は簡... 続きを読む

スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1｜Takumi Hasegawa (unshift)｜note

2018/09/19 90 users unshift ＨＡＳＥＧＡＷＡ 破綻 Note エンジニア

スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1 基本的には実装側で見え方に破綻がないようにしますが、実機でみたときにデザイナーさんは自分でデザインしたものとは少なからず違うものがあがってくるはずなので、違和感を感じるこ... 続きを読む

もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

2015/06/10 816 users Qiita width content 呪文 解像度

<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。... 続きを読む

スマートフォンサイト制作で「なんで拡大縮小できるようにしてるの？」と言われた時の対処法 | Border/memo

2014/10/16 368 users border memo device-width width

※ この話はフィクションです。実在の人物や団体などとは関係ありません スマートフォンサイトを制作していて、「サイトを自由に拡大縮小できるようにしてるのは理由あんの？」と言われた時の場合の話です。 Viewportの設定どうしてたか <meta name="viewport" content="width=device-width"> これだけ。こうするとサイトの幅=デバイスの幅になり、拡大縮小は自... 続きを読む

レスポンシブWebデザインはviewportとメディアクエリーからはじめろ！ | 株式会社Bark to Imagine

2014/01/07 313 users 横幅 キリン 住友商事 概念 ブラウザ

今話題の「レスポンシブWebデザイン」。 有名なところでは、 「TOYOTA新卒採用ページ」、「キリン」、「住友商事」 などがあります。 ブラウザの横幅に応じて適切なデザインを表示する技術ですが、実際はどのような目的で使われているのでしょう。 今回はそんな「レスポンシブWebデザイン」の概念から記述方法までといった、次世代Webサイトの入門的な内容をわかりやすく解説していきます。 レスポンシブWe... 続きを読む

iOSにおけるviewportの指定方法による細かい違い - to-R

2013/10/11 55 users iPhone iOS device-width width

iOSではviewportの指定方法が異なると細かいデバイスの挙動が変わってきます。 検証はiPhone(iOS6.1)のみで行っているのでiPadやiOS7ではちょっと違うかも。 まず、以下のような数値によるviewport指定をPCモードとし、 <meta name="viewport" content="width=960px"> 以下のようなdevice-widthによるviewport指... 続きを読む

スマートフォン対応でよく使うhtml、css、javascriptのまとめ | 69log

2013/02/15 897 users CSS HTML JavaScript ウェブアプリ iOS

スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 ■headタグ内での設定 <!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!... 続きを読む

これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ - てっく煮ブログ

2013/02/14 1141 users HTML 見た目 web 使い勝手 煮ブログ

スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewpor... 続きを読む

IE10とHTML5とCSS3とレスポンシブデザインと | DECONCEPTER

2012/10/24 125 users DECONCEPTER レスポンシブデザイン IE1 最低限

ウェブサイトのWindows 8 向け対応 iPad Miniややたら薄いiMacが発表されて賑わっている中恐縮だが、今日はIE10にWEBサイトを対応させるために最低限押さえておきたいポイントを見ていきたいと思う。 スナップモードとデスクトップモードがあるWindows 8のIE10にウェブサイトを最適化させるにはいくつかポイントがあるようだ。 IE10独自のviewport 実はまだviewp... 続きを読む

iOS でサポートされた viewport 以外の meta タグ

2012/08/26 52 users メタタグ iOS Yes Black content

前回の記事のついでに viewport 以外の iOS でサポートされているメタタグについて整理してみましょう。 Supported Meta Tags <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"... 続きを読む

続：Androidブラウザでviewportのwidth指定[to-R]

2012/01/06 161 users BIND functio window to-R スクリプト

続：Androidブラウザでviewportのwidth指定 Check Tweet １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", functio... 続きを読む

[CSS]iPadの横向きと縦向きでレイアウトを変更するスタイルシート | コリス

2011/10/23 146 users コリス 横向き CSS width content

Portraitモード（縦向き）のグリッド設計 グリッド 768=30+708+30 708=216+30+216+30+216 実装のポイント iPadの横向きと縦向きでレイアウトを変更するには2つのポイントがあります。 METAタグ iPadのスクリーンで等倍に表示されるように、METAタグで設定します。 <meta name="viewport" content="width=768px, ... 続きを読む

iPhone Safariでドキュメントの幅はどうやって決定されるか - Takazudo hamalog

2011/06/05 55 users Takazudo hamalog ドキュメント width

まずはじめに、これは合ってるかわかりません…。 でもたぶん合ってると思う。 width=device-width, initial-scale=1で、iPhoneを縦→横に傾けたら、「1.5倍にズームした状態でさらにドキュメントの幅が480pxになる」という謎の挙動を理解してみる。 viewportについては、Androidの動きを正と見て、iPhoneの挙動を理解したほうが容易。 initial... 続きを読む

Androidの「target-densitydpi」でviewportの調整[to-R]

2011/01/31 71 users dpi プロパティ to-R Android 調整

Androidの「target-densitydpi」でviewportの調整CheckTweetどうも色々調べているとAndroidのviewport調整はtarget-densitydpiというプロパティで行うのがよさそうです。「target-densitydpi」はAndroid2.0以上で利用でき、表示時のdpi(dots per inch/1インチの中に何ドット表示するか)を指定できます... 続きを読む

スマートフォン向けサイトの作り方｜ユージック

2011/01/22 1903 users ユージック iPhone height 作り方 ズーム

iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン独自の仕様 viewportについて スマートフォンでの可視領域やズームなどの設定をするmeta要素がviewportです。 viewportの各プロパティ width(幅) 可視領域の幅。デフォルト値は980px。 200pxから10000pxまでの範囲を指定できる。 height（高さ... 続きを読む