{"id":2721,"date":"2024-09-16T23:45:26","date_gmt":"2024-09-16T14:45:26","guid":{"rendered":"https:\/\/haugenic.com\/?p=2721"},"modified":"2024-09-18T23:41:45","modified_gmt":"2024-09-18T14:41:45","slug":"%e3%80%90css%e3%80%91%e7%ab%8b%e4%bd%93%e7%9a%84%e3%81%aa%e3%82%af%e3%83%ac%e3%82%b8%e3%83%83%e3%83%88%e3%82%ab%e3%83%bc%e3%83%89%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9","status":"publish","type":"post","link":"https:\/\/haugenic.com\/?p=2721","title":{"rendered":"\u3010CSS\u3011\u7acb\u4f53\u7684\u306a\u30af\u30ec\u30b8\u30c3\u30c8\u30ab\u30fc\u30c9\u98a8\u306e\u30c7\u30b6\u30a4\u30f3\u306e\u4f5c\u308a\u65b9"},"content":{"rendered":"<p>CSS\u3068HTML\u306e\u307f\u3067\u30b4\u30fc\u30eb\u30c9\u3068\u30b7\u30eb\u30d0\u30fc\u306e\u30af\u30ec\u30b8\u30c3\u30c8\u30ab\u30fc\u30c9\u98a8\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\r\n<h2>\u7530\u4e2d\u5b9f\u306e\u30b4\u30fc\u30eb\u30c9\u30ab\u30fc\u30c9<\/h2>\r\n<div class=\"creditcard\"><span class=\"logo\">GOLD CARD<\/span> <span class=\"card-number\">1234 5678 9876 5432<\/span> <span class=\"expiry-date\">\u6709\u52b9\u671f\u9650 12\/25<\/span> <span class=\"card-holder\">TANAKA MINORU<\/span> <span class=\"cvv\">CVV 123<\/span> <span class=\"hologram\"><\/span> <span class=\"chip\"><\/span><\/div>\r\n<p>\u30de\u30a6\u30b9\u3092\u4e57\u305b\u308b\u3068\u3001\u30ab\u30fc\u30c9\u304c\u50be\u304f\u3068\u3068\u3082\u306b\u5149\u304c\u53cd\u5c04\u3057\u3001\u7acb\u4f53\u7684\u306b\u898b\u3048\u308b\u8a2d\u8a08\u3067\u3059\u3002<br \/>\r\n<span class=\"marker_yellow_futo\">background: linear-gradient<\/span>\u3092\u7528\u3044\u3066IC\u30c1\u30c3\u30d7\u3084\u30db\u30ed\u30b0\u30e9\u30e0\u3082\u30ea\u30a2\u30eb\u306b\u518d\u73fe\u3057\u307e\u3057\u305f\u3002<\/p>\r\n<p>CSS\u3068HTML\u3060\u3051\u3067\u4f5c\u3063\u305f\u306e\u3067\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306f\u3081\u3063\u3061\u3083\u9577\u3044\uff01<\/p>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u898b\u308b<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n<h3 class=\"sa sa--up\">HTML\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"creditcard\"&gt;\r\n  &lt;span class=\"logo\"&gt;GOLD CARD&lt;\/span&gt;\r\n  &lt;span class=\"card-number\"&gt;1234 5678 9876 5432&lt;\/span&gt;\r\n  &lt;span class=\"expiry-date\"&gt;\u6709\u52b9\u671f\u9650 12\/25&lt;\/span&gt;\r\n  &lt;span class=\"card-holder\"&gt;TANAKA MINORU&lt;\/span&gt;\r\n  &lt;span class=\"cvv\"&gt;CVV 123&lt;\/span&gt;\r\n  &lt;span class=\"hologram\"&gt;&lt;\/span&gt;\r\n  &lt;span class=\"chip\"&gt;&lt;\/span&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<h3 class=\"sa sa--up\">CSS\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.creditcard {\r\n  max-width: 300px;\r\n  min-height: 185px;\r\n  color: #000;\r\n  background: linear-gradient(145deg,#fff233, #d9cb00, #b19e00, #d9c100, #fff233, #d9c100, #b19500, #d9b700, #fff233);\r\n  border: outset 1px rgba(0, 0, 0, 0.2);\r\n  box-shadow: 2px 2px 5px -3px rgba(0, 0, 0, 0.8),\r\n    inset 1px 1px 1px rgba(255, 255, 255, 0.8);\r\n  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2);\r\n  padding: 15px;\r\n  border-radius: 15px;\r\n  margin: 20px auto;\r\n  aspect-ratio: 1.618\/1;\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  font-family: \"Courier New\", monospace, sans-serif;\r\n  position: relative;\r\n  font-size: 16px;\r\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n\r\n.logo {\r\n  font-size: 1.8em;\r\n  font-weight: bold;\r\n  text-align: left;\r\n  margin-bottom: 35px;\r\n  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2),\r\n    -2px -2px 1px rgba(255, 255, 255, 0.4);\r\n  color: #220;\r\n}\r\n\r\n.card-number {\r\n  font-size: 1.3em;\r\n  margin-bottom: 15px;\r\n  text-align: right;\r\n  font-weight: bold;\r\n  font-family: \"Consolas\", \"Roboto Mono\", \"Menlo\", \"Courier New\", monospace;\r\n  letter-spacing: 1px;\r\n  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3),\r\n    -1px -1px 1px rgba(255, 255, 255, 0.5);\r\n  color: #220;\r\n}\r\n\r\n.expiry-date,\r\n.card-holder {\r\n  font-size: 0.9em;\r\n  display: block;\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.card-holder {\r\n  text-transform: uppercase;\r\n}\r\n\r\n.cvv {\r\n  font-size: 0.9em;\r\n  opacity: 0.8;\r\n  position: absolute;\r\n  bottom: 10px;\r\n  right: 70px;\r\n}\r\n\r\n.chip {\r\n  position: absolute;\r\n  top: 45px;\r\n  left: 15px;\r\n  width: 40px;\r\n  height: 30px;\r\n  background: linear-gradient(135deg, #bbb, #ddd);\r\n  border-radius: 5px;\r\n}\r\n\r\n.chip::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-image: \r\n    linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.05) 50%),\r\n    linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.05) 50%);\r\n  background-size: 4px 4px;\r\n  opacity: 0.5;\r\n}\r\n\r\n.hologram {\r\n  position: absolute;\r\n  bottom: 10px;\r\n  right: 15px;\r\n  width: 50px;\r\n  height: 30px;\r\n  background: linear-gradient(45deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f);\r\n  opacity: 0.3;\r\n  border-radius: 5px;\r\n}\r\n\r\n.creditcard:hover {\r\n  transform: rotateY(5deg) rotateX(20deg);\r\n  box-shadow: 5px 8px 8px -3px rgba(0, 0, 0, 0.2),\r\n    inset 1px 1px 1px rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.creditcard::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background: linear-gradient(\r\n    145deg,\r\n    rgba(255, 255, 255, 0.3) 0%,\r\n    rgba(255, 255, 255, 0) 50%,\r\n    rgba(0, 0, 0, 0.1) 100%\r\n  );\r\n  opacity: 0;\r\n  transition: opacity 0.3s ease, background 0.3s ease;\r\n}\r\n\r\n.creditcard:hover::after {\r\n  opacity: 1;\r\n  background: linear-gradient(\r\n    145deg,\r\n    rgba(255, 255, 255, 0.4) 0%,\r\n    rgba(255, 255, 255, 0) 50%,\r\n    rgba(0, 0, 0, 0.1) 100%\r\n  );\r\n}<\/pre>\r\n<\/div><\/div>\r\n<h2>\u4f50\u85e4\u8aa0\u306e\u30b7\u30eb\u30d0\u30fc\u30ab\u30fc\u30c9<\/h2>\r\n<div class=\"creditcard silver\"><span class=\"logo\">SILVER CARD<\/span> <span class=\"card-number\">1234 5678 9876 5432<\/span> <span class=\"expiry-date\">\u6709\u52b9\u671f\u9650 12\/25<\/span> <span class=\"card-holder\">SATO MAKOTO<\/span> <span class=\"cvv\">CVV 123<\/span> <span class=\"hologram\"><\/span> <span class=\"chip\"><\/span><\/div>\r\n<p>\u80cc\u666f\u8272\u3092\u3061\u3087\u3061\u3087\u3063\u3068\u5909\u3048\u305f\u3060\u3051\u3002<br \/>\r\n\u30b4\u30fc\u30eb\u30c9\u30ab\u30fc\u30c9\u306eCSS\u30b3\u30fc\u30c9\u306e5\u884c\u76ee\u3092<span class=\"marker_yellow_futo\">background: linear-gradient(145deg, #999, #eee, #888);<\/span>\u306b\u5909\u66f4\u3059\u308b\u3068\u3001\u30b7\u30eb\u30d0\u30fc\u30ab\u30fc\u30c9\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\r\n<h2>\u65e5\u672c\u4eba\u3067\u6700\u3082\u591a\u3044\u30d5\u30eb\u30cd\u30fc\u30e0\u306f\u7530\u4e2d\u5b9f\uff1f\u4f50\u85e4\u8aa0\uff1f<\/h2>\r\n<p>\u300c\u65e5\u672c\u4eba\u6700\u3082\u591a\u3044\u30d5\u30eb\u30cd\u30fc\u30e0\u300d\u306b\u3064\u3044\u3066\u8abf\u3079\u3066\u307f\u305f\u3068\u3053\u308d\u3001\u69d8\u3005\u306a\u6d6e\u4e0a\u3057\u307e\u3057\u305f\u304c\u3001\u7d50\u8ad6\u3068\u3057\u3066<span style=\"color: #cc0000;\"><\/span><span class=\"bigmoji\"><span style=\"color: #cc0000;\"><span class=\"zebline-maker zebline-color-a\">\u3069\u306e\u8aac\u3082\u4fe1\u6191\u6027\u304c\u4f4e\u3044<\/span><\/span><\/span>\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3057\u305f\u3002<\/p>\r\n<h3 class=\"sa sa--up\">\u6d6e\u4e0a\u3057\u305f\u8aac\u3068\u4fe1\u6191\u6027<\/h3>\r\n<div class=\"maruck\">\r\n<ul>\r\n\t<li>\u300c\u7530\u4e2d\u5b9f\u300d\u8aac<\/li>\r\n\t<li>\u300c\u4f50\u85e4\u8aa0\u300d\u8aac<\/li>\r\n\t<li>\u300c\u9234\u6728\u8302\u300d\u8aac<\/li>\r\n<\/ul>\r\n<\/div>\r\n<p>\u3053\u308c\u3089\u306e\u8aac\u306f\u3044\u305a\u308c\u3082<span class=\"zebline-maker zebline-color-a\">\u78ba\u5b9f\u306a\u6839\u62e0\u306b\u57fa\u3065\u3044\u3066\u3044\u308b\u3068\u306f\u8a00\u3048\u307e\u305b\u3093<\/span>\u3002\u30d5\u30eb\u30cd\u30fc\u30e0\u306e\u7d71\u8a08\u30c7\u30fc\u30bf\u306f\u3001\u30d7\u30e9\u30a4\u30d0\u30b7\u30fc\u306e\u89b3\u70b9\u304b\u3089\u516c\u958b\u3055\u308c\u306b\u304f\u3044\u60c5\u5831\u3067\u3042\u308a\u3001\u6b63\u78ba\u306a\u5168\u56fd\u898f\u6a21\u306e\u30c7\u30fc\u30bf\u306f\u5b58\u5728\u3057\u306a\u3044\u306e\u304c\u73fe\u72b6\u3067\u3059\u3002<\/p>\r\n<p>2024\u5e74\u306e\u6700\u65b0\u30c7\u30fc\u30bf\u306b\u3088\u308b\u3068\u3001\u540d\u5b57\u306e\u30e9\u30f3\u30ad\u30f3\u30b0\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\r\n<h3 class=\"sa sa--up\">\u6700\u65b0\u306e\u540d\u5b57\u30e9\u30f3\u30ad\u30f3\u30b0<\/h3>\r\n<div class=\"st-list-no\">\r\n<ul>\r\n\t<li>\u4f50\u85e4\uff08\u7d041,830,000\u4eba\uff09<\/li>\r\n\t<li>\u9234\u6728\uff08\u7d041,769,000\u4eba\uff09<\/li>\r\n\t<li>\u9ad8\u6a4b\uff08\u7d041,383,000\u4eba\uff09<\/li>\r\n\t<li>\u7530\u4e2d\uff08\u7d041,312,000\u4eba\uff09<\/li>\r\n\t<li>\u4f0a\u85e4\uff08\u7d041,053,000\u4eba\uff09<\/li>\r\n<\/ul>\r\n<\/div>\r\n<p>\u3053\u306e\u30c7\u30fc\u30bf\u304b\u3089\u3001<span class=\"maruobi3\">\u4f50\u85e4\u3055\u3093<\/span>\u304c\u6700\u3082\u591a\u3044\u540d\u5b57\u3067\u3042\u308b\u3053\u3068\u306f\u78ba\u304b\u3067\u3059\u304c\u3001<span class=\"zebline-maker zebline-color-a\">\u30d5\u30eb\u30cd\u30fc\u30e0\u306e\u7d44\u307f\u5408\u308f\u305b\u306b\u3064\u3044\u3066\u306f\u4e0d\u660e<\/span>\u3067\u3059\u3002<\/p>\r\n<p>2024\u5e74\u4e0a\u534a\u671f\u306e\u8d64\u3061\u3083\u3093\u306e\u540d\u524d\u30c8\u30ec\u30f3\u30c9\u3092\u898b\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u7279\u5fb4\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\r\n<h3 class=\"sa sa--up\">\u6700\u65b0\u306e\u540d\u524d\u306e\u30c8\u30ec\u30f3\u30c9<\/h3>\r\n<div class=\"maruck long\">\r\n<ul>\r\n\t<li>\u5973\u306e\u5b50\u306f\u300c\u30ec\u30c8\u30ed\u30cd\u30fc\u30e0\u300d\u300c\u30d5\u30e9\u30ef\u30fc\u30cd\u30fc\u30e0\u300d\u304c\u4eba\u6c17<\/li>\r\n\t<li>\u7537\u306e\u5b50\u306f\u300c\u7fd4\u300d\u3068\u3044\u3046\u6f22\u5b57\u304c\u5727\u5012\u7684\u4eba\u6c17<\/li>\r\n\t<li>\u5168\u4f53\u7684\u306b\u300c\u30b8\u30a7\u30f3\u30c0\u30fc\u30ec\u30b9\u30cd\u30fc\u30e0\u300d\u306e\u50be\u5411<\/li>\r\n<\/ul>\r\n<\/div>\r\n<p>\u3053\u308c\u3089\u306e\u30c8\u30ec\u30f3\u30c9\u306f\u73fe\u5728\u306e<span class=\"huto\"><span style=\"color: #000080;\">\u65b0\u751f\u5150\u306b\u95a2\u3059\u308b\u3082\u306e<\/span><\/span>\u3067\u3042\u308a\u3001<span class=\"zebline-maker zebline-color-a\">\u5168\u5e74\u9f62\u5c64\u306e\u6700\u3082\u591a\u3044\u30d5\u30eb\u30cd\u30fc\u30e0\u3092\u53cd\u6620\u3057\u3066\u3044\u308b\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093<\/span>\u3002<\/p>\r\n<p>\u30d5\u30eb\u30cd\u30fc\u30e0\u306e\u7d71\u8a08\u306f\u3001\u4ee5\u4e0b\u306e\u7406\u7531\u304b\u3089\u6b63\u78ba\u306a\u628a\u63e1\u304c\u56f0\u96e3\u3067\u3059\u3002<\/p>\r\n<h3 class=\"sa sa--up\">\u30d5\u30eb\u30cd\u30fc\u30e0\u8003\u5bdf<\/h3>\r\n<div class=\"maruck long\">\r\n<ul>\r\n\t<li>\u30d7\u30e9\u30a4\u30d0\u30b7\u30fc\u4fdd\u8b77\u306e\u89b3\u70b9\u304b\u3089\u30c7\u30fc\u30bf\u304c\u516c\u958b\u3055\u308c\u306b\u304f\u3044<\/li>\r\n\t<li>\u540d\u524d\u306e\u30c8\u30ec\u30f3\u30c9\u306f\u6642\u4ee3\u3068\u3068\u3082\u306b\u5909\u5316\u3059\u308b<\/li>\r\n\t<li>\u5730\u57df\u306b\u3088\u3063\u3066\u540d\u524d\u306e\u50be\u5411\u304c\u7570\u306a\u308b<\/li>\r\n<\/ul>\r\n<\/div>\r\n<p>\u3057\u305f\u304c\u3063\u3066\u3001<span class=\"zebline-maker zebline-color-a\">\u300c\u65e5\u672c\u4eba\u306e\u6700\u3082\u591a\u3044\u30d5\u30eb\u30cd\u30fc\u30e0\u300d\u3092\u7279\u5b9a\u3059\u308b\u3053\u3068\u306f<span class=\"bigmoji\" style=\"color:#c00\">\u73fe\u72b6\u3067\u306f\u4e0d\u53ef\u80fd<\/span><\/span>\u3068\u8a00\u3048\u307e\u3059\u3002<\/p>","protected":false},"excerpt":{"rendered":"HTML\u3068CSS\u3067\u30af\u30ec\u30b8\u30c3\u30c8\u30ab\u30fc\u30c9\u3092\u4f5c\u308b\u65b9\u6cd5\u3002","protected":false},"author":1,"featured_media":2722,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-2721","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts\/2721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2721"}],"version-history":[{"count":11,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts\/2721\/revisions"}],"predecessor-version":[{"id":2734,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts\/2721\/revisions\/2734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/media\/2722"}],"wp:attachment":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}