Hakusan Mafiaアドベントカレンダー4日目はマスブチです！
最近の悩みは僕のusernameであるyoshixjの読み方がきまらないことです。カッコイイ読み方募集しています！
今回の内容ですが、最近RailsでAPIを扱うことが多く、Railsのこと書こうかなぁと思ったんですけど、大体ググれば該当の記事はでてくるんでやめました！><
そこで、何書こーかなぁって中目黒歩いていたら、となりにいたRailsエンジニアがマークアップできる彼女がほしい！！！！と切実に嘆いていたので、マークアップのアルバイト1年間の経験を生かして、マークアップの話でもしようかと思います〜
で、今回は開発中のプロダクトのLP があるのですが、その製作過程をちょいと振り返っていきたいと思います！
今回の対象となるのは
- BEMとかしってるけど、そもそもきれいに表示させられない
- float とかつかえん
みたいな、ちょっとcss書いたことはあるけど。。。
みたいな人向けです。
1.デザイナーからデザインがとどきました
さぁ案件が届きました。今回の依頼はZeplinから。(MacのDoc入って居ると何故かかっこいいイラレやフォトショやらを持っていなくても製作に取り組める！最近のサービスはすごい！)
ぱーと見ていくと難しいそうな部分が。。。
難しいそうな点
1.レスポンシブ対応
2.左右カラム
3.吹き出し部分
LP全体を考えると量が多いので、この記事では上記3点について考えて行きたいと思います。
2.とりまHTMLを組む
とりまとか簡単にいってしまいましたが、結構この最初のHTML設計は重要です！あとで変更点が合った時に再設計が難しくなってしまいます！
自分は基本的にできるだけブロックを意識してマークアップを組むようにしています。
僕のあたまの中はこんな感じになります！
そしてできるhtmlは大体こんな感じです！
<div class="content">
~~
<div class="wrap">
<div class="feature-intro_ballon" data-aos="fade-right">
<p class="feature-intro_ballon_inner_txt">お気に入りのお店がたくさんあって <br>どこを探せばいいのかわからない…
</div>
<div class="feature-intro_ttl">
<p class="feature-intro_ttl_txt"><span class="">自分だけのお店リストを作ろう</span></p>
</div>
</div>
<div class="wrap crearfix">
<div class="left">
<p class="left_imgbox"><img data-aos="zoom-in" src="imgs/sp-sample01.png" alt=""></p>
</div>
<div class="right">
<div class="right_inner">
<p class="txt">
ランチ？ディナー？<br>
どこのカフェ？<br>
シーンごとに<br>
自分だけのリストを作ろう
</p>
</div>
<div class="right_inner">
<p class="txt">
お気に入りのお店が<br>
かんたんに探せるよ！
</p>
</div>
</div>
</div>
~~
</div>
### 意識すべき点は
- wrapをつける
- floatがはいるBOX、入らないBOXをわけ、2段構成にする
するという点です。
wrapをつけるとい点は後ほど紹介します！
3.CSSをあててみる
wrapをつける
レスポンシブ対応ですが、おそらくほとんどの人がPCから組み始めるのではないかと思います。
そこで重要なのがwrapですね！
このwrapが持つ重要な役割はMaxWidthを指定することです。
MaxWidthを指定してあげれば、このように横に広いディスプレイでもコンテンツがそれに比例して広がってしまうのを防ぐことができます。
また、960px以下のデバイスのように~~width:100%も指定してあげます。~~ width:auto` でいけるようです！
こうすることで、スマホのときは横幅ぴったりにレイアウトを組むことができます。
.wrap {
max-width: 960px;
width: auto;
}
2カラムに分ける
wrapで一番外側の箱を決めたあとは中身を考えます！
ここでみんな苦労するところが、左右のカラムわけです。
何故かうまくいかないww
みたいな事象が結構みてきました！
僕が思うポイントは
widthをしっかりと計算することです。
大体ここでうまくカラムが並列にならないのは、paddingやmarginなど入ってしまい、外側の箱のwidthを上まってしまっています。
ということで、そこをしっかりと考えて以下のような感じでcssはくみました。
.left {
width: calc(50% - 36px);
float: left;
padding-left: 20px;
padding-right: 16px;
}
.right {
width: calc(50% - 36px);
float: left;
padding-left: 20px;
padding-right: 16px;
}
解説としては、margin, padding それぞれ0で、witdhを50%にすれば確実に横並びになります。しかし、それだと見た目が詰め詰めになってしまうのでpaddingをいれます。現在cssにはcalcという便利な関数が用意されていて、right, leftのpadding 20+16=36pxを引いた値をwidthに指定してあげます！
これで多分、うまく並列に並べられます。
この状態になると、widthは全部%指定のため、おそらくデバイスwidthをどれだけ変化させても加えても2カラムの状態を担保できます。
吹き出しをつくる
そして最後の吹き出し部分。
CSSで図形を組んだことはありますでしょうか？？
自分はこの辺の記事を参考にくみました。
http://ideahacker.net/2013/07/26/5962/
right {
position: relative;
&_inner:after {
content: "";
position: absolute;
top: 22%;
left: -15px;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
}
今回の吹き出し、原理を理解するのは結構めんどくさいです。しかし、納期を考えればなぜこのプロパティで三角形ができるのかはにのつぎです。
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
ここの値をうまく動かして三角形の大きさは調節しましょう。
今回ボクが注目してほしいポイントは以下です
- after or before の疑似要素で組むこと
- position を使うこと
今回は吹き出しなので、三角形は常にそのブロックにくっついていることになります。そうなると、after or beforeで組んだ方がpositionで位置を調節する際に楽です。デバイスによっての位置のズレも起こりずらくなります。
また、CSS初心者だと今回のpositionが何を意味しているのか分からない人も居るとおもいます。注目すべき点は親要素にrelativeをつけ、その子要素にabsoluteをつけるということです。試しに親要素のrelativeを取ってみてもいいでしょう。多分変なところに飛んでいきます。
4. まとめ
CSSとかマークアップ周りを苦手にしているサーバーかける友達けっこう聞くのでいっちょ書くかと、書き始めましたが、途中で飲みにいってしまい時間がなくなって、 今やってる仕事の関係もあり、書いてる途中で細かくすべて解説するのが辛くなってきちゃいました。今回伝えたかった部分は
- htmlをブロックを意識して組む
- floatとかするときwidthをしっかり意識しよう
- wrapをつけよう
- position:relative, absolute の違いを理解しよう。
みたいなところです！
そういえば、最近はflexとかがあるのでこの辺の実装はも少し楽になっていると思います！
この部分はどうなの？？って言う疑問あったらコメントください><
以上マスブチが担当しました！