CSS

html&css

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...
CSS

bootstrap4でToast(トースト)を使ってみる

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

[html5]日付・時刻入力タグ6個を再確認

inputタグのtypeでdatetime-localを使っているコードを触ったんですが、時分が入ってないと値が取れないんですね・・・😫 復習をかねて、html5で追加された日付・時刻関連のinputタグについて書いています。 2020/0...
CSS

bootstrap4でModal(モーダル)を使ってみる!

bootstrap4でModal(モーダル)を使う方法です! 公式を見ると詳細などもわかりますが、ここでは要点だけまとめてます。 Bootstrap4のModal(モーダル)って? 開いている画面の中に小画面が表れて、閉じるなどの操作をする...
CSS

bootstrap4でTooltip(ツールチップ)を使ってみる!

bootstrap4でTooltip(ツールチップ)を使ってみる! bootstrap4でTooltipを使う方法です! 公式を見ると詳細などもわかりますが、ここでは要点だけまとめてます。 Bootstrap4のTooltip(ツールチップ...
CSS

webフォント(ドラクエフォント)あつかったよ。

webフォント(ドラクエフォント)を扱うハメになり、全角をごにょごにょしたりしています。 見た目がシュールなので、なにかあるときに使うと面白いかも!です! webフォントはCSS3からなので、昔のブラウザでは対応してないようです。 そのへん...