もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
iPhone用にサイトの幅と画面の幅を合わせるには
iPhoneやスマートフォンでサイトを表示させると文字が非常に小さく表示されてしまいます。そこで、画面にぴったり合わせて表示させてみましょう。 HOME About this site Mail 最終更新日 2015-10-28 0:41 WordPressなどのように動的に出力するサイトであれば、スマホでアクセスすると、スマホ用の表示を出力してくれます。が、私のように自作ブログや、MovableTypeや、企業サイトなど静的なページで作成したサイトで、スマホ用やパソコン用に表示させるにはどうしたら良いのでしょうか？ Sponsored Link このページの目次 iPhone6 ディスプレイの解像度は？ スマホ用サイトの横幅は320 viewportで横幅ピッタリ パソコンではどう表示されるか viewportの幅の指定 一覧表 画像やテーブルがはみ出てしまう場合の対策 スマホサイトの幅
画像圧縮の神ツール『ImageOptim』の使い方（JPG, PNG対応）
2013/10/14 (更新日: 2016/08/13) 画像圧縮の神ツール『ImageOptim』の使い方（JPG, PNG対応） Mac ブログを運営していて『サイト重すぎでしょ…』との声を数多くいただいていました。 サイト診断用のブックマークレットを使って診断してみると、原因は以下のとおり。 画像の読み込み CSSの読み込み JavaScriptの読み込み ※サイト診断用のブックマークレットの使い方は以下の記事を参考にどうぞ。 » あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット CSSは外すことできないし、JavaScriptは嫌いなので放置。そこで『画像の圧縮をするしかないかぁ…』と考えていました。 そこで見つけたのが『ImageOptim』( ◜◡‾) 今回のテーマは以下です。 画像圧縮のツール『ImageOptim（JPG, PNG対応）』のすばらしさ紹
ImageOptim — how to use
ImageOptim makes images load faster Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality. Download and installation These instructions are only for the Mac version of ImageOptim. See version for your system. Download ImageOptim archive — it should download within seconds. Open the downloaded archive (double-click the ImageOptim.tbz2 file after it fini
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これで完璧！ Office 2003とOffice 2007のコマンド対応学習講座
