前置き
前回の続きです🍀
今回は困ったこと、
気づいたこと、
次やってみたいこと…
ごちゃ混ぜです💫
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にした方が
見た目が合っていました。
|
1 2 3 |
html { line-height: 1.15; } |
z-index
今回1番こまったのがz-index💦
キービジュアルと重なる
ヘッダーのハンバーガーにz-indexを指定すると
ページ全体のリンクが押せなくなったり…
背景画像と重なるテキストに
プラスの値を設定しても効かず
背景画像をマイナスに設定したり…
色んな疑問が浮かび、
こちらを参考にしました🔍📚
【CSS】z-index が効かない場合の注意点
CSSのz-indexで要素の重なりを自由に調整する方法 | 侍エンジニアブログ
z-indexを指定する際のポイント
- スタック要素にする必要がある
position指定(static以外のrelativeなど)かつz-indexにauto以外の要素fixedの場合はz-indexを指定しなくてもOK⭕️ - z-indexを指定しない場合はフラットな0
なのでz-index: 1;を指定して時点でその要素が1番上になる - z-indexの影響があるのは親子関係(入れ子)の場合
- 親要素がスタック要素になっていたら子には効かない
- マイナスの値は設定しても良さそう
ul>liの余計なmargin-topをpositionでずらす
liにmargin-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
手順の見直し
前回の「コードを書く前に」で
最初に構成を考えるようにしていたものの、
途中で色んな手直しをしていました🌀
あぁ〜やっぱ難しいわぁ…
と思った時に
Masakiさんのこんなツイートを発見👀
そうか！！！
HTMLさえ
しっかり書けていれば
どうにでもなる！！✨
難しいと考えてしまう癖があったので、
ハッとしました😳
自分の書き方を見直してみると、
PC表示のセクション1つ完成
→スマホのデザインをチェック💥
いや、途中まで見ているのですが、
難しいと思うが故に
後回しにしていた気がします。。。
だから後からdiv必要だった、
画像はcssであてないとだ…
修正、修正…
難しいなぁ〜〜〜😖💦
でした。
このツイートを見てから
最低限の簡単なCSSだけ考えて
1つの要素を置いてすぐに
レスポンシブを考えて
HTMLを書き足すようにしました❗️
こうすることで
HTMLの要素がスムーズに書けて、
レスポンシブが頭の中で
出来上がっている状態に❣️
手順だけでいうなら
コーディング動画を見れば
わかりますが、
意識が邪魔をする…😈
意識を変えて
手順を見直せる
良いきっかけになりました✨
まとめ
試行錯誤しながら、
色んなページを参考にしながら
慣れてきました🙌✨
ただこれも🔼「手順の見直し」で
意識が変わったからかもしれません✨