【自作ブログ #16】デザイン調整

自作ブログを作っています。

yushi-dev.hatenablog.com

技術スタック

• TypeScript
• React
• Next.js
• Styled Components
• GitHub Pages

今回からデザイン調整を行います。
まずはResponsive対応を行います。

Responsive対応

Responsive対応、すなわち表示端末の画面サイズに応じて表示を切り替える対応を行います。

今回は、PC画面・iPad画面・スマホ画面を目安にした3つのサイズに対応します。

現在は幅が飛び出すような表示になってしまっています。

下記のように対応しました。

PC画面

iPad画面

スマホ画面

コード

適用したのは下記のコードです。

const GAP = '50px'
const SIDE_MENU_FULL_SCREEN_WIDTH = '240px'
const SIDE_MENU_TABLET_WIDTH = '180px'

const StyledContainer = styled(Container)`
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 50px;
  gap: ${GAP};
  padding: 0 ${VERTICAL_PADDING};
`

const StyledMain = styled.main`
  width: calc(100% - ${GAP} - ${SIDE_MENU_FULL_SCREEN_WIDTH});
  @media (max-width: ${TABLET_MAX_WIDTH}) {
    width: calc(100% - ${GAP} - ${SIDE_MENU_TABLET_WIDTH});
  }
  @media (max-width: ${MOBILE_MAX_WIDTH}) {
    width: 100%;
  }
`

const StyledSideMenu = styled(SideMenu)`
  width: 240px;
  @media (max-width: ${TABLET_MAX_WIDTH}) {
    width: ${SIDE_MENU_TABLET_WIDTH};
  }
  @media (max-width: ${MOBILE_MAX_WIDTH}) {
    width: 100%;
  }
`

const MainContainer = ({ children, matters }: Props) => {
  return (
    <StyledContainer>
      <StyledMain>{children}</StyledMain>
      <StyledSideMenu matters={matters} />
    </StyledContainer>
  )
}

Pull Request

https://github.com/nek0meshi/blog/pull/21

あとがき

次回はその他のデザイン調整を行なっていきます。

HHKBのキーボードをレンタルしてみました。
機種はHHKB Professional HYBRID Type-Sです。
打鍵感が最高に良い上、かなり静かで周りに迷惑をかけづらくいい感じです。
下記のサイトでレンタルしました。
https://geo-arekore.jp/product/pfu-pd-kb800bs. 購入を検討中です。