CSSで使う定番の表現

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フォントで明朝体ならこれしかない感じ

https://web-bruno.com/google-japanese-font/

ホバーで色を薄くする

.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。

https://www.webcreatorbox.com/tech/object-fit

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　黒丸
list-style-type: circle　白丸
list-style-type: square　黒四角

http://www.htmq.com/style/list-style-type.shtml

オリジナルのリストのマーカー文字

子要素の横幅に合わせたい

.parent-box {
    width: fit-content;
}

よくあるバグ

要素が思い通りの位置にならない

• BOMなどの余計なコードが出力されていないか
• 周囲のコンテンツが背面にないか

vertical-alignが効かない

vertical-alignはinline要素かtable-cell要素にしか効かない。