CSSで指定できるフォントサイズの単位のひとつに、vw、vh があります。
viewportに応じてサイズが変わるのでレスポンシブなサイトで便利なのですが、指定が少しわかりづらいと思っていました。

●1vw = 画面の横幅を 100% としたときの 1%分の幅

たとえば横 640px のデザインラフ上で 30px の文字は何vwになるのか、パッとはわかりません。
計算すると 4.68vw くらいなのですが、毎回計算するのも大変ということで
CSS上で直接計算するようにしてみました。

● font-size: calc(100vw / ( 640 / 30 )); /*30px*/

640  が「デザインラフの横幅」、30 が「デザインラフ上でのフォントサイズ」になります。

フォントサイズを変えるときもわかりやすいし、計算も不要で楽なのではないでしょうか。
2018/8/2 追記
いつの間にか↓の画像を比較してもほとんど差がなくなっていました。
以前の状態をスクショしていなかったので確実ではありませんが、下記の対策をとらなくてもきれいに縮小されるようになったようです。


高解像度ディスプレイへの対応で、大きめの画像を縮小して使うことがあると思います。
これを Windows の Google chrome で表示するとかなりぼやけてしまうのですが、
その現象の回避方法としてimgに

-webkit-backface-visibility: hidden;

というスタイルを当てるものがあります。

が、自分のサイトの場合当ててみてもまったく変わらず・・
詳しく調べてみたところ、img に以下のスタイルを当てていると効かないようでした

border-radius: ○px;

角丸ですね。
ちょっと不便ですが囲った div に当てるなどで対応できますので、
便利に使っていこうと思います。

もし他にも競合できないスタイルがあった場合は追記します!


■-webkit-backface-visibility: hidden; なし
120509_oshi_01.jpg

■-webkit-backface-visibility: hidden; あり
120509_oshi_01.jpg



CSSでのフェード時に要素がズレる

| コメント(0)
新しめのブラウザ向けに制作する場合、マウスオーバー時のフェードなどに「transition」を使うことができますが、フェード時にgoogle chromeで1pxズレることがありました。

このような場合、下記のスタイルを当てることで解消できます。

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

transition を記述している要素に当てます。

縦中央に揃える最新のCSS

| コメント(0)
これまでいろいろな方法で実装してきましたが、どれもそれなりに手間が掛かってしまっていた縦中央揃え。古いブラウザに対応しなくてよい場合のとても簡単な方法が紹介されていました。


タイトルにある通りIE9以上で使え、親と子どちらの高さも指定する必要なし。CSSの記述も簡潔です。


■HTML

<div class="sample">
<p>天地の中央に配置</p>
</div>


■CSS

.sample p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ベンダープレフィックスはつけておきます。

transform が使えなかった頃は子要素の高さの半分を数値で入れる必要がありましたが、IE8以下が減ってきたことでようやく実用的になってきたのかな、と思います。
iPhoneで画面を横に回転させると、文字サイズが拡大されてしまう場合があります。
これを無効にするには<body>タグに以下のように記述します。

body {
-webkit-text-size-adjust: 100%;
}

これだけで自動拡大を防ぐことができます。

ただ横向きにした場合は相対的に文字サイズが小さくなり、
バランスが悪くなってしまいがちなのも確かですので、
レイアウトが崩れてしまうような部分だけに指定する、というのもアリかもしれません。

計算式を使った幅指定

| コメント(0)
width : calc(100% - 10px) ;

上記のような指定です。
SS3が出てきた頃、「計算式を使っての幅指定」がついに使えるようになるのか!と喜んだものの、実際にはブラウザの対応がまったくで使えるのは当分先になりそう...という残念な思いをしました。

下記のサイトが各ブラウザの対応状況をまとめてくださっているのですが、それを見る限り気を付ければ使って行けそうな感じ(スマホが若干心配ではあります)。



width : 98% ; /* 旧ブラウザ用 */
width : -webkit-calc(100% - 10px) ;
width : calc(100% - 10px) ;


現在(2016年7月)ではそろそろ必要ないかもしれませんが、念のためベンダープレフィックスとフォールバック用のスタイルを書いておくとよさそうです。

IEで互換表示させない

| コメント(0)
弊社でも何度か問題になったことのあるIEの互換表示。
IE10あたりからは簡単に設定できなくなったため「誤クリックで設定してしまった」という状況は少なくなっていますが、それでも一度問題になったことがあったのでこのタグを入れておくと良さそうです。

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>


<head>内の外部ファイル読み込みよりも前に入れます。

それぞれのIEの標準モードで表示されます。

CSSでマウスオーバー半透明

| コメント(0)
マウスオーバーすると半透明になる効果です。
最近はJSではなくCSSでやることが増えてきたためメモしておきます。

■CSS

.imgover {
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.imgover:hover {
filter:Alpha(opacity=70); /* 旧IE */
opacity: 0.7;
}


これだけ、簡単です。
あとは効果を付けたい要素に class="imgover" を付けるだけ!

transition を使っているためIE9以下の古いブラウザでは対応していませんが、
その場合もフェードはしないものの半透明にはなるので、
厳密に同じでなくても良い場合は使ってしまって良いと思います。
スマホ対応する案件が増えるに連れ、YouTubeを横幅100%に対応させることも増えてきました。
その度に検索しにいっているので残して置こうと思います。

いつも参考にさせていただいてるのはこちらの記事。



■HTML

<div class="movie">
    <iframe src="https://www.youtube.com/embed/XXXXXXXXXXX?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>


■CSS

.movie {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; /* 現プレイヤーでは不要? */
    height: 0;
    overflow: hidden;
}
 
.movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

上記で簡単に実装できます。


レスポンシブなサイトを作る場合、PC表示では決まった width・height に背景画像を敷くだけで良かったものが、SP表示では横幅に合わせて可変させなければならない、という場面は多いと思います。
背景画像に合わせて高さを可変させることはできませんが、この指定を応用することで実装可能です。
上記のソースの padding-bottom に背景画像の縦の比率を入れ、背景画像と背景サイズの指定を加えます。

.movie {
    position: relative;
    padding-bottom: XXX%;
    background: url(背景画像のパス);
    background-size: 100%;
    height: 0;
    overflow: hidden;
}

hrの余白

| コメント(0)
最近はhr自体あまり使うことがありませんが、いざ使うとなるとブラウザ毎の余白の解釈の違いに苦戦することに・・
以前メモしておかなかったことが悔やまれます。

なんとか記憶から掘り起こした指定が以下。
150121_oshi.gif

これでこちらの環境ではうまくいくようです。

・Google Chrome
・Firefox
・Safari
・IE6~11