css tutorial続き(細かい作り込み、アイコン、表、行間等)

やったこと

気づき

  • Bracketsをメインに作業したが、codepenでのアイコン表示やボタンの色等、両者間で微妙に違いやズレがあった(プレビューブラウザは共にchrome
  • アイコン作成で余分な部分を上塗りで見えなくする為に大きな余白を取らなければいけなかった。
  • formのデザインはアプリの入力部分となり、使用感(UI・UX)に大きな影響を与える重要な所だなと再認識した。いかにツールとして手間をかけずに使えるようにするかを考える醍醐味があると感じた(デザイン=問題解決

見た目は似せることが出来たけれども、、

  • タグかクラスかはたまたIDで指定するのか。。
  • widthかflex-basisで指定するのか。。
  • remか%かpxで指定するのか。。  などすごく悩みながら進めた。個々のケースでどれがベターなのかがまだまだ😱

ツールについて

リニアに見た目がわかるエディターを探してとりあえずBracketsを使ってみたが、他に良いものがないか質問すればよかった。

所感

とにかく難しい。やり方もいろいろあり、セレクタがきちんと出来ていなかったりしてもエラーも出なかったりなので非常に難しく感じた。弄りながらまぐれで出来たのと違い、狙って計算して出来るようになるのには相当な経験が必要だと思った。 今回みたいな1ページだけ似せるのとは違い、サイトやアプリ全体でのデザインを統一する場合は緻密に計算してつくる必要があると学んだ。