クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

2019-02-01から1ヶ月間の記事一覧

【配色の基本】面積比(メイン、アクセント、ベース)と色相分割【Adobe Color CC】

前回、様々な色相環を見ていきました。今回はいよいよ複数の色を組み合わせた「配色」の基本に入っていきます!複数の色はいったいどうやって選んでいったらいいのか?目的によって変わります。「主従をつける配色」「同等に分類する配色」の2つの目的で考え…

【配色】色相環のH値をいろいろ測ってみた(HSB、マンセル、オストワルト、PCCS、イッテン、NCS、Web配色ツール)

デザインの配色はRGBやCMYKよりもHSBを使った方が検討しやすいです。しかし、HSBの中の「H値(色相)」について調べるたところ、一筋縄ではいかないことがわかりました。色相環にはHSB色空間、表色系(マンセル、オストワルト、PCCS、イッテン、NCS)、Web配…

【行長・行間・ジャンプ率】タイポグラフィ事始め(適度な箱組みとは)

タイポの道も一歩から。文字のデザイン「タイポグラフィ」。様々な要素がありとっても奥が深い世界です。まずは見出しと本文を組み合わせて「箱組み」を組んでみます!ポイントは「行長」「行間」「ジャンプ率」です。

【画面分割】シンメトリー、黄金分割、白銀分割、グリッドシステムなどを一覧にしてみた

前回は画面の「アスペクト比(縦横比率)」を見ていきました。今回は画面の「分割」です。デザイン、レイアウトにおいてメイン要素、サブ要素を配置する際に画面をどこで分割するか?シンメトリー、黄金分割、白銀分割、3分割など「分割比」による分割と、あ…

【黄金比、白銀比】代表的なアスペクト比(縦横比率)を一覧にしてみた

デザイン上でよく使われるアスペクト比(縦横比率)。なんとなく言葉としては理解しているんだが実際の形状を並べて一眼で比較できるよう、一覧にしてみた。

【擬似クラス:target】CSSのみでハンバーガーメニューを作る

スマホの小さい画面でメニューをしまっておくのによく使われるハンバーガーメニュー 。これまではJSのクリックイベントでclass名を追加して実現してました。擬似クラス:targetを使うとCSSだけで実現できると知って試してみた。

【pointer-events】フォームの送信ボタンに擬似要素を重ねてもイベントを発火させる

フォームの送信ボタンのinputタグにアイコン(擬似要素)を加えたかったのですが、できませんでした。それで、ボタンの外をdivで囲んで擬似要素を加えました。そしたら、なんということでしょう。ボタンの上に重なったアイコン部分は送信などのイベントが発…