Webデザイナーじゃない日記 Day 23『常に、前回の反省を生かすコーディングをする』

Webデザイナーじゃない日記

2019.09.10

この記事は約3分で読めます。

Contents

文章構造を踏まえたhtmlの作成

先日、ツイッターでチラッと「htmlはあくまで文章」みたいな事を見つけました。

その言葉を私なりに解釈して出た答えは、

「例えばflexさせるために、文章の順番をhtml上で変えるのはよくない」

という事でした。

cssやjsはあくまで装飾。

flexであればorderで順番は変えられるので、今回は、cssがなくなっても文章を上から読んで成り立つようにhtmlを組み立てました。

前回は、途中までcssで書いて途中からsassにするとか訳の分からないやり方をしてしまって時間がかかったので、今回は最初からsassで書き始めました。

そんなに長くないLPなので、@importは使わず、レスポンシブ用の@mixinだけで行くことにしました。

あと前回のLPコーディング課題として、marginやpaddingやたらpx指定でつけてしまっていたので、レスポンシブ化する時にめちゃくちゃ面倒くさかったです。

今回はできるだけemや%で指定していこうと思います。

htmlファイルを作るときに、合わせて画像ファイルも書き出す作業があるのですが、画像をパーツでわけて書き出すか、まとめて書き出すか考えながらやったので時間がかかってしまいました。

例えば、こんな画像。

もし小銭だけ後から現れるアニメーションをつけたかった場合、これを１つの画像ではなく、給料袋の画像と、小銭の画像でわけで書き出さないといけません。

そういうアニメーションを考えながらやったので、時間がかかりました。

この行程も、紙にまとめて書き出してから実装した方が効率よかったな、と反省です。

ここにすぐに見出しを書いちゃダメなのよね。一応ワードプレスでも気をつけます。

Web兄さんという方のブログ参照。

cssでaタグ全体に次の4つの擬似クラスを書くように教わってきました。

で、実はこの４つの擬似クラスには正しい書き順がありました。

…つっても、↑に書いた順番通りがそのままで正解です。笑

昔は、リンクといえば青でしたが、最近はおしゃれなサイトばかりで、ほとんど擬似クラスで色を変える所は少ないように感じます。

ですので、そういう風に、特にaタグのアクションで色などを変えない場合は、

a:link,
a:visited,
a:hover,
a:active{
color:#fff;
text-decoration:none;
}

みたいな感じで連結して書くのでオッケーだと思います。

page-topとかではなく、pageTopとかのような、つなぎ単語の頭文字を大文字にするのを、キャメルケースと言います。

jsだと使われやすい気がします。ちょろっと調べたら、jsだとハイフンとマイナスで区別が付けにくいという理由があるそうです（納得）。

ちなみに私はハイフンでつなげる感じです。

あと、個人的な失敗談として、長いクラス名を打つのが面倒で、一時期、略語とかでクラス付けしていましたが（background⇛bgなど）、後からコレなんだ？と分からなくなったり、似たような文字列のものと間違えて気付かなかったりしました。

今では、打つのが面倒でもクラス名はしっかり付けるようになりました。

VSCodeならクラス名を補完してくれる拡張機能もありますよ！（VSCode布教しすぎ）

今回のLPは斜めで背景が切れるcssがセクションごとに入っている感じです。

ただ今まで背景斜めのcssは１回くらいしか実装したことがなので、明日勉強しながら実装します。