{"id":8061,"date":"2023-07-25T09:50:47","date_gmt":"2023-07-25T00:50:47","guid":{"rendered":"https:\/\/y-com.info\/contents\/?p=8061"},"modified":"2023-07-27T12:15:26","modified_gmt":"2023-07-27T03:15:26","slug":"%ef%bf%bccss%e3%81%a7%e3%81%ae%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e4%bb%98%e3%81%8d%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%ef%bc%93%e3%81%a4%e3%81%ae%e5%ae%9f%e8%a3%85%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/y-com.info\/contents\/?p=8061","title":{"rendered":"CSS\u3067\u306e\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u30dc\u30bf\u30f3\u306e\uff13\u3064\u306e\u5b9f\u88c5\u65b9\u6cd5"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f\u3001CSS\u3092\u4f7f\u3063\u3066\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u306e\u3053\u306e\u3088\u3046\u306a\u30dc\u30bf\u30f3\u306e\u4f5c\u308a\u65b9\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<br>\u5358\u306a\u308b\u30dc\u30bf\u30f3\u3068\u6bd4\u3079\u3066\u3001\u3053\u306e\u3088\u3046\u306b\u30a2\u30af\u30b7\u30e7\u30f3\u3084\u30dc\u30bf\u30f3\u306e\u610f\u5473\u3092\u30a2\u30a4\u30b3\u30f3\u3067\u793a\u3059\u3053\u3068\u3067\u3001UI\u3068\u3057\u3066\u512a\u308c\u305f\u30dc\u30bf\u30f3\u306b\u306a\u308b\u306e\u3067\u3001\u305c\u3072\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<br>\u4e3b\u306a\u4f5c\u308a\u65b9\u306f\u5168\u90e8\u3067\u4e3b\u306b\uff13\u3064\u3042\u308a\u307e\u3059\u3002\u305d\u308c\u305e\u308c\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u7d39\u4ecb\u3059\u308b\u30b3\u30fc\u30c9\u304c\u5b9f\u969b\u306b\u52d5\u3044\u3066\u3044\u308b\u3082\u306e\u306f\u3053\u3061\u3089\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"zYMLVYd\" data-user=\"hachidaime\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/hachidaime\/pen\/zYMLVYd\" class=\"broken_link\">\n  Untitled<\/a> by Yoshimune (<a href=\"https:\/\/codepen.io\/hachidaime\">@hachidaime<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306e\u4f8b\u3067\u306f\u3001\u30c6\u30ad\u30b9\u30c8\u306e\u5de6\u5074\u3068\u53f3\u5074\u306e\u4e21\u65b9\u306b\u30a2\u30a4\u30b3\u30f3\u3092\u5165\u308c\u3066\u3044\u307e\u3059\u304c\u3001<br>\u5b9f\u969b\u306b\u4f7f\u7528\u3059\u308b\u5834\u5408\u306b\u306f\u3069\u3061\u3089\u304b\u4e00\u65b9\u3092\u4f7f\u7528\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">::before, ::aftrer\u3092\u4f7f\u3063\u305f\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u30dc\u30bf\u30f3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305a\u306f\u3001::before, ::after\u3092\u4f7f\u3063\u305f\u5b9f\u88c5\u3067\u3059\u3002<br>HTML\u90e8\u5206\u306f\u3001\u5fc5\u8981\u306a\u8981\u7d20\u306f\u30dc\u30bf\u30f3\u3068\u306a\u308b\u30a2\u30f3\u30ab\u30fc\u30bf\u30b0\u306e\u307f\u3067\u3001\u975e\u5e38\u306b\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u3002<br>\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3067::before, ::after\u3092\u4f7f\u3063\u3066\u3001\u8981\u7d20\u306e\u524d\u5f8c\u306b\u30a2\u30a4\u30b3\u30f3\u3092\u914d\u7f6e\u3057\u307e\u3059\u3002<br>\u958b\u59cb\u30bf\u30b0\u76f4\u5f8c\u306e::before\u306b\u306f\u300c\u623b\u308b\u300d\u30dc\u30bf\u30f3\u3092\u3001\u7d42\u4e86\u30bf\u30b0\u76f4\u524d\u306e::after\u8981\u7d20\u306b\u306f\u300c\u6b21\u3078\u300d\u306e\u30dc\u30bf\u30f3\u3092content\u5c5e\u6027\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u3002<br>\u5b9f\u88c5\u306e\u4ed5\u65b9\u306f\u7c21\u5358\u3067\u3001\u3053\u308c\u3089\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u3001position:absolute\u3092\u4f7f\u3063\u3066\u914d\u7f6e\u3057\u307e\u3059\u3002<br>\u3053\u306e\u65b9\u6cd5\u306e\u7279\u5fb4\u306f\u3001HTML\u90e8\u5206\u304c\u975e\u5e38\u306b\u30b7\u30f3\u30d7\u30eb\u306a\u3053\u3068\u3067\u3059\u3002<br>\u307e\u305f\u3001CSS\u3067\u30a2\u30a4\u30b3\u30f3\u3092\u5236\u5fa1\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u30b3\u30fc\u30c9\u304c\u5171\u901a\u5316\u3055\u308c\u904b\u7528\u306b\u5411\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;a href=&quot;&quot; class=&quot;button normal&quot;&gt;\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u30dc\u30bf\u30f3&lt;\/a&gt;<\/code><\/pre><\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.button {\n  display: inline-block;\n  background: #000;\n  border-radius: 5px;\n  color: #fff;\n  width: 500px;\n  text-align: center;\n  padding: 15px 0;\n  text-decoration: none;\n  position: relative;\n}\n\n.button::before {\n  position: absolute;\n  content: &quot;&lt;&quot;;\n  top: 15px;\n  left: 20px;\n}\n\n.button::after {\n  position: absolute;\n  content: &quot;&gt;&quot;;\n  top: 15px;\n  right: 20px;\n}<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u8907\u96d1\u306b\u898b\u3048\u307e\u3059\u304c\u3001\u4ee5\u4e0b\u306e\u5c5e\u6027\u306f\u305f\u3060\u306e\u88c5\u98fe\u306a\u306e\u3067\u3001<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>  background: #000;\n  border-radius: 5px;\n  color: #fff;\n  width: 500px;\n  text-align: center;\n  padding: 15px 0;\n  text-decoration: none;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9f\u969b\u306b\u91cd\u8981\u306a\u4ee5\u4e0b\u306e\u6307\u5b9a\u3092\u7406\u89e3\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>.button {\n  display: inline-block;\n  position: relative;\n}\n\n.button::before {\n  position: absolute;\n  content: &quot;&lt;&quot;;\n  top: 15px;\n  left: 20px;\n}\n\n.button::after {\n  position: absolute;\n  content: &quot;&gt;&quot;;\n  top: 15px;\n  right: 20px;\n}<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">display:flex\u3092\u4f7f\u3063\u305f\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u30dc\u30bf\u30f3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306bdisplay:flex\u3092\u4f7f\u3063\u305f\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u30dc\u30bf\u30f3\u306e\u5b9f\u88c5\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u307e\u3059\u3002<br>display:flex\u306f\u3001\u8981\u7d20\u306e1\u6b21\u5143\u914d\u7f6e\u3092\u3059\u308b\u305f\u3081\u306eCSS\u5c5e\u6027\u3067\u3001\u7e26\u306b\u4e26\u3079\u305f\u308a\u6a2a\u306b\u4e26\u3079\u305f\u308a\u3059\u308b\u4e8b\u304c\u7c21\u5358\u306b\u3067\u304d\u307e\u3059\u3002<br>\u4eca\u56de\u306f\u3001\u6a2a\u306b\u4e26\u3079\u3066\u8981\u7d20\u3092\u914d\u7f6e\u3057\u307e\u3057\u3087\u3046\u3002<br>HTML\u3067\u306f\uff13\u3064\u306e\u8981\u7d20\uff08\u30a2\u30a4\u30b3\u30f3\u3001\u30c6\u30ad\u30b9\u30c8\u3001\u30a2\u30a4\u30b3\u30f3\uff09\u3092\u914d\u7f6e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;a href=&quot;&quot; class=&quot;button flex&quot;&gt;&lt;span class=&quot;icon&quot;&gt;&lt;&lt;\/span&gt;&lt;span class=&quot;text&quot;&gt;\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u30dc\u30bf\u30f3&lt;\/span&gt;&lt;span class=&quot;icon&quot;&gt;&gt;&lt;\/span&gt;&lt;\/a&gt;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3055\u3066\u3001\u3053\u308c\u3089\u306e\u8981\u7d20\u3092\u9699\u9593\u306a\u304f\u6577\u304d\u8a70\u3081\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br>3\u3064\u306e\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3092\u5408\u8a08\u3067100%\u306b\u306a\u308b\u3088\u3046\u306b\u3053\u306e\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.button {\n  display: inline-block;\n  background: #000;\n  border-radius: 5px;\n  color: #fff;\n  width: 500px;\n  text-align: center;\n  padding: 15px 0;\n  text-decoration: none;\n  display: flex;\n  text-align: center;\n}\n\n.button .icon {\n  width: 50px;\n}\n\n.button .text {\n  width: calc(100% - 100px);\n}<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u30dc\u30bf\u30f3\u3068\u3057\u3066\u306e\u7d30\u304b\u3044\u88c5\u98fe\u306f\u3042\u308a\u307e\u3059\u304c\u3001\u3053\u3053\u3067\u91cd\u8981\u306a\u306e\u306f\u5404\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30a2\u30a4\u30b3\u30f3\u3092\u300cwidth: 50px;\u300d\u3001\u30c6\u30ad\u30b9\u30c8\u3092\u300cwidth: calc(100% &#8211; 100px);\u300d\u3068\u3059\u308b\u3053\u3068\u3067\u3001<br>\u5408\u8a08100%\u3068\u306a\u308b\u3088\u3046\u306b\u4e26\u3079\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">display:grid\u3092\u4f7f\u3063\u305f\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u30dc\u30bf\u30f3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">display:grid\u306f\u30012\u6b21\u5143\u306b\u8981\u7d20\u3092\u914d\u7f6e\u3059\u308b\u306e\u304c\u7279\u5fb4\u306eCSS\u5c5e\u6027\u3067\u3059\u3002<br>2\u6b21\u5143\u306e\u914d\u7f6e\u304c\u3067\u304d\u307e\u3059\u304c\u3001\u4eca\u56de\u306f\u6a2a\u65b9\u5411\u306e\uff11\u6b21\u5143\u306e\u914d\u7f6e\u306b\u5229\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306e\u6307\u5b9a\u3067\u3001\uff13\u3064\u306e\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>grid-template-columns: 50px auto 50px;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u5de6\u53f3\u306e\u30a2\u30a4\u30b3\u30f3\u90e8\u5206\u306f50px\u3067\u3001\u30c6\u30ad\u30b9\u30c8\u90e8\u5206\u306f\u81ea\u52d5\u8abf\u6574\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>.button {\n  display: inline-block;\n  background: #000;\n  border-radius: 5px;\n  color: #fff;\n  width: 500px;\n  text-align: center;\n  padding: 15px 0;\n  text-decoration: none;\n  display: grid;\n  grid-template-columns: 50px auto 50px;\n}<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3068\u3066\u3082\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u306d\u3002<br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3044\u304b\u304c\u3060\u3063\u305f\u3067\u3057\u3087\u3046\u304b\u3002<br>\u4eca\u56de\u306f\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3092\u4f7f\u3063\u305f\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u30dc\u30bf\u30f3\u4f5c\u308a\u65b9\u306b\u3064\u3044\u3066\uff13\u3064\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002<br>\u305d\u308c\u305e\u308c\u7279\u5fb4\u304c\u3042\u308a\u3001\u899a\u3048\u308c\u3070\u7c21\u5358\u306b\u4f7f\u3048\u308b\u3082\u306e\u3070\u304b\u308a\u3067\u3059\u306e\u3067\u305c\u3072\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\t<div class=\"adbanner\" style=\"margin:0 0 30px 0;\">\n\t\t<iframe loading=\"lazy\" style=\"margin:0\tauto;\" src=\"https:\/\/rcm-fe.amazon-adsystem.com\/e\/cm?o=9&p=48&l=ur1&category=amazonrotate&f=ifr&linkID=528672f6928aa364301f0b83e4e61d09&t=yossyhomepage-22&tracking_id=yossyhomepage-22\" width=\"728\" height=\"90\" scrolling=\"no\" border=\"0\" marginwidth=\"0\" style=\"border:none;\" frameborder=\"0\"><\/iframe>\n\t<\/div>\n\t","protected":false},"excerpt":{"rendered":"<p>\u4eca\u56de\u306f\u3001CSS\u3092\u4f7f\u3063\u3066\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u306e\u3053\u306e\u3088\u3046\u306a\u30dc\u30bf\u30f3\u306e\u4f5c\u308a\u65b9\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002\u5358\u306a\u308b\u30dc\u30bf\u30f3\u3068\u6bd4\u3079\u3066\u3001\u3053\u306e\u3088\u3046\u306b\u30a2\u30af\u30b7\u30e7\u30f3\u3084\u30dc\u30bf\u30f3\u306e\u610f\u5473\u3092\u30a2\u30a4\u30b3\u30f3\u3067\u793a\u3059\u3053\u3068\u3067\u3001UI\u3068\u3057\u3066\u512a\u308c\u305f\u30dc\u30bf\u30f3\u306b\u306a\u308b\u306e\u3067\u3001\u305c\u3072\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002\u4e3b\u306a\u4f5c\u308a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8077,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8061","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-1"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/posts\/8061","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8061"}],"version-history":[{"count":12,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/posts\/8061\/revisions"}],"predecessor-version":[{"id":8076,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/posts\/8061\/revisions\/8076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/media\/8077"}],"wp:attachment":[{"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}