スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
MdN Design｜総合情報サイト
iPhone 4はiPhone 3GSと同じ画面サイズのまま、2倍の解像度となった。 Androidでは機種により異なるが、1.5倍のものが多い。 同じ画面サイズで表示できるピクセル数が増えたため、細かい文字もくっきりとして読みやすくなった。 しかし、コンテンツの1pxをデバイス上の1pxとしてそのまま表示すると、全体的に小さく表示されてしまうことになる。 そこで、WebKitをベースとしたブラウザには「devicePixelRatio」というプロパティが用意されている【1】。 devicePixelRatioとは、直訳すると「デバイスのピクセル比率」で、コンテンツの1pxを実際のデバイス上で何pxとして描画するかを示すものである。 【1】スマートフォンのdevicePixelRatioと解像度の一例
html999 » スマートフォン用サイト-はじめてのコーディングの前におさえておくこと
はじめてスマートフォン向けサイトを制作したときに調べたことのまとめ。 （※スマートフォン専用サイトでiPhoneとAndroidに対応させる場合） 基本的にリキッドデザインにする 画面サイズの目安は、縦のとき：幅320px×高さ480px 横のとき：幅480×高さ320px。 iPhoneの場合は上記サイズで問題ないけど、AndroidのXperiaでは長いページのときにスクロールバーが表示され（初期のモデルSO-01Bで確認したので最新のは違うかも）320pxよりせまくなるっぽい。 あと、横に向けたときにいい感じに伸びてほしいと言われる（可能性がある）ので、スマートフォン専用のサイトならばリキッドデザインにしておいた方が無難。 （2013/10/23追記） Xperiaの初期モデルSO-01BのAndroid 1.6のとき（バージョンアップした場合は分かりません）の縦表示時の有効幅は31
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
PC版とスマートフォン版サイトを自動で切り替える方法 [ホームページ作成] All About
スマートフォンは、PC用に作られたウェブサイトでも表示できます。しかし画面サイズが小さいため、そのままの状態では読みにくい可能性があります。その場合の対策としては、 レスポンシブWebデザインを採用する スマートフォン専用サイトを作る などの方法があります。 ■更新や管理が楽なのはレスポンシブWebデザインだが…… 更新や管理の労力を考えれば、レスポンシブWebデザインを採用する方が楽でお勧めです。その方が、同じ情報を掲載したページを複数用意する必要がありませんし、新しい端末が登場しても(おそらくは)何もせずに対処可能ですから。 (参考) ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選 しかし、既存のPC用サイトがレスポンシブ化しにくいデザインな場合や、スマートフォンの特性を活かしたウェブサイトを用意したい場合では、PC版サイトとスマートフォン版サイトを分離する方が望ましいこ
![PC版とスマートフォン版サイトを自動で切り替える方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/38b8297bdad222f2431f20c9f03f3e35419e4f37/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F8%2F6%2F4%2F8%2F3%2F201510301459%2Ftopimg_original.png)
HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
ゼロからはじめるスマートフォン専用サイト（iPhone＆Android）の作り方を学べるサイト集めました | HTML5でサイトをつくろう
これからのWEB制作はPCサイトだけではなく、iphoneなどのスマートフォンやipadなどさまざまなデバイスでの閲覧を前提として作成しなければいけません。 iphoneサイトやAndroidサイトはHTML5やCSS3にかなり対応しているので簡単そうなイメージもありますが、縦画面、横画面など変化することを前提に構築しなければいけませんし、Androidは機種によって解像度が違う、機種によってCSSが適用されないという昔のモバイルサイトより大変なことがおきているようです。 またシミュレーターを使ったり、実機をたくさん揃えたり、レンタルしたりとPCサイトより手間な制作の時代に逆戻りですね・・。 友人に聞いたら現在は案件よってはiphoneのみ対応、iphoneとdocomoを対応、すべて対応などさまざまなようですね。まあこれは予算によるのかもしれませんね。 僕はまだ本格的なスマホサイトの仕事
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
