カテゴリー: CSS

ボタンのエフェクト整理ノート

Posted on by utamaru

ボタン自身のエフェクト

周りにオーラのようなもの

See the Pen aura by uta (@utamaro) on CodePen.

キランッてなるやつ

See the Pen blink by uta (@utamaro) on CodePen.

ボタン自体の動き

ズーム（ひかえめ）

See the Pen zoom by uta (@utamaro) on CodePen.

Posted in CSS

filterとblend-mode

Posted on by utamaru

filter

filterプロパティはぼかしや色の変化などを要素自体に適用することができます。画像だけでなく要素自体に適用されるので、要素内がテキストならテキストに適用され、画像なら画像に適用されます。

なお、filterプロパティは指定した要素の子孫要素にも適用されるので、背景だけをぼかしたい！といった場合は::beforeなどの擬似要素を作って、そこに背景+filterを適用するのが良さそうです。

注意点としては、filterプロパティは2021年3月時点でIE11未対応となっています。

使い方

適用する要素のスタイルに

filter: フィルターの種類(数値);

と書いてあげるだけでオッケーです。
数値はフィルターをどの程度適用するのかを指定するものですが、種類によってpx指定だったり％指定だったりします。（％指定の場合、100%＝1として80%=0.8のように数値で書いても大丈夫）

たとえば、画像に直接指定する場合、以下のような記述になります。

// html
<img class="filter-img" src="画像URL">
//css
.filter-img { filter: blur(4px); } /* 4pxのぼかしをかける */

filter一覧

フィルター無しの元画像

blur
(ぼかし)

blur

blur(2px)

0(0px)が基準。0以上のpxで指定。

brightness
(明るさ)

blur

brightness(130%)

100%が基準。0%に近づくほど暗くなり、100%以上で明るくなる。0%にすると黒一色に。

contrast
(コントラスト)

blur

contrast(200%)

100%が基準。0％に近づくほどくすみ、100％以上で濃淡がはっきりする。0％でグレー一色に。

drop-shadow
(ドロップシャドウ)

blur

drop-shadow(2px 2px 3px orange)

「X方向の距離、Y方向の距離、ぼかす範囲、(色)」を指定すると反映されます。色はrgba値でもカラーコードでも。デフォルトはblack

grayscale
(グレースケール)

blur

grayscale(80%)

0%が基準。100%に近づくほど色味がなくなりモノクロになる。100%がMAX。

hue-rotate
(色相)

blur

hue-rotate(90deg)

0degが基準。色相環をベースに色が置き代わるので、360(-360)degで元の色に、180(-180)degで補色に。0～360は時計回り、-360～0は反時計回り。

invert
(色の反転)

blur

invert(80%)

0％が基準。0～50％までは色がくすんでいき、50％でただのグレーに。50％以上で反転した色がついていき、100%で完全に反転した色になる。

opacity
(透過度)

blur

opacity(60%)

100%が基準でMAX。0で透明になる。

saturate
(彩度)

blur

saturate(200%)

100%が基準。100%以上で色が鮮やかになる。0に近づくほど色味が消え、0でモノクロになる。

sepia
(セピア)

blur

sepia(100%)

0%が基準。100%に近づくほどセピア調になっていく。100%がMAX。

いろいろな使い方

複数のフィルターを適用する

pngの複雑な形に添ってシャドウをかける

background-blend-modeとmix-blend-mode

「background-blend-mode」と「mix-blend-mode」は、通常photoshopなどで行っていたようなオーバーレイや乗算といった色を掛け合わせる加工をcssのみで行えます。

「background-blend-mode」は要素内に背景を複数指定し、それらをブレンドします。1つの要素のみで完結するので、背景画像を加工する場合はこちらがオススメ。

「mix-blend-mode」は複数の要素同士でブレンドします。こちらは背景画像だけでなく、テキストやimgの画像などもブレンドの対象になります。背景とテキストをブレンドしたい時など、複数の要素にまたがって加工する場合はこちらがオススメ。

どちらもIE非対応なので注意が必要です。

background-blend-mode

背景画像と背景色をブレンドしたり、背景画像と背景画像をブレンドできます。

背景画像×背景色

まずは花の画像と青色を掛け合わせてみます。

オーバーレイの効果をかけたらこんな感じになりました！

以下がざっくりした記述になります。cssのブレンドモードに関わる部分は上2行のみです。以下では背景色と背景画像をひとつにまとめて記述しましたが、background-colorやbackground-imageで別々に指定しても大丈夫です。

				
					/* HTML */
/* CSS */
.background-blend {
    backgrdound: #3294FF url(花の画像URL);
    backgrdound-blend-mode: overlay;
    backgrdound-repeat: no-repeat;
    backgrdound-size: cover;
}

背景画像×背景画像


背景に画像を複数設定して、それらをブレンドすることもできます。
画像を複数設定するにはカンマ区切りでURLを書きますが、先に記述したものから上側に表示されます。一番下の画像をベースに上側の画像にブレンドモードが適用されるので、記述する順番によって見え方も変わります。

左側は花の画像を下に、クマの画像が上になるようにしてオーバーレイをかけたもの。右側は逆にクマが下、花が上になるようにしてオーバーレイをかけたものです。

mix-blend-mode

画像・テキストに関わらず、要素同士をブレンドします。

色々ブレンドしてみる

親要素と子要素や、positionで要素を重ねた時など、複数の要素間でブレンドできるので、試してみます。

ベースとなる親要素「base-container」にオーロラの背景を敷き、子要素にテキスト・背景画像・画像をそれぞれセットし、まとめてmix-blend-modeで「hard-light」を適用しました。使用画像とざっくりしたコードは以下。

親要素背景
子要素２の背景
子要素３の画像
				
					<!-- HTML -->
  
SAMPLE TEXT
  <img decoding="async" src="画像URL">

				

				
					.base-container {
  background: url(オーロラ画像URL) no-repeat;
  background-size: cover;
}
.isolate {
  isolation: isolate;
}
/* テキスト */
.blend-1 {
  color: lightcoral;
}
/* 背景 */
.blend-2 {
  content: "";
  height: 150px;
  background: url(花の画像URL) no-repeat;
  background-size: cover;
}
/* 子要素にimg */
.blend-3 {
    height: 150px;
}
.blend-3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.blend-type {
  mix-blend-mode: hard-light;
}

SAMPLE TEXT

親要素にはisolateを

上のサンプルにも記述していますが、ブレンドをするさい親要素にisolation:isolate; を指定しないと、更にその下に背景を設定していた場合透過されてブレンドされます。

イメージとしては以下のような感じ。

全体を囲う要素「wrap-stripe」にストライプの背景を敷いておき、「container」には特に背景等は指定しません。「container」の中にimgをpositionで重ね、それぞれオーバーレイのブレンドを適用しています。

isolateクラスのついているコンテナには isolation:isolate; を適用し、下のストライプ背景にまでブレンドが適用されないように設定。

				
					
  <!-- isolateを適用(左) -->
    <img decoding="async" src="イメージ１">
    <img decoding="async" src="イメージ２">
  <!-- isolateを非適用(右) -->  
    <img decoding="async" src="イメージ１">
    <img decoding="async" src="イメージ２">

こんな感じになります。
blend-modeを適用した要素の親要素にisolateを指定しておかないと、思っていたのと違う見た目になる場合があるので注意が必要です。

Posted in CSS

CSSハック

Posted on by utamaru

IEでの表示だけ崩れてわりと悩まされることが多いので、表示されるブラウザごとにcssを適用させるCSSハックという小技っぽいものをまとめました。

以下のサンプルでは、表示しているブラウザに該当するボックスの色が変わるようにしています。

See the Pen CSSハック by uta (@utamaro) on CodePen.

IE11

				
					_:-ms-lang(x)::-ms-backdrop, #hoge {
    /* スタイル (color:red;など) */
}

Edge (chromium:新エンジン) & Chrome

Google Chromeと同じchromiumエンジンのEdge用になります。そのため、こちらを設定するとGoogle Chromeブラウザにもスタイルが反映されるので注意が必要です。

				
					_:lang(x)::-ms-, #hoge {
    /* スタイル (color:red;など) */
}

Edge (EdgeHTML:旧エンジン)

				
					_:-ms-lang(x)::backdrop, #hoge {
    /* スタイル (color:red;など) */
}

Chrome

こっちはグーグルクロームのみ反映されます。

				
					_:lang(x)::-internal-media-controls-overlay-cast-button, #hoge {
    /* スタイル (color:red;など) */
}

FireFox

				
					_:lang(x)::-moz-placeholder, #hoge {
    /* スタイル (color:red;など) */
}

Safari(iOS)

				
					_:lang(x)+_:-webkit-full-screen-document, #hoge {
    /* スタイル (color:red;など) */
}

Edge(EdgeHTML) & IE11 & IE10

				
					_:-ms-lang(x), #hoge {
    /* スタイル (color:red;など) */
}

Edge(Chromium) & Chrome & Safari & Firefox

				
					_:lang(x)::-webkit-, #hoge {
    /* スタイル (color:red;など) */
}

ブレイクポイントまとめ

Posted on by utamaru

ブレイクポイントまとめ

毎回ブレイクポイントがぶれるので、使いやすそうなサイズでまとめてみました。
また、デザインによっては細かく区切る必要がなかったりするので何パターンか作成してみました。

ちなみに、max-widthで分けたときにキリが良いようにpxを設定しているので、min-width(モバイルファースト)で作成するときは多少ずらします。

どうやってこの数字が出てきたかは下のほうで説明しています

1ヶ所でざっくり区切る

2ヶ所で区切る

3ヶ所で区切る

4ヶ所で区切る

tailwandCSSを参考にしたやつ(モバイルファースト)

Bootstrapを参考にしたやつ(モバイルファースト)

各デバイス毎の画面幅（画面解像度）

ブレイクポイントを決めるうえで、[PC(デスクトップ)]⇔[タブレット]⇔[スマホ]それぞれの画面幅を調べます。デバイス毎にシェア上位の画面幅の最小～最大を出し、各デバイスのブレイクポイントを考えたいと思います。

以下のサイトで直近12ヶ月の画面解像度のシェアを調べることができます。
[blogcard url=”https://gs.statcounter.com/”]

この記事に載せているシェア率は2021年2月時点（国内）のものなので、なるべく最新のものをオススメします。

デスクトップ

デスクトップの画面解像度シェアグラフ（2021年2月版）

まずはデスクトップ。

1位は1920x1080px。モニターに使われているサイズ。
2位は1366x768px。ノートPCの一般的なサイズ。
次いで1536×864px、1440×900px、1280×720px、2,560×1,440px、1280×800pxといった感じになってます。

[PC]⇔[タブレット]で分ける場合は上記の最小幅の1280pxが目安になりそうです。
ただし、タブレットのシェア上位に1280x800pxのものが含まれているので、1280px以上をPCと定義すると一部のタブレットがPCと同じ表示になってしまいます。

個人的には、見た目がガラっと変わる訳ではないのと1280pxタブレットのシェア率がかなり低いのであまり気にしなくて大丈夫だと思っていますが、hoverで色が変わるボタンなど設置している場合、カーソルのないタブレットだと分かりづらかったりします。そのため、1281px以上をPC、1280px以下をタブレットと定義したほうが一部のタブレットユーザーにも優しい表示が作れそうです。

タブレット

タブレットの画面解像度シェアグラフ（2021年2月版）

タブレットは768x1024pxが6割ほどのシェアで圧倒的です。
次いで1280x800px、800x1280px、834x1112px、600x960px、601x962pxと続いていきます。

タブレットの場合は縦向きで見る場合もありますが横向きにして見る場合もあります。1280x800pxと800x1280pxがランク入りしているのはそういった意味かと思われます。

タブレットを横向きとして考えた場合（PCの見え方に近い）、横幅は960～1280pxになり、縦向きとして考えた場合（スマホ・モバイルの見え方に近い）、横幅は600～834pxになります。

「タブレット横向き・縦向き」で分ける場合は縦横比がガラっと変わりますので、この間あたり(834～960px)でブレイクポイントをとるのが良さそうです。他サイトでよく見られるブレイクポイントは960px、900px、840pxあたりでしょうか。いつもこの数字どっから出てきたんだと思ってましたが、こうやってみると納得です。

モバイル（スマホ）

次はモバイルをみていきます。
1位は375x667px。これはiPhone 6,6s,7,8,SE(2世代)の大きさですね。
2位は414x896px。こちらはiPhone XR,XS Max,11,11 Pro Maxの大きさ。
3位は375x812px。こちらはiPhone X,XS,11 Pro,12 miniの大きさ。
4位は360x640px。ここでAndroidのXPERIAサイズが登場です。
次いで414x736px、320x568pxと続きます。

感想としては、iPhoneサイズのシェア率高いなって感じです。
また、上位シェア画面幅の最小～最大としては、320～414pxとなります。

タブレット縦向きの最小が600pxだったので、[タブレット]⇔[モバイル]間のブレイクポイントは414～600pxの間で設定するのが良さそうです。幅が広いですね。

他サイトを見ると600pxをブレイクポイントにしているところが多いので600px以下をモバイルにしたほうが無難そうです。600px以下をモバイルにするとタブレット(縦)の最小も含んでしまいますが、シェア率としてはかなり低いのでキリよくモバイルに含める感じなんでしょうか。

もしくは、大画面のandroidも考慮しつつレスポンシブにしたときデザイン崩れの少ない480pxでも良さそうです。こちらであれば600pxタブレット問題も大丈夫そうです。

全てのデバイスとまとめ

全デバイスの画面解像度シェアグラフ（2021年2月版）

横幅統計とは関係ないですが、全てのデバイス（スクリーン）サイズでのシェアも出せるようだったので出してみました。

トップから順に1920x1080px(PC)、375x667px(モバイル)、1366x768px(PC)、360x640px(モバイル)、414x896px(モバイル)とのこと。ただし、3位以降は割と変動が激しいので目安として考えたほうが良さそうです。こうやってみるとタブレットのシェアは低いんですね…。

ということで、ブレイクポイントのまとめとしては以下のようになりました。

なお、以下のブレイクポイントの数値はmax-widthで作成する場合の数値なので、min-widthでブレイクポイントを作るときは数値に注意してください。

[モバイル] ⇔ [PC]の1ヶ所

1ヶ所でざっくり分ける場合、ブレイクポイントは768pxが良さそうです。

これはタブレットのシェアが圧倒的1位の「768x1024px」から出した数値です。大きさは違えどタブレット縦向きの見え方はモバイルに近いので、768px以下をモバイルとして分けてみました。
840pxでも良さそうですが、あまりモバイルサイズと乖離しすぎるとレスポンシブにした場合デザインが崩れるおそれがあります。シンプルなデザインであれば840でも良いのかなと思います。

[モバイル] ⇔ [タブレット(縦)] ⇔ [タブレット(横)] ⇔ [PC]の3ヶ所

3ヶ所で細かく分ける場合は、600px(480px)、900px、1280pxといったところでしょうか。600px(480px)以下はモバイル、900px以下がタブレット(縦)、1280px以下がタブレット(横)、1281px～はPCといった具合です。なるべくキリの良い数値にしてみました。

[モバイル] ⇔ [タブレット(縦)] ⇔ [タブレット(横)＆PC]の2ヶ所

タブレット横とPCの見え方はほとんど同じなので、このように2ヶ所のブレイクポイントをとっているサイトも多かったです。その場合はタブレット間の区切りをPC寄りにし、600px(480px)、960pxをブレイクポイントにするのが良いかと思います。600px(480px)以下をモバイル、960px以下をタブレット(縦)、961px以上をタブレット(横)＆PCみたいな感じですね。

[モバイル] ⇔ [タブレット(縦/小)] ⇔ [タブレット(縦)] ⇔ [タブレット(横)] ⇔ [PC]の4ヶ所

数値だけだとイメージしづらいですがレスポンシブにした場合、モバイルサイズの横幅を最大600pxにすると、実際のモバイルサイズよりだいぶ大きいので500px以上くらいからモバイルの表示とイメージが変わってきます。

表示できるデバイスがほとんどないので気にしなくても大丈夫ですが、ここもキレイに表示させたい！という場合、「モバイル」と「タブレット(縦)」の間に「タブレット(縦/小)」という枠を作ってあげても良いかもしれません。

上記の枠を含め4ヶ所をブレイクポイントにする場合、480px、600px、900px、1280pxが目安になりそうです。480px以下はモバイル、600px以下はタブレット(縦/小)、900px以下はタブレット(縦)、1280px以下がタブレット(横)、1281px～はPCといった具合です。

FontAwesomeをちゃんと使う

Posted on by utamaru

アイコン入れたい時によくお世話になっているFont Awesomeさん。
Font Awesomeがバージョン5になってから「SVG？設置方法違うん？」てよく調べもせずこれまでどおり4を使っていたので、これを機にちゃんと使いたいと思う。

Font Awesome








準備する

HTMLの<head>～</head>内にいずれかを埋め込む

CDN(css)で使う※cssで使うならこっちのほうが使いやすい

<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

CDN(svg)で使う※アイコンでアイコンをマスクしたり便利なことができる

<head>
    <script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
</head>

ダウンロードして使う (ver 5.6.3)

ここ↓からダウンロード。webのほう。（Proは有料版なのでライセンスをもってなければFreeのほう）
Font Awesomeダウンロードページ

zipファイルの中に色々入っているが、CSSとwebフォントによる描写は「webfonts」フォルダ一式と、cssフォルダ内にある「all.min.css」があれば大丈夫。

「all.min.css」は「webfonts」フォルダ内のフォントを参照しているので、それぞれのファイルの位置関係（相対パス）が変わらないようにする。

こんなかんじ。

そして、cssを読み込む。

<head>
<script defer src="任意のパス/css/all.min.css"></script>
</head>

これで準備おっけー。

使う

CSSの疑似要素として使う

いっつもフォントファミリー忘れるんや。

まずはここから使いたいアイコンを探す。見つかったらアイコンをクリックしてアイコン単独のページへ移動。

Unicodeを探してコピペ。2019/3時点ではここにあった。