みなさんこんにちは!
私が最近覚えたCSSについて備忘録としてご紹介しようと思います!
『え!?今更?』みたいな内容もあるかもしれませんが、個人的にはあまり使ったことがなかったCSSで
「こんなことできるようになったんだ!」
みたいな発見があったものばかりなので、みなさんも知らなかったものがあれば使ってみてください。
ちなみに中にはIEやEdgeに対応していないものあるので、ご注意くださいね~!
テキスト上に記号を表示
IE・Edgeには非対応です。テキストを少し強調したいときに使えます。
以下のようなタイプもあり★適宜使用してみてください!
i { -webkit-text-emphasis: dot #000090; text-emphasis: dot #000090; }
dot:ドット
circle: 丸
double-circle: 二重丸
triangle:三角
sesame:ちょんちょんちょん…笑
See the Pen JgoWBm by sayuri (@giraffeweb) on CodePen.0
テキストに波線を入れる
これもIE・Edgeには非対応です。
これまで波線ってどうやっていれてました!?私ははるか昔は画像でやってましたよ…。
すごい!!
i { text-decoration: underline wavy #000090; }
See the Pen テキストに波線 by sayuri (@giraffeweb) on CodePen.0
テーブルの幅を統一
最近は表をdisplay:flexで組むことが増えましたが、まだまだtableを使用しているところもありますよね。
勝手に文字数によって幅が変わってしまうのをこれで簡単に均一にできます!なんと便利~★
table { table-layout: fixed; }
See the Pen テーブルの幅を統一 by sayuri (@giraffeweb) on CodePen.0
最近覚えたCSS小技は以上です!
使えそうで使えない?そんなことない!
もっと便利なCSSもたくさんあるので、覚えて使い次第ご紹介できればと思います~!