【HTML/CSS】模写コーディングで学んだこと

はじめに

HTML/CSSについてはこれまでにも触れたことはありましたが、知識が抜けていて曖昧な部分も多く、「本当に一人で実装できるのか」という不安がありました。

そこで、HTML/CSSのコーディング力向上と、現在の自分の理解度を確かめるために模写コーディングを行いました。

この記事ではHTML/CSSで模写コーディングをしてみての学びと知識についてまとめています。HTML/CSSコーディングについて参考になると幸いです。

前提

• HTML
• CSS
• VSCode
• Live Server

※ どのサイトを模写コーディングしたのかについては触れません。

HTML/CSSについて

HTML

HTMLは「HyperText Markup Language」の略で、マークアップ言語です。
文書をブラウザに解釈させ、Webページとして表示するために使用します。

文章の要素に「ここは見出し」「ここは段落」といった意味付け（セマンティクス）を行います。

CSS

CSSは「Cascading Style Sheets」の略で、webページの見た目や構造を装飾するための言語です。

文字の大きさや色、余白の調整だけでなく、レイアウトの配置やアニメーションの指定なども行います。

HTML/CSSのつながり

HTMLで構造を作り、CSSで装飾を行います。

建物で例えると

• HTML：柱や壁などの骨組み
• CSS：壁紙、照明、インテリアなどの装飾

という関係になります。

HTML Living Standard

HTMLについてまとめられた公式の標準仕様です。

HTMLタグの持つ意味や使い分け(セマンティック)が記載されており、正しく使用することでサイトの品質が保たれ、検索エンジンにも適切に認識されやすくなります。

以前はHTML5としてW3Cが策定していましたが、現在はWHATWGが管理しています。

コーディング規約

読みやすく保守しやすいコードを書くため、以下を意識しました。

• インデントは半角スペース2つ
• 基本的に小文字で記述
• セマンティクスを意識（見出しはh1〜h6、段落はp、リンクはa など）

クラスの命名について

CSS設計としてBEMを意識しました。

• Block： 大枠の要素
• Element： Block中の要素
• Modifier： BlockやElementのスタイル

正式な書き方は下記になります。

HTML

class="block__element–-modifier"

headerを作るなら次のようにします。

• Block：header
• Element：header__navList、header__inner
• Modifier：header__navList--current、header__navButton--success

保守性を意識した命名が重要だと感じました。

※ BEMの命名についてはコメント欄もご確認ください。

覚えておくと役立つ知識3選

flexbox

flexboxを理解していると、多くのレイアウトに対応できます。

基本的に使い方として、親要素から子要素に対して指定します。

下記をよく使いました。

• 子要素を横並びにしたい(ナビゲーションメニューなど)

CSS

display: flex;
gap: 20px; // 子要素間を空ける

• 子要素を横並びにして両端に均等に配置したい

CSS

display: flex;
justify-content: space-between;

• 子要素を横並びにして垂直方向をセンターに揃えたい

CSS

display: flex;
align-items: center;

• 子要素を縦並びにする

CSS

display: flex;
flex-direction: column;

flexboxは非常に使用頻度が高く、理解しているかどうかで実装速度が大きく変わると感じました。

position（relative / absolute）

要素を重ねたり、特定の位置に配置したいときに使用します。

CSS

.mv {
  position: relative;
}

.mv__image {
  position: absolute;
  top: 0;
  left: 0;
}

親要素をrelativeにし、子要素をabsoluteにすることで、基準を親要素内に限定できます。

レスポンシブ

画面幅に応じて表示を調整します。

CSS

@media (max-width: px幅が入る) {
  ここにCSSを入れていく
}

例：flexboxでPCは横並び、SPは縦並びにする

CSS

// PC版
.items {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.item {
  padding: 30px;
}

@media (max-width: 768px) {
  .items {
    flex-direction: column;
  }

  .item {
    padding: 20px;
  }
}

現代はモバイルファーストだったりするので、最初からPCよりもSP前提で進めた方が良いのかもしれないと感じました。

模写コーディングした感想

模写コーディングは、基礎的なやり方を掴んでいれば大抵のレイアウトに対応できると感じました。

ただ、選定するサイトによっては自分のレベルが足りなかったり、あまりにもページが長すぎると自分のモチベが下がってただの作業になったりもするので、サイトチョイスも重要に感じました。

実際にコーディングを進めていく中で、クラスの設計に迷ったり、余白(margin/padding)に手こずったり、レスポンシブで表示崩れが起きて苦戦することもありました。

一つずつ確実にコードを読んで表示を確認と検証画面からコードを変えてみるなどして、根気強く進めていく必要があると感じました。

模写コーディングはたくさんのサイトをこなせばこなすほど力がつくと思います。

おわりに

模写コーディングを通して、実在するWebサイトを一から作り直して再現することは、自分のコーディング力における自信をつけることにもつながると感じました。

また、HTML/CSSだけでもできることは非常に多く、基礎をしっかり身につけることの重要性を改めて感じました。

基礎を理解しているからこそ、AIなどのツールもより効果的に活用できると感じました。

参考