{"id":6943,"date":"2024-11-09T02:12:36","date_gmt":"2024-11-08T17:12:36","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?p=6943"},"modified":"2026-01-08T11:12:14","modified_gmt":"2026-01-08T02:12:14","slug":"post-6943","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/post-6943\/","title":{"rendered":"\u8907\u6570\u884c\u3082OK\uff012\u884c\u4ee5\u4e0a\u306e\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u306eunderline\u3092\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u65b9\u6cd5"},"content":{"rendered":"<p>CSS\u3067\u8907\u6570\u884c\u306e\u30c6\u30ad\u30b9\u30c8\u306b\u5bfe\u3057\u3066underline\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002\u5f93\u6765\u3001\u8907\u6570\u884c\u306e\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u306b\u5bfe\u3059\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u4ed8\u304dunderline\u306e\u5b9f\u88c5\u306f\u56f0\u96e3\u3068\u3055\u308c\u3066\u304d\u307e\u3057\u305f\u304c\u3001CSS <code>background<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u5b9f\u73fe\u53ef\u80fd\u3067\u3059\u3002<\/p>\r\n<h2>\u5b9f\u88c5\u306e\u30dd\u30a4\u30f3\u30c8<\/h2>\r\n<ol style=\"list-style-type:decimal;\">\r\n<li><code>display: inline<\/code>\u306e\u4f7f\u7528<\/li>\r\n<li><code>background<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u3088\u308b\u4e0b\u7dda\u306e\u8868\u73fe<\/li>\r\n<li><code>linear-gradient<\/code>\u3092\u4f7f\u7528\u3057\u305f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u52b9\u679c<\/li>\r\n<li>\u9069\u5207\u306a<code>transition<\/code>\u306e\u8a2d\u5b9a<\/li>\r\n<\/ol>\r\n<h2>\u57fa\u672c\u7684\u306a\u5b9f\u88c5<\/h2>\r\n<pre><code class=\"language-css\">\/* \u30d9\u30fc\u30b9\u30b9\u30bf\u30a4\u30eb *\/\r\n.hvr-underline {\r\n  display: inline;\r\n  background: linear-gradient(to top, currentColor 2px, transparent 99%) no-repeat;\r\n  transition: all 0.5s ease-out;\r\n}\r\n<\/code><\/pre>\r\n<h2>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30d1\u30bf\u30fc\u30f3<\/h2>\r\n<h3>1. \u5de6\u304b\u3089\u306eunderline<\/h3>\r\n<pre><code class=\"language-css\">\/* \u521d\u671f\u72b6\u614b *\/\r\n.hvr-underlineInLeft {\r\n  background-position: 0% 100%;\r\n  background-size: 0% 1px;\r\n}\r\n\r\n\/* hover\u6642 *\/\r\n@media (any-hover: hover) {\r\n  .hvr-underlineInLeft:is(:hover, :focus) {\r\n    background-size: 200% 1px;\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<h3>2. \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3059\u308bunderline<\/h3>\r\n<pre><code class=\"language-css\">\/* \u521d\u671f\u72b6\u614b *\/\r\n.hvr-underlineFadeIn {\r\n  background-position: 50% 30px;\r\n  background-size: 200% 20px;\r\n}\r\n\r\n\/* hover\u6642 *\/\r\n@media (any-hover: hover) {\r\n  .hvr-underlineFadeIn:is(:hover, :focus) {\r\n    background-position: 50% 20px;\r\n    background-size: 200% 1px;\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<h3>3. \u4e2d\u592e\u304b\u3089\u306eunderline<\/h3>\r\n<pre><code class=\"language-css\">\/* \u521d\u671f\u72b6\u614b *\/\r\n.hvr-underlineOpenIn {\r\n  background-position: 50% 100%;\r\n  background-size: 0% 1px;\r\n}\r\n\r\n\/* hover\u6642 *\/\r\n@media (any-hover: hover) {\r\n  .hvr-underlineOpenIn:is(:hover, :focus) {\r\n    background-size: 200% 1px;\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<h2>HTML\u5b9f\u88c5\u4f8b<\/h2>\r\n<pre><code class=\"language-html\">&lt;a href=&quot;#&quot; class=&quot;link&quot;&gt;\r\n  &lt;span class=&quot;hvr-underlineInLeft&quot;&gt;\r\n    \u3053\u308c\u306f2\u884c\u4ee5\u4e0a\u306e&lt;br&gt;\r\n    \u30c6\u30ad\u30b9\u30c8\u3067\u3059\r\n  &lt;\/span&gt;\r\n&lt;\/a&gt;\r\n<\/code><\/pre>\r\n<h2>\u5b9f\u88c5\u6642\u306e\u6ce8\u610f\u70b9<\/h2>\r\n<h3>1. Flexbox\u74b0\u5883\u3067\u306e\u6ce8\u610f<\/h3>\r\n<p>\u89aa\u8981\u7d20\u304c<code>display: flex<\/code>\u3084<code>display: inline-flex<\/code>\u306e\u5834\u5408\u3001underline\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u6b63\u3057\u304f\u8868\u793a\u3055\u308c\u306a\u3044\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u5834\u5408\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5bfe\u5fdc\u304c\u5fc5\u8981\u3067\u3059\uff1a<\/p>\r\n<ul style=\"list-style-type:bullet;\">\r\n<li>\u89aa\u8981\u7d20\u306eflex\u3092\u89e3\u9664\u3059\u308b<\/li>\r\n<li>\u5225\u306e\u8981\u7d20\u69cb\u9020\u3092\u691c\u8a0e\u3059\u308b<\/li>\r\n<\/ul>\r\n<h3>2. \u5358\u4f4d\u306e\u7d71\u4e00<\/h3>\r\n<p>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u6642\u306e\u4e0d\u81ea\u7136\u306a\u52d5\u304d\u3092\u9632\u3050\u305f\u3081\u3001<code>background-position<\/code>\u3068<code>background-size<\/code>\u3067\u306f\u5358\u4f4d\u3092\u7d71\u4e00\u3059\u308b\u3053\u3068\u304c\u63a8\u5968\u3055\u308c\u307e\u3059\uff1a<\/p>\r\n<pre><code class=\"language-css\">\/* \u826f\u3044\u4f8b\uff1apx\u3067\u7d71\u4e00 *\/\r\nbackground-position: 50% 30px;\r\nbackground-size: 200% 20px;\r\n\r\n\/* \u907f\u3051\u308b\u3079\u304d\u4f8b\uff1a%\u3068px\u306e\u6df7\u5728 *\/\r\nbackground-position: 0 200%;\r\nbackground-size: 200% 1px;\r\n<\/code><\/pre>\r\n<h3>3. \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a<\/h3>\r\n<p>\u6ed1\u3089\u304b\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u52b9\u679c\u3092\u5f97\u308b\u305f\u3081\u306b\u3001<code>linear-gradient<\/code>\u306e\u5024\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u307e\u3059\uff1a<\/p>\r\n<pre><code class=\"language-css\">\/* \u63a8\u5968\u3055\u308c\u308b\u8a2d\u5b9a *\/\r\nbackground: linear-gradient(to top, currentColor 2px, transparent 99%) no-repeat;\r\n\r\n\/* \u907f\u3051\u308b\u3079\u304d\u8a2d\u5b9a\uff08\u6025\u6fc0\u306a\u5909\u5316\uff09 *\/\r\nbackground: linear-gradient(to top, currentColor 1px, transparent 1px) no-repeat;\r\n<\/code><\/pre>\r\n<h2>\u30d6\u30e9\u30a6\u30b6\u5bfe\u5fdc<\/h2>\r\n<p>\u3053\u306e\u5b9f\u88c5\u306f\u4ee5\u4e0b\u306e\u30e2\u30c0\u30f3\u30d6\u30e9\u30a6\u30b6\u3067\u52d5\u4f5c\u78ba\u8a8d\u3055\u308c\u3066\u3044\u307e\u3059\uff1a<\/p>\r\n<ul style=\"list-style-type:bullet;\">\r\n<li>Chrome\uff08\u6700\u65b0\u7248\uff09<\/li>\r\n<li>Firefox\uff08\u6700\u65b0\u7248\uff09<\/li>\r\n<li>Safari\uff08\u6700\u65b0\u7248\uff09<\/li>\r\n<li>Edge\uff08\u6700\u65b0\u7248\uff09<\/li>\r\n<\/ul>\r\n<h2>\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u3078\u306e\u914d\u616e<\/h2>\r\n<p>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u52b9\u679c\u3092\u5b9f\u88c5\u3059\u308b\u969b\u306f\u3001\u4ee5\u4e0b\u306e\u70b9\u306b\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\uff1a<\/p>\r\n<ol style=\"list-style-type:decimal;\">\r\n<li><code>prefers-reduced-motion<\/code>\u3078\u306e\u5bfe\u5fdc<\/li>\r\n<li>\u30ad\u30fc\u30dc\u30fc\u30c9\u64cd\u4f5c\u6642\u306e<code>:focus<\/code>\u72b6\u614b\u306e\u8996\u8a8d\u6027\u78ba\u4fdd<\/li>\r\n<li>\u5341\u5206\u306a\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u306e\u78ba\u4fdd<\/li>\r\n<\/ol>\r\n<pre><code class=\"language-css\">@media (prefers-reduced-motion: reduce) {\r\n  .hvr-underline {\r\n    transition: none;\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<h2>\u307e\u3068\u3081<\/h2>\r\n<p>CSS <code>background<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u3068<code>linear-gradient<\/code>\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u8907\u6570\u884c\u306e\u30c6\u30ad\u30b9\u30c8\u306b\u5bfe\u3057\u3066\u3082\u7f8e\u3057\u3044underline\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002\u5b9f\u88c5\u6642\u306f\u4ee5\u4e0b\u306e\u70b9\u306b\u6ce8\u610f\u3057\u307e\u3057\u3087\u3046\uff1a<\/p>\r\n<ul style=\"list-style-type:bullet;\">\r\n<li>\u9069\u5207\u306aHTML\u69cb\u9020\u306e\u8a2d\u8a08<\/li>\r\n<li>\u5358\u4f4d\u306e\u7d71\u4e00<\/li>\r\n<li>Flexbox\u74b0\u5883\u3067\u306e\u6319\u52d5\u78ba\u8a8d<\/li>\r\n<li>\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u3078\u306e\u914d\u616e<\/li>\r\n<\/ul>\r\n<p>\u3053\u306e\u5b9f\u88c5\u65b9\u6cd5\u306f\u3001\u5f93\u6765\u306e<code>text-decoration<\/code>\u3084<code>border-bottom<\/code>\u3067\u306f\u5b9f\u73fe\u3067\u304d\u306a\u304b\u3063\u305f\u67d4\u8edf\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u52b9\u679c\u3092\u53ef\u80fd\u306b\u3057\u307e\u3059\u3002<\/p>\r\n","protected":false},"excerpt":{"rendered":"CSS\u3067\u8907\u6570\u884c\u306e\u30c6\u30ad\u30b9\u30c8\u306b\u5bfe\u3057\u3066underline\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002\u5f93\u6765\u3001\u8907\u6570\u884c\u306e\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u306b\u5bfe\u3059\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u4ed8\u304dunderline\u306e\u5b9f\u88c5\u306f\u56f0\u96e3\u3068\u3055\u308c\u3066\u304d\u307e\u3057\u305f\u304c\u3001CSS backgrou[...]","protected":false},"author":1,"featured_media":6992,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[11],"tags":[],"group":[],"class_list":["post-6943","post","type-post","status-publish","format-standard","has-post-thumbnail","category-html-css"],"acf":[],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/6943","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=6943"}],"version-history":[{"count":0,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/6943\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/6992"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=6943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=6943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=6943"},{"taxonomy":"group","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/group?post=6943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}