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の素敵なおまとめがあったのでメモ。

模写した様子↓