【HTML, CSS】CSS Tips

CSS Tips

作ってみて、ナルホドと思った CSS Tips を書き溜める。

プログレスバー

html

<div class="progress">
  <div class="progressBar"></div>
</div>

css

.progress {
  width: 100%;
  height: 20px;
  background-color: gray;
  border-radius: 15px;
}

.progressBar {
  width: 25%;
  height: 20px;
  background-color: red;
  border-radius: 15px;
}

できあがり

.progressBarのwidthの値を変えることで、プログレスバーの進捗度を変更できます。
また、styled-componentsを利用することで、動的にプログレスバーの進捗度が変更できます。

styled-components使用時

const Progress = styled.div`
  width: 100%;
  height: 20px;
  background-color: red;
  border-radius: 15px;
`
const ProgressBar = styled.div`
  width: ${props => props.progress}%;
  height: 20px;
  background-color: red;
  border-radius: 15px;
`
render (
  <Progress>
    <ProgressBar progress={25}></ProgressBar>
  </Progress>
);

要素に画像を重ねたいとき

何かの要素に画像を重ねたい場合、重ねたい画像自身またはその親要素にposition（static以外）とz-indexを指定すればOK

html

<div class="gazouBox">
  <img class="gazou" src="imgのパス" alt="medamayaki">
</div>
<div class="kasanetaiYoso">
　  <p>ここに重ねたい</p>
</div>

css

.gazou {
  position: relative;
  z-index: 1;
  margin: 0 auto -25px;
}

できあがり

Comming Soon