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 Pゴシック", "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.