こんにちは。macco（まっこ）です。
今回は前回に引き続き、WPテーマWriteの模写コーディングの続きを書いていきます。
前回の記事はこちら↓
「全体の大枠としてHTMLを作成したけれど、このあとはどこから始めたらよいか分からない」といった方向けに解説します。
この記事を読むと、Writeのヘッダー部分をどのようにデザインしたらよいか分かります。
模写コーディングを始める前に
必要なファイルを準備します。
フォルダ構成
以下のフォルダ構成で進めていきます。
- index.html
- cssフォルダ
- style.css
- imgフォルダ
- Writeで使っている画像ファイル
HTMLの用意
以下のHTMLをindex.htmlとして用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【初心者向け】【第２回】WPテーマWriteの模写コーディング～ヘッダー～</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" >
<link rel="stylesheet" href="css/style.css">
<!-- JS -->
<script src="https://kit.fontawesome.com/19e88b9c54.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<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>
<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>
<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>
</div>
</body>
</html>以下のscriptタグはFont AwesomeのKitCodeによるものです。
<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>Font Awesomeをインストールの方法は以下の記事にまとめてありますので、準備ができていないかたはこちらをご参照ください。
CSSの用意
style.cssファイルをcssフォルダの中に置いてください。
中身は空のままで大丈夫です。
画像の用意
Writeで使用している画像ファイルすべてを、imgフォルダに入れておきます。
画像ファイルの取得方法については、以下の記事にある「4.2. 参考にするWebサイトの画像を取得する」をご参照ください。
以上で準備完了です。
全体のデザイン
まずヘッダーのデザインを進める前に、全体のデザインを調整しましょう。
フォントの指定とフォントサイズの指定を行います。
html {
font-size: 18px;
}
body {
font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
}全体の幅を指定し、中央に寄せます。
.container {
max-width: 1024px;
margin: 0 auto;
}HTMLのaタグは初期表示として、字の色は青色、下線が引かれます。
これを修正しましょう。
フォントの色の変更と下線を無しにします。
a {
color: #666;
text-decoration: none;
}現時点での画面表示は以下のとおりです。
ヘッダーのデザイン
ここからヘッダーのデザインを進めていきます。
ロゴ（Write）を調整する
左側に表示されているWriteのロゴのデザインを行います。
.logo {
color: #333;
display: block;
font-size: 2rem;
font-weight: bold;
}ヘッダーの子要素を横並びにする
ヘッダーの子要素（ロゴ、メニュー、検索アイコン）が縦に並んでいるので、横並びにします。
色々な方法がありますが、今回はCSSのFlexBoxを使います。
横並びに関係しているCSSプロパティと値は以下のとおりです。
- display: flex;⇒１階層下の子要素を横並びにする（divタグのclass=”logo-area”、class=”menu-area”、class=”search-area”がclass=”gnav”の子要素）
- justify-content: space-between;⇒水平方向の配置の種類を指定する
- align-items: flex-end;⇒垂直方向の配置の種類を指定する
レイアウトを組むFlexBoxは、慣れるまで大変ですが、Webデザインのスタンダードなやり方の１つなので、少しずつ慣れていきましょう。
.gnav {
width: 100%;
height: auto;
margin-top: 3rem;
margin-bottom: 4rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
}ul、liタグの表示を調整する
メニューを表示している部分の点と余白をCSSで消します。
ul {
list-style-type: none;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
}以下の画面表示になり、メニューの先頭に付いていた点やまわりの余白が取り除かれます。
メニューを横並びにする
メニュー（ホーム、ページ、タイポグラフィー、お問い合わせ）を横並びにします。
ここも先ほどと同じようにFlexBoxを使います。
.menu-area ul {
display: flex;
justify-content: space-between;
}メニューまわりのデザインを調整する
各メニュー同士がくっついているのでCSSで調整します。
.menu-area li {
padding: 1rem 1rem 0 1rem;
}
.menu-area a {
font-size: .9rem;
}
.menu-area a i {
font-size: .6rem;
padding-left: .5rem;
}各メニュー同士に余白ができ、ほぼWriteと同じようなヘッダーになりました。
最後に
今回はWrite模写コーディングのヘッダー箇所を解説しましたが、いかがでしたでしょうか。
模写コーディングは、完全にピクセル単位でデザインするのが目的ではなく、Webサイトのレイアウトを読み取りに慣れたり、良く使われるCSSプロパティに慣れるのが目的になります。
最初はとても難しく感じますが、少しずつ慣れてくるので挑戦してみてはいかがでしょうか。
模写コーディングが難しいと感じている方々に、少しでもお役に立てたら嬉しいです。
最後までお読みいただきありがとうございました。
続きはこちらになります↓
2020/10/25追記
本テーマのまとめ記事はこちら↓
