{"id":378,"date":"2020-10-12T22:06:01","date_gmt":"2020-10-12T13:06:01","guid":{"rendered":"https:\/\/www.iotoon.com\/?p=378"},"modified":"2020-10-12T22:26:38","modified_gmt":"2020-10-12T13:26:38","slug":"post-378","status":"publish","type":"post","link":"https:\/\/www.iotoon.com\/?p=378","title":{"rendered":"\u3010CSS\u3011\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u753b\u50cf\u3092\u62e1\u5927\uff01"},"content":{"rendered":"\n<p>\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u753b\u50cf\u304c\u62e1\u5927\u3057\u307e\u3059\u3002\u30c0\u30a4\u30ca\u30df\u30c3\u30af\u306a\u52d5\u304d\u306e\u3042\u308b\u30ea\u30c3\u30c1\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u3088\u3046\u306b\u898b\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7c21\u5358\u306b\u5b9f\u88c5\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 id=\"outline__1\">\u4eca\u56de\u306f\u3053\u306e\u753b\u50cf\u3092\u4f7f\u3044\u307e\u3059\u3002<\/h2>\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\/10\/CSSLOGO02-1-1024x768.png\" alt=\"\" class=\"wp-image-380\" width=\"310\" height=\"233\" srcset=\"https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/10\/CSSLOGO02-1-1024x768.png 1024w, https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/10\/CSSLOGO02-1-300x225.png 300w, https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/10\/CSSLOGO02-1-768x576.png 768w, https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/10\/CSSLOGO02-1-1536x1152.png 1536w, https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/10\/CSSLOGO02-1.png 2000w\" sizes=\"(max-width: 310px) 100vw, 310px\" \/><figcaption>\u3053\u306e\u753b\u50cf\u3092\u4f7f\u3044\u307e\u3059\u3002<\/figcaption><\/figure>\n\n\n\n<h2 id=\"outline__2\">HTML\u306f\u3053\u3061\u3089<\/h2>\n\n\n\n<p>\u8981\u7d20\u3092\u6e96\u5099\u3057\u307e\u3059\u3002\u305d\u306e\u4e2d\u306b\u753b\u50cf\u306e\u30bf\u30b0\u3092\u8868\u8a18\u3057\u307e\u3059\u3002<br>\u305d\u306e\u307e\u307e\u30b3\u30d4\u30fc\u3057\u3066\u4f7f\u3048\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;:true,&quot;showPanel&quot;:false,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;div class=&quot;big&quot;&gt;\n    &lt;img src=&quot;https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/10\/CSSLOGO02.png&quot; \/&gt;\n&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 id=\"outline__3\">CSS\u306f\u3053\u3061\u3089<\/h2>\n\n\n\n<p>\u30af\u30e9\u30b9\uff08.big\uff09\u3067400px\u306e\u8868\u793a\u306e\u67a0\u3092\u4f5c\u3063\u3066\u307e\u3059\u3002<br>\u3064\u304e\u306e\u30af\u30e9\u30b9\uff08.big img\uff09\u3067\u753b\u50cf\u306e\u5e45400px\u6307\u5b9a\u3002display\u3067\u30d6\u30ed\u30c3\u30af\u8981\u7d20\u6307\u5b9a\u3002transition\u306b0.5s\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u306b\u3088\u308a\u30010.5\u79d2\u3067transform:scale\u3067\u6307\u5b9a\u3059\u308b\u6700\u5927\u306e\u5927\u304d\u3055\u307e\u3067\u753b\u50cf\u304c\u62e1\u5927\u3055\u308c\u307e\u3059\u3002<br>\u6b21\u306e\u30af\u30e9\u30b9\uff08.big img:hover\uff09\u306etransform:scale(\u6a2a\u3001\u7e26)\u3067\u300c\u7e26\u300d\u300c\u6a2a\u300d\u306e\u62e1\u5927\u6bd4\u7387\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002\u4f8b\u306f3\u500d\u3067\u3059\u3002\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u753b\u50cf\u304c\u62e1\u5927\u3067\u304d\u308b\u3088\u3046\u306bhover\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<br>HTML\u3068\u5408\u308f\u305b\u3066\u305d\u306e\u307e\u307e\u30b3\u30d4\u30fc\u3057\u3066\u4f7f\u3048\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;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;showPanel&quot;:false,&quot;language&quot;:&quot;CSS&quot;,&quot;modeName&quot;:&quot;css&quot;}\">.big {\n\toverflow: hidden;\n\twidth: 400px;\n\theight: auto;\n}\n.big img {\n    width: 400px;\n\tdisplay: block;\n\ttransition: 0.5s;\n}\n.big img:hover {\n\ttransform: scale(3.0, 3.0);\n}<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 id=\"outline__4\">\uff24\uff25\uff2d\uff2f<\/h2>\n\n\n\n<p>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u53f3\u4e0a\u306e\u518d\u751f\u30dc\u30bf\u30f3\u3067\u8868\u793a\u3092\u78ba\u8a8d\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;:true,&quot;fileName&quot;:&quot;HTML&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;style type=&quot;text\/css&quot;&gt;\n.big {\noverflow: hidden;\nwidth: 400px;\nheight: auto;\n}\n.big img {\nwidth: 400px;\ndisplay: block;\ntransition: 0.5s;\n}\n.big img:hover {\ntransform: scale(2.0, 2.0);\n}\n&lt;\/style&gt;\n\n&lt;div class=&quot;big&quot;&gt;\n    &lt;img src=&quot;https:\/\/www.iotoon.com\/wp-content\/uploads\/2020\/10\/CSSLOGO02.png&quot; \/&gt;\n&lt;\/div&gt;\n\n<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 id=\"outline__5\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p>\u753b\u50cf\u306e\u62e1\u5927\u7e2e\u5c0f\u306f\u300ctransform\uff1ascale(\u6a2a\u500d\u7387\u3001\u7e26\u500d\u7387)\u300d\u3067\u6307\u5b9a\u304c\u51fa\u6765\u307e\u3059\u3002<br>\u753b\u50cf\u306e\u62e1\u5927\u7e2e\u5c0f\u306e\u4ed6\u306b\u3082\u300c\u56de\u8ee2\u300d\u306a\u3069\u306e\u52d5\u304d\u3092\u3064\u3051\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<br>\u5225\u306a\u6a5f\u4f1a\u306b\u7d39\u4ecb\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"\u30aa\u30f3\u30de\u30a6\u30b9\u3067\u753b\u50cf\u306e\u62e1\u5927\u7e2e\u5c0f\u3002CSS\u3067\u7c21\u5358\u306b\u5b9f\u88c5\u51fa\u6765\u307e\u3059\u3002\u30b3\u30d4\u30da\u3067\u7c21\u5358\u3002","protected":false},"author":1,"featured_media":366,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[47],"_links":{"self":[{"href":"https:\/\/www.iotoon.com\/index.php?rest_route=\/wp\/v2\/posts\/378"}],"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=378"}],"version-history":[{"count":12,"href":"https:\/\/www.iotoon.com\/index.php?rest_route=\/wp\/v2\/posts\/378\/revisions"}],"predecessor-version":[{"id":391,"href":"https:\/\/www.iotoon.com\/index.php?rest_route=\/wp\/v2\/posts\/378\/revisions\/391"}],"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=378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iotoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iotoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}