エンジニアに伝わるようにマークアップを言語化してみた

こんにちは。スペースマーケットのフロントエンドエンジニア荒田です。

年中ダイエットしていて最近は痩せたいが口癖になってきました。
辛くなくて美味しいものを食べれて痩せる都合のいいダイエット方法があればいいのにと願わずにはいられません！

さて、今日はマークアップの方法にてついてお話ししたいと思います。

なぜこの記事を書こうと思ったか

普段マークアップをしていると、エンジニアの中から「マークアップってどうやるの？」「何を勉強すればいいの？」「どう考えればいいの？」といった質問をされることがよくありました。
その時どう説明すればいいかわからず、よい答えを返すことができませんでした。
そこで普段自分が行っている基本的なマークアップの方法を知ってもらうのが一番かと思い、記事を書くことにしました。

メンテナンス性の高いCSS設計やコンポーネント設計についてはこの記事では触れません。あくまで大まかな流れを紹介しマークアップの足掛かりとしていただければと思います。

ちょっとしたマークアップなら自分で作業しよう、といった方の参考になれば幸いです！

基本的なマークアップの流れ

開発環境

* React
* styled-components

画面全体のレイアウトを組む

新しい画面を作成するとき、まず画面全体のレイアウトを確認します。

今回は例として https://www.spacemarket.com/about/rewards の一部をマークアップしたいと思います。

このデザインを見た時、下記二点が確認できます。

* コンテンツは画面の左右中央にある
* コンテンツは最大幅が1100px

ではさっそくマークアップしていきます。

import React from 'react'
import styled from 'styled-components'

const RewardsPage = () => {
 return (
   <>
     <MainVisualBg>
       <Inner>
         <Wrapper>
           <MainVisual>MainVisual</MainVisual>
         </Wrapper>
       </Inner>
     </MainVisualBg>
     <Inner>
       <Wrapper>
         <Contents>Contents</Contents>
       </Wrapper>
     </Inner>
   </>
 )
}

export default RewardsPage

const Wrapper = styled.div`
 width: 100%;
 max-width: 1100px; // コンテンツの最大幅
 margin: 0 auto; // 中央寄せ
`
const Inner = styled.div`
 padding: 0 16px; // ウィンドウ幅を縮めたときに必要なコンテンツの左右の余白
`
const MainVisualBg = styled.div`
 background-color: #1b718d;
`
const MainVisual = styled.div`
 padding: 60px 0;
 text-align: center;
 font-size: 24px;
 font-weight: bold;
 background-color: #f6f6f6;
`
const Contents = styled.div`
 padding: 60px 0 300px;
 text-align: center;
 font-size: 24px;
 font-weight: bold;
 background-color: #f6f6f6;
`

MainVisualBgは背景色を画面幅いっぱいに広げ、その中のMainVisualに1100pxの最大幅を指定しています。

これで画像のように画面の大まかなレイアウトが完成しました。次はコンテンツの中身をマークアップしていきます。

要素を横並びする

横並びしている要素をマークアップします。

横並びの方法はたくさんありますが、基本的にはFlexboxを使います。

import React from 'react'
import styled, { css } from 'styled-components'

const FlowList = () => {
 return (
   <StyledFlowList>
     <StyledFlowListItem>Contents1</StyledFlowListItem>
     <StyledFlowListItem>Contents2</StyledFlowListItem>
     <StyledFlowListItem>Contents3</StyledFlowListItem>
   </StyledFlowList>
 )
}

export default FlowList

const StyledFlowList = styled.ul`
 display: flex;
 justify-content: space-between;
`
const StyledFlowListItem = styled.li`
 padding: 40px;
 border: 1px solid #b3b3b3;
 font-weight: bold;
 text-align: center;
 width: calc(100% / 3);
`

これで下記画像のように要素の横並びができました。

あとは横並びした要素の中身をマークアップしていきますが、今回は省略させていただきます。

レスポンシブデザインに対応する

次にレスポンシブデザインに対応します。
レスポンシブデザインでは
モバイル：縦並び
デスクトップ：横並び
となるレイアウトがよく使われます。

import React from 'react'
import styled, { css } from 'styled-components'

const FlowList = () => {
 return (
   <StyledFlowList>
     <StyledFlowListItem>コンテンツ1</StyledFlowListItem>
     <StyledFlowListItem>コンテンツ2</StyledFlowListItem>
     <StyledFlowListItem>コンテンツ3</StyledFlowListItem>
   </StyledFlowList>
 )
}

export default FlowList

const StyledFlowList = styled.ul`
 @media (min-width: 768px) {
   display: flex;
   justify-content: space-between;
 }
`
const StyledFlowListItem = styled.li`
 padding: 40px;
 text-align: center;
 border: 1px solid #b3b3b3;
 font-weight: bold;
 @media (min-width: 768px) {
   width: calc(100% / 3);
 }
 :not(:first-of-type) {
   margin-top: 80px;
   @media (min-width: 768px) {
     margin-top: 0;
   }
 }
`

スペースマーケットではモバイルファーストでマークアップしているため、先にモバイルのスタイルを指定し、その後メディアクエリを使ってデスクトップのスタイルを上書きしています。

これで下記画像のようにレスポンシブデザインに対応できました。

その他押さえるポイント

1. 不要なスタイル・DOMがないか確認する

デザインを再現するためにいろいろな方法でスタイル指定をしていると、時たま不要なスタイルが残ってしまうことがあります。最後に必ず不要なスタイル・DOMがないか確認しましょう。

2. 要素の横並び方法を知る

今回Flexboxを使った横並びをご紹介しましたが、マークアップは横並びの方法を覚えることがとても大切だと感じています。
横並びの方法を知ること・一番簡単な方法を知ることで、1.で書いた不要なスタイルも減らせると思います。

まとめ

マークアップでは画面全体のレイアウトを組む・要素を横並びする・レスポンシブデザインに対応するを繰り返しています。もちろん複雑なUIもあり、全てをカバーできるものではありませんがこの基本を押さえることでグッとマークアップが身近に感じられるようになったのではないでしょうか。

最後に

スペースマーケットでは一緒にサービスを成長させてくれる仲間を募集しております！

長引くリモートワークでちょっと疲れたな、なんてことはありませんか？
いつもとは気分を変えてお仕事したい時にぴったりなワークスペースをまとめましたのでぜひ覗いてみてください！

こんな場所でリモートワークしたい！魅力的なスペース | スペースマーケット