【WEB制作】LP制作2週間目

当記事はデイトラでWEB制作コースを受講して45週間、どんな状況でどんな勉強をしているのかまとめています

未経験、異業種、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。

そんな方の判断材料になれば幸いです！もはやデイトラは関係ありませんが。

ばく

ありがたいことにLP制作を任せられました！

この記事では以下のことが書かれています。忘備録によるコードが多めです。

学習時間は1250H程度。LP開始から48.5H、半分くらいできたかな？

LP制作で学んだこと

パープレキシティ、ChatGPTと並行してコーディングに特化したAIを使用しています

v0.dev

v0 by Vercel

https://v0.dev

Chat with v0. Generate UI with simple text prompts. Copy, paste, ship.

vercel社が作っているので特にReact.jsベースでの回答に特化しているとのこと。

無料だと回数制限のためあまり使えず。有料を検討しています。

emmetの機能・イメージサイズの更新

<img>タグに属性としてwidthとheightを自動でつけます。

<img>をカーソルに合わせたまま、⌘+Shift+Pを押し、イメージサイズの更新を選択すると

widthとheightが自動で表示されます。

画像の比率を守るためにwidthとheightをimgタグにつけるのは必要なのですが、正直めんどくさい忘れがちだったので、非常に便利な機能になります。

クラス名の付け方

box
wrapper
container…

ばく

🤔🤔🤔

ネタ切れを起こして悩んでいる時間が非常にもったいないので、HTMLの構造を先に考えて、法則性をもたせるようにしました。

コンポーネント単位でクラス名を使い回すといい。というアドバイスを頂き、意識することにしました。

<section class="section">
  <div class="section__inner">
    <div class="section__wrapper">
      <header class="section__header">
        <div class="section__header-container">
          <ul class="section__list">
            <li class="section__list-item">
              <div class="section__item-container">
                <p class="section__item-text"></p>
                <img class="section__item-image" src="" alt="">
              </div>
            </li>
          </ul>
        </div>
      </header>
      <div class="section__body">
        <div class="section__body-container"></div>
      </div>
      <footer class="section__footer">
        <div class="section__footer-container"></div>
      </footer>
    </div>
  </div>
</section>

まずはcontainerで囲うということを意識します！

あしらい画像を固定するために全体を囲う

あしらい画像を固定するために、サイト全体をoverflow:hiddenします。

ばく

サイトを彩るあしらい画像。デザインどおりに固定して、レスポンシブでも動かないようにしたいですne!

bodyにoverflo:hiddenを付けただけでは画面端に合わせて画像が移動してしまいます。

前提として画像を固定するために

.image-box {
  position: relative;
}
.image {
  position: absolute;
  left: calc(50% + 100px);
}

元となる箇所にposition:relative

固定したい画像にabsoluteを付けて、left:(50% + ◯px)とする必要があります。

これをしても画像が動いてしまう場合は、全体を覆うクラスを設定してoverflow:hiddenを試してください。

子要素のサイズをまとめて指定する

display:gridを使っていて、便利だな〜と思ったコードです。

.parent {
  > * {
    width: 100%; /* 親要素の直下にあるすべての子要素に適用 */
  }
}

sassで使えるのですが、直下の子要素にスタイルが当たるので物によってwidthが変わるなんてことがなくなりました。

LP制作｜まとめ

デイトラの学習を始めて45週間。学習時間は1250H程度になりました。

そこそこ勉強してきたつもりですが、日々新しい発見ばかりです。

初めて人のサイトを制作しているので、なるべく見やすいコードを、わかりやすいコードを…と考えています。

クラス名に一貫性をつけることが最初でしょうか_(┐「ε:)_

ばく

丁寧さを心がけて作業を続けていきます！

これからも続けたらどうなるか？を更新していくので見て頂ければ幸いです。

リスキリング(大人の学びなおし)やIT人材不足はまだまだ続いていきます。勉強を始めるのに遅いことはありません。

自分も何かのスキルを得たい、変わりたいと思っている方、

一緒に頑張りませんか？

WEB制作のスクールは安い買い物ではありませんが、

頑張るだけの価値はあると感じます。

＼デイトラを受けるならここから／

ABOUT ME

ばく

30代×朝活×学びなおしをテーマに、実践していることを発信しています。 オンラインスクール「デイトラ」WEB制作コースの体験談を主に書いています。

BLOG：https://bac-asablog.com