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

Laravel Breeze

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

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

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

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

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

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

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

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

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

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

 

Junko
Junko

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

なんだか、おしゃれ。

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

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

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

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

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

たとえばフォームをつけたいときには、検索ボックスに「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

【日本語訳】

知的財産法第8条および第32条第1項第2号の規定に基づき、本ウェブサイトの内容の全部または一部を、https://tailwindcomponents.com、いかなる媒体および技術的手段によっても、商業目的で複製、配布および公衆送信(利用可能化を含む)することは、明示的に禁止されています。

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

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

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

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

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

Tailwind CSS マニュアル

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

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

検索結果はこちら。

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

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

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

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

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

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

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

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

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

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

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

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

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の教科書について詳しく知る

 

Laravel Breeze

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる


Laravelの教科書限定コミュニティ【Laravelの教科書ラボ】はじめました。
セミナーで、StripeやChatGPT連携、デバックなど実践スキルを分かりやすく学べます。

ラボの案内を見てみる

Twitter始めました。
40代からプログラミング!

コメント

  1. tailwind初学者 より:

    tailwindcomponents のライセンスについて、読んだのですがこれは、迷惑をかけないようにであれば利用可能と意味なのか、商用利用は不可なのか読み解けませでした。
    いろいろ調べてみたのですが、よくわからずの状態です…

    もしよろしければ、どういったライセンスなのか教えていただけますでしょうか。

    よろしくお願いします。

    • Junko Junko より:

      tailwindcomponents のライセンスについて、分かりやすくなるよう
      記事に追記をしました。よかったら読んでください。

      • tailwind初学者 より:

        ありがとうございます!
        大変わかりやすく本当に助かりました!

        コードが公開されているとついついコピペしたくなるのですが、コードを参考にしながら作成します!

タイトルとURLをコピーしました