縦中央に揃える最新の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

clearfix当社用

| コメント(0)
150114_oshi_01.gif
要素をfloatさせると、高さに含まれなくなり上記のように親要素からはみ出てしまいます。

これを解決するには

・親要素に「overflow:hidden;」を指定する
・親要素にfloat解除のためのスタイルをまとめたclass(いわゆるclearfix)を当てる

の2つが一般的だと思います。

2つ目のclearfixはどこまでを対象ブラウザに含めるかによって内容が変わるのですが、
当社でテストしているブラウザに対応しているものは下記のようになります。

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

上記で

・最新Google Chrome
・最新Firefox
・最新Safari
・IE6~11

に対応できます。
IE6、7の記述は必要に応じて。

要素の内側にボーダーを付ける方法

| コメント(0)
今まで使いドコロがなかったのが不思議なくらいですが、
要素の内側にボーダーを付けるというのを調べました。

aタグで囲った画像をマウスオーバーする際にボーダーを表示させる想定です。

■HTML

<a href="#"><img src="xxxxx.jpg" /></a>


■CSS

a {
  overflow: hidden;
  display: inline-block;
  *display: inline; /* ie6,7 */
  *zoom: 1; /* ie6,7 */
}

a:hover {
  border: 3px solid #000;
}
 
a:hover img {
  margin: -3px;
}

IE6から対応。
赤字部分はインライン表示の指定ですが、ブロック要素かつ横幅100%にならなければなんでも大丈夫です。
複数並べる場合は float でもいいし、display:block; を指定して横幅を決めた div などで囲ってもいいと思います。

aタグのサイズを指定する場合は、a:hover にボーダーを引いた分のサイズを指定しないとならないようです。

130814_oshi_01.jpg


Google Chromeで印刷に対応する

| コメント(0)
WEBページを見栄え良く印刷させるためには
CSSでの調整が必要です。

とくに背景色や背景画像が印刷できないのが大きいと思いますが、
Google Chromeの場合、以下の処理だけで対応させることができます。

---------------------------------------------
@media print {
body {
-webkit-print-color-adjust: exact;
}
}

もしくは印刷用のCSSの中で

body {
-webkit-print-color-adjust: exact;
}
---------------------------------------------