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

Webデザイナーじゃない日記サムネイルWebデザイナーじゃない日記
この記事は約3分で読めます。

スポンサードサーチ

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

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

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

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

という事でした。

cssやjsはあくまで装飾。

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

前回の反省を生かしたcss作成

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

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

余白の指定はpxを避ける

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

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

アニメーション実装を考慮した画像のパーツわけ

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

例えば、こんな画像。

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

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

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

スポンサードサーチ

今日のシェアハピ備忘録

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

footerのコピーライト文、「All rights reserved」は書いてもいいが意味はない

aタグにつける基本的な4つの擬似クラスの順番

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

  1. a:link⇛何もしていない時の色
  2. a:visited⇛既にクリックしてある時の色
  3. a:hover⇛マウスが上に乗った時の色
  4. a:active⇛クリックした瞬間の色

で、実はこの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は1回くらいしか実装したことがなので、明日勉強しながら実装します。

コメント

タイトルとURLをコピーしました