見た目

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。スマホは縦長、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：最大サイズ（ここで指定するサイズ以上は大...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。width:250px；など固定値を使うタイミングアイコンロゴ装飾余白タップ領域 アイコンBefore要素やAfter要素などで追加するアイコンなどは固定幅で設定し...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。問題ボタンサイズなどを固定サイズでなく、可変サイズで作りたい。対策width:100%;max-width:250px;250pxよりも大きくしない。

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。現象疑似要素::before、::Afterを設定しているが表示されない。対策content:"";を確認する。ボーダーなどを入れる場合にはdisplay:inli...

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。現象疑似要素/疑似クラスを前に記述するコロンの数が1個の時と2個の時とあって、わかりづらい。対策::beforeや::afterは「:」が2個HTMLにはないものを...