{"id":19309,"date":"2026-07-28T13:57:39","date_gmt":"2026-07-28T13:57:39","guid":{"rendered":"https:\/\/withcode.tech\/media\/?p=19309"},"modified":"2026-07-28T15:00:05","modified_gmt":"2026-07-28T15:00:05","slug":"css-marker-underline","status":"publish","type":"post","link":"https:\/\/withcode.tech\/media\/css-marker-underline\/","title":{"rendered":"CSS\u30de\u30fc\u30ab\u30fc\u30fb\u86cd\u5149\u30da\u30f3\u4e0b\u7dda\u3067\u6587\u5b57\u3092\u5f37\u8abf\u3059\u308b\u30b3\u30d4\u30da\u96c6"},"content":{"rendered":"

<\/p>\n

\n
\n
\"\"\u751f\u5f92<\/span><\/div>\n
\n
\n

\u30d6\u30ed\u30b0\u306e\u91cd\u8981\u306a\u6587\u306b\u86cd\u5149\u30da\u30f3\u98a8\u306e\u30de\u30fc\u30ab\u30fc\u3092\u5f15\u304d\u305f\u3044\u3093\u3067\u3059\u304c\u3001\u3069\u3046\u3084\u308b\u306e\u304c\u7dba\u9e97\u3067\u3059\u304b\uff1f<\/strong><\/p>\n

<\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\"\"\u30da\u30f3\u535a\u58eb<\/span><\/div>\n
\n
\n

linear-gradient\u3092\u80cc\u666f\u306b\u4f7f\u3046\u306e\u304c\u5b9a\u756a\u3060\u3088\uff01\u4e0b\u534a\u5206\u3060\u3051\u8272\u3092\u5857\u308c\u3070\u3001\u672c\u7269\u306e\u86cd\u5149\u30da\u30f3\u3063\u307d\u304f\u306a\u308b\u3002\u30b9\u30af\u30ed\u30fc\u30eb\u3067\u5f15\u304b\u308c\u308b\u6f14\u51fa\u3082\u4eca\u65e5\u306f\u898b\u305b\u308b\u306d\u3002<\/strong><\/p>\n

<\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n

\u300c\u30d6\u30ed\u30b0\u3084LP\u306e\u30c6\u30ad\u30b9\u30c8\u3067\u3001\u7279\u306b\u91cd\u8981\u306a\u7b87\u6240\u306b\u86cd\u5149\u30da\u30f3\u98a8\u306e\u30de\u30fc\u30ab\u30fc\u3092\u5f15\u304d\u305f\u3044\u300d\u300ctext-decoration\u306eunderline\u3060\u3068\u7d30\u3059\u304e\u308b\u3001\u592a\u304f\u3057\u305f\u3044\u300d\u2014\u2014\u30c6\u30ad\u30b9\u30c8\u5f37\u8abf\u306e\u624b\u6bb5\u306f\u8907\u6570\u3042\u308a\u307e\u3059\u304c\u3001\u3069\u308c\u3092\u3069\u3046\u4f7f\u3046\u304b\u3067\u898b\u305f\u76ee\u3068\u52d5\u4f5c\u304c\u5927\u304d\u304f\u5909\u308f\u308a\u307e\u3059\u3002<\/p>\n

CSS\u3067\u30de\u30fc\u30ab\u30fc\u3092\u5f15\u304f\u65b9\u6cd5\u306f\u4e3b\u306b3\u3064\u3042\u308a\u307e\u3059\u3002\u2460 linear-gradient\u3067\u80cc\u666f\u8272\u3092\u4e0b\u90e8\u3060\u3051\u306b\u5f15\u304f\u65b9\u6cd5\u3001\u2461 text-decoration-line\u3092\u4f7f\u3046\u65b9\u6cd5\u3001\u2462 border-bottom\u3092\u4f7f\u3046\u65b9\u6cd5<\/span><\/strong>\u3067\u3059\u3002\u305d\u308c\u305e\u308c\u8907\u6570\u884c\u5bfe\u5fdc\u30fb\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30fb\u88c5\u98fe\u306e\u81ea\u7531\u5ea6\u304c\u7570\u306a\u308b\u305f\u3081\u3001\u7528\u9014\u306b\u5408\u308f\u305b\u3066\u4f7f\u3044\u5206\u3051\u308b\u3053\u3068\u304c\u5927\u5207\u3067\u3059\u3002<\/p>\n

\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u5b9f\u52d9\u3067\u3059\u3050\u4f7f\u3048\u308bCSS\u30de\u30fc\u30ab\u30fc\u30fb\u86cd\u5149\u30da\u30f3\u98a8\u4e0b\u7dda\u306e\u30b3\u30fc\u30c9\u309210\u7a2e\u4ee5\u4e0a\u3001\u52d5\u4f5c\u3059\u308b\u30b5\u30f3\u30d7\u30eb\u3064\u304d\u3067\u89e3\u8aac\u3057\u307e\u3059\u3002SWELL\u306e swl-marker<\/code> \u30af\u30e9\u30b9\u3068\u306e\u95a2\u4fc2\u306b\u3064\u3044\u3066\u3082\u89e6\u308c\u307e\u3059\u3002<\/p>\n

    \n
  • linear-gradient\u3067\u86cd\u5149\u30da\u30f3\u98a8\u30de\u30fc\u30ab\u30fc\u3092\u4f5c\u308b\u57fa\u672c\u30b3\u30fc\u30c9<\/li>\n
  • \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u30b9\u30c3\u3068\u5f15\u304b\u308c\u308b\u30de\u30fc\u30ab\u30fc\u6f14\u51fa<\/li>\n
  • \u8907\u6570\u884c\u306b\u5bfe\u5fdc\u3055\u305b\u308b box-decoration-break \u306e\u8a2d\u5b9a<\/li>\n
  • text-decoration \u306e\u592a\u3055\u30fb\u8272\u30fb\u6ce2\u7dda\u30fb\u30aa\u30d5\u30bb\u30c3\u30c8\u8abf\u6574<\/li>\n
  • border-bottom \u3068\u306e\u9055\u3044\u3068\u4f7f\u3044\u5206\u3051<\/li>\n
  • \u8272\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f310\u7a2e\u4ee5\u4e0a\u306e\u30b3\u30d4\u30da\u30b3\u30fc\u30c9<\/li>\n
  • SWELL\u306e swl-marker \u30af\u30e9\u30b9\u3068\u306e\u95a2\u4fc2<\/li>\n<\/ul>\n
    \n

    3\u3064\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u6bd4\u8f03\u3059\u308b<\/h2>\n
    \"\u30de\u30fc\u30ab\u30fc\u306e\u4f5c\u308a\u65b93\u7a2e\"<\/figure>\n

    CSS\u3067\u30c6\u30ad\u30b9\u30c8\u306b\u4e0b\u7dda\u30fb\u30de\u30fc\u30ab\u30fc\u3092\u5f15\u304f\u4e3b\u306a\u624b\u6cd5\u3092\u6bd4\u8f03\u3057\u307e\u3059\u3002<\/p>\n

    \n\n\n\n\n\n\n\n
    \u624b\u6cd5<\/th>\n\u8907\u6570\u884c\u5bfe\u5fdc<\/th>\n\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/th>\n\u88c5\u98fe\u306e\u81ea\u7531\u5ea6<\/th>\n\u4e3b\u306a\u7528\u9014<\/th>\n<\/tr>\n<\/thead>\n
    linear-gradient\uff08background\uff09<\/td>\n\u25ce\uff08box-decoration-break\u5fc5\u8981\uff09<\/td>\n\u25ce\uff08background-size\u3067\u5236\u5fa1\uff09<\/td>\n\u9ad8\uff08\u8272\u30fb\u9ad8\u3055\u30fb\u4f4d\u7f6e\u81ea\u7531\uff09<\/td>\n\u86cd\u5149\u30da\u30f3\u98a8\u30de\u30fc\u30ab\u30fc<\/td>\n<\/tr>\n
    text-decoration<\/td>\n\u25ce\uff08\u30cd\u30a4\u30c6\u30a3\u30d6\uff09<\/td>\n\u25b3\uff08\u5236\u9650\u3042\u308a\uff09<\/td>\n\u4e2d\uff08\u8272\u30fb\u592a\u3055\u30fb\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\u53ef\uff09<\/td>\n\u4e0b\u7dda\u30fb\u6ce2\u7dda\u30fb\u53d6\u308a\u6d88\u3057\u7dda<\/td>\n<\/tr>\n
    border-bottom<\/td>\n\u25b3\uff081\u884c\u306e\u307f\u5b9f\u8cea\u7684\uff09<\/td>\n\u25ce\uff08width\u3067\u5236\u5fa1\uff09<\/td>\n\u9ad8\uff08\u8272\u30fb\u592a\u3055\u30fb\u30b9\u30bf\u30a4\u30eb\u81ea\u7531\uff09<\/td>\n1\u884c\u30c6\u30ad\u30b9\u30c8\u306e\u4e0b\u7dda\u88c5\u98fe<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
    \n

    \u3010\u57fa\u672c\u3011linear-gradient\u3067\u86cd\u5149\u30da\u30f3\u98a8\u30de\u30fc\u30ab\u30fc\u3092\u4f5c\u308b<\/h2>\n
    \"\u30de\u30fc\u30ab\u30fc\u306e\u4ed5\u7d44\u307f\"<\/figure>\n

    background: linear-gradient()<\/code> \u3092\u4f7f\u3044\u3001\u4e0b\u90e8\u3060\u3051\u306b\u8272\u5e2f\u3092\u5f15\u304f\u306e\u304cCSS\u30de\u30fc\u30ab\u30fc\u306e\u5b9a\u756a\u624b\u6cd5\u3067\u3059\u3002\u900f\u660e\uff08transparent\uff09\u304b\u3089\u8272\u4ed8\u304d\u3078\u306e\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u7e26\u65b9\u5411\u306b\u4f7f\u3044\u3001background-size<\/code> \u3068 background-position<\/code> \u3067\u5e2f\u306e\u9ad8\u3055\u3068\u4f4d\u7f6e\u3092\u5236\u5fa1\u3057\u307e\u3059\u3002<\/p>\n

    \n
    \/* \u57fa\u672c\u306e\u86cd\u5149\u30da\u30f3\u98a8\u30de\u30fc\u30ab\u30fc\uff08\u9ec4\u8272\uff09 *\/\n.marker-yellow {\n  background: linear-gradient(transparent 60%, #ffff00 60%);\n  padding: 0 2px;\n}\n\n\/* \u4f7f\u3044\u65b9\uff1a\u4efb\u610f\u306e % \u3067\u958b\u59cb\u4f4d\u7f6e\u3092\u8abf\u6574 *\/\n\/* 60% \u304b\u3089\u59cb\u307e\u308c\u3070\u3001\u4e0b40%\u306b\u8272\u5e2f\u304c\u5165\u308b *\/\n\/* 50% \u306b\u3059\u308c\u3070\u6587\u5b57\u306e\u4e2d\u592e\u304b\u3089\u4e0b\u306b\u8272\u5e2f *\/\n\/* 75% \u306b\u3059\u308c\u3070\u7d30\u3044\u4e0b\u7dda\u7684\u306a\u30de\u30fc\u30ab\u30fc\u306b\u306a\u308b *\/<\/code><\/pre>\n<\/div>\n
    \n
    <p>\u3053\u306e\u6587\u7ae0\u306e<span class=\"marker-yellow\">\u91cd\u8981\u306a\u90e8\u5206<\/span>\u306b\u30de\u30fc\u30ab\u30fc\u3092\u5f15\u304d\u307e\u3059\u3002<\/p><\/code><\/pre>\n<\/div>\n
    60%<\/code> \u306e\u5024\u3092\u5909\u3048\u308b\u3053\u3068\u3067\u5e2f\u306e\u592a\u3055\u3092\u8abf\u6574\u3067\u304d\u307e\u3059\u300250%<\/code> \u306b\u3059\u308c\u3070\u6587\u5b57\u306e\u4e2d\u592e\u304b\u3089\u4e0b\u534a\u5206\u304c\u8272\u5e2f\u306b\u300175%<\/code> \u306b\u3059\u308c\u3070\u7d30\u3044\u4e0b\u7dda\u7684\u306a\u30de\u30fc\u30ab\u30fc\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
    \n
    \u8272\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f310\u7a2e\u4ee5\u4e0a\u2014\u2014\u30b3\u30d4\u30da\u30b3\u30fc\u30c9\u96c6<\/h2>\n
    \u301001\u3011\u9ec4\u8272\u30de\u30fc\u30ab\u30fc\uff08\u30cf\u30a4\u30e9\u30a4\u30c8\u5b9a\u756a\u8272\uff09<\/h3>\n
    \n
    .marker-yellow {\n  background: linear-gradient(transparent 55%, #ffff4d 55%);\n  padding: 0 2px;\n}<\/code><\/pre>\n<\/div>\n
    \u301002\u3011\u30d4\u30f3\u30af\u30de\u30fc\u30ab\u30fc\uff08\u5973\u6027\u5411\u3051\u30fb\u67d4\u3089\u304b\u3044\u5f37\u8abf\uff09<\/h3>\n
    \n
    .marker-pink {\n  background: linear-gradient(transparent 55%, #ffb3c1 55%);\n  padding: 0 2px;\n}\n\n\/* \u6fc3\u3044\u30d4\u30f3\u30af\uff08\u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\u5bc4\u308a\uff09 *\/\n.marker-hotpink {\n  background: linear-gradient(transparent 55%, #EFBDB7 55%);\n  padding: 0 2px;\n}<\/code><\/pre>\n<\/div>\n
    \u301003\u3011\u6c34\u8272\u30de\u30fc\u30ab\u30fc\uff08\u723d\u3084\u304b\u30fb\u60c5\u5831\u611f\uff09<\/h3>\n
    \n
    .marker-blue {\n  background: linear-gradient(transparent 55%, #b3e0ff 55%);\n  padding: 0 2px;\n}\n\n\/* \u30cd\u30aa\u30f3\u30d6\u30eb\u30fc *\/\n.marker-neonblue {\n  background: linear-gradient(transparent 55%, #00d4ff 55%);\n  padding: 0 2px;\n}<\/code><\/pre>\n<\/div>\n
    \u301004\u3011\u7dd1\u30de\u30fc\u30ab\u30fc\uff08\u6210\u529f\u30fb\u30c1\u30a7\u30c3\u30af\u30fb\u81ea\u7136\u7cfb\uff09<\/h3>\n
    \n
    .marker-green {\n  background: linear-gradient(transparent 55%, #b3f0c8 55%);\n  padding: 0 2px;\n}\n\n\/* \u86cd\u5149\u30b0\u30ea\u30fc\u30f3 *\/\n.marker-lime {\n  background: linear-gradient(transparent 55%, #ccff66 55%);\n  padding: 0 2px;\n}<\/code><\/pre>\n<\/div>\n
    \u301005\u3011\u30aa\u30ec\u30f3\u30b8\u30de\u30fc\u30ab\u30fc\uff08\u6ce8\u610f\u30fb\u8b66\u544a\u30fb\u5143\u6c17\u7cfb\uff09<\/h3>\n
    \n
    .marker-orange {\n  background: linear-gradient(transparent 55%, #ffd699 55%);\n  padding: 0 2px;\n}<\/code><\/pre>\n<\/div>\n
    \u301006\u3011\u592a\u3044\u30de\u30fc\u30ab\u30fc\uff08\u6587\u5b57\u306e\u4e2d\u592e\u304b\u3089\uff09<\/h3>\n
    \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u59cb\u309250%\u306b\u3059\u308b\u3068\u3001\u6587\u5b57\u306e\u4e2d\u592e\u3042\u305f\u308a\u304b\u3089\u8272\u5e2f\u304c\u5165\u308a\u3001\u592a\u3044\u30de\u30fc\u30ab\u30fc\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
    \n
    .marker-thick-yellow {\n  background: linear-gradient(transparent 45%, rgba(255, 255, 0, 0.6) 45%);\n  padding: 0 3px;\n}\n\n\/* \u534a\u900f\u660e\uff08\u6587\u5b57\u304c\u900f\u3051\u3066\u898b\u3048\u308b\uff09 *\/\n.marker-semi-pink {\n  background: linear-gradient(transparent 50%, rgba(255, 100, 150, 0.35) 50%);\n  padding: 0 2px;\n}<\/code><\/pre>\n<\/div>\n
    \u301007\u3011\u7d30\u3044\u4e0b\u7dda\u7684\u30de\u30fc\u30ab\u30fc\uff08\u30a2\u30f3\u30c0\u30fc\u30e9\u30a4\u30f3\u611f\u899a\uff09<\/h3>\n
    \n
    .marker-thin {\n  background: linear-gradient(transparent 80%, #ffcc00 80%);\n  padding: 0 2px;\n}\n\n\/* \u6975\u7d30\uff08\u6700\u4e0b\u90e8\u3060\u3051\uff09 *\/\n.marker-ultra-thin {\n  background: linear-gradient(transparent 90%, #ff6666 90%);\n  padding: 0 1px;\n}<\/code><\/pre>\n<\/div>\n
    \n
    \u8907\u6570\u884c\u5bfe\u5fdc\u2014\u2014box-decoration-break\u306e\u8a2d\u5b9a<\/h2>\n
    \u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u3001span<\/code> \u306b\u80cc\u666f\u3092\u4ed8\u3051\u308b\u3068\u884c\u306e\u6298\u308a\u8fd4\u3057\u90e8\u5206\u3067\u80cc\u666f\u304c\u9014\u5207\u308c\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002box-decoration-break: clone<\/code> \u3092\u4f7f\u3046\u3068\u3001\u5404\u884c\u306b\u72ec\u7acb\u3057\u3066\u80cc\u666f\u30fbpadding \u304c\u9069\u7528\u3055\u308c\u307e\u3059\u3002<\/span><\/strong><\/p>\n
    \n
    \/* \u8907\u6570\u884c\u5bfe\u5fdc\u306e\u30de\u30fc\u30ab\u30fc *\/\n.marker-multiline {\n  background: linear-gradient(transparent 55%, #ffff4d 55%);\n  padding: 0 4px;\n  \/* \u5404\u884c\u306b\u72ec\u7acb\u3057\u3066\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528 *\/\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n  line-height: 1.8;\n}\n\n\/* \u8907\u6570\u884c\u5bfe\u5fdc\u30fb\u30d4\u30f3\u30af\u7248 *\/\n.marker-multiline-pink {\n  background: linear-gradient(transparent 55%, #EFBDB7 55%);\n  padding: 0 4px;\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n}\n\n\/* \u5de6\u53f3\u306bpadding\u5927\u304d\u3081\uff08\u91cd\u306a\u308a\u3092\u9632\u3050\uff09 *\/\n.marker-multiline-spacious {\n  background: linear-gradient(transparent 60%, rgba(255, 255, 0, 0.7) 60%);\n  padding: 2px 6px;\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n}<\/code><\/pre>\n<\/div>\n
    \n
    <p>\n  <span class=\"marker-multiline\">\n    \u3053\u306e\u3088\u3046\u306b\u9577\u3044\u30c6\u30ad\u30b9\u30c8\u304c\u8907\u6570\u884c\u306b\u308f\u305f\u308b\u5834\u5408\u3067\u3082\u3001\n    box-decoration-break: clone \u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\n    \u5404\u884c\u306b\u30de\u30fc\u30ab\u30fc\u304c\u9023\u7d9a\u3057\u3066\u5f15\u304b\u308c\u307e\u3059\u3002\n  <\/span>\n<\/p><\/code><\/pre>\n<\/div>\n
    \n
    \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u300c\u30b9\u30c3\u3068\u5f15\u304b\u308c\u308b\u300d\u30de\u30fc\u30ab\u30fc\u6f14\u51fa<\/h2>\n
    \u30b9\u30af\u30ed\u30fc\u30eb\u3067\u753b\u9762\u5185\u306b\u5165\u3063\u305f\u3068\u304d\u3001\u307e\u305f\u306f\u30db\u30d0\u30fc\u6642\u306b\u30de\u30fc\u30ab\u30fc\u304c\u30b9\u30c3\u3068\u5f15\u304b\u308c\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3001LP\u3084\u8a34\u6c42\u30b3\u30f3\u30c6\u30f3\u30c4\u3067\u975e\u5e38\u306b\u52b9\u679c\u7684\u3067\u3059\u3002background-size<\/code> \u3092 0% 40%<\/code> \u304b\u3089 100% 40%<\/code> \u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u3053\u3068\u3067\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n
    \n
    \/* \u30db\u30d0\u30fc\u6642\u306b\u30de\u30fc\u30ab\u30fc\u304c\u5f15\u304b\u308c\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n.marker-animate {\n  background: linear-gradient(#ffff4d, #ffff4d) no-repeat;\n  background-size: 0% 40%;\n  background-position: 0 85%;\n  transition: background-size 0.4s ease;\n  padding: 0 2px;\n}\n\n.marker-animate:hover {\n  background-size: 100% 40%;\n}\n\n\/* \u30d4\u30f3\u30af\u7248\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n.marker-animate-pink {\n  background: linear-gradient(#EFBDB7, #EFBDB7) no-repeat;\n  background-size: 0% 40%;\n  background-position: 0 90%;\n  transition: background-size 0.5s ease;\n}\n\n.marker-animate-pink:hover {\n  background-size: 100% 40%;\n}\n\n\/* \u53f3\u304b\u3089\u5de6\u3078\u5f15\u304b\u308c\u308b\u30d0\u30fc\u30b8\u30e7\u30f3 *\/\n.marker-animate-rtl {\n  background: linear-gradient(#b3e0ff, #b3e0ff) no-repeat;\n  background-size: 0% 40%;\n  background-position: 100% 85%;\n  transition: background-size 0.4s ease;\n}\n\n.marker-animate-rtl:hover {\n  background-size: 100% 40%;\n}<\/code><\/pre>\n<\/div>\n
    \u30b9\u30af\u30ed\u30fc\u30eb\u9023\u52d5\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u8d77\u52d5\u3057\u305f\u3044\u5834\u5408\u306f\u3001Intersection Observer API\u3092\u4f7f\u3063\u3066\u30af\u30e9\u30b9\u3092\u4ed8\u4e0e\u3059\u308b\u65b9\u6cd5\u304c\u4f7f\u3048\u307e\u3059\u3002<\/p>\n
    \n
    \/* \u30b9\u30af\u30ed\u30fc\u30eb\u3067\u8868\u793a\u3055\u308c\u305f\u3068\u304d\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u958b\u59cb *\/\n.marker-scroll {\n  background: linear-gradient(#ffff4d, #ffff4d) no-repeat;\n  background-size: 0% 40%;\n  background-position: 0 85%;\n  transition: background-size 0.6s ease 0.2s;\n  padding: 0 2px;\n}\n\n\/* JavaScript\u3067\u3053\u306e\u30af\u30e9\u30b9\u3092\u4ed8\u4e0e\u3059\u308b *\/\n.marker-scroll.is-visible {\n  background-size: 100% 40%;\n}<\/code><\/pre>\n<\/div>\n
    \n
    <!-- JavaScript\uff08Intersection Observer\uff09\u3067\u30af\u30e9\u30b9\u3092\u4ed8\u4e0e -->\n<script>\nconst markers = document.querySelectorAll('.marker-scroll');\nconst observer = new IntersectionObserver((entries) => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      entry.target.classList.add('is-visible');\n    }\n  });\n}, { threshold: 0.5 });\n\nmarkers.forEach(el => observer.observe(el));\n<\/script><\/code><\/pre>\n<\/div>\n
    \n
    text-decoration\u3092\u4f7f\u3063\u305f\u4e0b\u7dda\u30b9\u30bf\u30a4\u30eb\u96c6<\/h2>\n
    CSS3\u4ee5\u964d\u3001text-decoration<\/code> \u306f\u5927\u5e45\u306b\u5f37\u5316\u3055\u308c\u307e\u3057\u305f\u3002\u8272\u30fb\u592a\u3055\u30fb\u30b9\u30bf\u30a4\u30eb\uff08\u6ce2\u7dda\u30fb\u70b9\u7dda\u30fb\u4e8c\u91cd\u7dda\uff09\u30fb\u30aa\u30d5\u30bb\u30c3\u30c8\uff08\u6587\u5b57\u3068\u4e0b\u7dda\u306e\u8ddd\u96e2\uff09\u3092\u500b\u5225\u306b\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n
    text-decoration\u306e\u5404\u30d7\u30ed\u30d1\u30c6\u30a3<\/h3>\n
    \n
    \/* text-decoration\u306e\u500b\u5225\u6307\u5b9a *\/\n.underline-custom {\n  text-decoration-line: underline;       \/* \u4e0b\u7dda\u306e\u7a2e\u985e\uff1aunderline \/ overline \/ line-through *\/\n  text-decoration-color: #d16176;        \/* \u4e0b\u7dda\u306e\u8272 *\/\n  text-decoration-thickness: 3px;        \/* \u4e0b\u7dda\u306e\u592a\u3055\uff08CSS4\uff09 *\/\n  text-decoration-style: solid;          \/* \u7dda\u306e\u30b9\u30bf\u30a4\u30eb\uff1asolid \/ dashed \/ dotted \/ double \/ wavy *\/\n  text-underline-offset: 4px;            \/* \u6587\u5b57\u3068\u4e0b\u7dda\u306e\u8ddd\u96e2\uff08CSS4\uff09 *\/\n}\n\n\/* \u4e00\u62ec\u6307\u5b9a\u7248 *\/\n.underline-shorthand {\n  text-decoration: underline 3px solid #d16176;\n}\n\n\/* \u6ce2\u7dda\uff08wavy\uff09\u4e0b\u7dda *\/\n.underline-wavy {\n  text-decoration: underline wavy #ff6b6b;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 4px;\n}\n\n\/* \u70b9\u7dda\uff08dotted\uff09\u4e0b\u7dda *\/\n.underline-dotted {\n  text-decoration: underline dotted #4a90d9;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 3px;\n}\n\n\/* \u4e8c\u91cd\u7dda\uff08double\uff09\u4e0b\u7dda *\/\n.underline-double {\n  text-decoration: underline double #333;\n  text-underline-offset: 4px;\n}\n\n\/* \u592a\u3044\u5358\u8272\u4e0b\u7dda *\/\n.underline-thick {\n  text-decoration: underline solid #4a90d9;\n  text-decoration-thickness: 4px;\n  text-underline-offset: 5px;\n}<\/code><\/pre>\n<\/div>\n
    text-underline-offset\u3067\u6587\u5b57\u3068\u306e\u9593\u9694\u3092\u8abf\u6574<\/h3>\n
    text-underline-offset<\/code> \u306f\u6587\u5b57\u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u3068\u4e0b\u7dda\u306e\u8ddd\u96e2\u3092\u8abf\u6574\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u6587\u5b57\u306b\u8fd1\u3059\u304e\u308b\u3053\u3068\u304c\u3042\u308b\u305f\u3081\u30013px\u301c6px<\/code> \u7a0b\u5ea6\u306b\u8a2d\u5b9a\u3059\u308b\u3068\u8aad\u307f\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n
    \n
    \/* \u9593\u9694\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3 *\/\n.offset-tight {\n  text-decoration: underline 2px solid #333;\n  text-underline-offset: 1px; \/* \u6587\u5b57\u306b\u8fd1\u3044 *\/\n}\n\n.offset-normal {\n  text-decoration: underline 2px solid #333;\n  text-underline-offset: 4px; \/* \u6a19\u6e96\u7684\u306a\u8ddd\u96e2 *\/\n}\n\n.offset-loose {\n  text-decoration: underline 2px solid #333;\n  text-underline-offset: 8px; \/* \u6587\u5b57\u304b\u3089\u96e2\u308c\u305f\u4e0b\u7dda *\/\n}<\/code><\/pre>\n<\/div>\n
    \n
    border-bottom\u3068\u306e\u9055\u3044\u3068\u4f7f\u3044\u5206\u3051<\/h2>\n
    \"gradient<\/figure>\n
    border-bottom<\/code> \u3067\u4e0b\u7dda\u3092\u4f5c\u308b\u65b9\u6cd5\u3082\u5e83\u304f\u4f7f\u308f\u308c\u3066\u3044\u307e\u3059\u304c\u3001text-decoration<\/code> \u3068\u6bd4\u8f03\u3059\u308b\u3068\u52d5\u4f5c\u306b\u9055\u3044\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
    \n\n\n\n\n\n\n\n\n\n\n
    \u6bd4\u8f03\u9805\u76ee<\/th>\ntext-decoration<\/th>\nborder-bottom<\/th>\n<\/tr>\n<\/thead>\n
    \u8907\u6570\u884c\u5bfe\u5fdc<\/td>\n\u25ce\uff08\u81ea\u52d5\u7684\u306b\u5404\u884c\u306b\u9069\u7528\uff09<\/td>\n\u25b3\uff08\u30d6\u30ed\u30c3\u30af\u4e0b\u7aef\u306b\u306e\u307f\u4ed8\u304f\uff09<\/td>\n<\/tr>\n
    \u6587\u5b57\u3068\u306e\u8ddd\u96e2\u8abf\u6574<\/td>\n\u25ce\uff08text-underline-offset\uff09<\/td>\n\u25b3\uff08padding-bottom\u3067\u4ee3\u7528\uff09<\/td>\n<\/tr>\n
    \u7dda\u306e\u30b9\u30bf\u30a4\u30eb<\/td>\n\u25cb\uff08solid\/wavy\/dotted\/dashed\/double\uff09<\/td>\n\u25cb\uff08solid\/dashed\/dotted\/double\uff09<\/td>\n<\/tr>\n
    \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/td>\n\u25b3\uff08width\u30a2\u30cb\u30e1\u304c\u4f7f\u3044\u306b\u304f\u3044\uff09<\/td>\n\u25ce\uff08width\u3067\u4f38\u7e2e\u3057\u3084\u3059\u3044\uff09<\/td>\n<\/tr>\n
    \u7dda\u306e\u8272<\/td>\n\u25ce\uff08\u8272\u3092\u81ea\u7531\u306b\uff09<\/td>\n\u25ce\uff08\u8272\u3092\u81ea\u7531\u306b\uff09<\/td>\n<\/tr>\n
    \u4e3b\u306a\u7528\u9014<\/td>\n\u30a4\u30f3\u30e9\u30a4\u30f3\u5f37\u8abf\u30fb\u8907\u6570\u884c<\/td>\n1\u884c\u30c6\u30ad\u30b9\u30c8\u306e\u30db\u30d0\u30fc\u6f14\u51fa<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
    \n
    \/* border-bottom\u3092\u4f7f\u3063\u305f\u4e0b\u7dda\uff081\u884c\u5411\u304d\uff09 *\/\n.border-underline {\n  border-bottom: 3px solid #d16176;\n  padding-bottom: 3px;\n  display: inline; \/* \u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u3068\u3057\u3066\u4f7f\u3046 *\/\n}\n\n\/* border-bottom\u3092\u4f7f\u3063\u305f\u30db\u30d0\u30fc\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n.border-hover {\n  position: relative;\n  padding-bottom: 4px;\n}\n\n.border-hover::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  height: 2px;\n  background: #d16176;\n  transition: width 0.3s ease;\n}\n\n.border-hover:hover::after {\n  width: 100%;\n}<\/code><\/pre>\n<\/div>\n
    \n
    \u8272\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u8ffd\u52a0\u2014\u2014\u843d\u3061\u7740\u3044\u305f\u7cfb\u30fb\u30cd\u30aa\u30f3\u7cfb<\/h2>\n
    \u86cd\u5149\u30da\u30f3\u7684\u306a\u9bae\u3084\u304b\u306a\u8272\u3060\u3051\u3067\u306a\u304f\u3001\u843d\u3061\u7740\u3044\u305f\u6de1\u3044\u8272\u3084\u30cd\u30aa\u30f3\u7cfb\u306e\u8272\u3082\u4f7f\u3048\u307e\u3059\u3002\u30c7\u30b6\u30a4\u30f3\u306e\u30c8\u30fc\u30f3\u306b\u5408\u308f\u305b\u3066\u9078\u3073\u307e\u3057\u3087\u3046\u3002<\/p>\n
    \n
    \/* \u843d\u3061\u7740\u3044\u305f\u7cfb\uff08\u30d1\u30b9\u30c6\u30eb\u30fb\u6de1\u3044\uff09 *\/\n.marker-lavender {\n  background: linear-gradient(transparent 55%, #e8d5ff 55%);\n}\n\n.marker-mint {\n  background: linear-gradient(transparent 55%, #c8f7e5 55%);\n}\n\n.marker-peach {\n  background: linear-gradient(transparent 55%, #ffd5b8 55%);\n}\n\n.marker-ivory {\n  background: linear-gradient(transparent 55%, #fffde7 55%);\n}\n\n\/* \u30cd\u30aa\u30f3\u7cfb\uff08\u30a4\u30f3\u30d1\u30af\u30c8\u91cd\u8996\uff09 *\/\n.marker-neon-yellow {\n  background: linear-gradient(transparent 55%, #ffff00 55%);\n}\n\n.marker-neon-pink {\n  background: linear-gradient(transparent 55%, #ff69b4 55%);\n}\n\n.marker-neon-green {\n  background: linear-gradient(transparent 55%, #39ff14 55%);\n  color: #111; \/* \u86cd\u5149\u8272\u306f\u6587\u5b57\u3092\u6697\u304f\u3059\u308b\u3068\u8aad\u307f\u3084\u3059\u3044 *\/\n}\n\n.marker-neon-cyan {\n  background: linear-gradient(transparent 55%, #00ffff 55%);\n  color: #111;\n}\n\n\/* \u30c0\u30fc\u30af\u80cc\u666f\u5411\u3051\uff08\u660e\u308b\u3044\u8272\u306e\u30de\u30fc\u30ab\u30fc\uff09 *\/\n.marker-dark-bg {\n  background: linear-gradient(transparent 55%, rgba(255, 255, 100, 0.4) 55%);\n  color: #fff;\n}<\/code><\/pre>\n<\/div>\n
    \n
    SWELL\u306e swl-marker \u30af\u30e9\u30b9\u3068\u306e\u95a2\u4fc2<\/h2>\n
    SWELL\u30c6\u30fc\u30de\u306b\u306f\u3001\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u306e\u300c\u30de\u30fc\u30ab\u30fc\u300d\u88c5\u98fe\u3068\u3057\u3066 swl-marker<\/code> \u30af\u30e9\u30b9\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u30a8\u30c7\u30a3\u30bf\u306e\u30c4\u30fc\u30eb\u30d0\u30fc\u304b\u3089\u30ef\u30f3\u30af\u30ea\u30c3\u30af\u3067\u9069\u7528\u3067\u304d\u3001\u30ab\u30e9\u30fc\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u3082\u9078\u629e\u3067\u304d\u307e\u3059\u3002<\/p>\n
    SWELL\u306e swl-marker \u306f\u5185\u90e8\u7684\u306b linear-gradient \u3067\u5b9f\u88c5\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/span><\/strong>\u305d\u306e\u305f\u3081\u3001\u5b50\u30c6\u30fc\u30de\u3067 .swl-marker<\/code> \u3084 .mark_yellow<\/code>\u30fb.mark_pink<\/code> \u306a\u3069\u306e\u30af\u30e9\u30b9\u306b\u8ffd\u52a0CSS\u3092\u66f8\u3051\u3070\u3001SWELL\u306e\u30de\u30fc\u30ab\u30fc\u8272\u30fb\u592a\u3055\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u307e\u3059\u3002<\/p>\n
    \n
    \/* SWELL\u306e swl-marker \u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\uff08\u5b50\u30c6\u30fc\u30de style.css \u3078\uff09 *\/\n\n\/* \u9ec4\u8272\u30de\u30fc\u30ab\u30fc\u306e\u4f4d\u7f6e\u30fb\u592a\u3055\u3092\u5909\u66f4 *\/\n.swl-marker.mark_yellow {\n  background: linear-gradient(transparent 50%, rgba(255, 255, 0, 0.6) 50%) !important;\n}\n\n\/* \u30d4\u30f3\u30af\u30de\u30fc\u30ab\u30fc\u3092\u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\u306b\u5408\u308f\u305b\u308b *\/\n.swl-marker.mark_pink {\n  background: linear-gradient(transparent 55%, #EFBDB7 55%) !important;\n}\n\n\/* \u65b0\u3057\u3044\u30ab\u30e9\u30fc\u3092\u8ffd\u52a0 *\/\n.swl-marker.mark_green {\n  background: linear-gradient(transparent 55%, #b3f0c8 55%);\n}\n\n\/* SWELL\u306emark_yellow\u3092\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5bfe\u5fdc\u306b\u3059\u308b\u5834\u5408 *\/\n@media (prefers-reduced-motion: no-preference) {\n  .swl-marker.mark_yellow {\n    background: linear-gradient(#ffff4d, #ffff4d) no-repeat;\n    background-size: 0% 40%;\n    background-position: 0 90%;\n    transition: background-size 0.4s ease;\n  }\n  .swl-marker.mark_yellow.is-visible {\n    background-size: 100% 40%;\n  }\n}<\/code><\/pre>\n<\/div>\n
    \u305f\u3060\u3057\u3001SWELL\u306e\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3067\u30af\u30e9\u30b9\u540d\u3084\u30b9\u30bf\u30a4\u30eb\u304c\u5909\u66f4\u3055\u308c\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u305f\u3081\u3001\u30c6\u30fc\u30de\u66f4\u65b0\u5f8c\u306f\u52d5\u4f5c\u78ba\u8a8d\u3059\u308b\u3053\u3068\u3092\u304a\u3059\u3059\u3081\u3057\u307e\u3059\u3002<\/p>\n
    \n
    \u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u306e\u6ce8\u610f\u70b9<\/h2>\n
    \"\u914d\u616e\u30dd\u30a4\u30f3\u30c8\"<\/figure>\n
    \u30de\u30fc\u30ab\u30fc\u3084\u5f37\u8abf\u4e0b\u7dda\u3092\u4f7f\u3046\u969b\u306f\u3001\u8996\u899a\u3060\u3051\u306b\u4f9d\u5b58\u3057\u306a\u3044\u8a2d\u8a08\u3092\u5fc3\u304c\u3051\u307e\u3059\u3002<\/p>\n