投稿日: 投稿者: EU-Create

少しトリッキーなレスポンシブ対応フローチャート

See the Pen
Flowchart (Responsive) by EU-Create (@EU-Create)
on CodePen.



CodePen上だとHTMLとCSSに変換してありますが、実際はPugとSASSでプログラミングしました。
ちなみに画像部分はSVGです。
実際に組んだ時のSASS。
Autoprefixerも通してあります。

last 5 versions, Android >= 4, iOS >= 9
$viewportWidth1: 640
$imgPath: "../images/"
$viewportSpBaseWidth: 320

// color
$colorGreen: #009055

// font
$baseFontSize: 16
=fontFace
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "HelveticaNeue", "Helvetica Neue", Arial,sans-serif

=fontSize($size)
  font-size: $size + px
  font-size: ($size / $baseFontSize + rem)

=fontSizeVw($size)
  font-size: #{$size}px
  font-size: ($size / $viewportSpBaseWidth * 100 + vw)

=marginVw($size, $position, $important: false)
  @if $important == true
    $important: " !important"
  @else
    $important: ""
  margin-#{$position}: #{$size}px#{$important}
  margin-#{$position}: ($size / $viewportSpBaseWidth * 100 + vw)#{$important}

=paddingVw($size, $position, $important: false)
  @if $important == true
    $important: " !important"
  @else
    $important: ""
  padding-#{$position}: #{$size}px#{$important}
  padding-#{$position}: ($size / $viewportSpBaseWidth * 100 + vw)#{$important}

// position
=positionXCenter
  left: 50%
  transform: translateX(-50%)

=positionVw($size, $position, $important: false)
  @if $important == true
    $important: " !important"
  @else
    $important: ""
  #{$position}: #{$size}px#{$important}
  #{$position}: ($size / $viewportSpBaseWidth * 100 + vw)#{$important}

// width
=flexWidth($size, $baseSize: null)
  // 指定した数値が単位を持っているかどうか判定し、単位がなければtrueが返るので%で出力。
  @if unitless($size)
    @if $baseSize
      flex: 0 0 percentage($size / $baseSize)
      max-width: percentage($size / $baseSize)
    @else
      flex: 0 0 percentage($size / 100)
      max-width: percentage($size / 100)
  // 単位があればそのまま出力
  @else
    @if $baseSize
      flex: 0 0 $size
      max-width: $size
    @else
      flex: 0 0 $size
      max-width: $size

=vwWidth($size)
  width: $size + px
  width: $size / $viewportSpBaseWidth * 100 + vw

body
  +fontFace

a
  &:hover
    img
      opacity: .7

.pc
  display: block
img
  &.pc
    display: inline-block
.sp
  display: none
// スマートフォン
@media screen and (max-width: ($viewportWidth1 + px))
  a
    &:hover
      img
        opacity: 1
  .pc
    display: none !important
  .sp
    display: block
  img
    &.sp
      display: inline-block

// フロー
.introduction_preparation
  h2
    height: 297px
    margin-bottom: 0
    padding-top: 100px
    text-align: center
    img
      max-width: 620px
      width: 100%
  .contents
    background: #f4f4f4
    .inner
      max-width: 960px
      margin: 0 auto
      padding-top: 64px
      padding-bottom: 14px
      .flow
        min-height: 1826px
        margin-bottom: 44px
        background:
          image: url(#{$imgPath}branch_flow_right.svg), url(#{$imgPath}branch_flow_left.svg), url(#{$imgPath}branch_flow_right.svg), url(#{$imgPath}branch_flow_left.svg), url(#{$imgPath}branch_flow_right.svg), url(#{$imgPath}branch_flow_left.svg), url(#{$imgPath}flow_bg_1.svg)
          repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat
          position: calc(50% + 42px) 1380px, calc(50% - 42px) 1260px, calc(50% + 42px) 936px, calc(50% - 42px) 660px, calc(50% + 42px) 380px, calc(50% - 42px) 160px, top center
        .flex
          display: flex
          justify-content: space-between
          align-items: flex-start
          flex-wrap: wrap
        .contents
          +flexWidth(400, 960)
          background: #fff
          border-radius: 20px
          h3
            margin-bottom: 21px
            padding: 25px 24px 0
            img
              width: 100%
          .images
            margin-bottom: 24px
            img
              max-width: 400px
              width: 100%
          h4
            padding: 0 30px
            margin-bottom: 24px
            img
              width: 100%
          h5
            padding: 0 30px
            +fontSize(18)
          .bottom_text
            padding: 0 30px 24px
            +fontSize(14)
            line-height: (20 / 14)
      @for $num from 1 to 7
        .flow_contents#{$num}
          @if $num == 1
            margin-bottom: 36px
          @else if $num == 2
            margin-top: 50px
            margin-bottom: 36px
          @else if $num == 3
            margin-top: -50px
          @else if $num == 5
            margin-top: -13px
          @else if $num == 6
            margin-top: 36px
          h3
            img
              @if $num == 1 or $num == 2
                max-width: 184px
              @else if $num == 3
                max-width: 208px
              @else if $num == 4
                max-width: 310px
              @else if $num == 5
                max-width: 275px
              @else if $num == 6
                max-width: 264px
          h4
            @if $num == 2
              margin-bottom: 60px !important
            img
              @if $num == 1
                max-width: 210px
              @else if $num == 2
                max-width: 261px
              @else if $num == 3
                max-width: 220px
              @else if $num == 4
                max-width: 188px
              @else if $num == 5
                max-width: 260px
              @else if $num == 6
                max-width: 253px
      .bottom_contents
        display: flex
        max-width: 700px
        margin: 45px auto 0
        background-color: #fff
        border-radius: 20px
        .images
          +flexWidth(300, 700)
          margin-bottom: 0
          img
            max-width: 300px
            width: 100%
        .right_contents
          +flexWidth(400, 700)
          margin-top: 24px
          padding-right: 34px
          padding-left: 34px
          h3
            margin-bottom: 33px
            img
              max-width: 264px
              width: 100%
          h4
            margin-bottom: 22px
            img
              max-width: 188px
              width: 100%
          h5
            +fontSize(18)
          .bottom_text
            +fontSize(14)
            line-height: (20 / 14)
      .notice
        margin-bottom: 0
        text-align: right
        +fontSize(12)

// スマートフォン
@media screen and (max-width: ($viewportWidth1 + px))
  // フロー
  .introduction_preparation
    h2
      height: (318px / 2)
      padding-top: (80px / 2)
      background: url(#{$imgPath}title_introduction_preparation_bg_sp.png) no-repeat center bottom
      background-size: 640px 20px
      img
        max-width: (570px / 2)
    .contents
      .inner
        +paddingVw((40 / 2), "top")
        .flow
          background:
            image: url(#{$imgPath}branch_flow_2_sp.svg), url(#{$imgPath}branch_flow_1_sp.svg), url(#{$imgPath}branch_flow_1_sp.svg), url(#{$imgPath}branch_flow_1_sp.svg), url(#{$imgPath}branch_flow_1_sp.svg), url(#{$imgPath}branch_flow_1_sp.svg), url(#{$imgPath}branch_flow_1_sp.svg), url(#{$imgPath}flow_bg_1_sp.svg)
            repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat
            position: ((38 / 2) / $viewportSpBaseWidth * 100 + vw) ((3806 / 2) / $viewportSpBaseWidth * 100 + vw), ((52 / 2) / $viewportSpBaseWidth * 100 + vw) ((3232 / 2) / $viewportSpBaseWidth * 100 + vw), ((52 / 2) / $viewportSpBaseWidth * 100 + vw) ((2640 / 2) / $viewportSpBaseWidth * 100 + vw), ((52 / 2) / $viewportSpBaseWidth * 100 + vw) ((2048 / 2) / $viewportSpBaseWidth * 100 + vw), ((52 / 2) / $viewportSpBaseWidth * 100 + vw) ((1458 / 2) / $viewportSpBaseWidth * 100 + vw), ((52 / 2) / $viewportSpBaseWidth * 100 + vw) ((868 / 2) / $viewportSpBaseWidth * 100 + vw), ((52 / 2) / $viewportSpBaseWidth * 100 + vw) ((278 / 2) / $viewportSpBaseWidth * 100 + vw), ((30 / 2) / $viewportSpBaseWidth * 100 + vw) top
            size: ((107 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((94 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((94 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((94 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((94 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((94 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((94 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((60 / 2) / $viewportSpBaseWidth * 100 + vw) auto
          .flex
            justify-content: flex-end
            +paddingVw((60 / 2), "right")
            +paddingVw((60 / 2), "left")
          .contents
            +flexWidth(490, 580)
            border-radius: (20px / 2)
            h3
              +marginVw((19 / 2), "bottom")
              +paddingVw((23 / 2), "top")
              +paddingVw((24 / 2), "right")
              +paddingVw((24 / 2), "left")
              img
                max-width: initial
            .images
              +marginVw((30 / 2), "bottom")
              img
                max-width: initial
            h4
              +paddingVw((26 / 2), "right")
              +paddingVw((26 / 2), "left")
              +marginVw((36 / 2), "bottom")
              img
                max-width: initial
            h5
              +paddingVw((28 / 2), "right")
              +paddingVw((28 / 2), "left")
              +fontSizeVw((24 / 2))
              font-feature-settings: "palt" 1
            .bottom_text
              margin-bottom: 0
              +paddingVw((28 / 2), "right")
              +paddingVw((18 / 2), "bottom")
              +paddingVw((28 / 2), "left")
              +fontSizeVw((24 / 2))
              line-height: (36 / 24)
              font-feature-settings: "palt" 1
          @for $num from 1 to 8
            .flow_contents#{$num}
              @if $num == 1 or $num == 4
                +marginVw((20 / 2), "bottom")
              @else if $num == 2 or $num == 3 or $num == 5 or $num == 6
                margin-top: 0
                +marginVw((20 / 2), "bottom")
              h3
                img
                  @if $num == 1
                    +vwWidth((223 / 2))
                  @else if $num == 2
                    +vwWidth((224 / 2))
                  @else if $num == 3
                    +vwWidth((254 / 2))
                  @else if $num == 4
                    +vwWidth((378 / 2))
                  @else if $num == 5
                    +vwWidth((334 / 2))
                  @else if $num == 6
                    +vwWidth((324 / 2))
                  @else if $num == 7
                    +vwWidth((322 / 2))
              h4
                @if $num == 2
                  +marginVw((74 / 2), "bottom", true)
                img
                  @if $num == 1
                    +vwWidth((262 / 2))
                  @else if $num == 2
                    +vwWidth((327 / 2))
                  @else if $num == 3
                    +vwWidth((274 / 2))
                  @else if $num == 4
                    +vwWidth((235 / 2))
                  @else if $num == 5
                    +vwWidth((324 / 2))
                  @else if $num == 6
                    +vwWidth((316 / 2))
                  @else if $num == 7
                    +vwWidth((235 / 2))
        .notice
          +paddingVw((30 / 2), "right")
          +paddingVw((30 / 2), "left")
          +fontSizeVw((18 / 2))

今回はPugは省略します。

SyntaxHighlighter Evolvedの開発者の1人であるAlex Mills氏に感謝するとともに、彼のご冥福をお祈りいたします。
Thank you Alex Mills, one of the developers of “SyntaxHighlighter Evolved”, and I may his soul rest in peace.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です