CSSで使う定番の表現
2022-12-31T02:28:19.390Z
CSSを使ったよく使う定番の表現を、毎回ググらなくていいように最低限のデザインだけで、極力少ないコードでメモ。はにわまんさんのブログも参考に→https://haniwaman.com/lp-coding/
定番の font-family
環境に左右されないやつ
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
http://unitopi.com/font-family-css/
Googleフォント(日本語)
font-family: "Noto Sans Japanese"; // 安定の定番
font-family: "Mplus 1p"; // 結構綺麗でファンも多い
font-family: "Sawarabi Mincho"; // Googleフォントで明朝体ならこれしかない感じ
ホバーで色を薄くする
.button-wrap:hover {
opacity: 0.8;
}
flexで均等割付
ul-wrap {
display: flex;
justify-content: space-around;
}
flexで中央寄せ?
ul-wrap {
display: flex;
justify-content: center;
}
画像をボックスに満たす(object-fit)
いい感じに満たす object-fit: cover。
右下でトリミングする時は object-position: 100% 100%;
。
横幅が3:7の横並びボックスの場合
記事のアーカイブページのリストでよくあるような左に画像、右にテキストの場合。
余白できても良いから全て表示 object-fit: contain。
table の横スクロール
table {
display: block;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
ただし何かうまくいかなかったので tbody を display: table とする邪道で対応した。
table td {
white-space: normal;
}
@media screen and (max-width: 768px) {
table {
table-layout: auto;
overflow-x: scroll;
display: block;
width: 100%;
}
tbody {
display: table;
width: 796px;
}
}
https://qiita.com/ymeeto/items/f165576f49f37e28e253
横スクロール(カルーセル)
.horizontal-list {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.??? {
}
.??? img {
}
.??? a {
}
絶対位置で固定系
positionプロパティで指定する系です。基本、固定フッターなどを付けるときはfixed
を使いしかないよう。
static
初期値。top、bottom、left、rightは適用されない。
relative
相対位置。
absolute
ウィンドウ全体の左上が基準位置。ただし親ボックスにrelativeかfixedが指定されている場合には、親ボックスの左上が基準位置となる。
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたまま。
上下中央寄せ
p要素の上下中央寄せ
.button-wrap {
height: 112px;
}
.button-wrap .button {
height: 100%; // いらないかも
}
.button-wrap .button p {
height: 100%; // いらないかも
line-height: 112px;
}
block要素の中のblock要素の上下中央寄せ
.division-box-in { // これはblock要素
position: relative; // いらないかも
top: 50%;
transform: translateY(-50%);
}
下揃え
flexboxで並べたliの中の要素を一部だけ下揃えしたいケース。block要素なら
.parent-box {
height: 200px;
position: relative;
}
.child-box {
position: absolute;
bottom: 0;
}
ただしposition: absolute
を当てると内包するコンテンツの高さがなくなるので、親要素にheight
を当てるか、padding-bottom: 子要素の高さ
とスペースを空けてやるかをせねばならない。
table-cellを使うともっとキレイにできるかもだけど、少し調べた限りこの方法ばかりでてきた。
https://www.gravity-works.jp/css_blog/2009/08/div.html
ulの子要素の高さを揃える
基本はulにdisplay: flex
を当てればそろう。それが使えない場合は親にdisplay: table
, 子にdisplay: table-cell
を当てると良いらしい。
p要素の中で改行
<br>
は使いたくないので<span class="break"></span>
でくくる。しかしこれもあまり美しくないかもしれない。
.break:before {
content: "\A";
white-space: pre;
}
リストのマーカー文字(list-style-type)
list-style-type: disc 黒丸
http://www.htmq.com/style/list-style-type.shtml
list-style-type: circle 白丸
list-style-type: square 黒四角
オリジナルのリストのマーカー文字
子要素の横幅に合わせたい
.parent-box {
width: fit-content;
}
よくあるバグ
要素が思い通りの位置にならない
- BOMなどの余計なコードが出力されていないか
- 周囲のコンテンツが背面にないか
vertical-alignが効かない
vertical-alignはinline要素かtable-cell要素にしか効かない。