{"id":5365,"date":"2026-06-19T16:10:07","date_gmt":"2026-06-19T07:10:07","guid":{"rendered":"https:\/\/dennie.tokyo\/it\/?p=5365"},"modified":"2026-06-19T16:37:13","modified_gmt":"2026-06-19T07:37:13","slug":"%e3%80%90css%e3%80%91%e3%83%9b%e3%83%90%e3%83%bc%e3%82%a2%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b3","status":"publish","type":"post","link":"https:\/\/dennie.tokyo\/it\/?p=5365","title":{"rendered":"\u3010CSS\u3011\u30db\u30d0\u30fc\u30a2\u30af\u30b7\u30e7\u30f3"},"content":{"rendered":"\n<p>\u30db\u30d0\u30fc\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u305f\u306e\u3067\u3001\u30e1\u30e2\u3068\u3057\u3066\u6b8b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<!--more-->\n\n\n\n<h1 class=\"wp-block-heading\">\u4e38<\/h1>\n\n\n\n<p>\u30db\u30d0\u30fc\u3059\u308b\u3068\u4e38\u304c\u4e0a\u306b\u52d5\u304d\u3001\u5f71\u306e\u3088\u3046\u306a\u3082\u306e\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=&quot;circle-container&quot;&gt;\n    &lt;div class=&quot;circle&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;circle-shadow&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.circle-container {\n  position: relative;\n  width: 100px;\n  height: 100px;\n}\n\n.circle-container .circle {\n  position: absolute;\n  margin: 0 auto;\n  margin-top: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  text-align: center;\n  box-shadow: 0 0 8px gray;\n  background-color: aqua;\n  transition: all 1s ease;\n}\n\n.circle-container .circle-shadow {\n  position: absolute;\n  left: 0;\n  right: 0;\n  margin: 0 auto;\n  bottom: 0;\n  width: 0;\n  height: 0;\n  border-radius: 50%;\n  background-color: #888888;\n  transition: all 1s ease;\n}\n\n.circle-container:hover {\n  .circle {\n    margin-top: -100px;\n  }\n  .circle-shadow {\n    width: 50%;\n    height: 10%;\n    background-color: #EEEEEE;\n    box-shadow: 0 0 8px #EEEEEE;\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n.out-01 {\n  width: 400px;\n  height: 200px;\ndisplay:flex;\njustify-content: center;\nalign-items:flex-end;\nbackground-color: #888888;\n}\n\n.circle-container-01 {\n  position: relative;\n  width: 100px;\n  height: 100px;\n}\n\n.circle-container-01 .circle-01 {\n  position: absolute;\n  margin: 0 auto;\n  margin-top: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  text-align: center;\n  box-shadow: 0 0 8px gray;\n  background-color: aqua;\n  transition: all 1s ease;\n}\n\n.circle-container-01 .circle-shadow-01 {\n  position: absolute;\n  left: 0;\n  right: 0;\n  margin: 0 auto;\n  bottom: 0;\n  width: 0;\n  height: 0;\n  border-radius: 50%;\n  background-color: #888888;\n  transition: all 1s ease;\n}\n\n.circle-container-01:hover {\n  .circle-01 {\n    margin-top: -100px;\n  }\n  .circle-shadow-01 {\n    width: 50%;\n    height: 10%;\n    background-color: #EEEEEE;\n    box-shadow: 0 0 8px #EEEEEE;\n  }\n}\n<\/style>\n<div class=\"out-01\">\n<div class=\"circle-container-01\">\n    <div class=\"circle-01\"><\/div>\n    <div class=\"circle-shadow-01\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<h1 class=\"wp-block-heading\">\u6587\u5b57<\/h1>\n\n\n\n<p>\u30db\u30d0\u30fc\u3059\u308b\u3068\u6587\u5b57\u304c\u4e0a\u306b\u52d5\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;span class=&quot;string float&quot;&gt;\u3042\u3044\u3046\u3048\u304a&lt;\/span&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.string {\n  color: #000000;\n  font-size: 4rem;\n  letter-spacing: 0.3rem;\n}\n\n.string.float {\n  position: relative;\n  transition: all 1s ease;\n}\n\n.string.float::after {\n  color: #000000;\n  content: &#39;\u3042\u3044\u3046\u3048\u304a&#39;;\n  position: absolute;\n  left: 0;\n  margin-top: 0;\n  transition: all 1s ease;\n}\n\n.string.float:hover {\n  color: #EEEEEE;\n}\n\n.string.float:hover::after {\n  color: #000000;\n  margin-top: -100px;\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n.string-01 {\n  color: #000000;\n  font-size: 4rem;\n  letter-spacing: 0.3rem;\n}\n\n.string-01.float-01 {\n  position: relative;\n  transition: all 1s ease;\n}\n\n.string-01.float-01::after {\n  color: #000000;\n  content: '\u3042\u3044\u3046\u3048\u304a';\n  position: absolute;\n  left: 0;\n  margin-top: 0;\n  transition: all 1s ease;\n}\n\n.string-01.float-01:hover {\n  color: #EEEEEE;\n}\n\n.string-01.float-01:hover::after {\n  color: #000000;\n  margin-top: -100px;\n}\n<\/style>\n<span class=\"string-01 float-01\">\u3042\u3044\u3046\u3048\u304a<\/span>\n\n\n\n\n<h1 class=\"wp-block-heading\">\u6700\u5f8c\u306b<\/h1>\n\n\n\n<p>\u7279\u306b\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30db\u30d0\u30fc\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u305f\u306e\u3067\u3001\u30e1\u30e2\u3068\u3057\u3066\u6b8b\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"author":1,"featured_media":4723,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-5365","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/5365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5365"}],"version-history":[{"count":5,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/5365\/revisions"}],"predecessor-version":[{"id":5370,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/5365\/revisions\/5370"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/media\/4723"}],"wp:attachment":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}