CSS CSSで画像を縦・横フィット！「object-fit: cover」で自動トリミング｜IE対応！
枠の中に画像を縦横ピッタリと収めたい時、横幅１００％か、縦幅１００％かを指定するけど、画面サイズによって縦か横の余白が空いちゃうから、メディアクエリで細かい指定しなくちゃいけなかったり色々手間が多いよね。
「object-fit...
CSSについての記事一覧
CSS 
CSS 【CSS】before・afterの「content」内でテキストを改行させる方
before・afterの「content」内でテキストを改行する方法の紹介です。
「content」内では、「<br>」とか「\n」では改行できないんだ。
では、その方法をご紹介！
.demo::after {
con...
CSS 【CSS】テキストの後ろにだけ背景色を付ける方法｜box-decoration-break
テキストの後ろにだけ背景色を付ける方法のご紹介です。
backgroundだけを使って背景色を付けると思った感じにならないし、行ごとにspanで囲うのもなんかあれじゃない。
そんな時に使えるプロパティが今回ご紹介する「box-decora...
CSS 【CSS】Youtubeの動画をレスポンシブ対応！
Youtube動画を埋め込む際に普通にCSSで「width: 100%」でいいじゃないと思うけど、高さが出なくて表示されない。でもこのコードで1発解決！HTMLとともにご確認を。
HTML
// Youtubeからコピーしたコード
<...
CSS calcを使ってCSSだけで計算しよう！
「1920px」を２で割ると。。。。僕は馬鹿だからすぐには答えは出ない。
--------12分経過----------
「960px」か。
ふぅ。
頭使いすぎちゃったから一回寝なきゃだな。
こんな頭やだ。。。
嫌だからCSSに計算してもら...
CSS 【CSS】flexの指定方法｜横並び・右揃え・左揃え・真ん中揃え
最近、「inline-block」より「flex」が楽な事に気付いてしまいました。
そんなもんだから、「flex」を使って書くけど、まだ覚えられなくて毎回調べちゃうから「覚えよう！」と思ってココに書きます！
自分がよく使うものだけし...
CSS 【CSS】gridジェネレーターを使って簡単にグリッドレイアウトを手に入れよう！
「display: grid」って今まで使ったことなかった。
便利だろうな～とは思ってたけど、なんか難しそうと思って「inline-block」を使い続けてた。
管理のしやすさとか、コード量削減とかを考えると、「flexbox」か「grid...
CSS 【CSS】矢印カーソル(cursor)を消す方法
矢印を消す方法はとても簡単！
下の1行を追加すればいいだけです。カーソル（cursor）を消す範囲はbody全体にかかっていますので
もし違う範囲を指定したい場合は、クラスやIDを指定してください！
このページ全体がカーソルを見えなくしてる...
CSS CSSでテキストを選択禁止にする方法
文字の上をマウスでダブルクリックしたりドラッグして移動すると選択されてしまうテキスト。
デザインの邪魔だったりする時がある。
選択したテキストを装飾する方法もあるけど装飾が必要ない時は、今回紹介する方法で解決です！
CSS
user-sel...
CSS 【CSS】めっちゃ便利なグラデーションジェネレーター
カードUIや背景、画像の上にも、ホントいろんな所で滅茶苦茶使うグラデーションも
自由に使えないと単色でいいかな。と思っちゃう。
でもグラデーションを使った方がひと手間かかってる気がするし、結構な場面でマが埋まる感じがして多用しがち。
今回...
CSS CSSで改行コード<br>を無効化（消す）する方法
レスポンシブサイトを作る時とかに、PC表示の時は改行を入れたいけどスマホ表示の時は改行を無くしたい。
そんな時はCSSで<br>を消して対応しよう！！
例えば、こんなHTMLの時...
HTML
<p>
ミラボー...
CSS 【CSS】:notで複数の要素を指定する方法
CSSでスタイリングしていると、「最初の要素以外」とか「特定class以外」にスタイルを当てたい時がある。
そんな時に使うのが疑似要素の「:not」です。
例えばリストの最初の要素以外を指定する時は「li:not(:first-child)...
CSS 【CSS】ボヤけた画像をパキッとさせる方法
書き出したサイズより小さく表示してるのに、なぜか画像がボヤける。
そんなボヤけた画像をCSSで即解決する方法をお教えします！
CSSのテンプレートに追加しとくと今後検索しなくて済む。
img {
-ms-interpolation-mo...
CSS 【CSS】「fixedで固定されない⁉」を速攻解決する方法！
固定させたい要素「header」とかロゴやドロワーメニューに「position:fixed」したのに固定されない時の解決方法のご紹介です。
親要素に「transform: translate3d(0,0,0)」を指定してる！
親要素に「tr...
CSS cssアニメーションがカクカクするのを防ぐ方法
CSSアニメーションのカクカクした動きを指摘された時、すぐ対処できる方法をご紹介！
「will-change」でGPUを使って高速処理
「will-change」を使うとアニメーションする前にブラウザに伝えてくれるので優先的に処理してくれる...