CSS 【CSS】before・afterの「content」内でテキストを改行させる方
before・afterの「content」内でテキストを改行する方法の紹介です。
「content」内では、「<br>」とか「\n」では改行できないんだ。
では、その方法をご紹介！
.demo::after {
con...
CSS
CSS 
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...
javascript 【コピペOK！】ON/OFFスイッチのデザイン７個｜iOS風スイッチもあるよ！
フォームやインタラクティブなサイトで使えるON/OFFのトグルスイッチのデザイン7つのご紹介。
シンプルなものなので様々な所で利用できるトグルスイッチ７つを作ってみたので
ぜひぜひコピペして利用してくれたら嬉しいです！
チェックボックスは見...
CSS CSSでテキストを選択禁止にする方法
文字の上をマウスでダブルクリックしたりドラッグして移動すると選択されてしまうテキスト。
デザインの邪魔だったりする時がある。
選択したテキストを装飾する方法もあるけど装飾が必要ない時は、今回紹介する方法で解決です！
CSS
user-sel...
CSS 【CSS】めっちゃ便利なグラデーションジェネレーター
カードUIや背景、画像の上にも、ホントいろんな所で滅茶苦茶使うグラデーションも
自由に使えないと単色でいいかな。と思っちゃう。
でもグラデーションを使った方がひと手間かかってる気がするし、結構な場面でマが埋まる感じがして多用しがち。
今回...
CSS 【CSS】特定ブラウザだけに効くCSSの書き方｜IE10以下、IE11、Firefox、Chrome、Safari、EDGE、Opera
特定ブラウザだけに適応するCSSの書き方のご紹介です。
「IE11だけ表示がズレる」とか「FireFoxだけフォームが変」とか、「Safari」のみに対応した書き方とか、「Opera」。。。オペラはなんかあるかな。。。
そんな特定ブラウザだ...
javascript 【jQuery】CSS変数をjQueryで利用する方法
CSSで指定したCSS変数をjQueryで利用する方法のご紹介です。
jQueryで変数作っちゃっても良いけど、そうできない時もある。
例えば、、、、ん～あるかなぁ。
jQueryで変数作れない時は、あるっ！としてCSS変数を書き換える方法...
CSS CSSでダークモードに即対応。OSの画面設定をウェブでも利用しよう！
海外のサイトとか見てると、自分のiphoneの設定をダークモードにしてる時、勝手に暗いデザインで表示されてるのを見てどうやってやってるのか疑問だった。
きっとjsでデバイス情報を取得して、なにかしてるんだろうと思ったけど違った。
CSSだけ...
CSS CSSで角丸四角の作り方
ボダンや画像など、やんわりと表現したいときや、流行りのデザインっぽさを取り入れたいときに使うのがCSSのborder-radius。
border-radiusには2つの書き方があり「border-radius: 10px;（全部の角を10...
javascript jQueryでCSSを動的に変更・追加・削除する方法
jQueryでCSSを変更する方法のご紹介です。どうやってCSSを変更したらいいかわからない時などにご覧いただければ嬉しいです。
CSS 【CSS】疑似クラスの指定方法｜最初・最後・n番目・奇数・偶数
cssで特定箇所のみにスタイリングしたい場合に効率的にかっこよく書ける疑似クラス特集です。
奇数番目
１，３，５，７，９…番目を装飾する時
li:nth-child(odd) { color: #82fcc9;}
リスト（奇数）
...