Webページ模写の方法（フロントエンド）

Posted at 2024-11-17

はじめに

Yasuと申します．2週間ごとに学習成果をアウトプットする目的で記事を作成しています．自分のための記事にはなりますが，同じように学習している初学者の方にも参考になれば嬉しいです．

フロントエンドのスキルを磨くために挑戦したのが「Webページの模写」です．模写とは，既存のWebページを見本にして，そのデザインや動きを自分の手で再現する作業のことです．模写を通じて，HTMLやCSSだけでなく，JavaScriptを使った動的な機能の追加も学ぶことができます．

この記事では，私が模写に取り組んだ手順や学び，その中で使用したツールについて紹介します．フロントエンド学習を始めたばかりの方の参考になれば嬉しいです．

1．環境構築

模写はお手本のソースコードを極力見ずに行います．しかし，フォントや色，幅などは目視で模写するのは難しいため，効率よく作業を進めるためにまず環境を整えました．ここでは使用したツールや拡張機能を紹介します．

1.1 使用したGoogle Chrome拡張機能

模写作業で役立った拡張機能は以下の5つです．

1．WhatFont

目的：ページで使用されているフォントを特定する．
使い方：拡張機能を起動し，調べたいテキスト上にカーソルを合わせるだけで，フォント名やサイズが表示されます．
活用例：タイトル部分に「Roboto」というフォントが使用されていることを確認．
補足：フォントが異なるとデザインの雰囲気が変わるため，正確に把握することが重要です．

2．ColorPick Eyedropper

目的：ページ内の色を取得する．
使い方：スポイトツールを使い，特定の部分の色を簡単に取得可能．
活用例：ボタンや背景色のカラースキームを確認し，CSSで再現．
補足：取得した色をカラーパレットにまとめると，作業がスムーズになります．

3．Image Downloader

目的：ページで使用されている画像をダウンロードする．
使い方：拡張機能を起動し，必要な画像を選択して保存．
活用例：バナー画像やアイコンを模写用に保存．

4．背景画像を表示（Show Background Image）

目的：通常の手段では取得しづらい背景画像を確認する．
使い方：拡張機能をクリックし，背景画像を直接表示．
活用例：背景に使用されているグラデーション画像を再現．

5．GoFullPage

目的：ページ全体のスクリーンショットを取得する．
使い方：拡張機能を起動し，ページ全体をキャプチャ．
活用例：模写対象の全体像を把握しながら作業を進める．

1.2 開発環境

以下の環境で作業を行いました．

エディタ：Visual Studio Code
ブラウザ：Google Chrome

環境構築をしっかり行うことで，模写作業が効率よく進むだけでなく，デザインの細部を正確に再現することが可能になります．次章では，模写の進め方について詳しく説明します．

2．模写の進め方

模写作業では，HTML・CSS・JavaScriptのファイルをそれぞれ作成し，必要なコードを記述していくことで，静的なデザインだけでなく動的な機能も再現しました．以下に，模写作業の具体的な流れを紹介します．

2.1 HTMLとCSSファイルの作成，ResetCSSの用意

模写作業の最初のステップとして，以下の準備を行いました：
1．HTMLファイルとCSSファイルを作成する．
2．ResetCSSを用意して，ブラウザごとのデフォルトスタイルの差異をリセットする．

HTMLの雛形の作成

以下は，CSSを適用するためのHTMLの雛形です．

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模写ページ</title>
  <link rel="stylesheet" href="reset.css">  /* ResetCSSの適用 */
  <link rel="stylesheet" href="style.css">  /* 自作のCSSの適用 */
</head>
<body>
</body>
</html>

ResetCSSを導入することで，各ブラウザで統一されたスタイルで作業を進めることが可能になります．

2.2 HTML，CSSの記述

次に，HTMLファイルにページの構造を記述し，CSSファイルでデザインを適用していきます．上記のツールを活用して，見た目を見本ページに近づけていきます．

2.3 JavaScriptの記述

JavaScriptを使用して動的な機能を再現します．模写対象のページでは，ハンバーガーメニューが実装されていたため，それを例に記載します．

HTML例：ハンバーガーメニューのマークアップ

<body>
  <!-- ハンバーガーメニューのアイコン -->
  <div id = "btn_menu">
    <a>
      <i class = "icon_menu">
        <span class = "bar"></span>
        <span class = "bar"></span>
        <span class = "bar"></span>
        <span class = "menu">MENU</span>
      </i>
    </a>
  </div>

  <!-- ハンバーガーアイコンをクリックすると現れるメニュー -->
  <div id = "slide_nav" class = "slide_nav">
    <!-- メニューの中身 -->
    <p>例</p>
  </div>
  <!-- JavaScriptを読み込む -->
  <script src = "script.js"></script>
</body>

CSS例：ハンバーガーメニューのデザイン

ハンバーガーメニューは，アイコン部分とメニュー部分のスタイルを分けて記述しました．

/* ハンバーガーメニューのアイコン */
#btn_menu {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.icon_menu{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 5px 10px;
  width: 20px;
  height: 30px;
  background-color: #8c2141;
  text-align: center;
}

.icon_menu .bar{
  display: block;
  height: 2px;
  width: 18px;
  background-color: white;
  border-radius: 1px;
}

.icon_menu .menu{
  font-size: 7px;
  color: white;
}

/* ハンバーガーアイコンをクリックすると現れるメニュー */
.slide_nav{
  position: fixed;
  top: -100%; /* 初期状態で画面外に配置 */
  width: 100%;
  height: 65%;
  transition: top 0.4s ease; 
  z-index: 1000;
}

.slide_nav.active{
  top: 60px; /* メニューを画面上部にスライド */
}

JavaScript例：クリックイベントの実装

JavaScriptファイルでは，クリックイベントを使用してメニューの表示・非表示を切り替える動作を実装しました．

const hamburger = document.getElementById("btn_menu");
const menu = document.getElementById("slide_nav");

// ハンバーガーアイコンがクリックされると，メニューのclassに"active"が 追加/削除 される．
hamburger.addEventListener("click", () => {
    menu.classList.toggle("active");
});

このコードにより，ユーザーがハンバーガーメニューをクリックするとメニューが動的に切り替わる機能を再現することができます．

このように，HTMLとCSSで静的なデザインを作成した後，JavaScriptで動的な機能を追加することで，模写対象のページを再現できます．

3. DOMについて

模写対象のページでは，動的なハンバーガーメニューの機能が含まれていたため，DOM（Document Object Model）を操作して再現しました．ここでは，DOMの基本的な考え方を説明します．

3.1 DOMとは？

DOM（Document Object Model）は，HTML文書をツリー構造として表現したもので，JavaScriptを使って文書を動的に操作するためのインターフェースです．

ツリー構造の例

html
├── head
│     └── title
└── body
      ├── h1
      └── p

DOMの役割

HTML文書の要素にアクセスする: JavaScriptを使ってHTML要素を取得し，その内容やスタイルを変更できます．
動的な操作を行う: ページに要素を追加したり，削除したり，イベントを設定することが可能です．

3.2 ハンバーガーメニューの実装例

以下のコードでは，ハンバーガーアイコンをクリックすると，ナビゲーションメニューが表示・非表示に切り替わる動作を実現します．

JavaScriptでのDOM操作

前述の通り，JavaScriptを使用してハンバーガーアイコンのクリックイベントに応じてメニューを表示・非表示にする動作を実装しました．

const hamburger = document.getElementById("btn_menu");
const menu = document.getElementById("slide_nav");

// ハンバーガーアイコンがクリックされると，メニューのclassに"active"が追加/削除される．
hamburger.addEventListener("click", () => {
    menu.classList.toggle("active"); 
});

コードの解説

要素の取得
- document.getElementById("btn_menu") : id = "btn_menu"である要素（ハンバーガーメニューのボタン要素）を取得します．
- document.getElementById("slide_nav") : id="slide_nav"である要素（スライドナビゲーションの要素）を取得します．
イベントリスナーの設定
- addEventListener("click", ...): （ハンバーガーアイコンが）クリックされたときに実行する処理を定義します．
クラスの切り替え
- menu.classList.toggle("active"): menu（スライドナビゲーションの要素）に active クラスが存在すれば削除し，存在しなければ追加します．
- これにより，CSSで定義された表示・非表示のスタイルが切り替わります．

DOM操作で実現する動的な機能

この実装により，以下のような動作を実現しました：

ハンバーガーメニューをクリックすると，menu要素のクラスが切り替わり，メニューが表示される．
再度クリックすると，クラスが削除され，メニューが非表示になる．

おわりに

フロントエンドでは，「デザイン力」「HTML/CSSで構造を考える力」「JavaScriptのロジック」を同時に考える必要があるため，苦手意識を持っていました．
しかし，模写をすることで「デザイン力」を一時的に無視できる上，次のような明確な手順で取り組むことができるため，フロントエンド初心者にとって最適な学習方法だと思います．

HTMLでページの構造を記述する
CSSで見た目を整える
JavaScriptでDOMを操作してページに動きを加える

フロントエンドが苦手な方は，ぜひ模写に挑戦してみてください！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up