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を探す時間がなかったので、許して。(;^ω^)