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

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

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

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

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

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

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