LP模写によりLP製作の【超初心者】が学んだこと(随時更新)

ランサーズ案件の参考LPサイトから
調査をして学んだこと自分用メモ

今回は**このサイト**の
welcomeページのみ調査・模写しました

###結果分かった頻出パターン###

####～配置の頻出パターンは以下の通り～####

#####1.display系#####

display: flex;
　　　　　block;
         inline;

#####2.position系#####

position: relative;
          absolute;

#####3.text-align系#####

text-align: center;
            left;
            justify;

#####4.justify-content系#####

justify-content: center;
                 space-between;

#####5.transform系#####
(これは1,2回見たくらい)

transform: translate( , );   

####～基本文法の頻出パターンは以下の通り～####

#####1.ulとliにクラス名つけて修飾#####

<ul class="">
   <li class="">
   </li>
</ul>

#####2.border系#####

.class名(または#id名) {
  border: 色 solid 太さ; /*1本線で囲む*/
  border-radius: 4px; /*角丸くんの大きさ指定*/
  border-top: ・・・などなど
} 

#####3.margin と padding#####

#####4.hoverでリンクに触れた時の動き指定#####

#####5.background系#####

###◆調査の足跡###

①全体の構造分け(header,footer,main,div,section,class,id…articleなど)

このLPサイトを作った人は
1. 〇〇-wrap > 〇〇-block > 〇〇-box の順でclass分け
2. 大まかな枠組みの中身は class名 .inner で共通指定
3. class名 .sec-blockなどでmargin , padding を共通指定

↓

② ulとliでdisplay指定をしているところがたくさん
(個人的に目から鱗だった)
CSS Flexboxチートシート

↓

③ レスポンシブ対応

とりあえず、一画面のみ縦長で模写を終了…！
特殊の文字で部分的にスルーしている
ところと使用不可の画像以外は大体コピーできたかな…

かなり勉強になりました。

参考サイト

ちなみに、CSSの素敵なおまとめがあったのでメモ。

模写した様子↓