【CSS】CSSだけでパララックスを再現する - Qiita
はじめに みなさんは、パララックス（parallax）と聞いたことがあるでしょうか？ 最近のサイトは、要素がふわっとフェードインしたり、要素の移動速度が違ったり、 スクロールに応じて色々なアニメーションが発火します。 今まで、このようなアニメーションを実装するには、JavaScriptを使っていたので大変でした。 しかし、Chrome 115で使えるようになった、scroll-driven animationsを使うと、CSSだけでスクロールに合わせたアニメーションを作れるようになります。 この記事では、そんなscroll-driven animationsを使って、パララックスを再現したので紹介します。 パララックス（parallax）について まずパララックス（parallax）にて解説します。 パララックス（parallax）とは？ パララックスとは、視差効果のことで、 Webサイト
【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 と
【アクセシビリティ】アクセシビリティを意識したタブUIの作り方 - Qiita
はじめに みなさんはちゃんとアクセシビリティを意識して開発できていますか？ 必要なところに role属性 を記述したり、tabキーでフォーカスが当たるようにしたりなど、意識しないといけないことも多いです。 そのため、完璧にやろうとするのは難しいと思います。 ただ、モーダルUIやタブUIといったコンポーネントごとに区切って、アクセシビリティを理解しておけば、実装するタイミングに思い出しやすくアクセシビリティについて意識しやすいです。 そのため、この記事ではタブUIのコンポーネントに焦点を当てて、 アクセシビリティを意識したタブUIの実装方法とタブUIで意識した方がいいアクセシビリティを解説しようと思います。 ※ アクセシビリティの基本については以下の記事をご参照ください。 アクセシビリティを意識したタブUIを実装する では早速、アクセシビリティを意識したタブUIについて解説していきます。 1
【アクセシビリティ】WAI-ARIAを完全に理解した。 - Qiita
はじめに みなさんは、WAI-ARIAを知っていますか？ 私は、スクリーンリーダーでも読めるようにするため、aria-label を使ったり、 roleを使って、要素の役割を明確にしたりなど業務でよく使うものは、理解しているつもりです。 ただ他にどんな種類のWAI-ARIAがあるか、その役割はなんなのか、 いまいちわからないなと思っていませんでした。 なので今回は、調べたWAI-ARIAについて、まとめたので、ぜひご覧ください。 私の理解度は↓この位置です。 ご注意ください。 WAI-ARIA WAI-ARIAとは？ WAI-ARIAは、Web Accessibility Initiative Accessible Rich Internet Applicationsの略で、アクセシビリティ向上の目的で、W3Cが定めた仕様です。 また、WAI-ARIAをつかうことで、HTMLで表現できない
【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita
概要 みなさんは、このドロップシャドウを見てどう思いますか？ ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね？ この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！ ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは２次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
