本日の学習範囲

ドットインストール

・はじめてのCSS #08〜#10
（学習時間：1.5時間）

CSS学習メモ

Flexbox

Flexible Box Layout Moduleの略。
ボックスを柔軟にレイアウトできる

displayプロパティ

{display: ○○;}
要素の表示形式を指定する
{display: flex;}
で指定した要素の子要素を横並びにする

border-radiusプロパティ

{border-radius: 長さor○%}
ボックスの四つ角の角丸をまとめて指定する
%は指定された要素の幅と高さに基づいたものになる
{border-radius: 50%}
の場合、正円になる

border-styleプロパティ

{border-style: ○○;}
ボーダーのスタイルをまとめて指定する
{border-style: solid;}
の場合、一本の実線になる

font-weightプロパティ

{font-weight: ○○;}
フォントの太さを指定する
{font-weight: normal;}
の場合、通常の太さになる

みなさん、ランキング上位ユーザーのアバターを神々しくしたくなるケースってよくありますよね？?

linear-gradient を使えば画像を使わずいい感じのグラデーションがかけられるっぽいのでこれを使いましょう?✨

各ブラウザの対応状況

「IE9に対応してなくね？」
一な、なに言ってんスか？そんなブラウザもう絶滅しましたよwww冗談きついっスwww

Can I use
http://caniuse.com/#feat=css-gradients

MDN
https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient#Browser_compatibility

サンプルコード

html

<div class="avatar">
    <img src="avatar.jpg" />
</div>

scss

.avatar {
    background: linear-gradient(to bottom right, #fefd68, #a08001);
    border-radius: 50%;
    height: 82px;
    padding: 5px;
    width: 82px;

    img {
        background: #fff; /* 透過してる画像の対応 */
        border-radius: 50%;
        height: 100%;
        width: 100%;
    }
}

説明

border-radius: 50%; で丸を作って
padding: 5px; で画像の外側に 5pxの余白を作ります

背景に linear-gradient を指定して完成です?

background: linear-gradient(to bottom right, #fefd68, #a08001);
左上から右下へ #fefd68 から #a08001 にグラデーションをかけます?

表示

うまくできました???

Vueバージョン確認

npm list vue

まずは上記コマンドでバージョンの確認

twinzlabo@0.1.0 /Users/twinzlabo

── vue@2.6.11

なにこの動き？１００倍センスを感じるアニメーション実装

上の方で確認してもらったかと思いますが、

すでに虹色の背景を付けたりとかなり洗練されている画像一覧に更にスタイル修正を行うことで

一方の画像をhoverするとスーッと画像全体が現れる不思議すぎてクールなアニメーション実装をしていきましょう

デフォルトの上の画像をhoverしたら下の画像のように一方の画像のタイトルが消えて全体像が現れる
アニメーションにカスタマイズしていきます

これやばくないですか？

上の画像を見てるだけだと実際の動きを想像しづらいかもしれませんが、

実装してみて初めてわかる快感を味わえます

これは損得抜きでまじでおすすめのアニメーションです

兎にも角にも、実装してみたら感動すること間違いなしです！

では早速コードをコピペしていきましょう

<template>
  <div class="images">
    <div class="image">
      <img src="https://images.unsplash.com/photo-1513543806865-85e29a7c0352?ixlib=rb-1.2.1&auto=format&fit=crop&w=2775&q=80">
      <span>Day</span>
    </div>
    <div class="image">
      <img src="https://images.unsplash.com/photo-1551607117-21fa129a211d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1720&q=80">
      <span>Evening</span>
    </div>
  </div>
</template>

<style>
.images {
  display: flex;
  width: 100%;
  padding: 4% 2%;
  box-sizing: border-box;
  height: 60vh;
}

.image {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 2%;
  box-shadow: 0 20px 30px rgba(0,0,0,.1);
  line-height: 0;
}

.image img {
  width: 200%;
  height: calc(100% - 10vh);
  object-fit: cover;
  transition: .5s;
}

.image span {
  background : linear-gradient(41deg, purple 25%, orange 50%, rgba(255, 107, 0, 0.48)) fixed;
  font-weight: bold;
  color: #fff;
  font-size: 3.8vh;
  display: block;
  text-align: center;
  height: 10vh;
  line-height: 2.6;
  border-top: 3px solid #fff;
}

.image:hover > img {
  width: 100%;
  height: 100%;
}

</style>

いかがでしたでしょうか？

画像をhoverするとタイトルが消えて画像の全体像が現れるアニメーションが実行されましたか？

実際に自分のローカルブラウザで反映できると動きも確認できてめっちゃ興奮しますよね

こちらに他にも面白いアニメーション実装記事があるので参考までに

以上です

---

参考記事（他の魅力的なアニメーション）
現役フロントエンドエンジニアがおすすめするコピペで使えるアニメーション記事まとめ１２選

はじめに

CSS フレームワークで有名な Bootstrap にはレスポンシブ Web デザインを構築するための便利な Sass mixins（e.g. media-breakpoint-up, media-breakpoint-down etc.）があります。今回、styled-components を利用するにあたり Bootstrap と同等のメディアクエリを作成する関数を紹介します。また、関数の利便性を考慮して TypeScript を採用しています。

TL;DR

styled-components でレスポンシブ Web デザインを構築する場合、下記コードのように記述できるようになります。

pages/index.tsx

import styled from 'styled-components'
import { breakpointUp, breakpointDown } from '../utils/breakpoints'

...

const Container = styled.div`
  padding: 40px;

  ${breakpointDown('md')} { // プレースホルダーは @media (max-width: 767.98px) に置換されます。
    padding-right: 6.25%;
    padding-left: 6.25%;
  }
`

const Card = styled.li`
  position: relative;
  display: flex;

  ...

  ${breakpointUp('md')} { // プレースホルダーは @media (min-width: 768px) に置換されます。
    &:hover {
      color: var(--base-link-color);
      box-shadow: 0 0 0 2px;
    }
  }
`

Bootstrap のブレークポイントの仕様

まずは Bootstrap の Sass mixins について解説します。なお、これから解説する仕様は現在（2020/06/03 現在）策定中の Bootstrap v5 の考案になります。策定中の GitHub issue にある下図と併せて読み進めていただけると理解しやすいかと思います。また、図内の黒丸（●）と白丸（○）は数学の座標で使われる記号で、黒丸は含む、白丸は含まないを意味します。

はじめに、理解しやすい media-breakpoint-up について解説します。こちらは指定された引数（ブレークポイント）以上の画面幅に適用されるメディアクエリを作成します。上図の場合は、md（768px） を引数に指定しているので @media (min-width: 768px) { ... } が作成されます。逆に media-breakpoint-down は指定された引数（ブレークポイント）未満の画面幅に適用されるメディアクエリを作成します。ここで作成されるメディアクエリには ブレークポイントを含まれない ことに注意してください。上図の場合は、sm（576px） を引数に指定されているので @media (max-width: 575.8px) { ... } が作成されます。ちなみに、0.01 px ではなく 0.02 px を減らしている理由は Safari の端数処理を考慮しているからです。詳しくはこちらを参照ください。

定数の宣言

まずは、各ブレークポイントを定数で管理します。型のメンバーに readonly 修飾子を指定する、Numeric Literal Types（数値リテラル）として適用するために const アサーション を利用します。readonly 修飾子を使えば、読み込み専用にできます。つまり、ある値に初期値を割り当てた後でその値を変更できないことを宣言できます。また、Numeric Literal Types により型推論から各ブレークポイントの値が把握しやすくなります。

constants/breakpoints.ts

export const breakpoints = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
} as const

ブレークポイントの定数は ES Modules で import / export します。また、ブレークポイント名の型をのちに作成する関数で利用したいので Type alias（型エイリアス）と typeof キーワード 、keyof キーワード を用いて宣言します。typeof キーワードと keyof キーワードの併用で各ブレークポイント名の Union Types（ユニオン型）を生成できます。

utils/breakpoints.ts

import { breakpoints } from '../constants/breakpoints'

type Breakpoints = keyof typeof breakpoints // 'xs' | 'sm' | 'md' | 'lg' | 'xl'

ヘルパー関数の作成

本題の関数を作成する前にヘルパー関数を用意します。用意するヘルパー関数は breakpointNext, breakpointMin, breakpointMax の 3 つになります。では、順番に説明します。

breakpointNext

breakpointNext は指定された引数（ブレークポイント名）の次のブレークポイント名を返す関数です。たとえば 'md' を引数に指定する場合、戻り値が 'lg' になります。'xl' のような次のブレークポイントがない場合、戻り値は null になります。

utils/breakpoints.ts

const breakpointNext = (name: Breakpoints) => {
  const breakpointNames  = Object.keys(breakpoints) as Breakpoints[]
  const nextIndex = breakpointNames.indexOf(name) + 1
  if (nextIndex < breakpointNames.length) {
    return breakpointNames[nextIndex]
  } else {
    return null
  }
}

TypeScript の解説をします。breakpointNext の引数は各ブレークポイント名を指定することを期待しているので、さきほど作成した Breakpoints で型を制約します。後述する breakpointMin, breakpointMax も同様です。あと、Object.keys() メソッドで breakpointNames 変数を宣言している行に着目してください。ここでは 型アサーション を利用しています。

型アサーションには 2 つの構文があります。1 つは <> を使用した構文で、もう 1 つは as シグネチャを使用した構文になります。2 つの構文は同等ですが、前者は JSX の構文とぶつかる可能性があるので、後者の as シグネチャを使用することを推奨します。

Object.keys() メソッドで返す配列の型推論は string[] になります。こちらを型アサーションを利用してブレークポイント名が格納される配列の型に ダウンキャスト¹ します。

breakpointMin

breakpointMin はメディアクエリの min-width の値を返す関数です。たとえば引数に 'md' を指定した場合、戻り値は 768 になります。引数に 'xs' が指定された場合、戻り値は null になります。

utils/breakpoints.ts

const breakpointMin = (name: Breakpoints) => {
  const min = breakpoints[name]
  return min !== 0 ? min : null
}

breakpointMax

breakpointMax はメディアクエリの max-width を返す関数です。たとえば引数に 'md' を指定した場合、戻り値は 575.8 になります。引数に 'xs' が指定された場合、戻り値は null になります。

utils/breakpoints.ts

const breakpointMax = (name: Breakpoints) => {
  const max = breakpoints[name]
  return max && max > 0 ? max - 0.02 : null
}

すべてのヘルパー関数を用意できましたので、本題の関数を作成しましょう。

本題

作成する関数は、breakpointUp, breakpointDown, breakpointBetween, breakpointOnly の 4 つになります。では、順番に説明します。

breakpointUp

breakpointUp は最小幅を定義するメディアクエリを返す関数です。Bootstrap のブレークポイントの仕様で先述した media-breakpoint-up と同等です。ヘルパー関数 breakpointMin が null を返した場合、メディアクエリを生成せず、アンパサンド（&）を返します。& は styled-components で生成される一意のクラス名に置換されます。後述する他の関数でも同様の処理を行います。

utils/breakpoints.ts

export const breakpointUp = (name: Breakpoints) => {
  const min = breakpointMin(name)
  if (min) {
    return `@media (min-width: ${min}px)`
  } else  {
    return '&'
  }
}

breakpointDown

breakpointDown は最大幅を定義するメディアクエリを返す関数です。Bootstrap のブレークポイントの仕様で先述した media-breakpoint-down と同等です。

utils/breakpoints.ts

export const breakpointDown = (name: Breakpoints) => {
  const max = breakpointMax(name)
  if (max) {
    return `@media (max-width: ${max}px)`
  } else {
    return '&'
  }
}

breakpointBetween

breakpointBetween は 2 つのブレークポイントで形成される画面幅に適用するメディアクエリを返す関数です。2 つの引数が lower < upper の大小関係になるようにブレークポイント名を指定します。たとえば lower 引数に 'sm'、upper 引数に 'lg' を指定した場合、戻り値は @media (min-width: 576px) and (max-width: 991.98px)になります。

utils/breakpoints.ts

export const breakpointBetween = (lower: Breakpoints, upper: Breakpoints) => {
  const min = breakpointMin(lower)
  const max = breakpointMax(upper)

  if (min !== null && max !== null) {
    return `@media (min-width: ${min}px) and (max-width: ${max}px)`
  } else if (max === null) {
    return breakpointUp(lower)
  } else if (min === null) {
    return breakpointDown(upper)
  }
}

breakpointOnly

breakpointOnly は指定したブレークポイントのみに適用されるメディアクエリを返す関数です。たとえば 'md' を引数に指定した場合、戻り値は @media (min-width: 768px) and (max-width: 991.98px) になります。

utils/breakpoints.ts

export const breakpointOnly = (name: Breakpoints) => {
  const next = breakpointNext(name)

  if (next === null) return breakpointUp(name) ... ①

  const min = breakpointMin(name)
  const max = breakpointMax(next)

  if (min !== null && max !== null) {
    return `@media (min-width: ${min}px) and (max-width: ${max}px)`
  } else if (max == null) {
    return breakpointUp(name)
  } else if (min == null) {
    return breakpointDown(next)
  }
}

TypeScript の解説をします。① の null チェックにより、①以降の next 変数の型を絞り込んでいます。²これにより breakpointMax, breakpointDown の引数には null がない型推論になり、コンパイルエラーになりません。

おわりに

いかがでしたでしょうか。今回紹介した内容は styled-components でスタイリングする方法を対象にしていますが、Bootstrap のブレークポイントの仕様は styled-components 以外のスタイリングでも活用できます。また、TypeScript を利用することで設定されているブレークポイント、開発者の意図を把握しやすくなります。本記事が読者の Bootstrap のブレークポイントの仕様、および、TypeScript の理解の一助になれば幸いです。

---

1. 抽象的な型から詳細な型を付与することを「ダウンキャスト」といいます。 ↩

2. TypeScript はフローベースの型推論を行うため、プログラマがコードを読むときと同様の型の絞り込みを行ってくれます。 ↩

100日チャレンジの333日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
333日目は、

おはようございます
333日目　1.5h
・ポートフォリオ作成
モーダルウインドウに挑戦#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) June 2, 2020

Webサイトに画像を載せるときに、画像の中心を基準に表示させる方法

Webサイトを作成するときに、指定した要素の大きさと画像の大きさが異なる場合、普通は

css

  background-size: cover;

を使って画像の大きさを要素の大きさに揃えるんですけど、これだと画像の表示される部分が左にずれる。
じゃあ画像の中心を基準にサイト上に表示させたいときはどうしたら良いか。それは次のように書けばよい。

css

  background-position: center center;

こう書くことで画像の中心を基準に表示させることができる。1つ目のcenterが左右を表し、2つ目のcenterが上下を表している。
これは、

css

  background-position: center;

と省略して書くことも可能。

参考リンク：background-positionについて

子要素を親要素の上下左右で中央寄せする方法【CSS】

参考リンク：子要素を親要素内で上下左右中央寄せさせる方法

css

.parent{
  position: relative;
}

.child{
  position:absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

こうすることで親要素の中にある子要素を親要素の中央に設置することができた。