CSS HTML プログラミング

初心者向け【WEBサイト模写のやり方】HTMLとCSSのテンプレートを作る方法を解説

こんにちは、イケゾーです。

 

HTMLやCSSの参考書を一通りやった後の最初の壁「次何やればいいんだろ」ありますよね。

たいていの方は、模写をされるかと思います。おすすめのサイトや、好きなサイトをいくつか模写に挑戦しますよね。

僕も力試しで挑戦しました。ただ、最初ってHTMLとCSSに何を書いたらいいんだっけ。と時間を無駄にしてしまいました。

 

そこで、何度も使いまわせるテンプレートを用意したらどうかと考え、作ってみました。内容は基本的なものですが、整理して保管しておくと、毎回模写始めるまでの無駄と迷いがなくなりました

今回紹介する内容をベースにご自身の使いやすいテンプレートを用意いただけたらと思います。

 

初心者向け【WEBサイト模写のやり方】HTMLとCSSのテンプレートを作る方法を解説

前提とフォルダ構成

 

前提として、フレームワークはバリバリ使っていきます。

便利なものは遠慮せずに使っていくので、自分で全て作りたいという方は飛ばして読んでください。

※今回は、セキュリティでおなじみ「Norton」様のサイトを模写していきます。

 

まず、フォルダとファイルを準備していきます。

フォルダ構成完成形
  • ベースのHTML(index.html)
  • スタイルを指定していくcss(style.css)
  • ブラウザ間の見え方の違いを解消してくれるリセットcss(ress.css)
  • サイトに使われている画像を格納するフォルダ(image)

現時点で、html,cssともに、中身は空っぽでOKです。次章で書いていきます。

 

HTMLのテンプレートを作る

最初に、「index.html」に基本構文を入れていきましょう。

基礎構文

下記をコピペしてください。

CSSの読み込み順は、「ress.css」→「style.css」にしてください。

スタイルは上書きされるという性質があるので、「style.css」に書いたスタイルを優先するためです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="ress.css">
	<link rel="stylesheet" href="style.css">
	<title>Document
</head>

<body>
</body>

</html>


CSSのテンプレートを作る

では次にcssをやっていきましょう。

カスタムCSS(style.css)の作成

中身は空っぽで大丈夫です。

確認のため、文字色や背景色を付けてみても良いでしょう。

body{
	color: red;
	background: blue;
}


リセットCSS(ress.css)の作成

リセットcssは、既存のものがあるので、そこからお好みのものを選びましょう。

「リセットcss おすすめ」でググると出てきます。

僕は、こちらを参考にさせていただきました。

イケゾー
非常にわかりやすいです、ありがとうございました

「ress.css」が気に入っているので、そちらを使っていきます。

 

フレームワークの導入

Bootstrapと、Font-awesomeは必ず使いますので、そのようにhtmlに追記します。

Bootstrap

念のため、公式ドキュメントをみてください。

僕の環境ですと、下記のコードを貼り付けて使用します。

※/headタグの内側に他のスタイルシートよりも先に入れてください。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 

※bodyタグの終わりの直前に下記の順番に入れてください。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">

 

これでOKです。

 

font-awesome

念のため、公式ドキュメントをみてください。

僕の環境ですと、下記のコードを貼り付けて使用します。

※/bodyタグの終わりの直前に下記の順番に入れてください。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

 

画像をダウンロードして保存する

下の記事で、WEBサイトの画像を一括でダウンロードする方法をご紹介しました。

【模写コーディングおすすめツール】WEBサイトの画像を一括保存する「Image Downloader」

続きを見る

ダウンロードしたら、「image」フォルダに画像を保存します。

画像がちゃんと表示できるか確認してみましょう。

 

まとめ

以上で、模写を始める準備ができました。

リセットCSSは何を使うか、フレームワークの使用の有無は自由ですが、僕の例を挙げてみました。

色々やり方はありますので、数をこなす中で自分にあったものを見つけてください。

 

当ブログでは、仕事や副業さらには生活で使える「効率」を発信しています。

ぜひ、他の記事もご覧ください。

 

ではでは。

 

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-CSS, HTML, プログラミング
-, ,