画像の「縦方向の最適化」って何!?たった数行でスマホビューを改善しよう！
webデザインの大きな問題の1つは、スマホビューにおける縦長画像。今回は「縦方向のレスポンシブ」を紹介します。思い付きで実装してみたのですが、驚くほどスマホビューが改善できたので、そのJavascriptのコードを紹介します。 デモを見る 1「縦方向のレスポンシブ」って何？縦長画像をスマホで見たサンプル今回の問題は、縦長画像のスマホビューです。iPhoneやAndroidの解説記事などでスクリーンショットを載せる場合、縦に長い画像を利用しますよね？するとスマホビューではサンプル図のように、画像が画面全体を占領してしまうことが少なくありません。 max-width:100%を設定することで「横方向」には最適化していても、「縦方向」には最適化できていない例です。画像はやっぱり文字と一緒に見たいですよね…。max-height:...%は「画面の高さ」ではなく「コンテンツの高さ」が基準になるので
約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています！ ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
Google「スマホ対応」に最適化｜PCサイトをスマホ変換「shutto（シュット）」
スピーディ PCページの要素をドラッグ＆ドロップすることで直感的にスマホ対応ページを組み立てていくため、簡単なページであれば数十分でスマホ対応が可能です。
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ｜caraldo.net | WebとiPhoneとロードバイクが大好き！