{"id":7891,"date":"2023-04-22T12:54:41","date_gmt":"2023-04-22T03:54:41","guid":{"rendered":"https:\/\/jinr.jp\/manual\/?p=7891"},"modified":"2023-04-22T17:00:15","modified_gmt":"2023-04-22T08:00:15","slug":"premium-demo02","status":"publish","type":"post","link":"https:\/\/jinr.jp\/manual\/premium-demo02\/","title":{"rendered":"\u6709\u6599\u8a18\u4e8b\u306eDEMO2\uff5c1\u8cfc\u5165\u3067\u4ed6\u8a18\u4e8b\u3082\u8aad\u3081\u308b"},"content":{"rendered":"\n

\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3059\u308b\u305f\u3081\u306b\u3001\u4ee5\u4e0b\u306e\u624b\u9806\u3067JavaScript\u3068CSS\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

    \n
  1. HTML\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
  2. CSS\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
  3. JavaScript\u3092\u4f7f\u7528\u3057\u3066\u3001\u30da\u30fc\u30b8\u306e\u8aad\u307f\u8fbc\u307f\u304c\u5b8c\u4e86\u3057\u305f\u3089\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u975e\u8868\u793a\u306b\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n

    \u4ee5\u4e0b\u306b\u30b3\u30fc\u30c9\u4f8b\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

    \u7121\u6599\u516c\u958b\u306f\u3053\u3053\u307e\u3067\u3002\u4ee5\u4e0b\u306f\u8cfc\u5165\u8005\u3060\u3051\u306e\u9650\u5b9a\u60c5\u5831<\/span>\u306e\u3068\u306a\u308a\u307e\u3059<\/p>\n\n\n\n

    \n
    <\/span><\/span><\/div>
    Q<\/div>
    \u7121\u6599\uff01\u30c6\u30b9\u30c8\u8cfc\u5165\u3059\u308b\u306b\u306f\uff1f<\/dt>
    \n

    \u30b5\u30a4\u30c8\u306b\u4f1a\u54e1\u767b\u9332\u304c\u5b8c\u4e86\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u6c7a\u6e08\u30da\u30fc\u30b8\u306b\u98db\u3073\u307e\u3059\u3002<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    \u30af\u30ec\u30b8\u30c3\u30c8\u30ab\u30fc\u30c9\u756a\u53f7<\/span>\u306f\u30c0\u30df\u30fc\u306e\u3082\u306e\u3092\u304a\u4f7f\u3044\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n

    \u2193\u30c0\u30df\u30fc\u30ab\u30fc\u30c9\u306e\u756a\u53f7 \u2193\n<\/span>\n<\/span>5555555555554444\n<\/span><\/code><\/pre><\/section>\n\n\n\n
    \u65e5\u4ed8\u30fb\u6697\u8a3c\u756a\u53f7<\/span>\u306f\u9069\u5f53\u306a\u6570\u5b57\u3067OK\u3067\u3059\u3002\uff08\u305f\u3060\u3057\u3001\u6570\u5b57\u306f\u672a\u6765\u306e\u65e5\u4ed8\u3067\u306a\u3044\u3068\u30b7\u30b9\u30c6\u30e0\u306b\u5f3e\u304b\u308c\u3066\u3057\u307e\u3044\u307e\u3059\u3002\uff09<\/p>\n<\/dd><\/dl><\/div>\n<\/section>\n\n\n\n
    \u3053\u306e\u30da\u30fc\u30b8\u306f\u30c6\u30b9\u30c8\u8cfc\u5165\u7528\u3067\u3059\u3002
    \u5b9f\u969b\u306b\u306f\u304a\u91d1\u306f\u304b\u304b\u308a\u307e\u305b\u3093\u306e\u3067\u3054\u5b89\u5fc3\u304f\u3060\u3055\u3044\u3002<\/span><\/mark><\/p>\n\n\n
    \n\t
    \u3053\u3053\u304b\u3089\u5148\u306f\u9650\u5b9a\u516c\u958b\u3067\u3059<\/span><\/div>\n\t
    <\/div>\n\t
    \n\t\t\t\t\t
    1,980\u5186\uff5c\u7d9a\u304d\u3092\u8aad\u3080  <\/i> <\/a><\/span><\/div>\n\t\t\t\t<\/div>\n\t
    \u3059\u3067\u306b\u8cfc\u5165\u6e08\u307f\u306e\u65b9\u306f\u3053\u3061\u3089<\/a><\/p>\n\t\n\t\n\t<\/div>\n\n\n
    \u4ee5\u4e0b\u3001\u6709\u6599\u8a18\u4e8b\u306e\u5185\u5bb9\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
    HTML<\/span><\/p>\n\n\n\n
    1<\/span><!DOCTYPE <\/span>html<\/span>><\/span>\n<\/span>2<\/span><\/span><<\/span>html<\/span> <\/span>lang<\/span>=<\/span>\"ja\"<\/span>><\/span>\n<\/span>3<\/span><\/span><<\/span>head<\/span>><\/span>\n<\/span>4<\/span>  <\/span><<\/span>meta<\/span> <\/span>charset<\/span>=<\/span>\"UTF-8\"<\/span>><\/span>\n<\/span>5<\/span>  <\/span><<\/span>meta<\/span> <\/span>name<\/span>=<\/span>\"viewport\"<\/span> <\/span>content<\/span>=<\/span>\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\n<\/span>6<\/span>  <\/span><<\/span>title<\/span>><\/span>\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/span><\/<\/span>title<\/span>><\/span>\n<\/span>7<\/span>  <\/span><<\/span>link<\/span> <\/span>rel<\/span>=<\/span>\"stylesheet\"<\/span> <\/span>href<\/span>=<\/span>\"styles.css\"<\/span>><\/span>\n<\/span>8<\/span><\/span><\/<\/span>head<\/span>><\/span>\n<\/span>9<\/span><\/span><<\/span>body<\/span>><\/span>\n<\/span>10<\/span>  <\/span><<\/span>div<\/span> <\/span>id<\/span>=<\/span>\"loading-animation\"<\/span>><\/span>\n<\/span>11<\/span>    <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>\"spinner\"<\/span>><\/span><\/<\/span>div<\/span>><\/span>\n<\/span>12<\/span>  <\/span><\/<\/span>div<\/span>><\/span>\n<\/span>13<\/span>  <\/span><!-- \u4ed6\u306e\u30b3\u30f3\u30c6\u30f3\u30c4 --><\/span>\n<\/span>14<\/span>  <\/span><<\/span>script<\/span> <\/span>src<\/span>=<\/span>\"scripts.js\"<\/span>><\/span><\/<\/span>script<\/span>><\/span>\n<\/span>15<\/span><\/span><\/<\/span>body<\/span>><\/span>\n<\/span>16<\/span><\/span><\/<\/span>html<\/span>><\/span>\n<\/span>17<\/span>\n<\/span><\/code><\/pre><\/section>\n\n\n\n
    CSS<\/span><\/p>\n\n\n\n
    1<\/span>body<\/span> {\n<\/span>2<\/span>  <\/span>margin<\/span>: <\/span>0<\/span>;\n<\/span>3<\/span>  <\/span>overflow<\/span>: hidden;\n<\/span>4<\/span>}\n5<\/span>\n6<\/span><\/span>#loading-animation<\/span> {\n<\/span>7<\/span>  <\/span>position<\/span>: fixed;\n<\/span>8<\/span>  <\/span>top<\/span>: <\/span>0<\/span>;\n<\/span>9<\/span>  <\/span>left<\/span>: <\/span>0<\/span>;\n<\/span>10<\/span>  <\/span>width<\/span>: <\/span>100%<\/span>;\n<\/span>11<\/span>  <\/span>height<\/span>: <\/span>100%<\/span>;\n<\/span>12<\/span>  <\/span>background-color<\/span>: <\/span>rgba<\/span>(<\/span>255<\/span>, <\/span>255<\/span>, <\/span>255<\/span>, <\/span>0.9<\/span>);\n<\/span>13<\/span>  <\/span>display<\/span>: flex;\n<\/span>14<\/span>  <\/span>align-items<\/span>: center;\n<\/span>15<\/span>  <\/span>justify-content<\/span>: center;\n<\/span>16<\/span>  <\/span>z-index<\/span>: <\/span>1000<\/span>;\n<\/span>17<\/span>}\n18<\/span>\n19<\/span><\/span>.spinner<\/span> {\n<\/span>20<\/span>  <\/span>width<\/span>: <\/span>50px<\/span>;\n<\/span>21<\/span>  <\/span>height<\/span>: <\/span>50px<\/span>;\n<\/span>22<\/span>  <\/span>border<\/span>: <\/span>5px<\/span> solid <\/span>#f3f3f3<\/span>;\n<\/span>23<\/span>  <\/span>border-top<\/span>: <\/span>5px<\/span> solid <\/span>#3498db<\/span>;\n<\/span>24<\/span>  <\/span>border-radius<\/span>: <\/span>50%<\/span>;\n<\/span>25<\/span>  <\/span>animation<\/span>: spin <\/span>2s<\/span> linear infinite;\n<\/span>26<\/span>}\n27<\/span>\n28<\/span><\/span>@keyframes<\/span> spin {\n<\/span>29<\/span>  <\/span>0%<\/span> {\n<\/span>30<\/span>    <\/span>transform<\/span>: <\/span>rotate<\/span>(<\/span>0deg<\/span>);\n<\/span>31<\/span>  }\n32<\/span>  <\/span>100%<\/span> {\n<\/span>33<\/span>    <\/span>transform<\/span>: <\/span>rotate<\/span>(<\/span>360deg<\/span>);\n<\/span>34<\/span>  }\n35<\/span>}\n36<\/span>\n<\/code><\/pre><\/section>\n\n\n\n
    JS<\/span><\/p>\n\n\n\n
    1<\/span>document<\/span>.addEventListener(<\/span>\"DOMContentLoaded\"<\/span>, <\/span>function<\/span>(<\/span>) <\/span>{\n<\/span>2<\/span>  <\/span>const<\/span> loadingAnimation = <\/span>document<\/span>.getElementById(<\/span>\"loading-animation\"<\/span>);\n<\/span>3<\/span>\n4<\/span>  <\/span>setTimeout<\/span>(<\/span>() =><\/span> {\n<\/span>5<\/span>    loadingAnimation.style.display = <\/span>\"none\"<\/span>;\n<\/span>6<\/span>  }, <\/span>1000<\/span>); <\/span>\/\/ 1000ms\uff081\u79d2\uff09\u5f8c\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u975e\u8868\u793a\u306b\u3059\u308b<\/span>\n<\/span>7<\/span>});\n8<\/span>\n<\/code><\/pre><\/section>\n\n\n\n
    \u3053\u306e\u30b3\u30fc\u30c9\u4f8b\u3067\u306f\u3001\u30da\u30fc\u30b8\u4e0a\u306b\u30b7\u30f3\u30d7\u30eb\u306a\u30b9\u30d4\u30ca\u30fc\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u8868\u793a\u3055\u308c\u3001\u30da\u30fc\u30b8\u306e\u8aad\u307f\u8fbc\u307f\u304c\u5b8c\u4e86\u3057\u305f\u3089\uff08\u3053\u306e\u4f8b\u3067\u306f1\u79d2\u5f8c\u306b\uff09\u975e\u8868\u793a\u306b\u306a\u308a\u307e\u3059\u3002CSS\u3068JavaScript\u306e\u30b3\u30fc\u30c9\u306f\u3001\u9069\u5b9c\u5909\u66f4\u3057\u3066\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u30c7\u30b6\u30a4\u30f3\u3084\u52d5\u4f5c\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
    \u3053\u306e\u8a18\u4e8b\u3092\u8cfc\u5165\u3044\u305f\u3060\u3044\u305f\u65b9\u306f\u3001\u4ed6\u306e\u9650\u5b9a\u516c\u958b\u8a18\u4e8b\u3082\u8aad\u3081\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u306e\u3067\u3001\u53c2\u8003\u306b\u3057\u3066\u3044\u305f\u3060\u3051\u308b\u3068\u5e78\u3044\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3059\u308b\u305f\u3081\u306b\u3001\u4ee5\u4e0b\u306e\u624b\u9806\u3067JavaScript\u3068CSS\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002 \u4ee5\u4e0b\u306b\u30b3\u30fc\u30c9\u4f8b\u3092\u793a\u3057\u307e\u3059\u3002 \u7121\u6599\u516c\u958b\u306f\u3053\u3053\u307e\u3067\u3002\u4ee5\u4e0b\u306f\u8cfc\u5165\u8005\u3060\u3051\u306e\u9650\u5b9a\u60c5\u5831\u306e\u3068\u306a\u308a\u307e\u3059 \u3053\u306e\u30da\u30fc\u30b8\u306f\u30c6\u30b9\u30c8\u8cfc\u5165\u7528\u3067\u3059\u3002\u5b9f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jinr_url_youtube":"","_jinr_pip_youtube":false,"_jinr_time_youtube":"","_jinr_thumb_youtube":"","_jinr_media_youtube":"","_jinr_category_edit":false,"_jinr_category":"","_jinr_title_display":false,"_jinr_snsbutton_display":false,"_jinr_ads_display":false,"_jinr_thumbnail_display":false,"_jinr_profile_display":false,"_jinr_representations_display":false,"_jinr_relatedpost_display":false,"_jinr_sidebar1col_display":false,"_jinr_sidebar2col_display":false,"_jinr_seotitle_display":"","_jinr_description_display":"","_jinr_keyword_display":"","_jinr_hastag_display":"","_jinr_canonical_display":"","_jinr_noindex_display":true,"_jinr_paidpost":false,"_jinr_paidpost_product_id":"","_jinr_headtag_article":"","pgc_sgb_lightbox_settings":"","_jinr_ogp_image_url":"","_jinr_last_featured_id":0,"footnotes":""},"categories":[90],"tags":[],"class_list":["post-7891","post","type-post","status-publish","format-standard","hentry","category-90"],"jetpack_featured_media_url":"","views":"587","_links":{"self":[{"href":"https:\/\/jinr.jp\/manual\/wp-json\/wp\/v2\/posts\/7891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jinr.jp\/manual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jinr.jp\/manual\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jinr.jp\/manual\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jinr.jp\/manual\/wp-json\/wp\/v2\/comments?post=7891"}],"version-history":[{"count":2,"href":"https:\/\/jinr.jp\/manual\/wp-json\/wp\/v2\/posts\/7891\/revisions"}],"predecessor-version":[{"id":7900,"href":"https:\/\/jinr.jp\/manual\/wp-json\/wp\/v2\/posts\/7891\/revisions\/7900"}],"wp:attachment":[{"href":"https:\/\/jinr.jp\/manual\/wp-json\/wp\/v2\/media?parent=7891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jinr.jp\/manual\/wp-json\/wp\/v2\/categories?post=7891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jinr.jp\/manual\/wp-json\/wp\/v2\/tags?post=7891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}