Next.js Tailwindcss プロフィールページを作成してみよう

こんにちは、Yuuichi(@WestHillWorker)です。

今回は、前回作成したNext.js + Tailwindcssのベースからプロフィールページを作成していこうと思います。

前回記事を確認したい方は、以下をご参照ください。

以下の自己紹介を作成するところまで進めていきたいと思います。

先にSP(スマホ)メインで作成しています。

利用ブラウザ:Chrome

スポンサーリンク

事前知識

実際にページを作成する前に、Tailwindcssで必要となる情報をまとめました。

Responsive Designの対応

今回は、PC・SPで閲覧できるようにレスポンシブデザインの対応をしようと思います。

デフォルトでは、4種類のメディアクエリの定義が利用できるようです。

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }
/* Medium (md) */
@media (min-width: 768px) { /* ... */ }
/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }
/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

sm:640px以上の横幅の場合に適応されるスタイル

md:768px以上の横幅の場合に適応されるスタイル

lg:1024px以上の横幅の場合に適応されるスタイル

xl:1280px以上の横幅の場合に適応されるスタイル

利用方法としては、:コロン 適応したいスタイルで記述する。

<!-- デフォルトのスタイルは、中央寄せだが、smの場合は左寄せ -->
<div class="text-center sm:text-left"></div>

初めにデフォルトで利用するスタイルを記述した後に、各サイズ単位で適応するスタイルを記述。

今回は、デフォルトを利用していこうと思います。

tailwind.config.jsのtheme・screenでBreakpointsをカスタマイズできますので、試してみた方は公式を参照ください。

ページ作成

ナビゲーション・メイン・フッター順で各種コンテンツ作成をしていきます。

ナビゲーションメニュー作成

今回まだHomeというルートのパスしかページがないのですが、あとでContact(お問い合わせ)など追加することを考えて、ナビゲーションを作成しておきます。

components/Header.jsx

liタグを増やせば、他ページにも遷移できるようにしておきます。

import Link from 'next/link'
const Header = () => (
  <header>
    <nav className="flex items-center justify-between p-4 bg-teal-300 flex-no-wrap sm:flex-wrap">
      <ul>
        <li className="mr-6">
          <Link href="/">
            <a className="text-white hover:text-gray-300">Home</a>
          </Link>
        </li>
      </ul>
    </nav>
  </header>
)
export default Header

現状は、ルートアクセス(/)時だけメニューを設定しています。

よく使うタグ:flexmarginpaddingbackgroud-colortext-color

メインコンテンツ作成

自分のアバター用写真・名前・職業などをメインに作成します。

pages/index.jsx

メインのコンテンツに中央によせたいので、container mx-autoを設定しました。

containerでwidth: 100%が設定され、mx-autoではmargin-left: auto; margin-right: auto;が設定されます。

import Head from 'next/head'
import Layout from '../components/Layout'
const Index = () => (
  <Layout>
    <Head>
      <title>MyProfile</title>
    </Head>
    <div className="container mx-auto">
      <div className="flex justify-center mt-10">
        <div className="flex flex-col items-center">
          <img
            src="/images/myprofile.png"
            className="rounded-full h-32 w-32"
            alt="私のアバター"
          />
          <h1 className="text-teal-700 text-4xl my-4">Yuuichi Nishioka</h1>
          <p className="text-teal-600 text-justify px-8 mb-8">Webエンジニア</p>
        </div>
      </div>
    </div>
  </Layout>
)
export default Index

アバターの画像ですが、Next.jsではルートディレクトリのpublicフォルダに画像などの静的なファイルを配置することを提供しています。

今回は、public/imagesの配下にmyprofile.pngという画像を配置しています。

imgタグのsrcタグでは、publicを除いたパスを設定することで参照できるようになります。

趣味などをカードで表示

次に趣味・特技・ひとことのコメントなどをカードで表示するためのコンポーネントを作成します。

最初はpages/index.jsxに下手でカードのDOMを記述していたのですが、ベースは同じで中に表示するテキストが変わるだけだったので、コンポーネント化しています。

components/Card.jsx

props経由で、title(趣味・特技・ひとこと)・description(titleの解説)を設定できるカードを作成します。

const Card = props => (
  <div className="mb-6 p-4 md:w-1/3 md:mb-0 flex flex-col justify-center items-center max-w-sm mx-auto">
    <div className="w-70 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden p-5">
      <div className="inline-flex">
        <div className="flex-1 h-4 w-4 m rounded-full m-1 bg-yellow-100">
          <div className="h-2 w-2 rounded-full m-1 bg-yellow-500"></div>
        </div>
        <div className="text-teal-700">{props.title}</div>
      </div>
      <div className="text-teal-600 text-left">{props.description}</div>
    </div>
  </div>
)
export default Card

見慣れないw-1/3というタグは、width: 33.333333%;に設定しています。

mb(横幅768px以上)の場合は、カードが3つ並ぶようにしたいための設定となります。

よく使うタグ:width

メインコンテンツにカード追加

作成したカードをpages/index.jsxから読み込んで、趣味・特技・ひとことなどをカードで表示できるように追加していきます。

import Head from 'next/head'
import Layout from '../components/Layout'
// カードを読み込ませます
import Card from '../components/Card'
const Index = () => (
  <Layout>
    <Head>
      <title>MyProfile</title>
    </Head>
    <div className="container mx-auto">
      <div className="flex justify-center mt-10">
        <div className="flex flex-col items-center">
          <img
            src="/images/myprofile.png"
            className="rounded-full h-32 w-32"
            alt="私のアバター"
          />
          <h1 className="text-teal-700 text-4xl my-4">Yuuichi Nishioka</h1>
          <p className="text-teal-600 text-justify px-8 mb-8">Webエンジニア</p>
        </div>
      </div>
      <!-- ここからカードを3つ表示できるよう追加します -->
      <div className="flex flex-wrap mt-10 text-teal-600">
        <Card
          title={'趣味'}
          description={
            '自宅にいるときは、映画・アニメ鑑賞・料理を作ったりしています。休日はキャンプ・海で釣り・ドライブをしています。'
          }
        />
        <Card
          title={'特技'}
          description={
            'Web系のプログラミング開発が得意で、PHP・JavaScript・HTML・CSS・MySQLの経験が長いです。'
          }
        />
        <Card
          title={'ひとこと'}
          description={
            '常に新しいこと・経験したことのないことにチャレンジしながら自分を成長していくことを心がけています。'
          }
        />
      </div>
    </div>
  </Layout>
)
export default Index

カードコンポーネントを読み込んで、3つカードが並ぶようにします。

title・descriptionにカードに表示したい文言を設定したら、完了です!!

$ yarn dev

今回作成したgithubのURL

https://github.com/yuugure/next_tailwind_second

まとめ

Tailwindcssを使っての作業が大半になってしまいましたが、簡易な自己紹介のページを作成できました。

まだページも1つしかないのとPCでの確認があまりできていないので、引き続き他のページを作成したり、

各サイズ単位で綺麗に表示できるようにしていけたらと思います。

ありがとうございました!!