もりけん塾生になって18日目のねこらのん（@nekoranon256）です。
LP制作中で今日したことをまとめていきます。
LP制作でやることリストを作成してゴールを決める
LP制作をしているとはじめて作成するにも関わらずゴールややるべきことが混乱すると感じ、上記の目次のようなものを作成。
現在はHTMLコードのベースは作成済。
画像やフォントに取り掛かっていますので、次はそちらについてまとめていきます。
画像・デザインについて
画像は用意されているものを使用し、フォントがユニバーサルデザインの書体を使用。
気づき
- 書体は無料のものと有料のものがある
- 書体はDownloadしてから使う
- ユニバーサルデザインの書体『UDフォント』がある
画像についてはcanvaで作成していきます。
affinityの悩みましたが慣れていて簡単に使えるcanvaで今回はやっていきます。
指定の画像を探してcanvaで作成
指定の画像がいくつかあったのですが…時間がかかるもんですね…！
ヒアリングの大切さを痛感しました…
画像は
- 使用したい画像をスプレッドシートに貼り付けてもらう
にしましたが必要枚数の4倍用意で、画像も貼り付けてもらうということが時間がかかった原因。
今後は使用したい画像があればファイルで添付してもらい、必要枚数だけを送って貰うとスムーズに進むと感じました。
その後canvaで作成し、
HTMLに掲載しました。
ユニバーサルデザインについて
UDフォントはユニバーサルデザインの書体。
見やすい書体だそうですがMacには入ってなく、Windowsには入っているそうです。
ユニバーサルデザインは、「あらゆる人々にとって使いやすいデザイン」のための考え方です。
UDフォントはMORISAWA BIZ+からフォントをインストールすることが可能です。
『BIZ UD ゴシック/明朝』は無償提供があります。
こちらの記事を参考に私もインストールしました。
CSSの順番
画像を入れ込み、著作権のcopyrightを加えHTMLはこれで今の所OKかな。
追加や修正があればその時に調べつつ変更する。
次はCSS。
CSSの手順にまず戸惑いながらしていき、良い手順がないかを探すことに。
あとから見てわかりやすい記述の順番じゃないと修正が難しそう…と思い以下の記事を参考にしました。
参考▶CSSプロパティ記述順序
またCSSについて理解ができていないと思ったので以下の本を片手に必要な箇所を読みつつ進めています。
divクラスの中にfooter、そして<p>で住所や名前を書き、copyrightも<p>で書く。
CSSでは、
- footer p{
- .footer p{
でクラスの有無でCSSを書いているんだけど、なぜか両方ともに対応していしまう…
似ているから名前を変えたら良さそう。
おわりに
ProgateでサクサクすすめていたからHTML&CSSなんて簡単って思って実際にやってみたものの…
全然進まない。
今日はしっかり8時間とってLP作成に臨んだけど、画像探しも含めてCSSの手順に戸惑う…
効率の良い方法を探しながら、本を読みながらProgateを戻りながら作成しているよりもっと良い方法が今後でそう。
もりけん塾（@terrace_tech）
Thanks：もりけんさん