模写コーディングの備忘録

模写コーディングする目的

• HTML,CSS, ページレイアウトの実践的な使い方を学ぶ
• デザインカンプを前提とした、コーディングの進め方を学ぶ
  (Figmaのプラグインを使用)

以上2点を意識して、ブルーボトルコーヒー公式オンラインストアとYouTubeのトップページの２つを模写しました。今回はレスポンシブ対応には全く手をつけていません。

完成品

気づいたこと

初めに、見よう見まねでブルーボトルコーヒーのサイトをFigmaを使いながらコーディングしました。image要素はFigmaから取得できないものもあったので、それは直接ページから拝借してます。ドロップダウンメニューは元のコードをみてます。
次に、【実践】模写コーディングのやり方 | HTML & CSS | Codingを参考に、YouTubeサイトのコーディングをしました。

What I'm not sure

• パーツをどこまで細分化すればよいか？
• HTMLにできるだけimageタグを直接記述しない方法は？
• CSSの共通スタイルをどこまで細分化すればよいか？
• flexを使いがち？
• class名の付け方
• DropDown Menuの表示位置の調整

レイアウトとパーツは分けて考える

YouTube

<div class="wrap_btn">
    <a href="#" class="btn_login">ログイン</a> 
</div>　

.wrap_btn {
  margin-top: 10px;  /*ボタンパーツの余白はレイアウトとして考える*/
}

(擬似要素内で) cssのbackgroundを使用してimageやiconをもってくる

bulebottlecoffee

  <div class="hero">
      <div class="hero_bg"></div>
      <div class="contents">
        <p class="font_15">Event</p>
        <p class="font_22">オンラインセミナー</p>
        <button type="button" class="detail_btn">さらに詳しく</button>
      </div>
  </div>

.hero {    //div要素のbackgroundでimage表示
  height: 685px;
  max-width: 100%;
  background: url(/images/hero.bg1.png) no-repeat;
  background-size: cover;
  position: relative;
  padding: 30px 0;

  .hero_bg {   //imageの上に薄いグラデーションを乗せる
    background-image: linear-gradient(to top, rgba(4, 4, 4, 0.65), rgba(54, 54, 54, 0.2));
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}

Flexboxの理解

display: inline-flex;
inline-block + flexの役割(flexアイテムに幅を指定しなくても勝手に中身依存の幅になる)

隣接する要素のみにスタイル適用

YouTube

<nav class="nav_header">
        <ul class="list_nav_header">  <!--liは横並び-->
          <li class="app"><a href="#"></a></li>
          <li class="setting"><a href="#"></a></li>
          <li class="login"><a href="#" class="btn_login">ログイン</a>
          </li>
        </ul>
</nav>

.list_nav_header > li + li {
  margin: 0 0 0 15px;　     /*2,3番目のliに左margin*/
}

margin、paddingの調整

YouTube

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

.list_video {
  display: flex;
  flex-wrap: wrap;
  margin: -8px; /*子要素で縮む分親要素で膨らます*/
}
.list_video > li {
  width: 25%;  /*４つ並ぶ*/
  padding: 8px /*子要素の間*/
}

まとめ

その他にも、いろいろ勉強になる点が多かったです。
レイアウトの組み方、class名、CSSのスタイルなどシンプルかつ分かりやすく記述できるようになるのが今後の課題です。
多くの方の情報発信に助けられているので、自分もどなたかの役に立てればという思いで、独学の記録として掲載しています。
もっと良い書き方や間違っている箇所等ありましたら、コメントして頂けると助かります！