初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices
We built screensiz.es to help you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from a variety of sources. For a better understanding of Pixel Density, check out this great post by Teehan+Lax. Our “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzz
初心者Webデザイナー必読！Webデザインを独学で学べるサイト・記事20選
2016.04.18 Web制作 初心者Webデザイナー必読！Webデザインを独学で学べるおすすめWebサイト・記事20選 Webデザインには興味があるんだけど、どこから始めればいいのかわからない…という方は多いのではないでしょうか。そんな初心者の方でも今すぐ、独学でWebデザインの基礎を学べるサイトや記事を20個集めました。 今回、カテゴリをWebサイト制作に最低限必要な知識である、「Webサイト制作の流れ」、「HTML/CSS」、「Webサイトのデザイン」の3つに分けて紹介しています。このカテゴリごとにしっかり学べば、きっとWebサイト制作ができるようになるはずです！ Webサイト制作の流れを学ぶ 1. これからwebサイトの制作をしたいけれど、何から勉強したらいいの？っていう人のためのガイド Web Design RECIPES Webデザイナー高橋のりさんが運営するブログ「Webデ
SINAP | スマホサイトで指定すべき最適なフォントサイズとは？（モバイルフレンドリー対応）
こんにちは、内藤です。 モバイルフレンドリーの連載、第3回目です。前回、GoogleとAppleの推奨するフォントサイズについてご紹介しました。では実際、世の中のサイトはどのくらいのフォントサイズを設定しているのでしょうか。今回、"記事が読まれること"を主目的としているサイトを30ほどピックアップして、各サイトのフォントサイズ、文章量について調べてみました。 また設計時に判断の迷う、「ページ分割」についてもリサーチしてみたので合わせてご覧ください。 <SINAP モバイルフレンドリー対応 連載> 第1回：「スマホで読まれる文章とは？」 第2回：「GoogleとAppleの推奨フォントは？」 第3回：「スマホサイトで指定すべき最適なフォントサイズとは？」 第4回：「スマホサイトの「続きを読む」は必要か？」 第5回：「スマホで読まれる文字数は？」 第6回：「記事をページ分割するメリット・デメリ
サイトタイプ別40事例！スマホサイトのメニューデザインに困ったときに役立つ事例まとめ
みなさん、サイトのスマートフォン対応できていますか？ スマートフォンサイトを作る時は、PCサイトと色々と勝手が違うのでいちいち迷ってしまいますよね。 今回はその中でもスマートフォンサイトのメニューの部分に着目し、傾向と対策を紹介したいと思います。 スマートフォンサイトの事例を 「メディア系サイト」「ECサイト」「コーポレートサイト」「サービスサイト」 の4つのタイプに分けて10個ずつ用意しました。 それでは一気に見て行きましょう。 メニューの定義：「ドロワー」「ハンバーガー」とは スマートフォンのメニューのこと 今回のテーマであるメニュー部分とはどの部分をさすのかを、まずご紹介します。 上の画像は当サイト（プロモニスタ）のスマートフォンサイトです。 今回注目しているメニューとは、上図の右上に設置している「menu」部分、PCサイトで言うグローバルナビゲーションの部分です。 タップによってメ
いま Web サイトを作るときにおさえておきたい10のこと(2015年版) - monoe's blog - MSDN Blogs
いま Web サイトを作るときにおさえておきたい10のこと(2015年版) 02/06/2015 10 minutes to read Internet Explorer は、バージョン 9 から Web 標準準拠へと舵を向けました。 Internet Explorer 9、Internet Explorer 10 と、2 つのバージョンを経て、最新の Internet Explorer では、他のモダンブラウザと比較しても顕色のない Web 標準ブラウザーとなっています。 そのため、それまでの長い間 Internet Explorer で Web システムを作成してきた企業のお客様にも、これから Web システム作成される際には、 Web 標準に準拠するようにお願いするわけですが、多くのお客様から「それってどうやんの?」というご質問をいただきます。 W3C と ECMA の仕様に合致した
もう逃げない。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を返す
HTML［meta要素］ビューポートを設定する - TAG index
width の既定値は、ブラウザにより異なる場合があるようです。 複数のプロパティを指定する場合は、カンマ（ , ）で区切って記述します。 content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2" widthプロパティについて width は、ビューポートの幅を設定します。値にはピクセル数、または device-width （端末画面の幅に合わせる）を指定します。 <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width"> device-width を指定するのが一般的です。 device-width を指定した場合は、初期のズーム倍率が 1 になります。（
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～