mania-ku

何か作りたいプログラマ未満。

【iPhone】background-sizeがiOS7以降効いていない場合

background-sizeを使っている場所でiOS7以降で効いていないのは、backgroundのショートハンドがCSS3仕様対応したためです。
background-sizeプロパティを先に書いて、backgroudプロパティを後に書いているときなどに起こります。

参考:CSS3適合UA(iOS7等)に伴うbackground-sizeの指定順に注意|Web制作 W3G

【スマホ】selectのテキストは左右中央にできるのか?

できるのかな?とtext-align: center;を試しましたが、動かず。

ぐぐったらtext-align: -webkit-center;で左右中央にできるというのでやってみたけれど、iOS7・iOS8で効きませんでした。

bugfix

試行錯誤したら動きました!
※iPhoneと同じCSSだとAndroidで動かない(labelクリックしてもselectが開かない?)みたいです。

//HTML
<label>
    <select>
        <option>選択1だよ〜</option>
        <option>選択2だよ〜</option>
        <option>選択3だよ〜</option>
    </select>
</label>


//CSS
select { //Android
    text-align: center;
}

@media screen and (max-device-width: 480px) { //iPhone
    label {
        display: -webkit-box;
        display: box;
        box-pack:center;
        -webkit-box-pack:center;
        background-color: #fff;
        border: 1px solid #CCC;
        border-radius: 6px;
        cursor: pointer;
    }

    select {
        border: none;
    }
}

background-size: coverを使うとき注意が必要なこと

background-size: coverを使った背景画像を拡大縮小して背景を覆う方法は、スクロールが生じるページだと下部に背景画像がない部分が生じることがあります。

修正方法

bodyに指定すると背景画像がない部分が起きなくなります。

body {
    width: 100%;
    height: 100%;
    background: url(背景画像のパス) left top no-repeat fixed;
    background-size: cover;
}

【要注意】対応ブラウザはIE9以上

IE8以下に対応するときは、下記のような方法があります。

  • css3pieを使ってハック
  • ・jQueryプラグインのjquery.backgroundSize.jsなどを使う
  • ・背景画像をimgタグに変換して、同じ位置に配置する方法(不具合多いらしい)

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

box-sizing

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

background-origin

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

background-size

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

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ハックも効かないようです。

スマホサイトコーディングの覚え書き:ツール編

Can I use

HTML5やCSS3、SVGなどブラウザの対応を調べるサイト。
必要なプリフィックスもわかります。
PCサイトをHTML5で作るときにも使えます。
菊池崇さんのセミナーで知りました。
ちなみに菊池さんのレスポンシブの本はオススメ。

Ultimate CSS Gradient Generator

グラデを作るツール。
フォトショっぽいUIなので、フォトショに慣れていたら使いやすいです。

GradientFinder

こちらは同じグラデでも、画像からグラデを作るツール。
複雑なグラデやグラデの詳細な情報が残っていないときには便利です!
ただし古いバージョンのwebkitのグラデには対応していないので補完する必要があります。

LONG SHADOWS GENERATOR

ロングシャドウを作るツール。
今回のブログデザインのときにもお世話になりました。

CSSの三角形ジェネレーター

吹き出しとかに使うCSSの三角形のジェネレーター。

border-imageシュミレーター

border-imageのジェネレーター。
ただし、このプロパティはレティナ対応はしていないようなので、こちらのコードを参考にしてください。

【CSS3】スマホで右側にアイコンを表示する方法2種とborderに背景画像を指定する方法

右側にアイコンを表示する方法

background-position: calc(100%-XXpx) XX

この前旦那さんに「calc(100% – XXpx)」というCSS3の指定方法を教えてもらいました。
右側のアイコンを指定するときに超便利そう!にもかかわらず、PCはIE9以上、スマホはiOS6.0以上・Android4.4以上と現時点では使えないことこの上ない・・・

ちなみに旦那さんはpaddingを指定したhタグのbeforeをボーダー状にするとき、高さを100%で指定するとはみ出るのでその対策に使っていました。予想外の使い方・・・
最近CSS3を勉強していた方法で、思わず「background-clip + box-sizing」バージョンを作ってみました。こちらだとスマホで使える(と思う。見てないけど。)ので、汎用性があるような気もしなくもないです。

background-position: right XXpx XX

IE8以下を切り捨てれば使える便利なCSSプロパティー&セレクター | Webクリエイターボックスで見て使ってみたいなーと思ってた記述。どうやらスマホには対応していないみたい。。。ググる方法もわからず断念。
デモ3番目

background-position: right XX + background-origin: content-box;

display: blockのときに有効なのがこちら。
画像の配置を右にして、background-originで背景の基準をコンテンツのみにします。
デモ4番目

display: inline-blockにしたいとき

afterの背景画像にアイコンを指定し、position: absoluteで配置します。
デモ5番目

borderに背景画像を指定する方法

一枚の画像をスプライトのように使って幅が広くなったり、高さが変わっても使えるボタンを作る方法です。
ジェネレーターもあります。

レティナ対応する

/*BはAの2分の1を指定する*/
element {
    border: Apx solid;
    -webkit-border-image: 背景画像 B repeat;
    border-image: 背景画像 B fill repeat;
}

デモ2番目

【Advent calendar】display: box内の改行の方法

12時を超えてしまいましたが、これはAdvent calendar2日目の記事です。
昨日の記事は、iPhone/iPadでlabelを使う方法でした。

display: box内で幅より長い英文を使うと改行されません。
word-wrap: break-word;だけだと、突き抜けてしまいます。
折り返すにはCSSにもう一行追加が必要です。

ele {
	display; box;
	word-wrap: break-word;
	word-break: break-all;
}

参考サイト;css3のdisplay:box;の折り返し

3日目の明日は「電子絵本サービス『PIBO(ピーボ)』にお問い合わせをした話」です。
ではまた明日;)

【セミナー】『レスポンシブWebデザイン』刊行記念ハンズオンセミナーに行って来ました

菊池 崇さんのレスポンシブWebデザインマルチデバイス時代のコンセプトとテクニックのハンズオンセミナーに行って来ました。菊池さんの語り口が好きなので、何度か菊池さんのセミナーに行っているのですがなんか名前覚えられていました。ちょっとびっくり。

ハンズオンセミナーなのにPC持っていくのを忘れたので、ノートに手で写経しましたw
字が汚いので、もはや誰にもみせられませんwww
今回のセミナーはコーダー向けというわけではなかったようで、手で写経でもなんとかなりました。
以下感想です。

  • ・テキストエディタではなく、デザイニングブラウザ?chromeのディベロッパーツールで書いてたのが印象に残った
  • ・レスポンシブというかスマホコーディングするのはやはり、
    chrome設定>Overrides>Device metricsでブラウザサイズ指定するの便利
  • ・開始30分も遅れてしまったけど、連絡したら丁寧にWeb Professional編集部の担当の方から連絡をいただいた。Web Professional編集部に入りたくなりました。
  • ・セミナー19時からはやっぱり早い・・・定時が19時だからかもしれないけど。
  • ・参加目的は決してアスキー社内に入りたかった訳では・・・入りたかったです。
    ちょっとだけそのために参加した感はあります。終わった後に受付付近の本棚見てニヤニヤしていたのは私です。
    エレベーターの別の階から乗ってくる人たちは(アスキー以外の角川の方?)一体どんな本に携わっているんだろうなぁと妄想膨らませていました。お邪魔しました!
    ※本が好きなので、子どもの頃から本に携わる仕事に興味津々です。機会があれば本屋のバイトとかしたかったなぁ・・・

楽しかったです。でもできれば平日じゃなければよかったなぁ

【CSS】CSSフィルタってなんぞや?

この前の更新から、ChoromeでGoogleの広告をマウスオーバーすると、パァー!(正確にはbrightnessです)となってて、何よ!何なのよ!!?ってディベロッパーツールみたりググったりしてみたら、これはCSSフィルタというものを使っているみたいです。

デモを作ってみたところ、結構楽しい。

スマホで使えたら、画像の容量とか削減できるんじゃないの?と思ってcaniuse.com見てみましたが、アンドロイドが対応していないようですね・・・
PCもせめてFirefoxで対応してくれればなぁ〜

【jQueryプラグイン】IEでdisplay:boxができるJS、flexiejsができる子だった。

CSS3でdisplay:boxっていうのがあります。
直下のブロック要素要素が横並びかつ、同じ高さになるというもの。
直下のブロック要素要素にbox-flexも同時に使って、%を使わず幅ぴったりに要素を並べることもできます。

これは便利なんですが、IEで使えません・・・
そんなときはdisplay:boxを使っているHTMLでflexiejsを読むだけ(jQueryを読んでいなかったら、flexiejsの上で読む)
なんということでしょう。。。display:boxがIEでも再現されてる!
フラットデザインやレスポンシブデザインなんかに使えるんじゃないでしょうか。

ダウンロード
デモ