雑記ブログ

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。現象.top-kv-title { display: flex; flex-direction: column; align-items: center; gap:...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。画面いっぱいに画像を表示させる方法 background-image: url(/img/bg-top-kv.png); background-size: cove...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。現象<small class="footer-copy">©2026 yukimi.com</small>.footer-copy { margin-to...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。現象中央揃えにする方法として、margin: 0 auto;があるがこれが効かない。対象方法インライン要素かどうか確認をする。margin: 0 auto;はブロッ...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。現象画像、タイトル、テキスト、ボタンなどの構成のカードで、テキストの行数が片や１行、片や２行とバラバラな時、全体の高さもバラバラになってしまう。ボタンの位置が上につ...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。現象共通用のボタンを作っており、そこではサイズを指定している。ボタン単体ではサイズを維持するが、画像、テキスト、ボタンなどに組み込む際ボタンの幅が縮む。原因親のクラ...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。親要素で固定サイズにし、子要素をobject:fitで合わせるdiv-img{aspect-ratio: 4/3; overflow: hidden; img { ...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。grid-column: 1 / -1;左端から右端まで全部使う！例↓grid-column: 1 / 2;| □ | 　| 　|grid-column: 1 / ...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。widthは親の幅を、heightは子の高さを参照しているwidth:100%。heightの記載なし。このようなケースがあるがwidthは親要素の幅を参照している...