スマートフォンサイトの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; を適宜指定する。 フォ
初心者必見！見やすくて使いやすいスマホサイトを制作する5つのコツ | ajike switch
こんにちは デザイナーの石丸です。 最近はやっと春らしい暖かい日々が続くようになりましたね。 さて、最近スマホサイトのデザインを手がけることがあったので、 デザイン時の気付きやポイント、基礎ルールをまとめました。 基礎中の基礎ですが……しかしまずは基礎をしっかりと固める事が１番ですっっ！ では始めます。 1 横幅は320pxまたは640pxでデザインする 2 フォントについて 3 ボタンデザインについて 4 見出しデザインについて 5 余白のあるデザイン 1 横幅は320pxまたは640pxでデザインする iPhone4から解像度が640×960となり、最近では横幅640pxでデザインすることが 主流となってきました。 ここで気をつけることは… 解像度が横320pxの端末では640pxの画像を320pxで指定し、コーディングすることになりますので、 フォントサイズや余白など、２で割り切れる
スマホサイトはこちら、PCサイトはこちらのまとめ（1） – Webディレクターのお仕事ブログ
ちょっと業務ついでに、いろんな業界の「スマホサイトはこちら」「PCサイトはこちら」のリンクをまとめてみる機会があったのでせっかくなんで書いてみます。とりあえず大手っぽいサイトから、PCサイト→スマホサイトの動線と、スマホサイト→PCサイトの動線をキャプチャしています。 銀行 三菱東京UFJ銀行 私も給料を振り込んでもらっている三菱ですが、スマホサイトへのバナーがちょっと小さいです。WVGAのacroでこれだと、QHDとかだと大丈夫なんでしょうか。 三井住友銀行 こちらは今熱い三井住友銀行です。どこのサイトも最上部にリンク設置が基本ですね。ボタンは幅もそこそこで普通に押せる感じです。 りそな銀行 こちらはスマホ版はフッタ付近にボタンがある感じですね。スマホサイトにリンクを置く場合、最上部か最下部かに結構分かれています。PCサイトのバナーはちょっと高さが不足していて押しづらさを感じます。 ゆう
PC用とスマホ用の表示切り替えをCSSだけで行う方法(その1) - ホームページ制作・システム構築・ＤＢ設計のユタシステム
ホームページ制作 に関連する記事です。 PCサイトはもちろんスマホで閲覧することは可能だけれど、やはりスマホにはスマホ用のサイトを表示してあげることがユーザビリティ的にも必須であると考えている。 お使いいただいている方ならご存知であると思うが、スマホでPCサイトを閲覧するには文字が非常に小さく、拡大表示しないと閲覧不能なサイトも多い。 現在iphoneは「4」の時点だけれど、フラッシュは読めないし、何気に正確に意思伝達がなされないサイトが多々ある。 また、リンクが小さくなってしまいがちで、指でクリックするにはいささか小さすぎるように思える。 スマホ用のサイトといえばやはり、リンクが大きく、クリックしやすく、表示文字もおおきく、画面サイズに忠実に表示されてるサイトを使いやすく感じるのである。 基本的にスマホ用のサイトというものはPCサイトから余分なものを削って、必要最低限の情報だけを表示する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
