mania-ku

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

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タグに変換して、同じ位置に配置する方法(不具合多いらしい)

【Mac】フォント変換はFontPrepがいいかもしれない

HTML5&CSS3のPCサイトやスマホサイト、レスポンシブなんかではウェブフォントを使うことがあると思います。
すでにあるフォントを使うにしても、新たにフォントを作るにしても、変換が結構大変なんですよね・・・
いままで使っていたサービスが使えなくなる、なんてことも多々ありますし。
プライベートでサイトを作るときにウェブフォントを使おうと思って変換サービスを調べていたら、FontPrepを見つけました。

FontPrepってどんなサービス?

TTFかOTFから、他の拡張子のフォントを作ったり、CSSを書き出すアプリです。

変換方法

  1. 1.TTFかOTFをドラッグ&ドロップ
  2. 2.フォントが読み込まれたらフォント名とアイコンが並んだバーが出るので、一番左のアイコンを押してエクスポートする

※フォントが読み込むのは、他のアプリなんかと同様遅いので気長に待ってください。

スマホサイトコーディングの覚え書き:TIPや(多分)仕様

TIP

:beforeや:afterのcontent内で実体参照(HTMLでは&〜のもの)を使いたい

こちらの変換スクリプトを使うと便利です。

スマホで大文字を連続入力する方法

  • ・iPhone/Android:Shift(↑キー)を連続でタップする
  • ・Xperia:Shift(↑キー)を1度タップする

※ただしiPhoneだと、キーボード設定で「Caps Lockの使用」をONにしないとダメなようです。

(多分)仕様

input[type=file]のサポート

iOSでは6以上、Androidでは3以上です。
File APIを使えば、サポート外でも大丈夫なようです。

Youtubeのサポート

アプリにとばす

アプリを入れていないとnot foundと表示されます。
アプリの有無はjsなどで確認できないので、お勧めしません。

埋め込み動画

大体の機種でクリックしたら、自動で全画面になりますし、一部の機種では全画面ボタンクリックで全画面になります。
ただし、FlashPlayerのバージョンが低い一部の機種では見ることができません。

●(黒丸印)が小さい機種がある

たぶんフォントの問題だと思います。

Androidはパスワード認証のID入力のときに日本語入力になる

これは地味にイライラしますよね・・・
docomoのガラケーもそうだった気がします。

Basic認証かかってると、Android標準ブラウザでファイルのダウンロードができない

つまり壁紙コンテンツなどが保存ができません。

参照:Android の標準ブラウザで、ファイルがダウンロードできない(Basic認証、POST、not found) – PC・通信メモ

スマホサイトコーディングの覚え書き:コードや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のジェネレーター。
ただし、このプロパティはレティナ対応はしていないようなので、こちらのコードを参考にしてください。

【Firefox】画像をfadeすると、画像の大きさが変になる

jQueryのfadeを行うと、Firefoxで画像の大きさが変になることがあります。
マウスオーバーのときになるみたいで変にガタガタします。
CSSだけで直るので、サクッと修正しちゃいましょう。

修正方法

fadeさせる画像にbox-shadowを指定します。

img {
    box-shadow: #000 0 0 0;
}

参照:JQuery fadeIn fadeOut image difference 1px in FireFox – Stack Overflow

IE7以下に対応する

CSSで直す場合、そのまま使うとIE7以下ではfadeが効かない不具合があるので、CSSハックで対応します。

img, x:-moz-any-link, x:default {
    box-shadow: #000 0 0 0;
}

【WordPress】テーマを3代目にしてみた

WordPress3.8.1にアップデートするときにテーマを変更したかったので、またテーマを作ってみました!

今回こだわった・変えたところ

  • ・どっかにロングシャドウを使いたかったので、使ってみた。
    ジェネレーター:Long Shadows Generator
  • ・前検索が下でユーザビリティが悪かった気がしたので、上に持ってきた。
  • ・フラットデザイン的なふんいき
  • ・字をでかくする
  • ・あまりつまってないフォントを使う。
  • ・aタグは蛍光マーカーのような感じで

次回気をつけたいところ

  • ・iframeの存在を忘れない。
  • ・サイト内検索のタグとカテゴリを変更したときに、検索結果でもそのままのoptionにしたい。
  • ・もうすこしWordPressに慣れる
  • ・PHPもっと勉強する
  • ・なるべく旦那さんに聞かない

【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番目

【WPプラグイン】アマゾンアソシエイトをスタイリッシュに表示するAmazonJS

たまにアマゾンアソシエイト貼っているんですが、そのまま貼付けるとなんか野暮ったいですよね。
そんなときはAmazonJS
いい感じにスタイリッシュにしてくれます。

通常アマゾンアソシエイト

通常アマゾンアソシエイトはこんなかんじで表示されます。
例として最近レンタルではまってるもやしもんでも。
・見た目が野暮ったい
・プレビューで表示できない
のがつらいですよね

Amazon JS

Amazon JSだとこんなかんじで表示されます。
比較のためにこちらももやしもんで。
・スタイリッシュな見た目
・レスポンシブに対応してるっぽい
のがいいですよね。

Amazon JSを導入する

管理画面>プラグイン>新規登録から「AmazonJS」を検索してインストールします。
管理画面>設定>AmazonJSをクリックして設定画面を開きます。
設定には「アクセスキーID」と「秘密アクセスキー」、そして「アソシエイトタグ」が必要です。
アソシエイトタグは、日本語で取得できるので大丈夫。
問題は「アクセスキーID」と「秘密アクセスキー」です。(英語で取得する必要があるっぽい)
私はわからなかったので、旦那さんにお願いしました。
Access Key IDとSecret Access Keyの取得 – Amazon Web サービスを参考にしました。

【Emmet】連番を途中からにしたい。降順にしたい。

途中から連番にしたい

$@(連番を始めたい数字)*(個数)

div#box$$@5*2
↓
<div id="box05"></div>
<div id="box06"></div>

なお、下層で同じ連番を使いたいときも「$の後ろに@+連番を始めたい数字」にする

降順にしたい

$@-*(個数)

div#box$$@-*3
↓ 
<div id="box03"></div>
<div id="box02"></div>
<div id="box01"></div>

途中から連番かつ降順

$@-(連番を始めたい数字)*(個数)

div#box$$@-8*5
↓
<div id="box12"></div>
<div id="box11"></div>
<div id="box10"></div>
<div id="box09"></div>
<div id="box08"></div>