タグ

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

  • カラーコード変換ツール | Hex、RGB、HSV、CMYK、XYZ、LAB、HSLに対応

    カラーコード変換ツールについて使い方基的に、気になったところをクリックすれば、その色の色コードを調べることができます。Hex(16進数)からRGB(10進数)に変換したい場合は、Hexに直接カラーコードを入力するか、画面上部のカラーピッカーで色を選択して下さい。例えば、RGB(10進数)からHex(16進数)に変換したい場合は、R、G、B、それぞれに10進数でRGB値を入力して下さい。色コードをコピーしたくなったら、画面上部のナビバーの、コードの部分をクリックして下さい。補色と反転色補色は、色相環上の正反対に位置する色です。メインカラーに対するアクセントカラーの候補となります。反転色は、カラースケール上のRGB値を反転させた色です。こちらもメインカラーに対するアクセントカラーの候補となります。HSVとHSL色空間HSV、HSL値におけるSは「彩度」です。この値を減らすと、薄くなり、背景色

    カラーコード変換ツール | Hex、RGB、HSV、CMYK、XYZ、LAB、HSLに対応
  • CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック

    検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト(アイコンも)を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃える インタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか? あなたは仲間です、多くの人が経験していると思います。 この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。 まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは

    CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック