「Gatsby x TypeScript」でブログを作りました (2. レスポンシブルデザインのコツ)

brew cask install responsively

html {
  // htmlタグのfont-sizeを10pxに設定する
  font-size: 62.5%
}

import React from 'react'
import ClassNames from 'classnames'
import styles from './PostLine.module.scss'

type Props = {
  className?: string
}

const PostLine: React.FC<Props> = ({ className }) => {
  const rootClassName = ClassNames({
    [styles.root]: true,
    [className]
  })

  return (
    <div className={rootClassName}>
      <div className={styles.title} />
      <div className={styles.info} />
      <div className={styles.excerpt} />
    </div>
  )
}

export default PostLine

.root { font-size: inherit; }
.title { 
  font-size: 150%;
  line-height: 200%; // お好みで%で指定します。
}
.info { font-size: 80%; }
.excerpt { font-size: 100%; }

<PostLine className={styles.post_line} />

.post_line {
  font-size: 2rem;
}

import React from 'react'
import ClassNames from 'classnames'
import styles from './BlogPost.module.scss'

type Props = {
  className?: string
}

const BlogPost: React.FC<Props> = ({className}) => {
  const rootClassName = ClassNames({
    [styles.root]: true,
    [className!]: className
  })

  return (
    <div className={rootClassName}>
      // markdownの内容がrenderingされる
      <div dangerouslySetInnerHTML={{ __html: node.html }} />
    </div>
  )
}

export default BlogPost

<BlogPost className={styles.blog_post} />

.blog_post {
  h1 { font-size: 150% !important; }
}

// [ref]
// https://neos21.hatenablog.com/entry/2018/02/22/080000
@function strip-unit($num) {
  @if type-of($num) == 'number' and not unitless($num) {
    @return $num / ($num * 0 + 1);
  }
  
  @return $num;
}

@function gradient($fromFontSize, $toFontSize, $fromWidth, $toWidth){
  @return ((strip-unit($toFontSize) - strip-unit($fromFontSize))/((strip-unit($toWidth) - strip-unit($fromWidth))));
}

@function rem($k, $toWidth) {
  @return (1rem / $k) * strip-unit($toWidth);
}

// [ref]
// https://note.com/nomen_machine/n/n089fae61dd00
// $fromFontSize(rem)
// $toFontSize(rem)
// $fromWidth(px)
// $toWidth(px)
@mixin responsible-font-size($fromFontSize, $toFontSize, $fromWidth, $toWidth) {
  $k: 10; // 10px = 1rem
  $toWidthRem: rem($k, $toWidth);
  $gradient: gradient($fromFontSize, $toFontSize, $fromWidth, $toWidth);
  font-size: calc( #{$fromFontSize} + ((100vw - #{$toWidthRem} ) * #{$gradient} ));
}

.root {
  @include responsible-font-size(1.6rem, 0.8rem, 1280px, 375px)
  // もしくは
  @include responsible-font-size(1.6rem, 0.8rem, 1280, 375)
}

@mixin common-responsible-font-size {
  @include responsible-font-size(1.6rem, 0.8rem, 1280px, 375px);
}

import { useState, useEffect } from 'react'
import throttle from 'lodash.throttle'

const THROTTLE_DELAY_RESIZE = 100;

type Props = {
  breakPoint: number
}

const useHandleResponsible = ({ breakPoint }: Props) => {
  const [changeDesign, setChangeDesign] = useState(false)

  useEffect(
    () => {
      const handleResize = () => {
        setChangeDesign(window.innerWidth < breakPoint)
      }

      const throttleHandleResize = throttle(handleResize, THROTTLE_DELAY_RESIZE)

      if (typeof window !== 'undefined') {
        handleResize()
        window.addEventListener('resize', throttleHandleResize)
      }

      return () => {
        if (typeof window !== 'undefined') {
          window.removeEventListener('resize', throttleHandleResize)
        }
      }
    },
    []
  )

  return {
    changeDesign
  }
}

export default useHandleResponsible

// コンポーネントを変えたい場合
const { changeDesign: changeComponent } = useHandleResponsible({ breakPoint: 650 })
// 適用したいスタイルを変えたい場合
const { changeDesign: changeStyle } = useHandleResponsible({ breakPoint: 650 })

import React from 'react'
import { PostCard, PostLine } from '@/components/molecules'
// @はsrcへのパスを解決する@エイリアス
import { useHandleResponsible } from '@/hooks'

type Props = {}

const PostList: React.FC<Props> = (props) => {
  // 650px以下だったらchangeComponentがtrue
  const { changeDesign: changeComponent } = useHandleResponsible({ breakPoint: 650 })

  if(changeComponent){
    return <PostLine props />
  } else {
    return <PostCard props />
  }
}

export default PostList

import stlyes_lg from './PrevNextLarge.module.scss'
import styles_sm from './PrevNextSmall.module.scss'
import { useHandleResponsible } from 'src/components/hooks'

type Props = {
  className?: string
}

type MakeProps = Props & {
  styles: any
}

const MakePrevNext: React.FC<MakeProps> = ({ styles, className }) => {
  return (
    <div className={styles.root}>
      # something
    </div>
  )
}

const PrevNext = React.FC<Props> = ({ className }) => {
  // 画面幅が650px以下だとchangeDesignはtrue
  const { changeDesign: changeStyle } = useHandleResponsible({ breakPoint: 650 })

  if(changeStyle) {
    return <MakePrevNext {...{ styles: styles_sm, className }} />
  } else {
    return <MakePrevNext {...{ styles: styles_lg, className }} />
  }
}

export default PrevNext