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.