のの | Webコーダー

人にも、コードにも、やさしいWebコーダー｜後から触れる人にも配慮した保守性の高い実装と細やかな確認で、制作を支えます｜事務×元栄養士の視点｜HP・LP・WordPress制作｜HTML/CSS/SCSS/JS｜Figma｜毎日CSS発信｜ご相談はDMへお願いします

[のの | Webコーダー @nono_coder]

＼アイコンとヘッダーを変更しました／

より「Web coder」とひと目で伝わるデザインにアップデート！

【変更のポイント】

① ヘッダー：
「Web coder」「Bloom code.」の2行で軸を明確化

② アイコン：一瞬で覚えてもらえる視認性を重視

新ビジュアルもおぼえていただけたらうれしいです✨

[のの | Webコーダー @nono_coder]

DAY591：

【同じ色を何度も書いていませんか？】

ボタン、見出し、リンク

色を直接書くと、
変更時に修正箇所が増えます

:root {
--color-primary: #286b58;
}

.button {
background: var(--color-primary);
}

共通する値は変数にまとめる
変更しやすさも設計の一部です🌱

#CSS #Web制作

[のの | Webコーダー @nono_coder]

DAY590：

【文字の読みやすさは
font-sizeだけじゃない】

文字を大きくしても
なんだか読みにくい

そんなときは line-height も確認

body {

line-height: 1.7;

}

文字の大きさだけでなく
行間も読みやすさを左右します

デザインを再現するだけでなく
読む人のことも考えたい

#CSS #Web制作

[のの | Webコーダー @nono_coder]

DAY589：

【width:100%なのに、はみ出す？】

要素に width: 100%; を指定
さらにpaddingやborderを追加

すると
親の幅を超えることがあります

そんなときに役立つのが

*,
*::before,
*::after {
box-sizing: border-box;
}

幅の計算ルールそろえると
レイアウトの管理が便利に

#CSS #Web制作

[のの | Webコーダー @nono_coder]

DAY588：

【flexで中身がはみ出すとき】

親に display: flex; を指定したのに
子要素の文字がはみ出す

そんなときは子要素に

min-width: 0; が必要な場合が

.card__content {
min-width: 0;
}

幅を調整する前に
Flexアイテムの最小幅も確認

原因がわかると修正もシンプルに

#CSS #Web制作

[のの | Webコーダー @nono_coder]

DAY587:

【CSSが反映されないとき
セレクタを増やす前に】

指定を書いたのに変わらない
強いセレクタを追加したくなりませんか？

原因は詳細度だけとは限りません

・CSSファイルが読み込まれているか
・指定が上書きされていないか
・セレクタが対象に合っているか

この順に確認

#Web制作 #CSS

[のの | Webコーダー @nono_coder]

DAY586:

【スマホで横にはみ出す時
幅を縮める前に】

PCでは問題ない
スマホで見ると横にスクロールする…

そんな時は
原因の要素を探す

DevToolsで要素を選び
画面の外にはみ出している部分を確認

width: 100vw や固定幅が
原因になっていることも

横にはみ出す要素を1つ探す

#Web制作 #CSS

[のの | Webコーダー @nono_coder]

DAY585：

【影をつけたのに、
なんだか安っぽく見える…】

濃い影を足す前に
ぼかしと透明度を見直す

.card {
box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}

今日の一歩は
影を少し薄くして見比べること🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY584：

【PCでは動くのに、
スマホではホバーがうまくいかない？】

スマホはマウス操作ではないため、
hoverだけに頼ると使いにくいことも

大事な情報や操作は
タップでも使える設計に

今日の一歩は
スマホで実際に触って確かめること🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY583：

【色を変えるたびに
CSSを何か所も直していませんか？】

同じ色を何度も使うなら
CSS変数にまとめる方法も

:root {
--main-color: #c30e46;
}

.button {
background: var(--main-color);
}

今日の一歩は
よく使う色を1つ変数にしてみる🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY582：

【アイコンと文字、
並べたのに
なぜか高さが揃わない…】

そのズレ、vertical-alignで
調整できるかもしれません

.icon {
vertical-align: middle;
}

ただし、inline要素などに使う指定です

今日の一歩は
アイコンと文字の並びを確認すること🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY581：

【CSSを追加する前に、1つだけ試して】

思った位置に要素が来ないと
CSSを書き足したくなりませんか？

まずはDevToolsで
その要素に適用されているCSSを確認

打ち消し線がついた指定は
別のルールに上書きされているかも

今日の一歩は
「Computed」を開いてみること🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY580：

【ホバーした瞬間に
ボタンの色が急に変わる】

transitionを使うと
変化をなめらかにできます

.button {
transition: background-color 0.3s ease;
}

動きをつけすぎず

心地よい変化に🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY579：

【文字に影をつけたら
読みにくくなってしまう】

影は濃さとぼかしを
控えめに調整

.title {
text-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}

目立たせることより

読みやすさを優先🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY578：

【ボタンを押したときの
青い枠が気になる】

outlineを消すだけでなく
フォーカス時の見た目を整える

button:focus-visible {
outline: 2px solid #c30e46;
outline-offset: 3px;
}

見た目と操作のしやすさ

どちらも大切に🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY577：

【CSSで「中央揃え」にしたのに
文字が中央に来ない】

文字を中央にしたいなら
text-alignを確認

.title {
text-align: center;
}

要素そのものの位置と
中の文字の位置は別ものです🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY576：

【画像の下に
謎のすき間ができる】

imgをblockにすると
解消することがあります。

img {
display: block;
}

画像がinline要素として扱われることで
下にすき間ができる場合があります🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY575：

【要素を画面の中央に置きたいのに
微妙にズレてしまう】

上下左右の中央なら
gridもシンプル。

.box {
display: grid;
place-items: center;
}

縦横まとめて中央揃えできます。

覚えておくと便利な1行です🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY574：

【画面いっぱいの背景なのに
横幅だけ微妙にはみ出す】

100vwを使っているなら
一度確認してみて。

vwはスクロールバーの幅まで
含む場合があります。

「100%」との違いを知っておくと
原因を見つけやすくなります🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY573：

【文字の途中で
不自然に改行されてしまう】

改行を禁止したい部分には
white-space: nowrap;

.price {
white-space: nowrap;
}

料金や日付など
途中で切りたくない文字に便利です🌱

#CSS
#Web制作

[のの | Webコーダー @nono_coder]

DAY572：

【カードの文字数が違うと
ボタンの位置が揃わない】

カード内をflexにして
ボタンを下へ送る方法もあります。

.card {
display: flex;
flex-direction: column;
}

.card__button {
margin-top: auto;
}

カードの高さが違うときの
整列に使えます🌱

#CSS
#Web制作