はじめに
エンジニアに就職していますがhtmlやcssを業務で触ったことは一切ありません。自身の職歴や興味のあるトピックをまとめる目的で今回ポートフォリオを作成しました。また、静的Webサイトの作成がgithub-pagesで簡易にできると調べて分かったため、今回はgithub-pagesで公開しています。cssも初めて触るためCSSフレームワークについて調査したところtailwindcssというユーティリティーファーストなcssフレームワークが流行っているということで採用しました。
本記事ではtailwindcssとgithub-pagesでポートフォリオを公開するまでの手順をまとめています。
作成物
作成したポートフォリオは以下で公開しています。この記事を最後まで読んで作成できるクオリティです。※就職活動用ではないため一部、技術以外の内容も記載があります
気になる点は多々あると思いますが追々修正していきます。htmlやcssに詳しい方でデザインにアドバイスのある有識者の方はぜひ私のgitに修正を投げてください。よろしくお願いします！
ポートフォリオ -> Portfolio@seamcarving
github-pages
Githubのアカウントを作成すればそのユーザ名で静的サイトを公開できます。
以下にサイト公開までの手順が記載されています。gitを扱う必要があるので知識のない方は時間がかかるかも知れません。
【初心者向け】Github pagesでwebページを公開する方法
tailwindcss
tailwindCSSとはcssのフレームワーク名です。2018年頃登場した最新のcssフレームワークです。
主なポイントはユーティリティーファーストでありコンポーネントで用意されているcssフレームワークよりもデザインのカスタマイズを詳細に決められる点です。つまり独自のデザインに装飾しやすくなります。また、業務で使用する場合などは保守の観点から見ても違いがあるようです。
こちらの記事に他のcssフレームワークとの違いをコードから説明しています。
TailwindCSSって何？なんで流行ってるの？
導入
TailwindCSSを初めてインストールするときのメモ
CDN経由で使用しています。上記コードを<head>内にペーストすれば完了です。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
チートシート
tailwindcssで実際に装飾するにあたり以下のチートシートを参考にしました。
ドキュメントから大量のクラスを調べる必要があり学習コストがかかります。もっと簡単に作成したい方は下のコンポーネントサンプルのページから実際にコードをコピペしてみると直感的に理解できると思います。
https://tailwindcomponents.com/cheatsheet/
コンポーネントサンプル
今回一番css作成時に参考にしたサイトです。
tailwindcssのサンプルがコンポーネントとして公開されています。
tailwindcssのポイントでデザインのカスタマイズを詳細に決められるって言ってたのに公開されてるデザイン使うんかよ
A free repository for community components using TailwindCSS
以下、参考にさせていただいたコンポーネントです。実際のコードを参考にして独自のデザインに変えていきましょう。
- プロフィールカードのデザイン枠 [Profile card](https://tailwindcomponents.com/component/profile-card-13)
- ドロップダウン [Simple dropdown](https://tailwindcomponents.com/component/simple-dropdown)
- テーブルデザイン [Striped Table](https://tailwindcomponents.com/component/striped-table)
その他html、css参考資料
その他、レーダーチャート表示やアイコン表示の際に参考にしたサイトです。コピペ最強！x3
コピペで使える URL を書くだけでアイコンが表示される SNS フォローボタン5種
コピペで！「Chart.js」を使ってレーダーチャートを表示する
スクロールすると出てくる「トップへ戻る」ボタンの作り方
終わりに
本記事はtailwindcssとgithub-pagesでポートフォリオを作成し公開するまでの手順をまとめました。Git周りについては触れていないためgitの経験がない方には分かりにくい場合がありますが参考のサイトを見てもらえば理解できると思います。htmlやcssの理解はほぼないため、有識者の方がいればぜひgitのリクエストを下さい。知識0からでもチャレンジできる内容になっているので興味がある方はぜひ作ってみてください。最後まで読んでいただいてありがとうございました。良ければLGTMもお願いします。