見た目

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

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

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。親要素で固定サイズにし、子要素を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は親要素の幅を参照している...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。ボタンのサイズは固定【HTML】<div> <a>ボタン</a></div>【CSS】a{width: 260px;height: 55px;}widthとheig...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。要素を縦並びにする際の注意【HTML】<div> <h2></h2> <p></p> <div> <a>ボタン</a> </div></div>縦並びで全ての要素を...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。箱はpadding、個別の要素はmargin【HTML】<div><h2></h2><p></p></div>divでpaddingを使って空け、h2やpなどの個別...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。端末によって1行/複数行を切り替える方法spanとdisplay:block;を活用する。【HTML】<p><span>文章１</span><span>文章２</s...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。見た目のセンター両サイドのpaddingは同じ値で表示されているものは中央であるが、なんとなく真ん中に寄っていない。そんな場合の対処方法は寄せたい方向calc(pa...