css.1 蛍光ペンを引く

ここでは、大学の講義ノート（例）で使っている、蛍光ペンでマークしたかのようなスタイルを記述しておきます。

赤いマーカー

赤いマーカーは、単純に重要なことをマークする時に使っています。

「色がついて」
「線が引いてあって」
「文字が太い」

の三点を組み合わせています。

.marker-pink {
  color: #c45a5a;
  background: linear-gradient(transparent 70%, #ff66ff 60%);
  font-weight: bold;
}

青いマーカー

青いマーカーは、知識の補足が必要な時に用いています。特に生物系の用語はわからなくなることが多いので、ホバーした時に一言説明が出るようにしています。

.marker-info {
    color: #5C7DC4;
    background: linear-gradient(transparent 70%, #66FFCC 60%);
    font-weight: bold;
    position: relative;
    cursor: pointer;
}
.marker-info:hover:before {
    opacity: 1;
}
.marker-info:before {
  content: attr(aria-label);
  opacity: 0;
  position: absolute;
  top: 30px;
  right: -90px;
  font-size: 14px;
  width: 300px;
  padding: 10px;
  color: #fff;
  background-color: #555;
  border-radius: 3px;
  pointer-events: none;
}

赤いマーカー

青いマーカー

other contents

social