タグ

ブックマーク / qiita.com/degudegu2510 (4)

  • 【CSS】borderを使って、三角形作るのはやめませんか? - Qiita

    はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか? borderを使って作っていませんか? この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、来のプロパティとは違う使い方でうつくしくないですよね! この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と

    【CSS】borderを使って、三角形作るのはやめませんか? - Qiita
  • 【CSS】displayプロパティに2つ値が入るってマジ!? どゆこと!? - Qiita

    はじめに みなさんは、CSSのdisplayプロパティを知っていますか? CSSを扱う上で、一番使うのがdisplayプロパティではないのでしょうか? 最近では、display: flex; や display: grid; が追加され、いろいろなレイアウトが作りやすくなったのは、記憶に新しいかと思います。 そんな中で、CSS Display Module Level 3で、displayプロパティに2つの値を入れることができるようになることがわかりました。 ※ まだ、Firefox 70以上・Safari 15以上でのみ再現できます。(2022年1月20日) そのため、この記事では、displayプロパティに2つの値を入れられることについて解説しようと思います。 背景 まずは、displayプロパティに2つの値を入れられるようにした背景について解説します。 最近displayプロパティに

    【CSS】displayプロパティに2つ値が入るってマジ!? どゆこと!? - Qiita
  • 【CSS】きみは "擬似クラス" 何個言えるかな?? - Qiita

    はじめに あなたは "擬似クラス" 何個言えますか? 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか? でも、"擬似クラス" 何個言えますか?と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか? もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは? 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて

    【CSS】きみは "擬似クラス" 何個言えるかな?? - Qiita
  • 【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita

    概要 みなさんは、このドロップシャドウを見てどう思いますか? ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね? この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう! ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは2次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。

    【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita
  • 1