color picker component

14777 ワード
TIL CSS html テキストリンク

1.概要


青色のカラーボックスにカーソルを合わせると、#709 fb 0のカラーセレクタ素子が作成されます.


2.コード


HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  </head>
  <body>
    <div class="outerBox">
      <div class="boxWrapper">
        <div class="colorBox">
          <span class="colorName">#709fb0</span>
        </div>
      </div>
      <div class="info">
        <button>
          <i class="fas fa-heart"></i>
          <text class="btnText">451</text>
        </button>
        <text>3days</text>
      </div>
    </div>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}
html, body {
  height: 100%;
}
.outerBox {
  background-color: #ebeef3;
  width: 470px;
  height: 550px;
  border-radius: 10px;
  margin: 20px auto;
}
.boxWrapper {
  display: flex;  
  height: 450px;
  justify-content: center;
  align-items: center;
}
.colorBox {
  background-color: #709fb0;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  position: relative;
}
.colorName {
  position: absolute;
  left: 0;
  bottom: 10px;
  color: white;
  background-color: #527785;
  padding: 2px 12px;
  opacity: 0;
}
.colorBox:hover .colorName {
  opacity: 1;
}
.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 25px 45px;
}
button {
  background-color: #ebeef3;
  font-size: 25px;
  font-weight: bold;
  border: 2px solid #b6b8b8;
  border-radius: 12px;
  text-align: center;
  padding: 15px 5px;
  cursor: pointer;
}
i {
  margin: 0 8px;
}
.btnText {
  margin: 0 8px;
  font-size: 25px;
  font-weight: bold;
}
text {
  font-size: 25px;
  font-weight: bold;
}

3.知っていることや感じていること


HTML


  • いつも構造を先に見る習慣を身につける.一番外側のラベル(クラス)から一番奥のラベル(クラス)まで.重要なのは、Wireframingのように、これらのブロックを組み合わせて順序を設定し、コードを簡潔に書くことです.順序が正しくないと、メンテナンスが困難になるだけでなく、CSSコードを記述するプロセスも複雑になります.

  • fontawesome CDNコードを忘れないでください.アイコンを使用することが発生した場合、これは必要なコードです.<head>にちゃんと貼ってあります.

    • CSS


  • Universalセレクタとして*を常に使用し、属性値としてbox-sizing: border-box、padding: 0px、margin: 0pxを使用することを忘れないでください.各ブラウザには、デフォルト値に設定されたpadding値またはmargin値があるためです.

  • html、bodyラベルには、属性値としてheight: 100%を加えることが望ましい.画面全体を埋め尽くし、スペースに制限されずに画面の中央にコンテンツを配置します.

  • 内容を集中的に揃えたい場合は、必ず幅と高さの値を記入してください.これまでの内容ではmargin: auto値やalign-items: center値などと書かれていましたが、padding値をあげると中央ソートのない移動を体験することがよくありました.コンテンツの横方向と縦方向が指定されていないため、コンテンツが移動しています.いつまでも忘れないでください.
  • position: absoluteプロパティを使用する場合は、ラベルを包む親ラベルにposition: relativeプロパティを追加できます.
    • タヌキ匹
    画像をbyte