CSS

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

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

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

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

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

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

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

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

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

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

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

bootstrap4でToast(トースト)を使ってみる bootstrap4でtoastの使い方などをまとめてみました。 公式のリンクはこちら 準備 CDNで使う準備 CDNを使う場合はbootstrapのトップページにある、CDNのパス...