CSS

Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったこと、気づいたこと②

前置き

前回の続きです🍀

今回は困ったこと、
気づいたこと、
次やってみたいこと…
ごちゃ混ぜです💫


line-height

単位指定はしない方が良い

今まで単位を指定して書いていたのですが、
基本的には指定しない方が良さそうです。
【CSS】CSSのline-heightで単位を指定しない理由

親要素でline-heightに単位指定すると
子、孫に継承されるということで
予期せぬ余白が出現する可能性が。

・子で上書きすれば良い、
・そもそも親全体で単位指定することがない
などありそうですが🤔💭
単位指定しないのが無難ですね。


今まで指定していた理由

デザインデータを見ると
font-size / line-heigh = 1.5 = 150%
line-height: 150%;
とそのまま書いてくれているからです。
変えても1.5emです。
コピペしている方も
多いのではないでしょうか🧸💭

単位を指定しない場合は
emの時の数値と同じです。
今回の場合は
line-height: 1.5;
でOKです⭕️


デザイン通りの余白にならない

line-heightを設定することで
marginをデザイン通りにしてもずれることがあります。
その余白、本当にデザイン通り?行間の余白も意識しよう!

簡単に上のfigmaデータを
例にすると…
font-size: 24px;
line-height: 36px;
なので余白は36 - 24 = 12px
それが上下に半分ずつあるので
6pxずつの余白があります。
6px + 24px + 6px = 36px

margin-top: 16px;
となっていたら
6px引かないとダメ❌
ということですね💡

フォントによって行間が違うので
display: block;が必要なようです。

計算不要?

こちらを設定していたせいか、
🔼の計算をすると
逆にデザインとずれてしまう状態でした。
結局デザインの通りのmarginにした方が
見た目が合っていました。


z-index

今回1番こまったのがz-index💦

キービジュアルと重なる
ヘッダーのハンバーガーに
z-indexを指定すると
ページ全体のリンクが押せなくなったり…

背景画像と重なるテキストに
プラスの値を設定しても効かず
背景画像をマイナスに設定したり…

色んな疑問が浮かび、
こちらを参考にしました🔍📚
【CSS】z-index が効かない場合の注意点
CSSのz-indexで要素の重なりを自由に調整する方法 | 侍エンジニアブログ


z-indexを指定する際のポイント

  • スタック要素にする必要がある
    position指定(static以外のrelativeなど)かつ
    z-indexauto以外の要素
    fixedの場合はz-indexを指定しなくてもOK⭕️
  • z-indexを指定しない場合はフラットな0
    なのでz-index: 1;を指定して時点でその要素が1番上になる
  • z-indexの影響があるのは親子関係(入れ子)の場合
  • 親要素がスタック要素になっていたら子には効かない
  • マイナスの値は設定しても良さそう

ul>liの余計なmargin-topをpositionでずらす

limargin-topつけると
上段が余計なので
position: relative;
その分を上にずらします🍀

だからliの下にある要素も
その分の余白にすると綺麗です✨

デザインによっては
そうしたくない
ということはあると思いますが、
コード書ける人がデザインやった方が
こういう部分でスムーズなのかも🌟


calcの罠

flexで余白をつけたい時などに使用🍒

横の余白を12pxずつにしていて
1行に2つあるので12p×2つ = 24px
これを100%から引いて
3で割ったwidthにしたい…🧸💭

微妙に書き方が違うだけで
効かなくなる罠が⚠️

式で半角スペースを入れないと効かない…
1回経験したら結構印象に残ります💡

⬇️視覚的に、直感的に比較👀

NG❌

max-width: calc((100% -24px) / 3);
max-width: calc((100%-24px) / 3);

OK⭕️

max-width: calc((100% - 24px) / 3);


index.htmlをFirebase Hostingへデプロイ

今までNuxtのプロジェクトで
デプロイしたことはありました💡

素のHTML/CSS/JavaScriptの場合も
ほとんど変わらず簡単にできました🙌💕

Firebase CLIのインストールで
npmコマンドが使用できないため
こちらを使用しました
Firebase CLI をインストールする

curl -sL https://firebase.tools | bash

あとは以前の記事と同じ手順です。
Nuxtと違うのは
publicにファイルの移動が必要です💫☝️

フレームワークなしverとして
手順を別記事にしようと思います💡


カレント表示

現在いるページを分かるようにするやつです🌟
今回はnavでやってみたかったのですが、
CSSだけでは難しそうです。
JavaScriptがおそらく必要。
ページネーションにも使えるので、
理解しておきたいところ。

Nuxtだったらルートで簡単にできるのに…❗️笑

[JavaScript] 現在のURLやパラメタを取得する方法(Location)
ある階層にいる時にはカレント(アクティブ)表示のCSSを追加するjavascript


手順の見直し

前回の「コードを書く前に」で
最初に構成を考えるようにしていたものの、
途中で色んな手直しをしていました🌀

yossy

あぁ〜やっぱ難しいわぁ…

と思った時に
Masakiさんのこんなツイートを発見👀

yossy

そうか!!!

HTMLさえ
しっかり書けていれば
どうにでもなる!!✨

難しいと考えてしまう癖があったので、
ハッとしました😳

自分の書き方を見直してみると、
PC表示のセクション1つ完成
→スマホのデザインをチェック💥

いや、途中まで見ているのですが、
難しいと思うが故に
後回しにしていた気がします。。。

だから後から
div必要だった、
画像はcssであてないとだ…
修正、修正…
難しいなぁ〜〜〜😖💦
でした。

このツイートを見てから
最低限の簡単なCSSだけ考えて
1つの要素を置いてすぐに
レスポンシブを考えて
HTMLを書き足すようにしました❗️

こうすることで
HTMLの要素がスムーズに書けて、
レスポンシブが頭の中で
出来上がっている状態に❣️

手順だけでいうなら
コーディング動画を見れば
わかりますが、
意識が邪魔をする…😈

意識を変えて
手順を見直せる
良いきっかけになりました✨


まとめ

試行錯誤しながら、
色んなページを参考にしながら
慣れてきました🙌✨

ただこれも🔼「手順の見直し」で
意識が変わったからかもしれません✨

-CSS
-,

© 2021 aLiz Nuxt