こんにちは。macco（まっこ）です。
以前、Webサイトの模写コーディングを行うメリットや、自分が実際に模写コーディングを行って気づいたことを中心に、記事を書かせていただきました。
HTML、CSSの基本学習が終わり、模写コーディングをいざ始めようとしても、何から手をつけてよいか分からない初心者の方も多いのではないでしょうか。
そこで今回は「どのようにHTMLを作成したらよいか」といった悩みに対して、参考例を載せながら解説していきます。
こんな人にオススメ
- 模写コーディングをしようと思っても、どこから手をつけたらよいか分からない
- HTMLの作り方が分からない
本記事を読むことで、Webサイトにはどのようなレイアウトが多いか、またWPテーマWriteを例にどのようにHTMLを書いたらよいか知ることができます。
簡単に自己紹介
- 未経験からIT･Web業界に踏み込んで８年くらい
- HTML・CSS歴は中小企業のホームページ制作３件ほど
- 中小規模のプロジェクトにおいて、アプリやツールの改修を経験
- 上記に係るHTMLやCSS、JSの修正を経験
模写コーディングの題材はこちら
私が実際に模写コーディングの題材にした「Write書くためのテーマ」を取りあげます。
Write書くためのテーマ
これはWordPressというCMS（コンテンツマネージメントシステム）のテーマの１つです。
レイアウトもシンプルなので、模写コーディングの題材に向いています。
Webサイトのレイアウトは３種類
世の中にあるWebサイトのレイアウトは、一部例外を除き以下の３種類しかありません。
※この場合の一部例外とは、Webマガジンサイトなどで使われるカード型デザインを指しています。
- １カラム型
- ワンページと言われることもある。一番シンプルなレイアウト。
- ２カラム型
- メインとサイドが逆のパターンもある。ブログはこのレイアウトが多い。
- ３カラム型
- 通常のWebサイトより、情報量が多い場合は使われるレイアウト。
上記のレイアウトは、今後HTMLを作成するうえで必要な知識になります。
ポイントは、どのWebサイトであってもヘッダー、メイン、フッターという構成が基本になっていることです。
HTMLを作成する
ここからは今回の題材Writeの構成を見ていきます。
上記の図から分かるとおり、全体を包む枠（container）とその中にヘッダー（header）、メイン（main）、フッター（footer）の構成になっています。
全体をdivタグで包む
まずWebサイト全体を包んでいる大きな枠を作ります。
<body>
<div class="container">
</div>
</body>headerを作成する
ヘッダーの構成を分解してみます。
- ヘッダーの一番大きい枠はheaderタグ
- 次の枠はnavタグ
- 左側のロゴはdivタグ
- ホームからお問い合わせまでのメニューをdiv、ul、liタグ
- 右側の検索アイコンはdivタグ
各表示要素をグルーピングするイメージで考えると、HTMLが作りやすいです。
またこれが必ず正解というものがないので、分からなかったらWriteをChromeの検証ツールで見るのも手です。
サンプルとして以下にHTMLを載せておきます。
<body>
<div class="container">
<header>
<nav class="gnav">
<div class="logo-area">
<a href="#" class="logo">Write</a>
<p>書くためのテーマ</p>
</div>
<div class="menu-area">
<ul>
<li class="menu-home">
<a href="#">ホーム<i class="fas fa-chevron-down"></i></a>
</li>
<li class="menu-page">
<a href="#">ページ<i class="fas fa-chevron-down"></i></a>
</li>
<li>
<a href="#">タイポグラフィー</a>
</li>
<li>
<a href="#">お問い合わせ</a>
</li>
</ul>
</div>
<div class="search-area">
<img src="img/search-icon.png" class="search" alt="検索">
</div>
</nav>
</header>
</div>
</body>footerを作成する
次にフッターの構成を分解してみます。
- フッターの一番大きな枠はfooterタグ
- フッターの上部と下部をdivタグ
- フッターの上部のなかにある４つの枠をdivタグ
- フッターの下部のなかにある２つの枠をdivタグ
HTMLは以下のとおりです。
※footer箇所を抜粋
<footer>
<div class="footer-top">
<div class="profile-area">
<div>
<img src="img/profile-m.png" class="profile-img" alt="profile-image">
</div>
<div class="profile-name-block">
<p>John Doe</p>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
</div>
<p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
</div>
<div class="footer-right">
<p class="footer-title">フッター右</p>
<p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
</div>
<div class="resent-posts">
<p class="footer-title">最近の投稿</p>
<div>
<a href="#" class="post-title">書くためのテーマ</a>
<header>
<p>2018年9月1日</p>
</header>
</div>
<div>
<a href="#" class="post-title">画像付きの投稿</a>
<header>
<p>2018年3月5日</p>
</header>
</div>
<div>
<a href="#" class="post-title">引用付きの投稿</a>
<header>
<p>2018年3月5日</p>
</header>
</div>
</div>
<div class="category">
<p class="footer-title">カテゴリー</p>
<div>
<a href="#">サンプル投稿</a>
</div>
<div>
<a href="#">投稿フォーマット</a>
</div>
<div>
<a href="#">普通の投稿</a>
</div>
<input type="text" placeholder="検索...">
</div>
</div>
<div class="footer-bottom">
<div>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
</div>
<small>Powered by <a href="">WordPress</a> | Theme: <a href="">Write</a> by Themegraphy</small>
</div>
</footer>mainを作成する
最後にメインの構成を見ていきます。
- メインの一番大きな枠はmainタグ
- 大きい画像の部分はdivタグ
- 大きい画像の下にある文章はpタグ
- 記事はarticleタグ、中身はdivタグ
- 一番下のページネーション（1,2,3,次へ）はdivタグ
HTMLは以下のとおりです。
※main箇所を抜粋
<main>
<div>
<img src="img/cropped-nicole-honeywill-730102-unsplash.jpg" alt="key-visual">
</div>
<p class="page-lead">Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
<article>
<div>
<header>
<a href="#">2018年9月1日</a>
</header>
</div>
<div>
<a href="#">書くためのテーマ</a>
<p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
</div>
</article>
<article>
<div>
<header>
<a href="#">2018年3月5日</a>
</header>
</div>
<div>
<a href="#">画像付きの投稿</a>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
</div>
</article>
<article>
<div>
<header>
<a href="#">2018年3月5日</a>
</header>
</div>
<div>
<a href="#">引用付きの投稿</a>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
</div>
</article>
<article>
<div>
<header>
<a href="#">2018年3月5日</a>
</header>
</div>
<div>
<a href="#">コメント付きの投稿</a>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
</div>
</article>
<article>
<div>
<header>
<a href="#">2018年3月3日</a>
</header>
</div>
<div>
<a href="#">吾輩は猫である</a>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
</div>
</article>
<article>
<div>
<header>
<a href="#">2018年3月3日</a>
</header>
</div>
<div>
<a href="#">名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
</div>
</article>
<div class="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">次へ<i class="fas fa-angle-double-right"></i></a>
</div>
</main>以上でヘッダー、メイン、フッターの大まかなHTMLを作成できたと思います。
最後に
今回は、WebサイトのレイアウトのパターンやHTMLの構成を分解する方法について解説してきましたが、いかがでしたでしょうか。
ここから細かい部分を作りこみ、CSSでデザインしながら少しずつ模写コーディングを進めていく感じになります。
本記事から少しでも役立つ情報があれば嬉しいです。
最後までお読みいただきどうもありがとうございました。
続きの記事を書きましたので、良かったらあわせてご確認ください↓
2020/10/25追記
本テーマのまとめ記事はこちら↓
