【模写コーディング】Tailwind CSS入門編1 〜プロフィールサイト〜

Home > TECH BLOG > 【模写コーディング】Tailwind CSS入門編1 〜プロフィールサイト〜
公開日:2022年8月6日 更新日:2022年8月6日
著者:藤澤 勇樹(FUJISAWA Yuki)

模写コーディングとは

模写コーディングとは、「すでに存在するWebサイトをそのままHTML/CSSコーディングすること」です。なぜオススメかというと、仮説検証プロセスを素早く回すことで爆速でコーディング力がアップさせることができるからです。模写コーディングにどんどんチャレンジして、爆速でTailwind CSSのコーディング力をアップさせましょう。

模写の準備

模写コーディングを開始するには開発環境が必要です。もし、構築してない場合は、下記記事を参考に開発環境を構築してください。環境構築が無いと、これから解説するTailwind CSS模写コーディングができません。
【入門者向け】Tailwind CSS開発環境を構築しよう
Tailwind CSS開発にこれから挑戦しようという方が、スムーズに開発スタートできるよう環境構築の方法をまとめてみました。 Node.js等のインストールなど多少、手間な作業がありますが、Web開発では必須になってくるので是非、挑戦してみてください。 zshではなく、bashを使っている場合など詳しくは以下の記事を参考にしてください。 以下サイトから、Macを選択してダウンロードしてください。 以下Githubから、テンプレートコードを取得してください。 *Node.jsのバージョン設定は、 .nvmrc ファイルに記載してあります。 node_modulesというディレクトリができていたらOKです。 以下、コマンドをターミナルで実行 dist/output.css にCSSファイルが生成されたことを確認する src/index.htmlの画面が正常に表示されることことを確認する ヘッダーの背景色を変更してみる headerタグのclassに "px-6" を追加 以下のように、背景に色がつきます。 bg-slate-300 は、Backgroud Colorの指定です。詳しくは、以下公式ドキュメントを参照 以上でTailwind CSS開発環境の構築は完了です。 Tailwind CSS開発をスタートできるよう環境構築の方法をまとめてみました。開発環境にあたっては以下実行する必要があり一手間ですが、一度構築してしまえば便利に開発できるかと思います。

Githubリポジトリの準備

  • 「Use this temple」を押して、コーディング用のリポジトリを作成します。
  • tailwind-css-profile」というリポジトリ名で作成してください。
  • ターミナルを起動して、git cloneしてください。
    • Bash

模写サイト

こちらで紹介されているデザインをもとにTailwind CSSを模写コーディングいたします。
【HTML/CSS コーディング練習】入門編:プロフィールサイト/LP
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。 課題内容 ロードバイクが趣味の友人から、自転車を紹介するための簡単なWebサイトを作ってほしいと頼まれました。サイトに掲載するのは、簡単な自己紹介と自転車の写真だけです。 設定単価 コーディング1ページ:1万円 素材 学習用の素材をダウンロードする ※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています デザインイメージ ▼PC表示 ▼スマホ表示 コーディング仕様 コンテンツ幅 コンテンツの横幅は960pxで横のパディングは4%です。 メインビジュアルだけ全幅にします。 メインビジュアル 全幅で高さは600px固定です。 About 画像をCSSで丸く切り抜きます。 画像とテキストを横並びの中央寄せで配置します。 Bicycle 画像を両端ぞろえの横ならびに配置します。 レスポンシブ ブレークポイントは600pxです。 About、Bicycleともに、レスポンシブ時はコンテンツを縦積みにします。 デモサイトをもとに、模写コーディングに挑戦してみましょう! コーディングで悩んだ場合は、下記のレイアウト構成の組み立て方を参考にしてみてください。 サイト全体と各パーツのレイアウト構成について解説しています。 コーディングが完了したら、下記の「 ソースコード 」を参考に、自分の作ったコードとサイトをチェックしてみてください。 コーディングの1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。 ソースコードはこちら 模写コーディングのやり方に迷った方は、こちらの模写コーディングの手順を参考にしてみてください。 デザインカンプからのコーディングに挑戦してみましょう! コーディングで悩んだ場合は、下記のレイアウト構成の組み立て方を参考にしてみてください。 サイト全体と各パーツのレイアウト構成について解説しています。 コーディングが完了したら、下記の「 ソースコード」と「 デモサイト 」を参考に、自分の作ったコードとサイトをチェックしてみてください。 ソースコード コーディングの1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。 ソースコードはこちら デモサイト デモサイトと自分で作成したサイトを比較して、デザインや動きなどをチェックしてみてください。

模写ルール

  • Chromeディベロッパーツールの検証は、基本使わないでください。どうしてもわからない場合のみ使用してください。
    • コンテンツのサイズをそれぞれ測って、HTML/CSSを作成することが練習になるためです。

模写手順

  1. 画像(ロゴ、背景、一覧画像など)を取得します。
    1. CSS Peeper を使って素材を全て取得します。
    2. 取得した画像をimagesフォルダに格納します
  1. コンテンツを役割ごとに分けながら大枠のHTMLを作成します。
    1. ヘッダー(header)
      1. ヘッダーを表す。グローバルナビなどの導入的なコンテンツに使用します。
    2. グローバルナビ(nav)
      1. ナビゲーションリンクを表す。同一HTML内に複数使用できます。
    3. メインビジュアル(img)
      1. サイトを開いたときに最初に表示される大きな画像のことで、「ファーストビュー」とも呼ばれます。メインビジュアルには「何を掲載しているサイトか、どういう目的で運営されているサイトか」を視覚的に伝える役割があり、これがあることでユーザーは「これは何のサイトか」を直感的にイメージすることができます。
    4. メインコンテンツ(main)
      1. 中心コンテンツを表す。同一HTML内に1つのみ使用できます。
    5. セクション(section)
      1. 文章のまとまりを表す。通常、見出し(h1〜h6)を含みます
    6. フッター(footer)
      1. フッターを表す。通常、著作権情報などを記述します。
  1. 上記、役割ごとにTailwind CSSを追加してレイアウトを調整します。
    1. ターミナルを立ち上げて$ npm run build を実行します。
    2. *実行しないとCSSが更新されないので注意!

役割ごとのレイアウト調整

1. ヘッダー(header)、グローバルナビ(nav)、メインビジュアル(img)

詳細はこちらの動画解説してますのでご閲覧ください。

2. メインコンテンツ(main)

動画での解説予定

3. セクション(section)

動画での解説予定

4. フッター(footer)

動画での解説予定

参考記事