CSSあるある

CSSを使ったよく使う定番の表現を、毎回ググらなくていいように最低限のデザインだけで、極力少ないコードでメモ。

定番の font-family

横並びのナビメニュー

カレントだけ色が変わる

ハンバーガーメニュー

固定フッターメニュー

トップに戻るボタン

ホバーで色を薄くする

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

横スクロール(カルーセル)

.horizontal-list {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.??? {

}

.??? img {

}

.??? a {

}

絶対位置で固定系

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%);
}

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;
}

CSSトラブルあるある

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

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

vertical-alignが効かない

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

0
Translate »