静的サイトジェネレーターをおぼえてからなんかHTMLとCSSが身近に感じるようになりました。CMSのテンプレートを触るのはなぜか億劫だったのにHugoのテンプレート作成はなんかハードル低く感じるんですよね。不思議。このタイミングで今まで人任せにしがちだったサイト制作のデザイン部分も基本的なところを勉強してみる気になりました。ただ、サイト制作の書籍をみると生のHTMLやCSSが例として挙げられているのですが、一枚ペラのLPならそれでよくてもたくさんのページがあるサイトだと実際に運用するのは難しそうです。ここでは書籍のサンプルサイトをHugoで作ってみたいと思います。

今回、参考にするのは「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座{:target=”_blank” rel="noopener”}」です。

サイト制作を薄く広く学べそう、サンプルサイトがおしゃれ、レビューがそこそこいい、というところで選びました。Kindle版だとちょっと安いですね。

本日は chapter4 のサンプルサイトを作成してみます。

できあがりはこのような感じになりました。

おしゃれですね。