CSS

html&css

CSS

Tailwind CSSで色をつける方法まとめ (テキスト/背景)

Tailwind CSSを使って、要素に色をつける方法について書いています。 テキストと背景に色をつけるときのそれぞれのクラスをまとめました。 公式のサイトの下記ページにもしっかりまとまってます。 ・Text Color - Tailwin...
CSS

Tailwind CSSで高さ(Height)を指定する方法!

Tailwind CSSを使って、要素の高さ(height)を指定する方法について書いています。 参考:Height - Tailwind CSS Tailwind CSSで高さ(Height)を指定するには? Tailwind CSSで高...
CSS

Tailwind CSSで幅(Width)を指定する方法!

Tailwind CSSを使って、要素の幅(width)を指定する方法について書いています。 参考:Width - Tailwind CSS Tailwind CSSで幅(Width)を指定するには? Tailwind CSSで幅を指定する...
CSS

Tailwind CSSでテキストボックスのデザイン例6選!

Tailwind CSSでテキストボックスをいくつか作ってみました。 テキストボックスで使われるCSSについて簡単に記載した後に、デザイン例を6つ紹介しています。 テキストボックスの装飾で使われるCSS テキストボックスの装飾には、Tail...
CSS

Tailwind CSSのPaddingまとめ ・余白をつける

Tailwind CSSを使って、詰め物をして空白をつけることができるPadding系のクラスの使い方を書いています。 Tailwind CSSを使用している場合、Padding系のクラスを使って方向と数値を指定することで、要素に対して簡単...
CSS

Tailwind CSSのMarginまとめ・余白をつける

Tailwind CSSを使って、余白をつけるMargin系のクラスの使い方を書いています。 Tailwind CSSを使用している場合、Margin系のクラスを使って方向と数値を指定することで、簡単に余白をつけることができます。 Tail...
CSS

Tailwind CSSのFlexbox系クラスまとめ

Flexboxを使うと、HTMLの要素を横並びにしたり、真ん中に持ってきたりすることが簡単にできます。 今回はTailwind CSSのFlexboxのクラスについて、使い方や実際にどう動作するかスクリーンショットを載せて解説しています。 ...
CSS

TailwindCSSでよく使うクラス11選!(幅・高さ・余白・パディングなど)

TailwindCSSを使って、ガッツリと画面を作成しました。 公式ページを単語で検索すると、リファレンスとして機能してくれます。 実際に使用していく時は下記の公式ページで検索しながら使うことをおすすめします。 (ページ上部の「Quick ...
CSS

chormeの補完機能で背景色を変えないようにする

chormeの補完機能で背景色を変えないようにする chormeでテキストエリアをクリックすると、補完候補の一覧が出てきますね。 一度入力したデータが再度表示されている、これです。 選択すると、テキストボックスの背景色が水色になってしまいま...
CSS

bootstrap4でflexboxを使うには?

bootstrap4でflexboxを使うには? 前回cssでflexを使ってみましたが、bootstrap4にはflexを使うためのクラスが用意されているので試してみました。 公式ドキュメントにそって、使いそうなものだけサンプルを書いてど...
CSS

[css]flexboxの使い方を再確認してまとめる

flexboxを使って、画面を作ることがあったので、 今まで、ググりながらなんとなく使っていたflexのプロパティについてそれぞれ確認してみました。 flexbox? cssで要素の並び順や位置を自由に指定できるものです。 親要素にdisp...
CSS

bootstrap4でmargin・paddingをサッと指定する方法

bootstrap4でmargin・paddingをサッと指定する方法 bootstrap4でマージン(margin)・パディング(padding)を調整するクラスについて書いています。 公式のspacingの内容になります。 マージン(m...