LaravelでTailwindを使う時役立つ無料テンプレートサイト3選とアイコンサイト紹介

LaravelでTailwind CSSを使いたい人向けに役立つ無料テンプレートサイトをご紹介します。

デザインは出来る限り効率的にすませたいと思ったら、参考にしてください。

Laravelに組み込むときの注意点もお伝えしますね。

LaravelでTailwindを使う時役立つ無料テンプレートサイト3選

次の３つのと用途別にお見せしていきます。

• テンプレートを丸ごと使えるサイト、
• サイドバーなど部分的にテンプレートがほしい時に役立つサイト、
• 微調整をするときによいサイト

テンプレートを丸ごと使える Tailwind Toolbox

テンプレートを丸ごと使えるサイトとしては、Tailwind Toolboxがあります。

Tailwind Toolbox

A directory of open source starter templates and components, UI kits, generators, tools and a marketplace to kick start your Tailwind CSS project

tailwindtoolbox.com

たとえば管理者用のダッシュボードを作りたいときは、検索ボックスに【Admin Template】などと入れると、候補が出てきます。

全てチェックしていませんが、見た限りでは「気に入ったら支払ってね」形式となっています。

Junko

気に入ったらコーヒー一杯おごってね、と書いてあります。

なんだか、おしゃれ。

コードはGitHubに公開されています。規約については、いくつか見た限りではMIT licenseとあります。

MITライセンスは、非常にゆるいライセンス。最低限のルールを守れば、商用利用もOKです。

MITライセンスでしていいこと、悪いことは、下記記事で具体的に解説してます。気になったら、併せて読んでくださいね。

MITライセンス利用時の注意点：許されること・許されないこと4点

MITライセンスは、実際のところ、どの程度のことが許されるのか。 「自分の商品の中に勝手に使ってよいのか？」 「ライセンス表記も変えてよいのか？」 こんな疑問も浮かびますよね。 海外フォーラムを参考に、MITライセン...

biz.addisteria.com

2020.10.30

お役立ち部品が見つかる tailwindcomponents

2つ目は、tailwindcomponents。ここは、ちょっとした「部品」の作り方を知るのに便利です。

Tailwind CSS Components - 600+ Free Examples and Templates

A free repository of open source Tailwind CSS components and templates to bootstrap your new apps, projects or landing sites!

www.creative-tim.com

たとえばフォームをつけたいときには、検索ボックスに「form」といれます。すると、フォーム一覧がでてきます。

Hidden Codeボタンを押すと、コードを見ることができます。

なお規約関連はサイトの下の【legal】に掲載されています。スペイン語なのですが、自動翻訳など使えば、意味が分かります。

ざっと機械翻訳をかけた限りでは、下記のような文章が入っていました。

En virtud de lo dispuesto en los artículos 8 y 32.1, párrafo segundo, de la Ley de Propiedad Intelectual, quedan expresamente prohibidas la reproducción, la distribución y la comunicación pública, incluida su modalidad de puesta a disposición, de la totalidad o parte de los contenidos de esta página web, con fines comerciales, en cualquier soporte y por cualquier medio técnico, sin la autorización de https://tailwindcomponents.com.

*引用元：tailwindcomponents legal

【日本語訳】

当然ながら、商用利用のために、コードを複製したり、販売したりするのは、ダメという事ですね。

またサイトに下に【Component copyrights belongs to their authors.】とあります。つまり、著作権は、各コンポーネントの作者に属します。

以上のことから、無料コードについて、次のような形での利用が可能です。

• コードを参考にアレンジするのはOK
• 各コンポーネントの作者のページも確認しておくと良い
• もし商用利用の点で何か気になることがあれば、作者に問い合わせる

Junko

こちらに限らずですが、無料のテンプレートを使う場合には、念のため、規約をチェックしておくことをおすすめします。

Tailwind CSS マニュアル

最後は公式マニュアルサイト。微調整をしたいときは、ここが参考になります。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

たとえばフォントを大きくしたいときに検索ボックスで【font size】といれると、コードが出てきます。

検索結果はこちら。

参考：https://tailwindcss.com/docs/font-size

「ここ、ちょっと余白つけたい！」なんて時は、【margin】と検索すると、下記の表がでます。

参考：https://tailwindcss.com/docs/margin

公式サイトは、ちょっとした調整をしたいときに役立ちます。

おまけ：美しいアイコンが必要な時は heroicons

アイコンが必要な時は、heroiconsがおすすめです。

Heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

heroicons.com

こちらはTailwind CSSの作者によって作られています。使いやすく美しい無料のアイコンがそろっている有難いサイトです＾＾

たとえばパソコンのアイコンが必要なときは、上記のサイトで【desktop-computer】をクリックし、【Copy SVG】をクリックすると、コードをコピーできます。

コピーしたコードを貼り付けて、ブラウザに表示すると、次のように、パソコンアイコンを表示できます。

色やサイズも変更可能です。たとえば、サイズを幅・高さ120pxで、色を赤色にする場合は、次のようにコードを変えます。

Laravelでテンプレートを使うときに注意すべきこと

テンプレート等ご紹介してきましたが、使う上で「気を付けておいたほうが良さそう！」と感じる点を２つ、お伝えします。

Laravelでは、2022年1月16日現在、普通にBreezeをインストールすると、Tailwindのバージョン3.0が入ってきます。

ただ、Web上のテンプレートはバージョン2.0で作られているものも結構あります。プロジェクトと同じバージョンのCSSを使いたい場合には、バージョン情報もチェックしておくと良いかなと思います。

またテンプレートによって組み込むのが面倒なものもあります（経験談）。このあたりも含めて、使いやすそうなものを選んでくださいね。

さいごに

Laravelでは、メインのCSSがTailwind CSSへ移行している気配があります。

Laravel BreezeやJetstreamをインストールすると、デフォルトでTailwindが入ってきます。

わたしもLaravelの動向に合わせ、最近はTailwind CSSに力を入れています。ご興味あれば、他の記事も見ていってください。

なお、「LaravelとTailwind CSSでどんなWebアプリができるのか」見たい場合は、サンプルサイトもご用意しています。下記をご覧ください。

デモサイトの中を見てみる（登録必要）

こちらは、「Laravelの教科書」という学習サイトを通じて作成するWebアプリのサンプルとなります。

Laravelの教科書では、Laravel BreezeとTailwind CSSを使って、フォーラムサイトを作る方法を解説していきます。ご興味あれば下記ボタンをクリックして、ご案内ページを見てみてくださいね。

基礎編は無料です。

Laravelの教科書について詳しく知る