使えるなって技～css編～

2021.09.29 2026.04.06

のんびり燐華

背景色の色に合わせて文字色を白か黒にする

filter: invert(100%) grayscale(100%) contrast(100);

※中間色に関しては可読性が低くなるので気を付ける

GridとFlexの違い

今でもよくわかっていないです。ただ感覚的に、Gridは中身（コンテンツ内）に使うものだと思ってる。Flexは骨組みっていうイメージ。

だから、写真ギャラリーとか一覧表とかは“Grid”、全体的な形作りとかちょっとややこしそうな部分は“Flex”みたいな感じにしとく。

親要素の幅を無視して子要素を全幅にする

width: 100%;
margin: 0 -500%;
padding: 0 500%;

画面左に margin で追いやって、padding で元に戻させる

※ただし、子要素には padding: 0 500%;以外の設定は出来ない
　見栄えが悪くなる

tableの左端（又は上部）を固定する

/*<table>要素の一個上の要素に以下を付ける*/
.hogehoge{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/*<table>要素に以下を付ける*/
.table{
  min-width: 700px;/*随時変更*/
  border-collapse: separate;/*borderが重なって太く見えるから気を付けてね*/
  border-spacing:  0;
  box-sizing: border-box;/*一応*/
}
/*固定したい箇所に以下を付ける*/
.sticky{
  position: -webkit-sticky;
  position: sitcky;
  z-index: 1;
  background-color: #fff;/*必ず何かしらの色は入れること*/

最低限上記の要素があれば動く。クラス名や随時変更箇所は変えること。

また、2～3行に渡って固定したい場合は以下を付けること

.sticky-2retume{
  left: 50px;/*必ずpxにする*/
}

leftの単位は"em"や"rem"も使えなくはないが、若干ずれる可能性があるので”px”の方がいいと思う。3行目からはcalcで足していくのもあり。その時もpxが良き

枠線を付ける場合は以下のようにすると良き

.table{
  border-right:  1px solid #000;/*全体の右側*/
  border-bottom: 1px solid #000;/*全体の下側*/
}
.table td{
  border: 1px solid #000;
  border-right: 0;/*右側の枠線を消す*/
  border-bottom: 0;/*下側の枠線を消す*/
}
.sticky::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #251E1C;
    border-bottom: 0;/*下側の枠線を消す*/
  }