SCSS

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。アイコン＋タイトルで高さが合っていない場合アイコン＋タイトルっておしゃれなんだけれど、アイコンの高さと文字の高さが合っていない時がある。その場合の対処法。まずは、通...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。timeタグはインライン要素<time datetime="2026-08-11" class="top-blog-date">2026/08/11</time>こ...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。結論：articleタグの中にaタグ<article> <img src="..." alt="..."> <h2>記事タイトル</h2></article>このよ...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。paddingでボタン作る時のメリット 文字の数が違うものでも、自動的に幅が調整される。display:flex;で作らず、display: inline-flex...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。スマホは縦長、PCは横長 PCは画像そのまま使うのはわかるけれど、じゃあスマホはどうするの？横向きの画像を縦向きのでデバイスでも使う方法。横幅100％を確保しつつ、...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。子要素だけで左右中央配置にするには  width: fit-content;  margin: 0 auto;を使う。ブロック要素だけど、インラインのような感じで使...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。flexのjustify-content: space-between;とは左右端に要素を配置。あとは均等に要素を配置する。｜□　　　　　□｜こんな感じ。gridで...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。box-shadowbox-shadowのパラメータは位置、ぼかし、色の3つあれば設定ができる。例：box-shadow: 0 7px 25px rgba(#000...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。問題色が反映されない。root:｛--color-red:rgba(#ff0000,0.5)｝16進数ではなく、10進数の方で設定をする。root:｛--color...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。問題max-widthとmin-widthでどっちを使うのか。max-widthとmin-widthとはmax-width：最大サイズ（ここで指定するサイズ以上は大...