こんにちは。macco（まっこ）です。
今回は、WordPressテーマであるWrite～書くためのテーマ～の模写コーディングに挑戦する人に向けて、「少しでも参考になれば」という気持ちから、これまでの記事をまとめて紹介しようと思います。
本記事を読むことで、Write模写コーディングのやり方が分かります。
また最後に自分の今の心境を書きました。
ぜひ最後までご覧ください。
模写コーディングはどんな人にオススメ？
以下のようなお悩みを持っている方にオススメです。
- オンライン学習サービス（Progateまたはドットインストールなど）の基礎学習が終わり、次の学習方法に困っている
- 昔HTMLとCSSを学習したことがあるが、最近になって復習したいと思っている
実在するWebサイトを見ながら、HTMLやCSSを使って作成することを模写コーディングといいます。
模写コーディングをするとどんなメリットがあるのか、なぜWordPressテーマWrite～書くためのテーマ～を模写の対象として選択するのかなどを知りたい方は、以下の記事をご参照ください↓
Font Awesomeを使えるようにしよう
Writeの模写コーディングを行う際に、ページ上部にあるメニューの下矢印アイコンやSNSアイコン（Twitter、Facebook、Instagram）を再現する必要があります。
そこで今回は、Webフォントアイコンを手軽に使用できるFont Awesomeというサービスを利用しましょう。
Font Awesomeの導入方法については、以下の記事をご参照ください↓
Writeの模写コーディングを始めましょう
全体の構成をHTMLで作成します
それでは実際にWriteを見ながらHTMLを作成していきましょう。
多くのWebサイトは、数パターンのレイアウトによって構成されています。
レイアウトを意識するとHTMLの文章の構造が把握しやすくなります。
どのようなレイアウトがあるかについては、以下の記事で説明しているのでご参照ください↓
ヘッダーの詳細をCSSでデザインします
HTMLが用意できたら、次にWebサイト全体とWriteのロゴやメニューを含むヘッダーの詳細をCSSでデザインしていきます。
以下の記事では、全体のフォントサイズやフォントの種類の指定、ヘッダーにあるメニューを横並びにする方法などについて説明しています↓
メインの詳細をCSSでデザインします
ヘッダーのデザインが終わったら、次にメイン部分の詳細をCSSでデザインしていきます。
メイン部分の中身が３つのブロックで構成されていて、各ブロックに対してどのようにCSSで書いたら良いか、以下の記事で説明しています↓
フッターの詳細をCSSでデザインします
ページの最下部であるフッターの詳細をCSSでデザインしていきます。
フッターは上部と下部の２ブロックで構成されています。
フッター上部の中にある４つのdivタグを均等に水平配置するなど、ヘッダーやメインでFlexBoxを用いてデザインしたことを思い出しながら、コーディングを行っていきます。
詳細については以下の記事をご参照ください↓
レスポンシブ対応を行います
これまでに行ってきたCSSのデザインは、PCサイズになります。
タブレットやスマートフォンのデザインを行うためには、レスポンシブ対応をする必要があります。
レスポンシブ対応とは、タブレットやスマートフォンなどの画面の横幅を条件にし、適用するデザインを切り替え、それぞれのデバイスに合わせた画面表示になるようにCSSで対応することです。
レスポンシブ対応は一般的に、CSSのメディアクエリという手法を使用します。
タブレットサイズについてと、スマートフォンサイズについての２回に分けて説明しています↓
Writeの模写コーディングについて、解説は以上となります。
最後に
WPテーマWrite～書くためのテーマ～模写コーディングのやり方について解説してきましたが、いかがでしたでしょうか。
ここからは、現在私が思っている心情を書きますね。
私は「今までの業務から身につけた知見が、皆さまにとって何かしら役に立つ可能性があるかもしれない」「自分の状況を少しずつ改善していきたい」という思いから、2020年の4月頃Twitterと当ブログの運用を開始しました。
皆さまの支えもあって、半年間継続できました。
感謝の気持ちでいっぱいです。
ありがとうございます。
今後も小さな気づきや思考、Webにまつわる情報を発信していけたらなと思います。
何卒よろしくお願いいたします。
最後までお読みいただきありがとうございました。
