See the Pen
Flowchart (Responsive) by EU-Create (@EU-Create)
on CodePen.
CodePen上だとHTMLとCSSに変換してありますが、実際はPugとSASSでプログラミングしました。
ちなみに画像部分はSVGです。
実際に組んだ時のSASS。
Autoprefixerも通してあります。
|
1 |
last 5 versions, Android >= 4, iOS >= 9 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
$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 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 |
// フロー .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.
コメント