これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
[css] CSS3時代の上下中央に配置するパターン
最近多用するので…。 要素の全画面化について 先に親になる要素を画面いっぱいに広げる方法について補足しておく。 大きく分けると絶対配置とサイズ指定の２つある。 絶対配置は、position:absoluteを指定した上で ４方向の位置を0（または任意の値）にする。 #wrapper { position:absolute; top:0; right:0; bottom:0; left:0; } サイズ指定は、widthとheightを指定するだけだが、 対象の要素だけでなくその親も高さと横幅がないと指定したサイズにならない。 特に高さについての指定がハマりやすい。 単純にbody直下に要素を配置しただけの場合、 <body> <div id="wrapper"></div> </body> htmlとbodyもheightを指定してないと画面いっぱいに広がらない。 html, body,
![[css] CSS3時代の上下中央に配置するパターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/5cb349daa94672c13da64f0c346bcbd2c7758d33/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
[意外と知らないCSS]スマホ制作に便利！display:table-cellを使った横並びのレイアウト | Cappee Design
スマホコーディングただいまガシガシ中の@cappeeです。 今回は「意外と知らない」というか、「便利だけどなかなか使えないCSS」かもしれませんね。 今回は、display:table-cell をご紹介します。 なかなか使えないと言った理由はIE8以降からの対応になるからです。 ただし、display:table-cell はスマートフォンサイトの制作にかなり便利なので覚えておくことは必須ですね。 display:table-cell で要素が簡単に横並び display:table-cell とは、要素をテーブルのように表現することができるプロパティです。 親の要素に display:table を指定することでテーブルと同じような構造で指定することができます。 display:table-cell を指定した要素はテーブルのように高さが同じになります。 また、floatを使っていな
モバイル端末のブラウザ画面サイズとMedia Queries
Androidの画面サイズがピンキリ過ぎてｶｯとなったので真面目に調べてみた。 調べついでにメディアクエリーも書いてみた。 下に調べた各端末のサイズを表で晒してるんですけど、 端末サイズが小さくてもブラウザで拾えるwindow.innerサイズは大きいので AndroidスマホのFWVGA以下とqHD〜HD、iPhone、iPhone5、タブレット という具合にざっくりグループ分けできるようでした。 landscapeは単純に値が逆になるのかというとそうではなく、 特にiPhoneの場合にはメニューバーのサイズが変わるのでheightが微妙に変わります。 アスペクト比がはiPhoneが3:2でAndroid端末は16:9、 タブレット端末の場合はiPadは4:3でAndroid端末は16:10 viewport で width=device-width,initial-scale=1,ma
Android2.2 とtransformのバグ
Android2.2 とtransformのバグ Android2.2(Regza phone)で検証していると色々とバグと遭遇しました。 rotate3dに対応してない 次のようにrotate3dを利用して要素を回転させようとするとAndroid2.2 だけ回転されません。 div{ width:50px; height:50px; margin:10px; -webkit-transform:rotate3d(0,0,0,45deg); transform:rotate3d(0,0,0,45deg); background:red; } サンプル 3D系のtransformが発生すると以降の要素でrotateがきかなくなる 次のようなHTMLがあったとして、 <div></div> <div></div> <div></div> <div></div> <div id="d3d"></
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-
msto.jp - it転職 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
公海555000kk线路检测—首页（欢迎您）