CSS display: flex;を指定した子要素をposition: absolute;するとバグることがあるよ、のお話
display: flex;を指定した子要素をposition: absolute;するとバグることがあるよ、のお話
CSS
CSS CSS CSSで縦書きにした時にフォントによってガタついてしまうのを直す方法
キービジュアルなどで文字を縦書きにするデザインってありますよね。 writing-mode: vertical-rl;を使って縦書きにした時に、文字がなんだかガタガタしてしまう時があります。 そんな時は下記のようにfont-feature-...
CSS HEX8桁のカラーコード
たまに見かける8桁のカラーコードですが、2021年2月現在、IEでの対応がされていません。 rgbaに簡単に変換してくれるサイトはこちら。
CSS スクロールバーのブラウザー対応が進んでカスタマイズできるようになってきたよ、のお話。
スクロールバーのカスタマイズってfirefoxとかedgeとかで使えなかったイメージがありましたが、Can i useで調べてみたところ今はどうやらほとんどのブラウザで対応しているようです！ 参考 .scrollbox{ height: 2...
CSS テーブルの端を固定したい時のお話
テーブルのコンテンツがあまりに多く、スマートフォンで表をみようとすると見にくい場合もありますよね。 列が横に多く続く場合だとPCでの表示では問題ない場合も多いですが、 スマートフォンで横スライドで表示させると一番左の項目が見えなくなってしま...
CSS デザインシステムとコンポーネント型の製作が来てる感触
去年辺りから多くの案件で、デザインシステムとコンポーネントを作ってから横展開していく形の制作案件が増えてきたように思います。 もともと、100pを超えるような中〜大規模サイトでは、トップや下層はデザイン通り1からのcssで通常コーディングを...
CSS 【extractCSS】仮組み後のcss準備はこれ
【extractCSS】仮組み後のcss準備はextractCSSを使うと効率よくcss設計に入れます。
CSS spにおけるposition:absoluteの注意点
・sp時にheight固定はNG（ここに限らず多くの場面でsp時にheight固定は破綻しちゃう）背景は〇〇-wrapperそのものにつけるのではなく〇〇-wrapper::before{}に絶対配置で指定することで、コンテンツ自体はhei...
CSS 文末の画像
aに:after擬似クラスでinline-block :after{ content:''; display: inline-block; vertical-align: middle; margin-left: 10px; backgro...
CSS ボタン
・aタグを裸でおかずに必ずdivで囲む。 ・aタグのボタン系は通常display:inline-block。 ・ページによって横に2つ並んだりすることがあるのでそのまわりをdivでかこんでdivにtext-align:centerをかける。