Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

デザイン

デザイン | グラデーション(Gradation、Gradient)

概要 グラデーション(Gradation、Gradient) 詳細 明るさや色彩を徐々に変化させること。・質感を高める ・対象のイメージを強める などの効果がある。 サンプル CSS3のlinear-gradientで指定します。 赤、青、黄緑の明度のグラデーションと色彩のグラデー…

デザイン | ティントとシェード(Tint & Shade)

概要 ティントとシェード(Tint & Shade) 詳細 ティント 明清色。純色に白を混ぜた色。 シェード 暗清色。純色に黒を混ぜた色。 サンプル hsl指定で明度50、輝度100が純色。 明度を減らすと明清色。 輝度を減らすと暗清色。 html <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { bord</meta></head></html>…

デザイン | 暖色・寒色・中性色(Warm Color,Cool Color,Neutral Color)

概要 暖色・寒色・中性色(Warm Color,Cool Color,Neutral Color) 詳細 色 対象 暖色 赤、オレンジ、黄色 寒色 青 中性色 緑系、紫系 サンプル <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { border-style: solid; } th { background-color:hsl(90,50%,50%); } </style> </head> </html>

デザイン | テトラディックカラースキーム

概要 テトラディックカラースキーム 詳細 テトラディックカラースキームとは90度ずつ離れた4色相を組み合わせた カラースキーム。別名テトラード。 サンプル <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { border-style: solid; } th { background-color:hsl(0,50%,50%); } tr.even </meta></head></html>…

デザイン | スプリットコンプリメンタリーカラースキーム

概要 スプリットコンプリメンタリーカラースキーム 詳細 スプリットコンプリメンタリーカラースキームとは主色相を決め、その補色となる 色相2つを同一角度で選択するカラースキーム。 サンプル <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { border-style: solid; } th { backgroun</meta></head></html>…

デザイン | コンプリメンタリーカラースキーム

概要 コンプリメンタリーカラースキーム 詳細 コンプリメンタリーカラースキームとは主色相を決め、その補色となる 色相でレイアウトを組み合わせるレイアウト手法。 コンプリメンタリー=complementary=補足的な、の意。補色=>色彩環で向かいに位置する…

デザイン | アナログカラースキーム

概要 アナログカラースキーム 詳細 隣り合う色相を選択するスキーム。 色の自然な変化と、まとまりが出るのが特長。 CSS3サンプル サンプルhtml+CSS3 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { border-style: solid; } th { background-color:hsl(100,50%,50%); } tr.even td {</meta></head></html>…

デザイン | モノクロマティックカラースキーム

概要 モノクロマティックカラースキーム 詳細 モノクロマティックカラースキームとは同一色相で、 彩度と輝度で変化を付けるレイアウト手法。 CSS3サンプル サンプルhtml+CSS3 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { border-style: solid; } th { background-color:hsl(90,5</meta></head></html>…

デザイン

概要 デザインについて。 主にWebシステムのデザインに役立てるための内容をまとめる。 詳細 項目 内容 HSL http://d.hatena.ne.jp/tbpg/20131001/1380640715 モノクロマティックカラースキーム http://d.hatena.ne.jp/tbpg/20131001/1380643782 アナログカ…

デザイン | HSL

概要 HSL 詳細 HSLとは色相(Hue)、彩度(Saturation)、輝度(Lightness)からなる色空間。 種別 内容 色相 色の種類。0-360度で表す。0〜100%の範囲に平準化されるケースもある。 彩度 色の鮮やかさ。0〜100%の範囲 輝度 色の明るさ。0〜100%の範囲。 CSS…