ようやく、１個目のカンプコーディングが出来ましたので、
解説記事のコードと比較して気づいたことを列挙していきます。
ヘッダー
・Flexboxは二重に使える
ヘッダーとナビをFlexboxで並べて、さらにナビ内に使うというコードになっていました。
自分はナビ内にしか使わなかったんですが、確かに親同士でも使えますよね。なぜか1回しか使えないと思い込んでいました、、！
ファーストビュー
そもそもmainに含めていなかったのが間違いでした汗
・上下中央揃えもflexでも出来る
positionよりすっきり書けますね、、
・back-groundのプロパティめちゃくちゃある
全然知らなかったです、、画像の指定から全部CSS側でやった方が応用が利きそうです。
メイン
About
.section-wrapper{
padding:100px 10% 50px; 各sectionのwrapperにpaddingがかけられているんですが、そもそも全体のサイズを指定するコードが無いのに%指定ってできるんでしょうか。何か根本が分かってないのかも、、
Service
・Flexboxの順番を途中で切り替えている
<div class="content-inner">
<div class="text-wrapper_service">
<h3 class="service-title">リリース時のサポートで<br>サービスのブランディングを</h3>
<p class="section-text_service">
弊社では、リリース時もサポートさせて頂きます。プレスリリース用のサイトや動画制作を通して、サービスのブランディングを行わせて頂きます。
</p>
</div>
<div class="img-wrapper_service">
<img src="https://drive.google.com/uc?export=view&id=16l_4EvoVBKm1Vu8WesRIgisMZfCKjJZY" alt="黒い布の上に置かれた黒い一眼レフカメラ">
</div>
</div>
<div class="content-inner reverse">
<div class="text-wrapper_service">
<h3 class="service-title">リリース後のサポートで<br>効果を最大化させる</h3>
<p class="section-text_service">
弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に様々な課題にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を最大化させます。
</p>
</div>
<div class="img-wrapper_service">
<img src="https://drive.google.com/uc?export=view&id=1Uif2Ch2m5pnIUuTWqEiZUCVe1qwu4UXG" alt="黒い布の上に置かれた黒いアイフォン">
</div>
</div>.content-inner{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.reverse{
margin-top: 50px;
flex-direction: row-reverse;
}
このsectionは要素が1行に２つの合計４つあるんですが、1行目と２行目で要素の順番が逆になるんですよね。
私は愚直にその通りの順番を打ち込んで、全体をflexboxでソートし、レスポンシブで順番を振り直すという形をとっていました。
解説の手法ですと、
①行ごとに囲うdivを作る
②それぞれ同じクラスを指定し、さらに2行目は違うクラスも指定する
③両方に指定したクラスでflexをかけ、さらに②行目のみに指定したクラスでrow-reverseをかける
という形をとっていました。
なるほど、こうすれば途中で順番変えられるのか！これならレスポンシブではほとんどいじる必要がなくなりますね。
クラスの使い分けに感心しました。面白い！
Newｓ
私はdivだけで並べたんですが、解説は更にulでリスト化して並べていました。
セマンティック的にはこちらの方が適切ということでしょうか。
Contact
私はそのまま並べたんですが、解説はFlexboxが使われていました。
レスポンシブ
サイズ調整の考え方
①自分のやり方
全体を囲うdivでwidthを規定→レスポンシブ時に新たに記述
その両端で揃う要素はPCの段階で100%で記述→レスポンシブ用の記述は不要
②解説のやり方
全体のサイズはmax-widthで規定→レスポンシブ用の記述は不要
paddingで余白を調整→レスポンシブ時に新たに記述
という違いがありました。自分のやり方でも問題なさそうに見えるんですが、何か抜けがあるのかもしれません。。
画像のサイズ調整
object-fit覚えます！
ハンバーガーメニュー
・疑似要素使わずspanを３つ作っている
アニメーションまで考える場合はこちらの方がやりやすそうだなと思いました。
・jQueryすごい
クラスの付け外しまで出来るんですね。便利だなあ、勉強せねば、、！
あと今回のサイトの場合はスライドじゃなくてフェードが適切でしたね。納得、、
感想
思っていた以上に書き方が違っていて驚きました。
書き方として間違い・適切ではないと気付けたものを別にして、書けていたと思えたものの中でも、
①「解説のやり方が効率良い！」と思えたもの
②「自分の書き方でも効率に差はないように感じるけど、保守性など別の視点で見ると良くなかったりするのか？そもそも基本認識が抜けているのか？」とメリット・デメリットともに見えないもの
この２つに分かれました。
後者については、解説のやり方を試しながら比較していけば気づけそうですが、人に見てもらわないと認識を得られない部分もあるかもしれません。。
そろそろMENTAなどを利用した方が良いのだろうか、、検討していこうと思います。
次は中級に移るか、オリジナルを作るか、jQueryを学ぶかでちょっと迷っているので、一旦考えます。
コメント