スマホサイトコーディングの覚え書き：コードやCSS編

  • 投稿日
  • 著者 ituki
  • カテゴリー CSS
Pocket
LINEで送る

box-sizing

paddingとborderを幅や高さに含めるかどうかのプロパティ。
border-boxだと含めるになります。
%を使うスマホサイトやリキッドデザインの際はとても便利です！

background-origin

背景の基準位置のプロパティ。
border-boxだと、borderの下まで背景を引くことができます。
content-boxだと、paddingの内側で背景にアイコンを表示したいときに便利です！

background-size

背景画像のサイズを指定するプロパティ。
retina対策で２倍サイズで作った画像を半分で表示させたりすることができます。

display:boxで横並びした要素の片方だけ幅を可変にする

例えばテキストとinput[type=text]を横並びするときに、input[type=text]のほうだけ幅を可変にするときに使います。

<p class="name">
	<span>名</span>
	<input type="text">
</p>
p.name {/* 親 */
    display: -webkit-box;
    display: box;
    -webkit-box-align: center;
    box-align: center;
}
p.name input {/* 子の幅を可変にしたいほう */
    display: -webkit-box;
    display: box;
    -webkit-box-flex: 1;
    box-flex: 1;
}

背景画像とグラデを同じ要素に指定する

p.btn a {
    background: rgb(181,189,200) url(http://jsrun.it/assets/r/7/z/X/r7zXg.png) right center no-repeat; /* Old browsers */
    background: url(http://jsrun.it/assets/r/7/z/X/r7zXg.png) right center no-repeat,  -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,189,200,.8)), color-stop(36%,rgba(130,140,149,.8)), color-stop(100%,rgba(40,52,59,.8))); /* Chrome,Safari4+ */
    background: url(http://jsrun.it/assets/r/7/z/X/r7zXg.png) right center no-repeat,  -webkit-linear-gradient(top,  rgba(181,189,200,.8) 0%,rgba(130,140,149,.8) 36%,rgba(40,52,59,.8) 100%); /* Chrome10+,Safari5.1+ */
    background: url(http://jsrun.it/assets/r/7/z/X/r7zXg.png) right center no-repeat,  linear-gradient(to bottom,  rgba(181,189,200,.8) 0%,rgba(130,140,149,.8) 36%,rgba(40,52,59,.8) 100%); /* W3C */
    -webkit-background-size: 20px 20px,auto auto;
    background-size:  20px 20px,auto auto;
    -webkit-background-origin: content-box, padding-box;
    background-origin: content-box, padding-box;
}
//background-sizeとbackground-originは画像,グラデの順番で個別に指定する。

iPhoneでは12px以下のフォントサイズはなるべく使わない

12px以下はマルチバイトの幅計算がおかしくなる（右に謎の隙間ができる）のでなるべく使わないほうがいいようです。
使うときは下記のCSSも同時に使ったほうがいいでしょう。

.font_small {
    letter-spacing: -0.01px;
}

参考サイト：
iPhoneで特定のフォントサイズでできる謎の余白の対処法 | NxWorld

Android2.3以下では11pxのフォントサイズは使わない

11pxはマルチバイトの幅計算がおかしくなる?（右に1em程度の隙間ができる）ので使わないほうがいいでしょう。
上記のiPhoneのCSSハックも効かないようです。

Android CSS3 iPhone