LoginSignup
0
0

Preline UI , TailblocksをHTMLのlinkタグだけで利用する。インストール不要!

Last updated at Posted at 2023-10-30

Tailwind CSS のテンプレートサイトを使えば Web サイトを効率よく作成できます。しかし、インストールをしないと利用できないものばかり...(それが普通なのかもしれない。)lolipopレンタルサーバーなどではインストールができないので、<link>を使ってUIを簡単に美しくしたいと思います。

Preline UIの場合

Preline UIの場合は、

HTML
<link rel="stylesheet" href="https://preline.co/assets/css/main.min.css">
<link rel="stylesheet" href="https://preline.co/assets/css/algolia.min.css">

このコードを入れます。そのあとに、コピーしたHTMLコードをペーストすると大体適用されます。
全コードを出すとこんな感じ

HTML
<head>
  <link rel="stylesheet" href="https://preline.co/assets/css/main.min.css">
  <link rel="stylesheet" href="https://preline.co/assets/css/algolia.min.css">
</head>
<body>
  <!--ここにコピーしたコードを置く-->
</body>

ただし、JSは適用されていないので、ユーザーからのリクエストは自分で書くまたは、自分でJSファイルを探すしかないです。
一応、あるだけ適応されているJSファイルを集めます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js" type="text/javascript"></script>
<script src="https://client.crisp.chat/l.js" type="text/javascript"></script>
<script src="https://client.crisp.chat/static/javascripts/client.js?8d32644" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js" type="text/javascript"></script>

Tailblocksの場合

Tailblocksの場合も同じように

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css">

全体のコード

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css">
</head>
<body>
  <!--ここにコピーしたコードを置く-->
</body>

JSを探す時間がなかったので、許して。(;^ω^)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0