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

Home > TECH BLOG >【模写コーディング】Tailwind CSS入門編1 〜プロフィールサイト〜
公開日:2022年8月6日 更新日:2022年8月6日

模写コーディングとは

模写コーディングとは、「すでに存在する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」を押して、コーディング用のリポジトリを作成します。
 
「Use this templete」ボタン
「Use this templete」ボタン
  • 」というリポジトリ名で作成してください。
  • ターミナルを起動して、してください。

    模写サイト

    こちらで紹介されているデザインをもとに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. ターミナルを立ち上げて を実行します。
      2. *実行しないとCSSが更新されないので注意!

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

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

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

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

    別の記事で解説予定

    3. セクション(section)

    別の記事で解説予定

    4. フッター(footer)

    別の記事で解説予定

    参考記事

    [宣伝] GASプログラミング入門の教材 - Udemy

    • 2023年11月時点で、約3,000人の受講生を獲得し、「Udemy Business」に選定されてます。
      • 「Udemy Business」とは、Udemyが「企業研修」向けに提供しているサービスのことです。
      • Udemyで販売している全ての講座の中から、「企業研修」に提供できる高品質な講座をレビューや内容を加味して厳選していることが特徴のサービスです。
      • その「Udemy Business」で、このGAS講座は採用されております。
    • 教材の詳細は、以下のUdemyに記載しておりますので内容ご確認ください
      • 以下のバナーから購入すると、通常、定価27,800円が1,600円に割引される特別クーポンが適用されます!

    関連ブログ