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

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

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

最後に、「気を付けておいたほうが良さそう!」と感じる点を2つ、お伝えします。

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

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

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

さいごに

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

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

もしBreezeパッケージの入れ方にご興味あれば、こちらの記事もお役立てください。

「Tailwindを使っているけど、クラスの変更が反映されない!」なんて時には、こちらをどうぞ。

Laravel Breeze

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

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

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

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

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

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

「Laravelで業務効率化用のWebアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Laravelを使ったWebアプリ開発のご相談承り中
Zoomでのお打ち合わせも承っています♪
お問い合わせはこちら
Twitter始めました。
40代からプログラミング!

コメント

  1. tailwind初学者 より:

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

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

    よろしくお願いします。

    • Junko Junko より:

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

      • tailwind初学者 より:

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

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

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