タグ

2020年8月26日のブックマーク (2件)

  • ボタンをデザインするときに気をつけたい11個のポイントまとめ

    この記事では、ユーザーインターフェースを作成するときに気をつけたいボタンデザインのポイント11個をまとめてご紹介します。 悪い例と良い例を比較しながら、具体的なボタンデザイン代替案をシンプルなイラストをつかって詳しく見ていきましょう。 1. ボタンの種類ごとに1つのスタイルに制限しよう ウェブサイトやアプリでは、同じアクションタイプに複数のボタンスタイルを使用しているケースがよくあります。使用しているボタンスタイルの数をきちんと把握し、タイプごとに1つのスタイルにまとめてみましょう。 一般的なボタンの種類には、コールトゥーアクション(CTA)、第一プライマリ(Primary)、第二セカンダリー(Secondary)、第三ターシャリ(Tertiary)、成功(Success)、危険(Danger)、リンクなどが挙げられます。 2. イベントの状態を含め、視覚的なフィードバックを提供しよう ボ

    ボタンをデザインするときに気をつけたい11個のポイントまとめ
  • たった1行のCSS!よく見かけるWebレイアウトを実現する凄技テクニック10個

    モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。 この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。 上下中央揃え: place-items: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-items: centerを使えば、思ったよりに簡単に実現できます。 まず、display: gridを記述したら、一緒にplace-items: centerを同じ要素に追加します。place-itemsは、align-itemsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-itemsとjustify-itemsの両方がcenterとして設定されます。 .paren

    たった1行のCSS!よく見かけるWebレイアウトを実現する凄技テクニック10個