作っていたサイトで、ちょっと写真をカッコよく表示したいなと思いborder-radiusとoverflow:hiddenを利用した角丸マスクで表示するようなものを作りました。その時iOSで少しハマったので、その対処法などをご紹介します。

実際に作ったのが以下のようなものです。

See the Pen border radius & overflow hidden by monochrome (@monochrome-design) on CodePen.

それなりに上手く出来たと思っていたのですが、スマホで見てみると丸くマスクされていない事が判明。。。
あれ?と思いmacのsafariで見てみると同じくマスクされていませんでした。しかし、chromeやfirefoxで見ても問題ないのでsafari固有の問題かと思ったんですが、スマホで上手く表示されないのは痛い、、

macのsafariで表示した例


丸く切り抜かれて無くて非常に残念。これは何とか出来ないかと思い調べてみると同じ悩みを持っている方がいて、対処法も書いてありました。

親要素にz-indexを指定すると解消される

答えから言うと、親要素(今回の場合、circle)にz-indexを指定すればマスクが正常にかかります。
下記のコードが修正後のものです。z-index加えただけですが、iOSでもmacのsafariでも正常にマスクがかかっている事を確認しました。

See the Pen border radius & overflow hidden fix by monochrome (@monochrome-design) on CodePen.

こういうバグ(?)の対処法思いつく人って凄いなぁっていつも思います。これで安心してマスクを使ったアニメーションが作れそうです。

CSSで2重線を付ける時、どう実現するでしょうか?
一番簡単に実装する方法としては、borderのスタイル指定で「double」を指定する事だと思います。しかし、border:doubleはちょっと癖があり、指定によってはブラウザ間で表示が異なる事があるので注意しなければいけません。ここでは注意するべき点などを実際のブラウザで表示したサンプルと共にご紹介します。

border:doubleは太さの指定によってブラウザ間での表示が異なる

検証のためサンプルhtmlを作り、いくつか指定を変えたものをキャプチャに収めました。htmlは以下の通りです。

html<div class="border">border double テスト</div>

それでは、線の太さを指定するとブラウザでどう表示が違うのかを見ていきます。

線の太さを指定しない場合のサンプル

.border {
  width: 400px;
  margin: 0 auto;
  padding: 10px;
  text-align: center;

  border: double #000;
}

これは各ブラウザ共に、問題なく表示されています。ブラウザによりフォントレンダリングの差はありますが、概ねどれも同じと言っていいでしょう。

線の太さを4pxにした場合のサンプル

.border {
  width: 400px;
  margin: 0 auto;
  padding: 10px;
  text-align: center;

  border: 4px double #000;
}

線の太さを4pxに指定するとブラウザ間での表示に差が出てきてしまっています。個人的にはchrome、firefoxのような表示を期待していたのですが、IE、Edgeは2重線になっているものの、線と線の間に変なグレーの色が付いてしまっています。

なお、この線の間にある色は、線の色を変更すると変化します。


幾つかの色で試してみましたが、どうも線の中間色で間が塗りつぶられるようです。
そしてSafariは2重線にすらなっていません・・・。

線の太さを8pxにした場合のサンプル

.border {
  width: 400px;
  margin: 0 auto;
  padding: 10px;
  text-align: center;

  border: 8px double #000;
}

線の太さを8pxにすると、上のように各ブラウザ共に線が太くなって表示されます。ここでのブラウザ間での表示差は特に無さそうですが、IE、Edgeはphotoshopなどで拡大してみると分かるのですが、若干線が滲んでいます。

border:doubleを使わずに2重線にする方法

今まで見てきたとおりborder:doubleは手軽なものの、線の太さをによってはブラウザ間での表示が異なる場合があります。また、線自体の太さの調整が出来ず、シャープな2重線を付けることが出来ません。

そこで、border:doubleを使わずに思い通りの2重線を付ける方法をご紹介します。

box-shadowを使う

いくつか2重線を付ける方法はありますが、その中でも一番簡単な方法が「box-shadow」を使う方法です。
box-shadowはカンマで区切ることにより複数の指定が可能で、これを利用すれば思い通りの2重線(に限らず、3重線、4重線も可能)を作る事ができます。

.border {
  width: 400px;
  margin: 0 auto;
  padding: 10px;
  text-align: center;

  box-shadow: 0 0 0 1px #000, 0 0 0 19px #FFF, 0 0 0 20px #000;
}

box-shadowで複数指定すれば上のような細い線で余白の大きい2重線も作ることができます。
ただ、なぜかこの方法でもIEではちょっと線が滲んで表示されています。

疑似要素を使う

:before、:afterの疑似要素を使い、親要素と同じ見た目のボーダーをずらして表示するというテクニックです。

.border {
  position: relative;
  width: 400px;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  border: 1px solid #000;
}

.border:before {
  position: absolute;
  content: "";
  width: 100%;
  min-height: 100%;
  top: -10px;
  left: -10px;
  border: 1px solid #000;
  padding-bottom: 19px;
  padding-right: 19px;
}

疑似要素を使った結果です。ブラウザ間での差は特に感じることは無く、拡大してみても線の滲みなどはありません。使えるならこの方法が一番綺麗に表示できそうです。

以前よりも機能的にはブラウザ間の差は無くなってきましたが、レンダリングエンジンの違いから表示上まだ細かい差があるという事が分かりました。当たり前ですが、各種ブラウザ間での表示確認は怠らないように気を付けたい所です。

CSSのtransitionやanimationの終了時に何かjavascriptで処理をしたい場合、終了時のイベントを取得すれば操作が可能です。イベントの取得方法をご紹介します。

transitionの場合

html<div class="square"></div>
css.square {
   display: inline-block;
   width: 100px;
   height: 100px;
   background: #00F;
   transition: transform 2s;
}

.square:hover {
    transform: rotate(180deg);
}

javascript

var el = document.querySelector('.square');

el.addEventListener('transitionend', function() {
    // transition終了時の処理
    alert('transitionend');
});

//jQueryの場合
$('.square').on('transitionend', function() {
    // transition終了時の処理
    alert('transitionend');
});

transitionendというイベントが発行されますので、後はこの後に処理を加えればOKです。

transitionend 動作サンプル

青い四角にマウスオーバーしてください。transitionアニメーション終了後にアラートが表示されます。

See the Pen
transitionend event demo
by MONOCHROME DESIGN (@monochrome-design)
on CodePen.

animationの場合

html<div class="square"></div>
css.square {
   display: inline-block;
   width: 100px;
   height: 100px;
   background: #00F;
}
.square:hover {
    animation: rotate 2s;
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(180deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(180deg);
    }
}
javascript
var el = document.querySelector('.square');

el.addEventListener('animationend', function() {
    // animation終了時の処理
    alert('animationend');
});

//jQueryの場合
$('.square').on('animationend', function() {
    // animation終了時の処理
    alert('animationend');
});

こちらはanimationendというイベントが発行されますので、transition同様に処理を加えればOKです。

animationend 動作サンプル

See the Pen
animationend event demo
by MONOCHROME DESIGN (@monochrome-design)
on CodePen.

古いブラウザに対応する場合

執筆(2017年6月)時点の最新版である、Chrome58、firefox54(b12)、IE11、Edgeで試した所、特に問題なく動作が確認できました。・・・が、一部古いブラウザの場合、プレフィックスを付けないと動作しない事もあります。その際には以下のようにそれぞれのプレフィックスを付けたものを記述すれば大丈夫です。

// transitionの場合
el.addEventListener('webkitTransitionEnd mozTransitionEnd oTransitionEnd transitionend', function() {
    // transition終了時の処理
    alert('transitionend');
});

// animationの場合
el.addEventListener('webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend', function() {
    // animation終了時の処理
    alert('animationend');
});

モダンブラウザ用に最低限のリセットだけを施したミニマムサイズのリセットCSS「minireset.css」をご紹介します。

CSSリセットについて

サイトを作る際には、ブラウザ毎の差異を無くすためよく使われるのが「リセットCSS」「ノーマライズCSS」です。自分はよくノーマライズCSSを使っていたのですが、一部ulやliには自分でリセットを追加指定して使っていました。

ある時ふとCSSフレームワーク「Bulma」を見ていたら、リセットCSSとして「minireset.css」が使われている事に気づきました。
※Bulmaに関しては以下の記事で紹介しています。

最近増えてきたFlexboxベースのCSSフレームワークをご紹介
最近レイアウトにFlexboxをベースにしたモダンなCSSフレームワークが出始めてきています。ここではFlexboxを採用したCSSフレームワークをご紹介します。 Flexboxとは まずFlexboxとはなんなのか、正…

minireset.cssってなんだろうと思い調べてみると、結構良かったのでご紹介します。

モダンブラウザを対象とした最小限のリセットCSS


minireset.cssはその名の通り、モダンブラウザを対象とした最小限のリセットCSSで、サイズは圧縮版だと533byteしかありません。ノーマライズCSSを圧縮しても数キロバイトになることを考えるとかなり小さい事が分かります。

主にリセットされているのは、
・h1、h2など見出しのフォントサイズをリセット
・見出しと、ul、li、pなどのマージンをリセット
・table、th、tdなど、テーブル周りの余白をリセット

と、シンプルです。

それに加え、img,embed,iframe,object,audio,videoなどのメディアファイルに「max-width:100%;」が指定されていますので、ブラウザの幅に応じて大きさが変更されます。

また、全体に「box-sizing:border-box;」が指定されているのもポイント。個人的にノーマライズCSSを使っていた時も全体に「box-sizing:border-box;」を追加指定していたので、デフォルトで指定されているのは一手間省けます。

個人的にフィットしたminireset.css

今までノーマライズCSSを使っていて足りない部分を自分でリセットしていましたが、このminireset.cssは今まで自分で追加指定していたものを全て満たしてくれているので、個人的にかなりフィットしました。リセットよりもノーマライズの方が良いという議論もありますが、リセットであればこの「minireset.css」は中々良いのではないかと思います。

基本的に自分はあまりCSSフレームワークを積極的に使う方ではないのですが、業務上Bootstrapで作られたサイトの改修を行うことがあります。そこで感じているCSSフレームワークのメリット・デメリットをまとめてみました。

CSSフレームワークを使うメリット

沢山メリットはありますが、主に以下の様なメリットがあるため、これだけ使われるようになったのではないかと思います。

見栄えの良いサイトがデザイナーを介さなくても素早く作れる

Bootstrapで作られた綺麗なサイト

あまりデザインに詳しくない方でも、フレームワークを使うことにより整ったサイトを作ることが出来ます。フレームワークでは、タイポグラフィを始め、各パーツにおいても行間や余白などが考えられているため、適当に作ったとしても「要素の余白が無さすぎる」「行間が詰まり過ぎてて文章が読みづらい」などのデザイン上の問題が少ないように思います。

また主にBootstrapの場合、ネット上でデザインテンプレートが豊富に用意されています。クオリティの高いものだと有料のものもありますが、それらを使えば短時間でハイクオリティなデザインのサイトが作れます。

ボタンやフォームなどUI周りのパーツが予め用意されている

用意されたUIパーツ

デザインにも関わる事なのですが、フレームワークにはボタンなどUI周りのパーツが一通り用意されている事が多いです。

特にフォーム周りのパーツはラジオボタン、チェックボックス、セレクトボックスなどの入力フォームの他にも、送信ボタン、エラー時や成功時などのアラートなど、用意しなければいけない要素の種類が多く、それらを全て自分でデザインし、レイアウトを組んでいくとなると結構手間がかかります。フレームワークはそれらのパーツが一通り定義されており、縦並びや横並びのレイアウトも考慮されているためフォームに関連する実装時間はかなり短縮されます。

レスポンシブデザインに対応しやすい

用意されたグリッド

レスポンシブデザインは、画面解像度毎に細かく定義していく必要があります。最近はタブレットなんかも含めるとデバイスの種類が多すぎて、それら全部に対応していくのはかなり面倒です。

フレームワークはレスポンシブ用に各解像度毎にちゃんと定義されており、それに従っていけばどのようなデバイスでもある程度の表示は担保されるという安心感があります。

勉強になる

マテリアルデザイン

これはメリットではなく個人的な観点からですが、フレームワークを使うことにより、デザイン・コーディングの勉強になります。マテリアルデザインがトレンドになっている時は、それを取り入れたフレームワークが沢山出ましたが、実際に使ってみることにより、デザインの考え方やユーザビリティなどの理解が進みます。

また、コーディングの観点からも勉強になるポイントが沢山あります。フレームワークは効率的で綺麗な書き方がされているので、それを取り入れる事によりレベルアップに繋がります。

CSSフレームワークのデメリット

メリットも多いCSSフレームワークですが、デメリットもそれなりに多いと思っています。

ものにもよるが、ファイルサイズが大きい

ファイルサイズが大きいFoundation

Bootstrapや、Foundationなど「重量級フレームワーク」と呼ばれるものは、機能も豊富な代わりにファイルサイズも大きくなっています。(Bootstrap3はCSSが121KB、JSが37KB、Foundation6は、CSSが77KB、JSが108KB(全て圧縮版))
全ての機能を使うことは稀だと思います。また、BootstrapやFoundationの場合、使う機能だけを選択しダウンロードできるので、ファイルサイズを少しでも減らしたい場合に有効です。

学習コストはそれなりにかかる

バージョンアップで変更になったclass類

フレームワークにはそれぞれに「お作法」があるのでそれらを覚える必要があります。覚えてしまえば速く作れますが、それまでの学習コストはそれなりにかかります。

また、バージョンアップによる変更が発生する場合があります。例えばBootstrapの場合、バージョン3がリリースされた時にclass名の大幅な変更があったため、バージョン2からの移行で苦労しました。今度リリースされるBootstrap4では、CSSのソースファイルはLessからSassに変更、単位の指定がpxからemに変更、ファイル構成も全体的に変更されます。
これらをキャッチアップして、4に移行するのか、3のままにしておくのかという判断が必要になります。

デザインが似たようなものになりやすい

Bootstrap

これは仕方ないとは思いますが、デザインが似たようなものになりやすいです。
特にBootstrapはいわゆる「Bootstrap臭」がすると言われ、他と似た感じになりがちです。

クライアントワークの場合、それぞれ必要となるデザインやレイアウトが異なるので、こういったフレームワークが使いづらい場面がありそうです。案件毎にフレームワークを変えるという手もありますが、それこそ学習コストが跳ね上がりますし、管理できないのでは無いかと思います。

細かいデザインやレイアウトにこだわりだすと、逆に面倒になる

フレームワークで用意されているデザインやレイアウトを超えて、こだわったデザインにしようとすると逆に面倒になるケースがあります。元々定義されているclassの指定を追わなければならず、ちょっとだけ変更するつもりが予想外に時間をとられるという場合があります。

更新が止まってしまう場合がある

Pure

特に使っているユーザーが少ない場合、更新が止まってしまう場合があります。
大手と言っても安心できず、Yahoo!が作った「Pure」というCSSフレームワークは、最低限の機能だけを提供する超軽量CSSフレームワークとして話題になりましたが、2015年2月頃を最後に更新が止まっています。
リリース時点では大丈夫でも、新たにバグが見つかる場合もあり、その際にちゃんと製作者が対応してくれるという安心感は重要です。

どういったケースでCSSフレームワークを使うべきか

以上のメリット・デメリットを踏まえて、どういうケースでCSSフレームワークを使うのが良いか考えてみます。

製作時間がない場合

製作期間があまりなく、特殊なデザインではない場合、デザインテンプレートを使えば短時間でクオリティの高いサイトを作ることが出来ます。自社サービスのランディングページを短期間で作りたいような場合など非常に有効です。

モックアップやプロトタイプをサクッと作りたい場合

動きが確認できるプロトタイプなどを作りたい場合、フレームワークを使うと全体的なレイアウト等はサクッと作ることができるので、便利です。

管理画面

自社サービスの管理画面など、CSSフレームワークを使うことにより誰でも整った画面を作ることが可能です。エンジニアも扱えるので、作った機能をデザイナーやコーダーを介さずに実装できるのは強みだと思います。

一部のみ取り入れる

全てフレームワークで作るのではなく、自分で定義するのが面倒なグリッドレイアウトやフォームなどのUIパーツに限ってフレームワークを取り入れるというのは、作業の効率化という点で良いと思います。
「マイクロフレームワーク」と呼ばれる最低限の定義がなされた軽量フレームワークをベースとして使うのも手ですね。

それぞれのケースによってどのCSSフレームワークを使うべきか、それとも使わないほうが良いのかは異なります。
個人的には、マイクロフレームワークのような薄いフレームワークをベースにして、後は自分の好きなように作るという形が好みです。まだまだこれからも沢山出てきそうなCSSフレームワークなので、チェックしていきたいと思っています。

なお、最近のCSSフレームワークはこちらでまとめていますので、よろしければご覧ください。

最近増えてきたFlexboxベースのCSSフレームワークをご紹介
最近レイアウトにFlexboxをベースにしたモダンなCSSフレームワークが出始めてきています。ここではFlexboxを採用したCSSフレームワークをご紹介します。 Flexboxとは まずFlexboxとはなんなのか、正…

最近レイアウトにFlexboxをベースにしたモダンなCSSフレームワークが出始めてきています。ここではFlexboxを採用したCSSフレームワークをご紹介します。

Flexboxとは

まずFlexboxとはなんなのか、正式名称は「CSS Flexible Box Layout Module」と言うもので、ざっくり言うと「今までより簡単にレイアウトが組めますよ!」って事です。

ざっくりしすぎなので補足すると、今までレイアウトを組むときは、テーブルを使ったり、CSSのfloatを使ったりして組んでいましたが、横並びにするとレイアウトが崩れる、縦の高さを揃えるのが難しい、上下中央揃えをしようとすると面倒・・・と手間がかかりました。javascriptを使わないと出来ない場合もありWEBのレイアウトは結構不自由だったのですが、Flexboxによってそれが改善されます。
Flexbox自体の使い方は下記のブログなどが詳しいので一度目を通しておくと、Flexboxの凄さがわかると思います。


古いIEがこのFlexboxをサポートしておらず、途中で仕様が変わるなどイマイチ使いづらい印象がありましたが、現在(2016年3月2日時点)Can I Useで見ても、古いIE以外のブラウザでは対応が完了しており、いよいよ本格的にFlexboxを実務でも使えるようになってきたと思います。

161_01

Flexboxに対応したフレームワーク

自分でFlexboxを使ってレイアウトするのも、もちろんアリですが、サクッと作りたい時にはフレームワークが役立ちます。ここでは最近のFlexboxをベースにしたCSSフレームワークをいくつか紹介します。

Bulma

161_02

最近一番の話題となっているCSSフレームワークがこの「Bulma」です。レスポンシブ対応しており、オープンソースとして公開されています。ターコイズブルーを基調とした色合いも、モダンな感じですごく素敵だと思います。

161_03

Flexboxに対応したフレキシブルなグリッドレイアウトが可能です。

161_04

主要なボタンやフォーム周りのパーツは全て用意されています。

Basis

161_05

こちらは日本のフリーランスの方が作ったというFlexboxベースの軽量CSSフレームワークです。レスポンシブ対応しており、従来のフレームワークにはなかった柔軟なグリッドサイズ指定が出来るのが特徴です。

また、CSSの命名規則にFLOCSSを採用しているのもポイントです。個人的に制作する時もFLOCSSは参考にしており、BasisはFLOCSSに沿った実例としてコードを眺めるだけでも勉強になります。また、日本の方が製作者という安心感もありますね。

161_06

柔軟なグリッドサイズ指定が可能です。

161_07

フォームやボタンなど主要なパーツは用意されていますので、ベースとして使い勝手が良さそうです。

FOX CSS

161_08

モバイルファーストで設計された超軽量CSSフレームワークで、ミニファイ(圧縮)版だと23KBしかないという軽さです。

161_09

ボタンなどは無く、リセットとレイアウト周りだけ用意されています。
余計な機能は必要とせず、レイアウトだけフレームワークを使いたいという場合にとても最適なCSSフレームワークです。

INK

161_10

こちらもレスポンシブ対応のCSSフレームワークです。バージョン3.0.0以降、Flexboxにも対応したとの事(IE10以降)

161_11

フレームワークとしては重量級ですが、ナビゲーションからボタン、フォーム、テーブル、アラートなど一通りのパーツが揃っており、BootstrapやFoundation並に機能が揃っています。

Bootstrap4

161_12

CSSフレームワークの代表であるBootstrapも4からFlexboxがサポートされます。

それ以外にもIE8のサポートが打ち切られたり、開発言語がLESSからSASSに変わるなど、最近の流れに沿った開発が行われているようです。

161_13

まさに定番といえるCSSフレームワークです。導入例も多くネット上にドキュメントも多数あるので、安心感があります。

2016年3月2日現在では、まだα2版で今後β版を経て正式リリースとなるものと思われるので正式版公開まではまだ時間がかかりそうですが、今後もBootstrapの動向は要チェックですね。

これからも増えるであろうFlexboxベースのCSSフレームワーク

今後もFlexboxベースのCSSフレームワークは増えていくものと思われます。それぞれに特徴があるので自分の用途にあったものを上手く利用して効率よく制作していきたいですね。

webサイトのちょっとしたアクセントデザインとして、吹き出しを使うことがあると思います。
以前までは画像をつかって吹き出しを作っていましたが、簡単なものならばcssだけで吹き出しを作ることができるので、その方法をご紹介します。

まずは枠が無い、シンプルな吹き出しのサンプルが以下になります。

枠なしの吹き出し

See the Pen QbYQje by monochrome (@monochrome-design) on CodePen.

まずは吹き出しの中身となるdivに背景色をつけ、border-radiusで角丸にしました。
そして吹き出しの三角は:before(もしくは:after)疑似要素で作っています。CSSのみで三角形を作る方法としては、以下のサイトで分かりやすく解説されています。

そしてdiv要素のpositionをrelativeに、:before(:after)疑似要素のpositionをabsoluteにすることによって、自由に吹き出しの位置を変更できます。

枠付きの吹き出し

枠がついた吹き出しを作るときは、もう少し複雑になります。

See the Pen bdOKbP by monochrome (@monochrome-design) on CodePen.

吹き出しの中身となるdivに背景色をつけ、border-radiusで角丸にし、ボーダーをつけます。
そして三角部分は:before、:after両方を使って作ります。上記のサンプルでは、:beforeの上に、少しサイズを小さくした:afterを重ねて配置しています。

CSSで作った吹き出しは、画像と違い大きくしても荒くなることがないので、画面解像度の高いスマホサイトなんかでも綺麗に表示されます。簡単に作れ、色々と応用もできるので、試してみてはいかがでしょうか。

スマホ用のサイトを作っていて、overflow:scrollでスクロールする領域を作ることはよくあると思います。しかし、自分で作ったスクロール領域はiPhoneやiPadで見ると滑らかなスクロールをしてくれません。

そんな時はcssの-webkit-overflow-scrollingプロパティを使うと、慣性スクロールが有効になり滑らかなスクロールが実現できます。

-webkit-overflow-scrollingの指定方法

.scroll {
  height: 100px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

上記のように、-webkit-overflow-scrollingを「touch」に指定してやればOKです。
なお、-webkit-overflow-scrollingは「auto」と「touch」の2つの指定方法があり、デフォルトは「auto(慣性スクロール無効)」になっています。