{"id":339,"date":"2020-10-01T12:36:52","date_gmt":"2020-10-01T03:36:52","guid":{"rendered":"https:\/\/www.iotoon.com\/?p=339"},"modified":"2020-10-01T16:38:42","modified_gmt":"2020-10-01T07:38:42","slug":"post-339","status":"publish","type":"post","link":"https:\/\/www.iotoon.com\/?p=339","title":{"rendered":"\uff3bCSS\uff3d\u753b\u50cf\u3092\u4e38\u304f\u5207\u308a\u53d6\u308b\u65b9\u6cd5\u3000\u30b3\u30d4\u30fc\uff06\u30da\u30fc\u30b9\u30c8\u3067\u8d85\u7c21\u5358"},"content":{"rendered":"\n<h2 id=\"outline__1\">\u76ee\u7684<\/h2>\n\n\n\n<p>CSS\u3092\u4f7f\u3063\u3066\u753b\u50cf\u3092\u4e38\u304f\u5207\u308a\u53d6\u308a\u307e\u3059\u3002<br>\u4eca\u56de\u306f\u3053\u306e\u753b\u50cf\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/06\/mitsuya_ume_soda-1024x569.png\" alt=\"\u4e09\u30c4\u77e2\u30b5\u30a4\u30c0\u30fc\u6885\" class=\"wp-image-43\" width=\"358\" height=\"199\" srcset=\"https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/06\/mitsuya_ume_soda-1024x569.png 1024w, https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/06\/mitsuya_ume_soda-300x167.png 300w, https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/06\/mitsuya_ume_soda-768x426.png 768w, https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/06\/mitsuya_ume_soda-1536x853.png 1536w, https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/06\/mitsuya_ume_soda-2048x1137.png 2048w\" sizes=\"(max-width: 358px) 100vw, 358px\" \/><\/figure>\n\n\n\n<p>\u5b9f\u969b\u306e\u30b5\u30a4\u30ba\u306f\u3001\u7e26\u3001\u6a2a\u30012000px \u4ee5\u4e0a\u306e\u5927\u304d\u306a\u753b\u50cf\u3067\u3059\u3002<br>\u3053\u306e\u5927\u304d\u306a\u753b\u50cf\u3092200px\u306e\u6b63\u5186\u3067\u8868\u793a\u3057\u307e\u3059\u3002<br><\/p>\n\n\n\n<h2 id=\"outline__2\">\u753b\u50cf\u3092\u4e38\u304f\u5207\u308a\u53d6\u308b\u5834\u5408\u306eCSS<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:false,&quot;language&quot;:&quot;CSS&quot;,&quot;modeName&quot;:&quot;css&quot;}\">img {\n\twidth:200px;\n\theight:200px;\n\tobject-fit:cover;\n\tborder-radius:50%;\n}<\/pre><\/div>\n\n\n\n<p>\uff3b\u52d5\u4f5c\u30c7\u30e2\uff3d<br>\u4e0a\u8a18CSS\u306e\u8a2d\u5b9a\u5024\uff08\u30d7\u30ed\u30d1\u30c6\u30a3\u3001\u30d0\u30ea\u30e5\u30fc\uff09\u306f\u300cstyle\u300d\u306e\u4e2d\u306b\u8a18\u8f09\u3057\u3066\u3044\u307e\u3059\u3002<br>\u518d\u751f\u30dc\u30bf\u30f3\u306e\u30af\u30ea\u30c3\u30af\u3067\u8868\u793a\u7d50\u679c\u3092\u898b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;languageLabel&quot;:&quot;no&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;img src=&quot;https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/06\/mitsuya_ume_soda.png&quot; alt=&quot;&quot; class=&quot;creators_profile&quot;\nstyle=&quot;\nwidth:200px;\nheight:200px;\nobject-fit:cover;\nborder-radius:50%;         \n&quot;&gt;<\/pre><\/div>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 id=\"outline__3\">\u5207\u308a\u53d6\u3063\u305f\u753b\u50cf\u306e\u4f4d\u7f6e\u3092\u8abf\u6574\u3057\u305f\u3044\u5834\u5408\u306fobject-position\u3092\u3064\u304b\u3046<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;CSS&quot;,&quot;modeName&quot;:&quot;css&quot;}\">img {\n\twidth:200px;\n\theight:200px;\n\tobject-fit:cover;\n\tborder-radius:50%;\n\tobject-position:0px 0px;\n}<\/pre><\/div>\n\n\n\n<p>\uff3b\u52d5\u4f5c\u30c7\u30e2\uff3d<br>\u300cobject-position:-150px 0px;\u300d<br>-150px\u3068\u66f8\u304f\u3053\u3068\u3067\u3001\u753b\u50cf\u306e\u8868\u793a\u4f4d\u7f6e\u3092<strong>\u5de6\u306b150px\u79fb\u52d5<\/strong>\u3057\u3066\u3044\u307e\u3059\u3002<br>\u518d\u751f\u30dc\u30bf\u30f3\u306e\u30af\u30ea\u30c3\u30af\u3067\u8868\u793a\u7d50\u679c\u3092\u898b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;languageLabel&quot;:&quot;no&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;img src=&quot;https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/06\/mitsuya_ume_soda.png&quot; alt=&quot;&quot; class=&quot;creators_profile&quot;\nstyle=&quot;\nwidth:200px;\nheight:200px;\nobject-fit:cover;\nborder-radius:50%;\nobject-position:-150px 0px;\n&quot;&gt;<\/pre><\/div>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 id=\"outline__4\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p>\u30fb\u5207\u308a\u53d6\u308b\u30b5\u30a4\u30ba\u306e\u300cwidth\u300d\u3068\u300cheight\u300d\u306f\u540c\u3058\u5024<br>\u30fb\u300cobject-fit:cover;\u300d\u3067\u9577\u3044\u753b\u50cf\u306e\u5fc5\u8981\u306a\u90e8\u5206\u3060\u3051\u3092\u8868\u793a<br>\u30fb\u753b\u50cf\u3092\u6b63\u5186\u306b\u3059\u308b\u305f\u3081\u306b\u300cborder-radius:50%;\u300d\u3092\u8a2d\u5b9a<br>\u30fb\u753b\u50cf\u306e\u30c8\u30ea\u30df\u30f3\u30b0\u4f4d\u7f6e\u306f\u300cobject-position:\uff08\u5de6\u304b\u3089\uff09px \uff08\u4e0a\u304b\u3089\uff09px;\u300d\u3067\u8abf\u6574<\/p>\n","protected":false},"excerpt":{"rendered":"\u3010CSS\u3011\u753b\u50cf\u3092\u4e38\u304f\u5207\u308a\u53d6\u308b\u65b9\u6cd5\u3000\u30b3\u30d4\u30fc\uff06\u30da\u30fc\u30b9\u30c8\u3067\u8d85\u7c21\u5358","protected":false},"author":1,"featured_media":366,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[47,41],"_links":{"self":[{"href":"https:\/\/www.iotoon.com\/index.php?rest_route=\/wp\/v2\/posts\/339"}],"collection":[{"href":"https:\/\/www.iotoon.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iotoon.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iotoon.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iotoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=339"}],"version-history":[{"count":27,"href":"https:\/\/www.iotoon.com\/index.php?rest_route=\/wp\/v2\/posts\/339\/revisions"}],"predecessor-version":[{"id":368,"href":"https:\/\/www.iotoon.com\/index.php?rest_route=\/wp\/v2\/posts\/339\/revisions\/368"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.iotoon.com\/index.php?rest_route=\/wp\/v2\/media\/366"}],"wp:attachment":[{"href":"https:\/\/www.iotoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iotoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iotoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}