読んだ:これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本

www.shoeisha.co.jp
いろいろ(※)あっていい加減uisetlistのフロント側をモダン化しないとまずいと思ったため読みました。
※:

これを読んだ人の知識レベル

  • 一応HTMLについては理解している。ただし、化石レベル。
  • どのくらい化石かというと、時代が2000年代中盤あたりの個人HP作成時代で止まっている。CSSは一応あったけど、まだ書かない方が主流だった(と思われる)時代。
  • 当時の思い出:箱庭諸島は負荷が高いので禁止、Yahooのリンク集、キッズgoo、とほほのWWW入門(まだ更新が続いているらしい、すごい)、Flash全盛期、KENT WEBとか……

学んだこととか

  • HTMLはもはやコンテンツを書くためにしか書かない。装飾は全部CSSで書く。
  • なんなら画像とかも装飾品はCSSで配置する。
  • 結構pxをサイズに指定している? Androidやっていたときはpx指定ってdpiによって表示大きく変わるからあまり使わない方がよかったと思ったけど。
  • レスポンシブデザインの作り方、表示確認方法

装飾が基本全部CSSで書くというのが印象深いです。HTMLの方の説明なんて全体の4, 5分の1程度だったのではないでしょうか。
画像も地図とかロゴとかのコンテンツに関係あるもの以外はCSSで配置しているようでした。

px指定に関してはフォントサイズをベースとする単位のremがあるようで、ブラウザのフォントサイズ変更機能への対応を考えた場合にこちらが望ましいということがあるようです。実際に作る際には検討します。

レスポンシブデザインについてはHTMLで書く内容がコンテンツだけに絞ったことでできるようなものですね。ディスプレイのサイズに応じてCSSで並べ替え・調整をすればOKという感じでした。

次はいよいよ実演ですね。できるかな