Webデザイン 【SCSS/CSS🔰】スマホとPC同じ画像を使ってKVづくり
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。スマホは縦長、PCは横長 PCは画像そのまま使うのはわかるけれど、じゃあスマホはどうするの？横向きの画像を縦向きのでデバイスでも使う方法。横幅100％を確保しつつ、...
Webデザイン Webデザイン 【SCSS/CSS🔰】ブロック要素だと全体が、インライン要素だと左に寄る…子要素だけで左右中央配置する方法
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。子要素だけで左右中央配置にするには width: fit-content; margin: 0 auto;を使う。ブロック要素だけど、インラインのような感じで使...
Webデザイン 【SCSS/CSS🔰】flexのjustify-content: space-between;と同じことをgridでやりたい！
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。flexのjustify-content: space-between;とは左右端に要素を配置。あとは均等に要素を配置する。｜□ □｜こんな感じ。gridで...
Webデザイン 【SCSS/CSS🔰】画像に影を付けたい！box-shadowの付け方
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。box-shadowbox-shadowのパラメータは位置、ぼかし、色の3つあれば設定ができる。例：box-shadow: 0 7px 25px rgba(#000...
Webデザイン 【SCSS/CSS🔰】共通設定rootで色の設定をする際、透明度のrgbaは10進数の方で記載せよ！
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。問題色が反映されない。root:｛--color-red:rgba(#ff0000,0.5)｝16進数ではなく、10進数の方で設定をする。root:｛--color...
未分類 かながわとくとくキャンペーン！×川崎市プレミアム商品券を抱き合わせできるのか？
先日、かながわとくとくキャンペーンが始まり、結構活用しています。何と言っても特に事前に申請などが不要で、各種バーコード決済を利用するだけで自動的に付与されるので、使い勝手がとても良いです。そしてもう一つのキャンペーン。私は川崎市民で、川崎市...
未分類 川崎市プレミアムデジタル商品券！専用券使える意外なお店5選！Part4
令和8年度川崎市プレミアムデジタル商品券だけど、12月24日まで使用できるとはいえ使い道に悩むのは専用券。えっ…ここ専用券使えるお店なの!?というところをピックアップしていますので参考にしてみてください。Part1～Part3はこちら令和8...
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よりも大きくしない。