Webデザイン 【SCSS/CSS🔰】画像に影を付けたい！box-shadowの付け方
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。box-shadowbox-shadowのパラメータは位置、ぼかし、色の3つあれば設定ができる。例：box-shadow: 0 7px 25px rgba(#000...
CSS
Webデザイン Webデザイン 【SCSS/CSS🔰】共通設定rootで色の設定をする際、透明度のrgbaは10進数の方で記載せよ！
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。問題色が反映されない。root:｛--color-red:rgba(#ff0000,0.5)｝16進数ではなく、10進数の方で設定をする。root:｛--color...
Webデザイン 【SCSS/CSS🔰】max-width？min-width?どっちを使う？
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。問題max-widthとmin-widthでどっちを使うのか。max-widthとmin-widthとはmax-width：最大サイズ（ここで指定するサイズ以上は大...
Webデザイン 【SCSS/CSS🔰】width:250pxなど固定値を使うタイミングはどんな時？
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。width:250px；など固定値を使うタイミングアイコンロゴ装飾余白タップ領域 アイコンBefore要素やAfter要素などで追加するアイコンなどは固定幅で設定し...
Webデザイン 【SCSS/CSS🔰】width:250pxなど固定値からの卒業。max-width:250px;を使え！
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。問題ボタンサイズなどを固定サイズでなく、可変サイズで作りたい。対策width:100%;max-width:250px;250pxよりも大きくしない。
Webデザイン 【SCSS/CSS🔰】::before、::Afterが効かない！
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。現象疑似要素::before、::Afterを設定しているが表示されない。対策content:"";を確認する。ボーダーなどを入れる場合にはdisplay:inli...
Webデザイン 【SCSS/CSS🔰】疑似クラス/疑似要素 「:」と「::」どっち？と迷ったら…
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。現象疑似要素/疑似クラスを前に記述するコロンの数が1個の時と2個の時とあって、わかりづらい。対策::beforeや::afterは「:」が2個HTMLにはないものを...
Webデザイン 【SCSS/CSS🔰】nth-childってどこのクラスで設定する？
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。やりたい事下のコードの奇数番目の配置を反対にしたい。 <ul> <li> <article> <div> <img/> </div> <div> <h3></h3>...
Webデザイン 【SCSS/CSS🔰】position:absoluteを使うと、勝手に改行されてしまう問題
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。現象.top-kv-title { display: flex; flex-direction: column; align-items: center; gap:...
Webデザイン 【SCSS/CSS🔰】KVで画面いっぱいに画像を表示させたい！vhではなくdvhを使う
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。画面いっぱいに画像を表示させる方法 background-image: url(/img/bg-top-kv.png); background-size: cove...