エプソンダイレクト株式会社

2023年11月18日(土曜日)

TailwindCSS

Category: ホームページ制作 | Posted By at 23:59:10

TailwindCSS ってご存知ですか?

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

今私が触っている Laravel でも利用されている
CSS のためのフレームワークなんですが、
やっぱり好みが出るようですね。

class に m-4 とか p-8 とかで指定していって
Web のデザインをするのですが、
これって VS Code とかを使う前提じゃないと
とにかくメチャクチャ大変…。
ちなみに先程の m-4 は margin:1rem; 、
p-8 は padding:2rem; を指定したのと同義、
他にも pt-4 とか ml-8 とか border とか absolute とか
flex とか font-bold とか色々あるのですが、
要は必要な CSS の要素を個別にすべてのタグに記入していくという方法。

たしかにクラス名を考えずにすむとかメリットはありそうですが、
とにかくコードが長くなって見づらさが半端ない…
かなり好みが分かれそうです。
コードなんか見ねぇよ…という方には
あまり関係がないかもしれませんが…

ちなみにやはりある程度は覚える必要があるのですが、
めんどくさい方はいかにチートシート(早見表)がありますので
参考にしてみてください。

Tailwind CSS Cheat Sheet

あ、昨日の続き…
さっそうと一人と二妖怪の前に現れたのは
スキンヘッドにグラサンをかけたヤバそうな御仁…
『おめぇら、なにやってんだ!』『あ!これは三蔵の親分!』
衝撃の展開にインボイスを考えた連中が腰を抜かす !!
そして譫言うわごとのようにつぶやく…
『カバディ、カバディ、カバディ、カバディ……』効果がないっ !! …六マス戻る
それではまた次回の講釈で

トラックバック URL

コメント&トラックバック

コメントはありません。

コメントフィード

コメント





XHTML: 以下のタグが利用可能です。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

HP Directplus -HP公式オンラインストア- デル株式会社 東芝ダイレクト 富士通パソコンFMVの直販サイト富士通 WEB MART ソフマップ・ドットコム