CINXE.COM
無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」 - GIGAZINE
<!DOCTYPE html> <html lang="ja"> <head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#"> <link rel="dns-prefetch" href="https://i.gzn.jp"> <meta charset="utf-8"> <title>無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」 - GIGAZINE</title> <meta property="og:site_name" content="GIGAZINE" /> <meta property="og:title" content="無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://gigazine.net/news/20240922-simple-icons/" /> <meta property="fb:pages" content="514043575350122" /> <meta name="robots" content="max-image-preview:large"> <script data-cfasync="false" async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <meta name="description" content="「Simple Icons」は多数のブランドのアイコンをSVG形式でダウンロード可能なサイトとのことなので、どんなサイトなのか実際に確かめてみました。" /> <meta property="og:image" content="https://i.gzn.jp/img/2024/09/22/simple-icons/00.png" /> <meta property="og:description" content="「Simple Icons」は多数のブランドのアイコンをSVG形式でダウンロード可能なサイトとのことなので、どんなサイトなのか実際に確かめてみました。" /> <meta property="twitter:account_id" content="9334242" /> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@gigazine"> <meta name="robots" content="max-image-preview:large"> <link rel="preload" as="image" href="https://i.gzn.jp/img/2024/09/22/simple-icons/00_m.png" /> <link rel="canonical" href="https://gigazine.net/news/20240922-simple-icons/"> <link rel="alternate" hreflang="en" href="https://gigazine.net/gsc_news/en/20240922-simple-icons/" /> <script type="application/ld+json"> { "@context": "http://schema.org", "@type":"NewsArticle", "mainEntityOfPage":{ "@type":"WebPage", "@id":"https://gigazine.net/news/20240922-simple-icons/" }, "datePublished": "2024-09-22T23:00:00+09:00", "dateModified": "2024-09-22T22:05:22+09:00", "url":"https://gigazine.net/news/20240922-simple-icons/", "headline":"無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」", "description":"「Simple Icons」は多数のブランドのアイコンをSVG形式でダウンロード可能なサイトとのことなので、どんなサイトなのか実際に確かめてみました。", "image":["https://i.gzn.jp/img/2024/09/22/simple-icons/00.png"], "author":"@GIGAZINE", "publisher":{ "@type": "Organization", "name": "GIGAZINE", "logo":{"@type": "ImageObject", "url":"https://i.gzn.jp/images/logo.png", "width":"425px","height":"125px"}} } </script> <script type="application/ld+json"> [ { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "TOP", "item": "https://gigazine.net/" }, { "@type": "ListItem", "position": 2, "name": "無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」", "item": "https://gigazine.net/news/20240922-simple-icons/" } ] }, { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "TOP", "item": "https://gigazine.net/" }, { "@type": "ListItem", "position": 2, "name": "レビュー", "item": "https://gigazine.net/news/C12/" }, { "@type": "ListItem", "position": 3, "name": "無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」", "item": "https://gigazine.net/news/20240922-simple-icons/" } ] }, { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "TOP", "item": "https://gigazine.net/" }, { "@type": "ListItem", "position": 2, "name": "ウェブアプリ", "item": "https://gigazine.net/news/C37/" }, { "@type": "ListItem", "position": 3, "name": "無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」", "item": "https://gigazine.net/news/20240922-simple-icons/" } ] }, { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "TOP", "item": "https://gigazine.net/" }, { "@type": "ListItem", "position": 2, "name": "2024年09月22日", "item": "https://gigazine.net/news/2024/09/22/" }, { "@type": "ListItem", "position": 3, "name": "無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」", "item": "https://gigazine.net/news/20240922-simple-icons/" } ] } ] </script> <link rel="alternate" type="application/rss+xml" title="GIGAZINE RSS Feed" href="https://gigazine.net/news/rss_2.0/"> <link rel="apple-touch-icon" href="https://gigazine.net/apple-touch-icon.png"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box;} html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;} article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary { display: block;} audio,canvas,progress,video { display: inline-block; vertical-align: baseline;} audio:not([controls]) { display: none; height: 0;} [hidden],template { display: none;} a { background-color: transparent;} a:active,a:hover { outline: 0;} abbr[title] { border-bottom: 1px dotted;} b,strong { font-weight: bold;} dfn { font-style: italic;} h1 { font-size: 2em; margin: 0.67em 0;} mark { background: #ff0; color: #000;} small { font-size: 80%;} sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup { top: -0.5em;} sub { bottom: -0.25em;} img { border: 0;} svg:not(:root) { overflow: hidden;} figure { margin: 1em 40px;} hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0;} pre { overflow: auto;} code,kbd,pre,samp { font-family: monospace, monospace; font-size: 1em;} button,input,optgroup,select,textarea { color: inherit; font: inherit; margin: 0;} button { overflow: visible;} button,select { text-transform: none;} button,html input[type="button"],input[type="reset"],input[type="submit"] { -webkit-appearance: button; cursor: pointer;} button[disabled],html input[disabled] { cursor: default;} button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0;} input { line-height: normal;} input[type="checkbox"],input[type="radio"] { padding: 0;} input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { height: auto;} input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box;} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;} fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;} legend { border: 0; padding: 0;} textarea { overflow: auto;} optgroup { font-weight: bold;} table { border-collapse: collapse; border-spacing: 0;} td,th { padding: 0;} body {padding: 0; background: #fff; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: none;} a {margin:0; padding:0; text-decoration:none; vertical-align:baseline;} a:link {color:#1020d0;} a:visited {color:#777;} a:hover, a:active {color:#1020d0;} h1, h2, h3, h4, a, p, span, blockquote, li, th, td, dt, dd, input, .yeartime, .calendarBG {font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "San Francisco", "Segoe UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Roboto", Verdana, Arial, Helvetica, "メイリオ", Meiryo, "MS Pゴシック", sans-serif, MS UI Gothic;} b, big, .year, .time, #inq dt, #inq dd {background:transparent; word-break: break-all; word-wrap: break-word; overflow:hidden;} .defs {display: none;} #header {width: 100%; background: #fbfef4; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;} .logo {margin: 2px; padding:0; background: transparent;} .logo a {margin: 0;padding: 0;} .logo svg {width: 180px; height: 53px;} .logo .logojackimg {height: 53px;} #Google_TH {text-align: center;grid-column: 1 / 4;grid-row: 3 / 4; min-height:90px;} @media all and (min-width: 1033px) { #Google_TH {grid-column:2/3; grid-row: 1/2} } @media all and (max-width: 540px) { #Google_TH {min-height:0px;} } #Google_TC {height: 280px; max-width: calc(100vw - 32px);} #header-social-button-box { margin: auto 5px 9px auto; } #push_off, #push_on {display:none; z-index:9888;} .header-social-button {width:26px; height:26px; display:inline-block; cursor: pointer;} .header-social-button svg {width:20px; height:20px; display:block; margin: 3px auto; } @media only screen and (min-width:467px) { .logo svg {width: 205px; height: 60px;} .logo .logojackimg {height: 60px;} #Google_TC {min-height: 100px; height: auto;} } @media only screen and (min-width:1380px) { .logo svg {width: 425px; height: 125px;} .logo .logojackimg {height: 125px;} } #main > #section, #main > #article, #main > #latest, #main > #sub, #subtop {width: 100%; display: block;} #main > #section, #main > #article {background: transparent; border: 1px solid #ddd;} #main { display: grid; grid-template-areas: "article" "latest" "sub"; } #article { grid-area: article; overflow: auto; } #latest { grid-area: latest; width: 100%; } #sub { grid-area: sub; width: 100%; } .sbn {width:100%; height:auto; margin:5px auto 5px; padding:0; background: transparent; overflow:hidden;} .sbn img {width:100%; height:auto; overflow:hidden;} @media only screen and (min-width:728px) { .sbn img {width:728px; height:auto;} .sbn #TC {width:728px; margin:0 auto 0; text-align:center;} } .sbn #Google_TC {width:auto; max-width: calc(100vw - 32px); margin:0 auto 0; text-align:center;} .sbn #G_TC {width:300px; height:auto; margin:0 auto 0; text-align:center;} @media only screen and (min-width: 728px) and (max-width: 1579px) { .sbn #G_TC {width:728px; height:auto; margin:0 auto 0; text-align:center;} } #latest h3 {margin:0 0 10px 0; padding:5px; color: #2F4F2F; background-color: #fef592; font-size:1em;} #subNav {width:100%; background:transparent; margin: 0 auto 0; padding: 0; display: -webkit-box; display: -ms-flexbox; -js-display: flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap;} #subNav > .list-1, #subNav > .list-2, #subNav > .list-3 {background-color: transparent; margin: 0 auto 0; padding: 0; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;} #subNav dl {margin:0 0 10px 0; padding:0; background-color: transparent;} #subNav dl dt {margin:0; padding:5px; color: #2F4F2F; background-color: #fef592; font-size:1em; font-weight: bold;} #subNav dl dd {background: transparent;} #calendar {width:300px; height:auto; margin:10px auto 10px;} #searchform {margin:0; padding:0;} #searchform form {width:298px; margin:10px auto 10px; padding:0; overflow: hidden; position: relative;} #searchform input.input[type="text"] {border-radius: 0; border-style: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background:transparent; width: 254px; height: 40px; border: 1px solid #e1e1e1; background:#fff; margin:0; padding:0;} #searchform input.reset[type="reset"], #searchform input.submit[type="submit"], #searchform button.submit[type="submit"] {border-radius: 0; border-style: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background:transparent;} #searchform .reset{position: absolute; top: 0; left: 226px; width: 30px; height: 40px; margin:0; padding:0; font-weight:bold;font-size:22px; vertical-align:middle; color:#757575;} #searchform .submit{position: absolute; top: 0; left: 254px; width: 42px; height: 42px; margin:0; padding:0;} #searchform button.submit[type="submit"]{background:#3b78e7; border: 1px solid #3367d6;} #searchform .submit .icon{display: inline-block; width: 1em; height: 1em; margin: 0; padding: 0; fill:#fff;} .cntimage .yeartime {color:#777; font-size: .9em; font-weight: bold; display:inline-block; margin: 2px 0 2px 0;} .cntimage .title{display:block; color: #000; background: #ffdd00; margin: 0 0 5px 0; padding:2px 1px 2px 5px; line-height: 1.1em; font-weight: bold; font-size: 1.2em; word-wrap: break-word;} .preface, .article{color: #333; font-size: 1em;line-height:1.6em; word-break: break-all; word-wrap: break-word;} .preface{margin: 0; padding:1px 4px 1px 4px;} .article{margin: 0; padding:19px 4px 14px 4px;} .preface b {color: #000;} .cntimage img {width:100%; height:auto; border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; border-left:1px solid #e1e1e1; border-right:1px solid #e1e1e1; vertical-align:bottom; overflow: hidden;} .img-standard-size { aspect-ratio: 16/9; } .img-old-ratio { aspect-ratio: 4/3; } .cntimage span img{width: auto; height: auto; border-top: none; border-bottom: none; overflow: hidden;} #latest .e_ad .card{width:100%; margin:0;padding:2px 0 2px 0; background: #fbfef4; display: -webkit-box; display: -ms-flexbox; -js-display: flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap;} #latest .e_ad .thumb{width: 101px; -webkit-box-flex: 0; -ms-flex: none; flex: none; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; min-height: 59px;} #latest .e_ad .thumb a:link, #latest .e_ad .thumb a:visited, #latest .e_ad .thumb a:hover, #latest .e_ad .thumb a:active{display:block; width: 96px; height: 54px; margin: 0 5px 5px 0; overflow: hidden; background-color: #888; border: 1px solid #e1e1e1;} #latest .e_ad .thumb img{position: relative; top: 50%; left: 50%; width: 93px; height: 52px; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} #latest .e_ad h2{display:block; width:auto; height:auto; margin:0; padding: 0 0 2px 5px; font-weight:normal; font-size: .875em;line-height:1.2em; word-wrap: break-word; background: #fbfef4; -webkit-box-flex: 1; -ms-flex: 1 1 60%; flex: 1 1 60%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;} #latest .e_ad h2 a{display:inline; width:auto; height:auto; background: #fbfef4; margin:0 auto 0; padding: 0; overflow: hidden;} #latest .e_ad h2 a span{display:inline; padding: 1px 0 0 0; word-wrap: break-word;} #latest .e_ad .date { -webkit-box-flex: initial; -ms-flex: initial; flex: initial; width: 100%; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; height:1em;} #latest .e_ad .adtag .catab{position:absolute; top:2px; left:5px; color: #333; word-wrap: break-word; margin:0; font-weight:bold; font-size: .675em;} #latest .e_frame { position: relative; height: 5.45em; } #latest .e_frame>iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media all and (min-width: 810px) { .cntimage .title{font-size: 1.3em;} .cntimage img {width:auto; max-width:100%; height:auto;} .img-standard-size, .img-old-ratio { width: 560px !important;} #article .cntimage {width:auto; height:auto; margin: 0; padding:2px; overflow: hidden;} } @media all and (min-width: 1112px) { #main { min-height: 800px; grid-template-columns: 300px 1fr; grid-template-rows: "auto auto"; grid-template-areas: "latest article" "sub sub"; } #main > #latest { width: 300px;} #subNav {max-width:960px; background:transparent; margin: 10px auto 10px; padding: 0; display: -webkit-box; display: -ms-flexbox; -js-display: flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap;} #subNav > .list-1, #subNav > .list-2, #subNav > .list-3 {width:300px; margin:0 10px 0 10px;} #subNav .navi-list-2col{max-width:300px; margin:0; border-bottom:none; background:#fbfef4; overflow:hidden;} #subNav .navi-list-2col:after{content:""; display:block; clear:both;} #subNav .navi-list-2col dd{margin:0; width:50%; float:left; -webkit-box-sizing:border-box; box-sizing:border-box; background:#fbfef4;} #subNav .navi-list-2col dd:nth-child(even),#subNav .navi-list-2col dd:nth-child(odd){border-right:none;} #subNav .navi-list-2col dd a{position: relative; display:block; margin:0; padding:0; line-height:1em; margin-bottom:-1px; border-top:none; border-bottom:none;} #subNav .navi-list-2col dd .iconcat{display: inline-block; width: 30px; height: 30px; margin:0 0 0 .55em; padding: 0;} #subNav .navi-list-2col dd a b{position: absolute; top: 6px; left: 40px; font-size: .875em; display: inline; margin:0; padding: 0; vertical-align:middle;} #article .cntimage {width:auto; height:auto; margin: 0; padding:0 4px 0; overflow: hidden;} } @media all and (min-width: 1380px) { #main { grid-template-columns: 300px 1fr 300px; grid-template-areas: "latest article sub"; } #main > #sub { width: 300px;} .date time, .catab, .contentadleft .e_ad .adtag .catab {font-size: .8em;} .cntimage .yeartime {font-size: 1.1em;} .cntimage .title{font-size: 1.5em;} #latest h3, #subNav dl dt {font-size:1.17em;} #main > #sub { width: 300px;} #sub {border-top:none;} #sub #subNav {max-width:300px; background:transparent; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; -js-display: flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap;} #sub #subNav > .list-1, #sub #subNav > .list-2, #sub #subNav > .list-3 {width:300px; margin:0;} } #Google_IL > div{ max-width: calc(100vw - 32px); } #LT { width: 300px; height: 250px; max-width: 100%; } </style> <link rel="stylesheet" type="text/css" href="https://i.gzn.jp/css/common_v5_19.css" media="print" onload="this.media='all'"> <!-- a_lib_css --> <script src="https://i.gzn.jp/js/lazysizes.min.js" async=""></script> <!-- a_lib_js --> <!-- Google Analytics --> <script data-cfasync="false"> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga('create', 'UA-134978-3', 'auto'); ga('send', 'pageview'); </script> <script async src='https://www.google-analytics.com/analytics.js'></script> <!-- End Google Analytics --> <script data-cfasync="false"> (function(w,d,s,l,i){ w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'}); var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true; j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-WKH2HB8'); </script> <script id="growthbook-sdk" src="https://cdn.jsdelivr.net/npm/@growthbook/growthbook/dist/bundles/index.min.js" defer data-cfasync="false"></script> <script data-cfasync="false"> (function() { if (window.growthbook) {startGrowthbook();} else { document.querySelector("#growthbook-sdk").addEventListener("load", startGrowthbook); } window.gbcmd = window.gbcmd || []; function startGrowthbook() { if (!window.growthbook) return; const getUUID=()=>{let $="gbuuid",e=()=>window.crypto.randomUUID?window.crypto.randomUUID():"10000000-1000-4000-8000-100000000000".replace(/[018]/g,$=>($^crypto.getRandomValues(new Uint8Array(1))[0]&15>>$/4).toString(16)),t=$=>{let e=`; ${document.cookie}`.split(`; ${$}=`);if(2===e.length)return e.pop().split(";").shift()},r=($,e)=>{var t=new Date;t.setTime(t.getTime()+3456e7),document.cookie=$+"="+e+";path=/;expires="+t.toGMTString()};if(t($))return t($);let i=e();return r($,i),i}; let gbuuid = getUUID(); let gb = new growthbook.GrowthBook({ apiHost: "https://cdn.growthbook.io", clientKey: "sdk-crJoxkg8XM7YuqJV", attributes: { id: gbuuid, random: window.crypto.randomUUID?window.crypto.randomUUID():"10000000-1000-4000-8000-100000000000".replace(/[018]/g,$=>($^crypto.getRandomValues(new Uint8Array(1))[0]&15>>$/4).toString(16)) }, trackingCallback: function(experiment, result) { dataLayer.push({'event': 'experiment_viewed', 'event_category': "experiment", 'experiment_id': experiment.key, 'variation_id': result.variationId, 'gb_user_id': gbuuid, }); } }); gb.loadFeatures().then(function() { if(window.gbcmd && window.gbcmd instanceof Array){ window.gbcmd.forEach(cmd=>{cmd(gb);}); window.gbcmd = { push: (cmd)=>{cmd(gb)} } } }); } })(); </script> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <script data-cfasync="false"> !function(a9,a,p,s,t,A,g){if(a[a9])return;function q(c,r){a[a9]._Q.push([c,r])}a[a9]={init:function(){q("i",arguments)},fetchBids:function(){q("f",arguments)},setDisplayBids:function(){},targetingKeys:function(){return[]},_Q:[]};A=p.createElement(s);A.async=!0;A.src=t;g=p.getElementsByTagName(s)[0];g.parentNode.insertBefore(A,g)}("apstag",window,document,"script","//c.amazon-adsystem.com/aax2/apstag.js"); </script> <script data-cfasync="false"> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; var slotData = [ {name:'/4330625/Google_RB',sizes:[[300, 250], [300, 600]],domId:'div-gpt-ad-1524184715175-0',tam:true}, {name:'/4330625/Google_EF/Google_EF_2',sizes:[[300, 250], [336, 280]],domId:'div-gpt-ad-1524638328920-0',tam:true}, {name:'/4330625/Google_EF',sizes:[[300, 250], [336, 280]],domId:'div-gpt-ad-1583371000737-0',tam:true}, {name:'/4330625/Google_LB',sizes:[[300, 250], [300, 600]],domId:'div-gpt-ad-1524100786099-0',tam:true}, {name:'/4330625/Google_LT',sizes:[300, 250],domId:'div-gpt-ad-1524101924592-0',tam:true}, {name: '/4330625/Interstitial', outOfPageFormat: 'INTERSTITIAL'} ]; if( (navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) || navigator.userAgent.indexOf('Windows Phone') > 0 ){ // スマートフォン slotData.push({name:'/4330625/Google_TC',sizes:[[336, 280], [320, 180], [300, 250]],domId:'div-gpt-ad-1533535919247-0',tam:true}); slotData.filter(v=>v.name === "/4330625/Google_EF")[0].domId='div-gpt-ad-1583371000737-1'; slotData.push({name:'/4330625/Google_OL',sizes:['fluid', [320, 50]],domId:'div-gpt-ad-1597714017941-0',tam:true}); slotData.filter(v=>v.name === "/4330625/Google_LT")[0].sizes.push([336, 280]); slotData.filter(v=>v.name === "/4330625/Google_LB")[0].sizes.push([336, 280]); slotData.filter(v=>v.name === "/4330625/Google_RB")[0].sizes.push([336, 280]); } else { slotData.push({name:'/4330625/Google_TC', sizes:[728, 90], domId:'div-gpt-ad-1533535919247-0',tam:true}); slotData.push({name:'/4330625/Google_RT', sizes:[300, 250], domId:'div-gpt-ad-1523935894717-2',tam:true}); slotData.push({name:'/4330625/Google_TH', sizes:[728, 90], domId:'div-gpt-ad-1664264689307-0',tam:false}); } if (location.pathname.match(/^\/$/)) { slotData.filter(v=>v.name === "/4330625/Google_LT")[0].tam = false; } //set APS config apstag.init({ pubID: '3868', adServer: 'googletag' }); //Define apstag slots const apstagSlots = slotData.filter(data=>data.tam).map(function(value) { return { slotID: value.domId, slotName: value.name, sizes: value.sizes }; }); function sendAdserverRequest(){ if(window.adServerRequestSent === true)return; window.adServerRequestSent = true; console.log('fetchBids() END:' + Date.now()); googletag.cmd.push(function() { apstag.setDisplayBids(); googletag.pubads().refresh(); }); } console.log('fetchBids() BEGIN:' + Date.now()); apstag.fetchBids({ slots: apstagSlots }, function(bids) {sendAdserverRequest();}); googletag.cmd.push(()=>{ slotData.forEach(data=>{ if( data.domId === undefined && data.sizes === undefined ){ if( data.outOfPageFormat === 'INTERSTITIAL' ){ try { googletag.defineOutOfPageSlot(data.name, googletag.enums.OutOfPageFormat.INTERSTITIAL).addService(googletag.pubads()); } catch { console.log(`Interstitial slot "${data.name}" is already exists.`); } } }else{ try {googletag.defineSlot(data.name,data.sizes,data.domId).addService(googletag.pubads());} catch { console.log(`slot "${data.name}" is already exists.`); } } }); googletag.pubads().setTargeting('category',["レビュー","ウェブアプリ"]); googletag.pubads().disableInitialLoad(); googletag.pubads().enableLazyLoad({ fetchMarginPercent: 500, // Fetch slots within 5 viewports. renderMarginPercent: 200, // Render slots within 2 viewports. mobileScaling: 2.0 // Double the above values on mobile. }); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); window.setTimeout(() => {sendAdserverRequest();}, 900); </script> <!-- .a_lib_google_comments --> <meta name="twitter:widgets:autoload" content="off"> <script data-cfasync="false">window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) {t._e.push(f);}; return t; }(document, "script", "twitter-wjs"));</script> <style> .yt { position:relative; max-width: 560px; } .yt_play:hover {cursor:pointer;} .yt_play::before { /* YouTubeアイコン */ position: absolute; background: url(https://i.gzn.jp/img/yt_icon_rgb.png); content: ""; background-size: 100%; width: 70px; height: 50px; top: 50%; left: 50%; transform : translate(-50%,-50%); opacity: .90; transition:.5s; } .yt_play:hover::before { /* YouTubeアイコン */ cursor: pointer; background-image:url(https://i.gzn.jp/img/yt_icon_rgb.png); } .yt_play > img{ max-width: 560px; aspect-ratio: 16/9; } @media (min-width: 810px) { .yt_play > img{ width: 560px; } } </style> </head> <body class="no-login"> <script data-cfasync="false" src="https://i.gzn.jp/img/-side-ad.js"></script> <div style="display:none;" id="donation_wrapper" data-nosnippet> <style> @starting-style { #donate_large { opacity: 0; } } #donate_large { margin: 0 20px; padding: 1px 10px 12px; transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete; } .is-deleting { opacity: 0; } #donate_large label { text-align: left; padding-left: 4px; } .donate_title { font-size: 1.6rem; color: #000; background: #fd0; line-height: 1.1em; font-weight: 700; word-wrap: break-word; padding: 2px 1px 2px 5px; margin: 0 0 6px 0; width: 100%; cursor: pointer; } .amount_options { max-width: 76vw; width: 100%; display: block; margin-top: 8px; grid-area: 1 / 1 / 1 / -1; } .amount_options ul { display: flex; margin: 0; padding: 0; list-style: none; } .amount_options li { flex: 1 0 0; padding: 4px; } .amount_options > input { width: 274px; max-width: 66%; display: block; margin: 10px auto; height: 30px; transform: scale(1.5); } .donate_button { display: inline-grid; grid-template-columns: 1fr 100px auto 1fr; grid-template-rows: 80px auto; width: 400px; height: 140px; max-width: 100%; padding: 12px 0; text-align: center; color: white !important; font-weight: bold; border-radius: 8px; box-shadow: 1px 1px 0 0 rgba(255,255,255,.3) inset, 3px 3px 8px 0 rgba(0,0,0,0.4); } .small_note { font-size: large; grid-area: 2 / 3 / 3 / 4; } .price_note { grid-area: 1/3/2/4; font-size:68px; } @media screen and (max-width: 450px) { .donate_button{ grid-template-columns: 1fr 80px auto 1fr; } .price_note{font-size:60px;} } .donate_icon { grid-area: 1/1/-1/3; width: 85%; max-width: 100px; margin: auto; max-height: 100px; } .fa-secondary{fill:#fdd835;} .payment-marks { display: flex; width: 400px; max-width: 100%; margin: auto; justify-content: right; } .payment-marks img{ height: 30px; margin-right: 6px; border: none; width: auto; } </style> <svg display="none"> <defs> <symbol viewBox="0 0 576 512" id="pg-bank"> <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --> <path d="M560 224h-29.51a159.88 159.88 0 0 0-37.38-52.46L512 96h-32c-29.4 0-55.39 13.5-73 34.32-7.57-1.1-15.12-2.32-23-2.32H256c-94.82 0-160 78.88-160 160a159.75 159.75 0 0 0 64 128v80a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-48h128v48a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-80.72A160.37 160.37 0 0 0 511.28 384H560a16 16 0 0 0 16-16V240a16 16 0 0 0-16-16zm-128 64a16 16 0 1 1 16-16 16 16 0 0 1-16 16z" class="fa-secondary"/><path d="M51.26 255.52a24 24 0 0 1-18.74-28.3C34.74 215.82 45.4 208 57 208h1a6 6 0 0 0 6-6v-20a6 6 0 0 0-6-6C29.5 176 4.1 196.4.47 224.62a54.64 54.64 0 0 0-.47 7.23A56.08 56.08 0 0 0 56 288h40a155.05 155.05 0 0 1 3.37-32H56a23.63 23.63 0 0 1-4.74-.48zM432 256a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM306.5 0a96 96 0 0 0-88.81 132.51A162.64 162.64 0 0 1 256 128h128a104.31 104.31 0 0 1 12.71.88A96.06 96.06 0 0 0 306.5 0z" class="fa-primary"/> </symbol> </defs> </svg> <div id="donate_title_close" class="donate_title" style="display:none;"> ▼サーバー運営を助ける支援をお願いします </div> <div id="donate_title_open" class="donate_title"> ▼サーバー運営を助ける支援をお願いします </div> <div id="donate_large"> <div style="text-align: center; display: grid; grid-template-columns: 30px 20px auto 20px auto; grid-template-rows: auto auto; width: 400px; max-width: 100%; margin: auto;"> <div class="amount_options" id="onetime"> <a id="donate_link" onclick="localStorage.setItem('donateClickDate', new Date().toString());dataLayer.push({'event': 'donateLinkClicked'});" href="https://donate.stripe.com/5kA5msbys6u42Gs14k" target="_blank" class="button-exp-style donate_button"> <svg class="donate_icon"><use xlink:href="#pg-bank"></svg> <span class="price_note">900円</span><span class="small_note">(うち手数料33円)</span></a> <input type="range" min="1" max="7" value="3" id="donation_slider"> <script> const priceData = [ { text: `<svg class="donate_icon"><use xlink:href="#pg-bank"></svg><span class="price_note">300円</span><span class="small_note">(うち手数料11円)</span>`, url: "https://donate.stripe.com/fZe4io1XSbOo0yk9AB" }, { text: `<svg class="donate_icon"><use xlink:href="#pg-bank"></svg><span class="price_note">600円</span><span class="small_note">(うち手数料22円)</span>`, url: "https://donate.stripe.com/00g4io6e8bOo1CoeV9" }, { text: `<svg class="donate_icon"><use xlink:href="#pg-bank"></svg><span class="price_note">900円</span><span class="small_note">(うち手数料33円)</span>`, url: "https://donate.stripe.com/5kA5msbys6u42Gs14k" }, { text: `<svg class="donate_icon"><use xlink:href="#pg-bank"></svg><span class="price_note">1500円</span><span class="small_note">(うち手数料54円)</span>`, url: "https://donate.stripe.com/14k4io7ic6u46WI147" }, { text: `<svg class="donate_icon"><use xlink:href="#pg-bank"></svg><span class="price_note">3000円</span><span class="small_note">(うち手数料108円)</span>`, url: "https://donate.stripe.com/28o6qweKE9GgftedQV" }, { text: `<svg class="donate_icon"><use xlink:href="#pg-bank"></svg><span class="price_note">5000円</span><span class="small_note">(うち手数料180円)</span>`, url: "https://donate.stripe.com/bIY4ioauo7y8ch24gm" }, { text: `<svg class="donate_icon"><use xlink:href="#pg-bank"></svg><span class="price_note">1万円</span><span class="small_note">(うち手数料360円)</span>`, url: "https://donate.stripe.com/cN25ms1XSf0AfteeV1" }, { text: `<svg class="donate_icon"><use xlink:href="#pg-bank"></svg><span class="price_note">テスト</span><span class="small_note">(うち手数料XX円)</span>`, url: "https://donate.stripe.com/test_7sIaIy7n5arT90c7st" } ]; const slider = document.getElementById("donation_slider"); const button = document.getElementById("donate_link"); slider.addEventListener("input", e=>{ button.innerHTML = priceData[e.target.value - 1].text; button.href = priceData[e.target.value - 1].url + window.location.search; }); button.href = button.href + window.location.search; </script> </div> </div> <div class="payment-marks"> <img src="https://i.gzn.jp/img/gsc/payment/visa.png" border="0"> <img src="https://i.gzn.jp/img/gsc/payment/master.png" border="0"> <img src="https://i.gzn.jp/img/gsc/payment/amex.png" border="0"> <img src="https://i.gzn.jp/img/gsc/payment/apple-pay.svg" border="0"> <img src="https://i.gzn.jp/img/gsc/payment/g-pay.png" border="0"> </div> <p> 私たちは過去最高の大ヒットを記録しているのと裏腹に価格高騰などの影響でサーバー運営が非常に苦しい状態です。打てる手は全て打ちましたが、それでもまだ危機的状況にあります。なので、GIGAZINEの物理的なサーバーたちを、たった1円でも良いので読者の皆さまに支援してもらえればとっても助かります!今すぐ1回払いの寄付は上のボタンから、毎月寄付は<b><a href="https://gigazine.net/club/" target="_blank">こちらのリンク先から!</a></b><br> </p> </div> </div> <script src="https://i.gzn.jp/img/-side-ad.js"></script> <script> { let adblock = false; if(!document.getElementById('F1qAYhOnM7DF6mEd')){ adblock = true; } const showDonateWrapper = ()=>{ donationWrapper.style.display = "block"; } const donationWrapper = document.getElementById('donation_wrapper'); if(/https:\/\/gigazine.net\/news\/about\/*/.test(location.href)){showDonateWrapper();} else if(!window.localStorage.getItem("landing_flag_donate")){ window.localStorage.setItem("landing_flag_donate", Date.now()); } else { if( adblock && new Date("2024/08/01") < Date.now() && new Date("2024/09/01") > Date.now()){ if(!window.localStorage.getItem("donate_date")){ const showDate = window.localStorage.getItem("donate_show_date"); if(!showDate){showDonateWrapper();} else { if(showDate < Date.now() - 1000*3600*24){showDonateWrapper();} } } } } const DonateLink = document.getElementById("donate_link"); DonateLink.addEventListener('click', ()=>{ window.localStorage.setItem("donate_date", Date.now()); }); const divTitleClose = document.getElementById('donate_title_close'); const divTitleOpen = document.getElementById('donate_title_open'); const divLarge = document.getElementById('donate_large'); divTitleClose.addEventListener('click', ()=>{ divLarge.style.display = "block"; divLarge.classList.remove('is-deleting'); divTitleClose.style.display = "none"; divTitleOpen.style.display = "block"; }) divTitleOpen.addEventListener('click', ()=>{ divLarge.style.display = "none"; divLarge.classList.add('is-deleting'); divTitleClose.style.display = "block"; divTitleOpen.style.display = "none"; window.localStorage.setItem("donate_show_date", Date.now()); }) } </script> <script data-cfasync="false" data-ad-client="ca-pub-4478613964609822" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- /4330625/Google_OL --> <div id="gStickyAd"> <style> #gStickyAd { width:100%; background-color: lightgray; position: fixed; bottom: 0px; left:0; text-align: center; z-index: 2147483647;} </style> <div id='div-gpt-ad-1597714017941-0' style="padding-top: 5px; padding-bottom: 5px; margin-left: auto; margin-right: auto;"> <script data-cfasync="false"> googletag.cmd.push(function() {googletag.display('div-gpt-ad-1597714017941-0');}); (function (){ if( (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0) || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) || navigator.userAgent.indexOf('Windows Phone') > 0 ){ document.body.style.marginBottom = '68px'; } else { document.getElementById('gStickyAd').style.display = 'none'; } })() </script> </div> </div> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WKH2HB8" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript> <!-- ad_flag: FALSE --><!-- gpublic_ASO --> <svg class="defs" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs> <symbol id="logo" viewBox="0 0 200.478 58.796"><g><g id="logoid1"><path d="M47.44 13.564c-2.235-1.29-7.403-4.06-14.665-4.06-1.327 0-4.47.13-7.96 1.29-6.705 2.384-10.616 7.732-10.616 14.368 0 1.16.14 3.995 1.675 7.023 1.536 3.093 5.796 8.505 15.433 8.505 2.933 0 4.75-.45 7.472-1.353l.07-8.634H27.188l5.028-8.118h18.716l-.21 21.842c-3.073 1.224-11.313 4.38-21.23 4.38-3.422 0-17.388-.32-24.582-10.63C3.374 35.987 1 31.67 1 25.162 1 15.755 6.447 10.085 9.24 7.83 12.872 4.8 19.716 1 31.308 1c3.422 0 8.59.194 16.132 2.32v10.244z" fill="#fcc800" stroke="#0B0008" stroke-width="1.5"/></g><g id="logoid2"><path d="M58.69 13.857c-2.473 0-4.505-1.836-4.505-4.652 0-2.755 2.143-4.53 4.505-4.53 2.417 0 4.505 1.775 4.505 4.59 0 2.878-2.197 4.592-4.505 4.592zm4.395 34.1V17.714H54.24v30.243h8.845z" fill="#f39800" stroke="#0B0008" stroke-width="1.5"/></g><g id="logoid3"><path d="M91.325 44.357c0 .624.05 2.544-.48 4.416-.96 3.648-4.27 9.023-13.294 9.023-1.2 0-5.663-.192-9.55-1.776V49.3c2.304 1.824 5.712 2.976 8.64 2.976.815 0 4.27 0 5.998-2.832.816-1.296 1.01-2.88 1.01-6V41.86l-3.457 4.896c-.48.096-1.39.288-2.687.288-1.296 0-5.184-.144-8.063-3.168-1.2-1.248-2.736-3.552-2.736-7.632 0-.816.096-3.12 1.104-5.375 1.392-3.073 4.847-7.2 12.863-7.2 3.745 0 7.2.816 10.656 2.352v18.335zm-7.727-14.4c-1.535-.67-2.4-.72-3.215-.72-3.696 0-5.616 2.833-5.616 6.29 0 3.31 1.68 6.095 5.23 6.095 1.73 0 3.17-.72 3.65-.912l-.05-10.752z" fill="#eb6100" stroke="#0B0008" stroke-width="1.5"/></g><g id="logoid4"><path d="M105.575 47.957c-.072-.504-.072-.972-.108-1.44 0-.432-.036-.864-.036-1.296l-2.41 2.99c-.47.07-1.01.18-2.017.18-2.232 0-4.572-.65-5.832-2.665-.72-1.152-.755-2.376-.755-2.88 0-.612.072-2.016 1.116-3.348 1.153-1.44 3.205-2.664 7.165-2.664 1.296 0 2.304.144 2.736.18 0-.18 0-.612-.107-1.08-.648-2.556-3.204-2.448-3.852-2.448-1.44 0-2.88.216-5.615 1.404l2.7-4.573c2.16-.54 3.96-.576 4.788-.576.648 0 4.032-.107 6.048 1.98.83.83 1.117 1.62 1.225 2.053.324 1.008.324 2.052.324 2.376v9.575c0 .864 0 1.404.107 2.232h-5.472zm-.144-7.668c-.323-.037-.863-.11-1.69-.11-1.08 0-2.52.11-3.313 1.117-.432.54-.468 1.116-.468 1.368 0 1.008.647 2.16 2.807 2.16 1.008 0 1.764-.252 2.664-.612V40.29z" fill="#e60012" stroke="#0B0008" stroke-width="1.5"/></g><g id="logoid5"><path d="M114.103 47.957v-4.86l13.068-15.48h-12.095V22.54h20.448v5.005L122.527 42.88h14.616l-2.952 5.077z" fill="#a9005b" stroke="#0B0008" stroke-width="1.5"/></g><g id="logoid6"><path d="M144.696 13.857c-2.473 0-4.505-1.836-4.505-4.652 0-2.755 2.144-4.53 4.506-4.53 2.417 0 4.505 1.775 4.505 4.59 0 2.878-2.197 4.592-4.504 4.592zm4.394 34.1V17.714h-8.845v30.243h8.845z" fill="#460292" stroke="#0B0008" stroke-width="1.5"/></g><g id="logoid7"><path d="M172.738 47.957l-13.932-15.444v15.444h-6.48V22.54h5.832l12.42 13.79V22.54h6.444v25.417z" fill="#091aac" stroke="#0B0008" stroke-width="1.5"/></g><g id="logoid8"><path d="M180.36 47.957V22.54h16.487v5.005h-9.864v4.896h8.46v4.933h-8.46v5.544h11.772l-2.88 5.04z" fill="#0d26f9" stroke="#0B0008" stroke-width="1.5"/></g></g></symbol> <symbol id="icon-tw" viewBox="0 0 1200 1227"><path d="m714.163 519.284 446.727-519.284h-105.86l-387.893 450.887-309.809-450.887h-357.328l468.492 681.821-468.492 544.549h105.866l409.625-476.152 327.181 476.152h357.328l-485.863-707.086zm-144.998 168.544-47.468-67.894-377.686-540.2396h162.604l304.797 435.9906 47.468 67.894 396.2 566.721h-162.604l-323.311-462.446z"></path></symbol><symbol id="icon-facebook" viewBox="0 0 1024 1024"><path d="M608 192h160v-192h-160c-123.514 0-224 100.486-224 224v96h-128v192h128v512h192v-512h160l32-192h-192v-96c0-17.346 14.654-32 32-32z"></path></symbol><symbol id="icon-yt" viewBox="0 0 1024 1024"><path d="M1013.8 307.2c0 0-10-70.6-40.8-101.6-39-40.8-82.6-41-102.6-43.4-143.2-10.4-358.2-10.4-358.2-10.4h-0.4c0 0-215 0-358.2 10.4-20 2.4-63.6 2.6-102.6 43.4-30.8 31-40.6 101.6-40.6 101.6s-10.2 82.8-10.2 165.8v77.6c0 82.8 10.2 165.8 10.2 165.8s10 70.6 40.6 101.6c39 40.8 90.2 39.4 113 43.8 82 7.8 348.2 10.2 348.2 10.2s215.2-0.4 358.4-10.6c20-2.4 63.6-2.6 102.6-43.4 30.8-31 40.8-101.6 40.8-101.6s10.2-82.8 10.2-165.8v-77.6c-0.2-82.8-10.4-165.8-10.4-165.8zM406.2 644.8v-287.8l276.6 144.4-276.6 143.4z"></path></symbol><symbol id="icon-rss" viewBox="0 0 1024 1024"><path d="M136.294 750.93c-75.196 0-136.292 61.334-136.292 136.076 0 75.154 61.1 135.802 136.292 135.802 75.466 0 136.494-60.648 136.494-135.802-0.002-74.742-61.024-136.076-136.494-136.076zM0.156 347.93v196.258c127.784 0 247.958 49.972 338.458 140.512 90.384 90.318 140.282 211.036 140.282 339.3h197.122c-0.002-372.82-303.282-676.070-675.862-676.070zM0.388 0v196.356c455.782 0 826.756 371.334 826.756 827.644h196.856c0-564.47-459.254-1024-1023.612-1024z"></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M576 706.612v-52.78c70.498-39.728 128-138.772 128-237.832 0-159.058 0-288-192-288s-192 128.942-192 288c0 99.060 57.502 198.104 128 237.832v52.78c-217.102 17.748-384 124.42-384 253.388h896c0-128.968-166.898-235.64-384-253.388z"></path></symbol> <symbol id="icon-search" viewBox="0 0 1024 1024"><path d="M992.262 871.396l-242.552-206.294c-25.074-22.566-51.89-32.926-73.552-31.926 57.256-67.068 91.842-154.078 91.842-249.176 0-212.078-171.922-384-384-384-212.076 0-384 171.922-384 384s171.922 384 384 384c95.098 0 182.108-34.586 249.176-91.844-1 21.662 9.36 48.478 31.926 73.552l206.294 242.552c35.322 39.246 93.022 42.554 128.22 7.356s31.892-92.898-7.354-128.22zM384 640c-141.384 0-256-114.616-256-256s114.616-256 256-256 256 114.616 256 256-114.614 256-256 256z"></path></symbol> <symbol id="icon-pinterest" viewBox="0 0 243 243"><path d="M121.5,0C54.4,0,0,54.4,0,121.5C0,173,32,217,77.2,234.7c-1.1-9.6-2-24.4,0.4-34.9 c2.2-9.5,14.2-60.4,14.2-60.4s-3.6-7.3-3.6-18c0-16.9,9.8-29.5,22-29.5c10.4,0,15.4,7.8,15.4,17.1c0,10.4-6.6,26-10.1,40.5 c-2.9,12.1,6.1,22,18,22c21.6,0,38.2-22.8,38.2-55.6c0-29.1-20.9-49.4-50.8-49.4C86.3,66.5,66,92.4,66,119.2c0,10.4,4,21.6,9,27.7 c1,1.2,1.1,2.3,0.8,3.5c-0.9,3.8-3,12.1-3.4,13.8c-0.5,2.2-1.8,2.7-4.1,1.6c-15.2-7.1-24.7-29.2-24.7-47.1 c0-38.3,27.8-73.5,80.3-73.5c42.1,0,74.9,30,74.9,70.2c0,41.9-26.4,75.6-63,75.6c-12.3,0-23.9-6.4-27.8-14c0,0-6.1,23.2-7.6,28.9 c-2.7,10.6-10.1,23.8-15.1,31.9c11.4,3.5,23.4,5.4,36,5.4c67.1,0,121.5-54.4,121.5-121.5C243,54.4,188.6,0,121.5,0z"/></symbol> <symbol id="icon-dc" viewBox="0 0 127.14 96.36"><defs><style>.cls-1{fill:#5865f2;}</style></defs><g id="layer_2" data-name="layer 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></symbol> <symbol id="icon-th" viewBox="0 0 878 1000"><g><path class="st0" d="M446.7,1000h-0.3c-149.2-1-263.9-50.2-341-146.2C36.9,768.3,1.5,649.4,0.3,500.4v-0.7 c1.2-149.1,36.6-267.9,105.2-353.4C182.5,50.2,297.3,1,446.4,0h0.3h0.3c114.4,0.8,210.1,30.2,284.4,87.4 c69.9,53.8,119.1,130.4,146.2,227.8l-85,23.7c-46-165-162.4-249.3-346-250.6c-121.2,0.9-212.9,39-272.5,113.2 C118.4,271,89.6,371.4,88.5,500c1.1,128.6,29.9,229,85.7,298.5c59.6,74.3,151.3,112.4,272.5,113.2c109.3-0.8,181.6-26.3,241.7-85.2 c68.6-67.2,67.4-149.7,45.4-199.9c-12.9-29.6-36.4-54.2-68.1-72.9c-8,56.3-25.9,101.9-53.5,136.3c-36.9,45.9-89.2,71-155.4,74.6 c-50.1,2.7-98.4-9.1-135.8-33.4c-44.3-28.7-70.2-72.5-73-123.5c-2.7-49.6,17-95.2,55.4-128.4c36.7-31.7,88.3-50.3,149.3-53.8 c44.9-2.5,87-0.5,125.8,5.9c-5.2-30.9-15.6-55.5-31.2-73.2c-21.4-24.4-54.5-36.8-98.3-37.1c-0.4,0-0.8,0-1.2,0 c-35.2,0-83,9.7-113.4,55L261.2,327c40.8-60.6,107-94,186.6-94c0.6,0,1.2,0,1.8,0c133.1,0.8,212.4,82.3,220.3,224.5 c4.5,1.9,9,3.9,13.4,5.9c62.1,29.2,107.5,73.4,131.4,127.9c33.2,75.9,36.3,199.6-64.5,298.3C673.1,965,579.6,999.1,447,1000 L446.7,1000L446.7,1000z M488.5,512.9c-10.1,0-20.3,0.3-30.8,0.9c-76.5,4.3-124.2,39.4-121.5,89.3c2.8,52.3,60.5,76.6,116,73.6 c51-2.7,117.4-22.6,128.6-154.6C552.6,516,521.7,512.9,488.5,512.9z"/></g></symbol> <symbol id="icon-bs" viewBox="0 0 568 501"><g><path d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 203.659 552.222 224.501C531.947 296.954 458.067 315.434 392.347 304.249C507.222 323.8 536.444 388.56 473.333 453.32C353.473 576.312 301.061 422.461 287.631 383.039C285.169 375.812 284.017 372.431 284 375.306C283.983 372.431 282.831 375.812 280.369 383.039C266.939 422.461 214.527 576.312 94.6667 453.32C31.5556 388.56 60.7778 323.8 175.653 304.249C109.933 315.434 36.0535 296.954 15.7778 224.501C9.94525 203.659 0 75.2916 0 57.9464C0 -28.9064 76.1345 -1.61183 123.121 33.6637Z"/></g></symbol> <symbol id="icon-gn" viewBox="0 0 6550.8 5359.7"><path fill="#0C9D58" d="M5210.8 3635.7c0 91.2-75.2 165.9-167.1 165.9H1507c-91.9 0-167.1-74.7-167.1-165.9V165.9C1339.9 74.7 1415.1 0 1507 0h3536.8c91.9 0 167.1 74.7 167.1 165.9v3469.8z"/><polygon opacity=".2" fill="#004D40" points="5210.8,892 3885.3,721.4 5210.8,1077"/><path opacity=".2" fill="#004D40" d="M3339.3 180.9L1332 1077.2l2218.5-807.5v-2.2c-39-83.6-134-122.6-211.2-86.6z"/><path opacity=".2" fill="#FFFFFF" d="M5043.8 0H1507c-91.9 0-167.1 74.7-167.1 165.9v37.2c0-91.2 75.2-165.9 167.1-165.9h3536.8c91.9 0 167.1 74.7 167.1 165.9v-37.2C5210.8 74.7 5135.7 0 5043.8 0z"/><path fill="#EA4335" d="M2198.2 3529.1c-23.9 89.1 23.8 180 106 202l3275.8 881c82.2 22 169-32.9 192.8-122l771.7-2880c23.9-89.1-23.8-180-106-202l-3275.8-881c-82.2-22-169 32.9-192.8 122l-771.7 2880z"/><polygon opacity=".2" fill="#3E2723" points="5806.4,2638.1 5978.7,3684.8 5806.4,4328.1"/><polygon opacity=".2" fill="#3E2723" points="3900.8,764.1 4055.2,805.6 4151,1451.6"/><path opacity=".2" fill="#FFFFFF" d="M6438.6 1408.1l-3275.8-881c-82.2-22-169 32.9-192.8 122l-771.7 2880c-1.3 4.8-1.6 9.7-2.5 14.5l765.9-2858.2c23.9-89.1 110.7-144 192.8-122l3275.8 881c77.7 20.8 123.8 103.3 108.5 187.6l5.9-21.9c23.8-89.1-23.9-180-106.1-202z"/><path fill="#FFC107" d="M4778.1 3174.4c31.5 86.7-8.1 181.4-88 210.5L1233.4 4643c-80 29.1-171.2-18-202.7-104.7L10.9 1736.5c-31.5-86.7 8.1-181.4 88-210.5L3555.6 267.9c80-29.1 171.2 18 202.7 104.7l1019.8 2801.8z"/><path opacity=".2" fill="#FFFFFF" d="M24 1771.8c-31.5-86.7 8.1-181.4 88-210.5L3568.7 303.1c79.1-28.8 169 17.1 201.5 102l-11.9-32.6c-31.6-86.7-122.8-133.8-202.7-104.7L98.9 1526c-80 29.1-119.6 123.8-88 210.5l1019.8 2801.8c.3.9.9 1.7 1.3 2.7L24 1771.8z"/><path fill="#4285F4" d="M5806.4 5192.2c0 92.1-75.4 167.5-167.5 167.5h-4727c-92.1 0-167.5-75.4-167.5-167.5V1619.1c0-92.1 75.4-167.5 167.5-167.5h4727c92.1 0 167.5 75.4 167.5 167.5v3573.1z"/><path fill="#FFFFFF" d="M4903.8 2866H3489.4v-372.2h1414.4c41.1 0 74.4 33.3 74.4 74.4v223.3c0 41.1-33.3 74.5-74.4 74.5zM4903.8 4280.3H3489.4v-372.2h1414.4c41.1 0 74.4 33.3 74.4 74.4v223.3c0 41.2-33.3 74.5-74.4 74.5zM5127.1 3573.1H3489.4v-372.2h1637.7c41.1 0 74.4 33.3 74.4 74.4v223.3c0 41.2-33.3 74.5-74.4 74.5z"/><path opacity=".2" fill="#1A237E" d="M5638.9 5322.5h-4727c-92.1 0-167.5-75.4-167.5-167.5v37.2c0 92.1 75.4 167.5 167.5 167.5h4727c92.1 0 167.5-75.4 167.5-167.5V5155c0 92.1-75.4 167.5-167.5 167.5z"/><path opacity=".2" fill="#FFFFFF" d="M911.9 1488.8h4727c92.1 0 167.5 75.4 167.5 167.5v-37.2c0-92.1-75.4-167.5-167.5-167.5h-4727c-92.1 0-167.5 75.4-167.5 167.5v37.2c0-92.1 75.4-167.5 167.5-167.5z"/><path fill="#FFFFFF" d="M2223.9 3238.2v335.7h481.7c-39.8 204.5-219.6 352.8-481.7 352.8-292.4 0-529.5-247.3-529.5-539.7s237.1-539.7 529.5-539.7c131.7 0 249.6 45.3 342.7 134v.2l254.9-254.9c-154.8-144.3-356.7-232.8-597.7-232.8-493.3 0-893.3 399.9-893.3 893.3s399.9 893.3 893.3 893.3c515.9 0 855.3-362.7 855.3-873 0-58.5-5.4-114.9-14.1-169.2h-841.1z"/><g opacity=".2" fill="#1A237E"><path d="M2233.2 3573.9v37.2h472.7c3.5-12.2 6.5-24.6 9-37.2h-481.7z"/><path d="M2233.2 4280.3c-487.1 0-882.9-389.9-892.8-874.7-.1 6.2-.5 12.4-.5 18.6 0 493.4 399.9 893.3 893.3 893.3 515.9 0 855.3-362.7 855.3-873 0-4.1-.5-7.9-.5-12-11.1 497-347.4 847.8-854.8 847.8zM2575.9 2981.3c-93.1-88.6-211.1-134-342.7-134-292.4 0-529.5 247.3-529.5 539.7 0 6.3.7 12.4.9 18.6 9.9-284.2 242.4-521.1 528.6-521.1 131.7 0 249.6 45.3 342.7 134v.2l273.5-273.5c-6.4-6-13.5-11.3-20.1-17.1L2576 2981.5l-.1-.2z"/></g><path opacity=".2" fill="#1A237E" d="M4978.2 2828.7v-37.2c0 41.1-33.3 74.4-74.4 74.4H3489.4v37.2h1414.4c41.1.1 74.4-33.2 74.4-74.4zM4903.8 4280.3H3489.4v37.2h1414.4c41.1 0 74.4-33.3 74.4-74.4v-37.2c0 41.1-33.3 74.4-74.4 74.4zM5127.1 3573.1H3489.4v37.2h1637.7c41.1 0 74.4-33.3 74.4-74.4v-37.2c0 41.1-33.3 74.4-74.4 74.4z"/><radialGradient id="a" cx="1476.404" cy="434.236" r="6370.563" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><path fill="url(#a)" d="M6438.6 1408.1l-1227.7-330.2v-912c0-91.2-75.2-165.9-167.1-165.9H1507c-91.9 0-167.1 74.7-167.1 165.9v908.4L98.9 1526c-80 29.1-119.6 123.8-88 210.5l733.5 2015.4v1440.3c0 92.1 75.4 167.5 167.5 167.5h4727c92.1 0 167.5-75.4 167.5-167.5v-826.9l738.3-2755.2c23.8-89.1-23.9-180-106.1-202z"/></symbol> </defs></svg> <header id="header"> <div class="logo"><a href="/"><svg><title>GIGAZINE ホーム</title><use xlink:href="#logo"></use></svg></a></div> <div id="Google_TH"><!-- /4330625/Google_TH --> <div id='div-gpt-ad-1664264689307-0'> <script> if( (navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) || navigator.userAgent.indexOf('Windows Phone') > 0 ){ }else{ let id = 'div-gpt-ad-1664264689307-0'; let target = document.getElementById(id); target.style.minHeight = '90px'; target.style.minWidth = '728px'; googletag.cmd.push(function() {googletag.display(id);}); } </script> </div></div> <div id="header-social-button-box"> <script>function switchDisplay(){ obj=document.getElementById('gscopen').style; obj.display=(obj.display=='none')?'block':'none'; }</script> <a class="header-social-button fl-user" onclick="switchDisplay();"><svg><title>login</title><use xlink:href="#icon-user"></use></svg></a> </div> <div id="gscopen" style="display:none;"> <div class="gscopen"> <div class="gscmenu" style="width: 360px; padding: 10px;"> <div> <div style="max-width:360px;margin: 0 auto"> <div style="font-size: 1.6rem;">GIGAZINEにログイン</div> <a href="https://gigazine.net/club/" style="color: #008da7;">メンバー登録はココをクリック</a> <form id="loginForm" method="post" action="https://gigazine.net/" > <div class='hiddenFields'> <input type="hidden" name="ACT" value="9" /> <input type="hidden" name="RET" value="/gsc/" /> <input type="hidden" name="site_id" value="1" /> <input type="hidden" name="csrf_token" value="a99747083e58aef9d20671b42619b6400825d494" /> </div> <p class="input"> <label style="color: gray;">ユーザー名</label><br> <input type="text" name="username" value="" maxlength="75" size="25"> </p> <p class="input"> <label style="color: gray;">パスワード</label> - <a href="/club/forgot_password" style="color: #008da7;">パスワードの再発行</a><br> <input type="password" name="password" value="" maxlength="75" size="25"> </p> <label class="input" id="auto_login" style="color: gray;"><input type="checkbox" name="auto_login" value="1"><span style="margin-left: 6px;">ログインしたままにする</span></label> <p class="input"><input type="submit" name="submit" value="ログイン" class="button-exp-style"></p> </form> </div></div> </div> </div> </div> </header> <!-- a_lib_header_no_login_ad --> <div id="main"> <div id="article"> <!-- ad_flag: FALSE --><!-- gpublic_ASO --><div class="sbn"> <div id="Google_TC"><!-- /4330625/Google_TC --> <div id='div-gpt-ad-1533535919247-0'> <script> googletag.cmd.push(function() {googletag.display('div-gpt-ad-1533535919247-0');}); </script> </div> </div> </div> <!-- 20141031_GSC_3 --> <div class="cntimage"><!-- ←20140212 --> <div style="width:100%;position:relative;"> <time datetime="2024-09-22T23:00:00+09:00" class="yeartime">2024年09月22日 23時00分</time> <span class="yeartime p-category"><a href="/news/C12/">レビュー</a></span> </div> <style> .p-category{ position: absolute; right: 2px; } </style> <h1 class="title">無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」</h1> <!-- google_ad_section_start --> <p class="preface"></p><a href="https://i.gzn.jp/img/2024/09/22/simple-icons/00.png" target="_blank"><img src="https://i.gzn.jp/img/2024/09/22/simple-icons/00_m.png" border="0" class="lzsmall img-standard-size" alt=""></a><p class="preface"> <br /> 「<b>Simple Icons</b>」は多数のブランドのアイコンをSVG形式でダウンロード可能なサイトとのことなので、どんなサイトなのか実際に確かめてみました。<br /> <br /> <b>Simple Icons<br /> <a href="https://simpleicons.org/" target="_blank">https://simpleicons.org/</a></b><br /> <br /> サイトにアクセスするとこんな感じ。<br /> </p><a href="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7144.png" target="_blank"><img src="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7144_m.png" border="0" class="lzsmall" alt=""></a><p class="preface"> <br /> そのままでも特に問題なく使えそうですが、日本語バージョンが用意されているので変更します。右上の言語変更ボタンをクリックし、「日本語」をクリック。<br /> </p><a href="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7145.png" target="_blank"><img src="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7145_m.png" border="0" class="lzsmall" alt=""></a><p class="preface"> <br /> サイトのUIが日本語化されました。記事作成時点で3198個のアイコンが利用可能とのこと。<br /> </p><a href="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7146.png" target="_blank"><img src="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7146_m.png" border="0" class="lzsmall" alt=""></a><p class="preface"> <br /> 検索欄に探しているアイコンに関連する言葉を入力することである程度の絞り込みが可能。並べ替えでは「アルファベット順」「色順」「関連度順」を切り替えられます。<br /> </p><a href="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7147.png" target="_blank"><img src="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7147_m.png" border="0" class="lzsmall" alt=""></a><p class="preface"> <br /> UIのモード選択では「ライトモード」「ダークモード」「システムと同期」を切り替えることができ、ダウンロードではアイコンのダウンロードマークをクリックしたときのダウンロード形式をSVGとPDFから選択できます。<br /> </p><a href="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7148.png" target="_blank"><img data-src="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7148_m.png" border="0" class="lazyload" alt=""></a><p class="preface"> <br /> UIのレイアウト欄ではそれぞれのアイコンに関する情報をコンパクトにまとめるレイアウトに変更可能。検索結果に求めているアイコンが表示されない場合やアイコンが古い場合は下部の「リクエストを提出する」「古いアイコンを報告する」からGitHubのIssueを立てることで対応してもらえるようです。<br /> </p><a href="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7149.png" target="_blank"><img data-src="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7149_m.png" border="0" class="lazyload" alt=""></a><p class="preface"> <br /> それぞれのアイコンについて、アイコン欄をクリックするとクリップボードにSVGがコピーされます。また、ライセンスやブランドガイドラインが存在する場合はその旨がアイコンの左下に表示される模様。<br /> </p><img data-src="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7150.png" border="0" class="lazyload" alt=""><p class="preface"> <br /> 虫眼鏡のマークをクリックすると大きくアイコンについてのデータが表示されるほか、SVGのダウンロードだけでなく「色付きSVG」や「PDF」形式でのダウンロードに対応しています。<br /> </p><a href="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7151.png" target="_blank"><img data-src="https://i.gzn.jp/img/2024/09/22/simple-icons/snap7151_m.png" border="0" class="lazyload" alt=""></a><p class="preface"> <br /> 実際にJavaScriptのアイコンをSVGでコピーして貼り付けてみるとこんな感じ。<br /> <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="max-width: 56px; width: 100%;"><title>JavaScript</title><path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/></svg><br /> <br /> なお、それぞれのアイコンはダウンロードせずともCDN経由で利用する事も可能です。下記のコードの[ICON SLUG]の部分を目的のアイコン名にすれば良いとのこと。詳しくは<b><a href="https://github.com/simple-icons/simple-icons" target="_blank">GitHubの説明</a></b>を確認してみてください。<br /> <pre><code><img height="32" width="32" src="https://unpkg.com/simple-icons@v13/icons/[ICON SLUG].svg" /></code></pre><p class="preface"></p> <!-- google_ad_section_end --> <div style="text-align: center; margin: 10px auto 0px;"><div id="URLClip" style="width:300px; height:40px; border: 2px solid #bbb; border-radius: 3px; background: white; padding: 8px 0; text-align: center; position: relative; cursor: pointer; color: #222; font-size: 14px; font-weight: 700; display: inline-block; vertical-align: middle;">この記事のタイトルとURLをコピーする</div></div> </div><!-- ←20140212 --> <!-- gpublic_ASO --> <div id="EndFooter"> <div id='EF_Left'> <!-- /4330625/Google_EF/Google_EF_2 --> <div id='div-gpt-ad-1524638328920-0'> <script> googletag.cmd.push(function() {googletag.display('div-gpt-ad-1524638328920-0');}); </script> </div> </div> <div id='EF_Right'> <!-- /4330625/Google_EF --> <div id='div-gpt-ad-1583371000737-0'> <script> if( !((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) || navigator.userAgent.indexOf('Windows Phone') > 0 )){ googletag.cmd.push(function() {googletag.display('div-gpt-ad-1583371000737-0');}); } </script> </div> </div> </div> <script data-cfasync="false" src="https://i.gzn.jp/img/-side-ad.js"></script> <style> #banner-ef { display:none; height: 250px; text-align:center; margin: 20px auto 0 0; } #banner-ef>div{ width: 300px; height: 250px; margin: auto; } #banner-ef img{ border: 1px solid #e1e1e1; } @media (min-width: 810px) { #banner-ef { margin: 20px auto 0 4px; } #banner-ef>div{ margin: 0; } } </style> <div id="banner-ef"></div> <script data-cfasync="false"> { let adblock = false; if(!document.getElementById('F1qAYhOnM7DF6mEd')){ adblock = true; } if(adblock){ window.gbcmd.push(gb=>{ const pattern = gb.getFeatureValue("202405-endfooter-secret-club", -1); console.log("pattern:", pattern ); if (1 <= pattern && pattern <= 152){ const bannerDiv = document.getElementById("banner-ef"); bannerDiv.style.display = "block"; const img = document.createElement('img'); img.src = `https://i.gzn.jp/img/gsc/202405-banner/20240524_${pattern}.png`; const secretClubLink = document.createElement('a'); secretClubLink.href = "https://gigazine.net/club/"; secretClubLink.target = "_blank"; secretClubLink.appendChild(img); const wrapperDiv = document.createElement('div'); wrapperDiv.id = `secret-club-banner-${pattern}`; wrapperDiv.appendChild(secretClubLink); bannerDiv.appendChild(wrapperDiv); } }) } } </script> <p class="article"><b>・関連記事</b><br /> <b><a href="https://gigazine.net/news/20171222-iconbros" onclick="ga('send', 'event', 'kanren', '20240922-simple-icons', '20171222-iconbros')" target="_blank">無料で700種類以上の画像アイコンとアイコンフォントをダウンロード可能で商用利用もOKな「IconBros」 - GIGAZINE</a></b><br /> <br /> <b><a href="https://gigazine.net/news/20170502-game-icons-net" onclick="ga('send', 'event', 'kanren', '20240922-simple-icons', '20170502-game-icons-net')" target="_blank">無料でゲーム・アプリの開発に使えるアイコンが2800種類以上ある「Game-icons.net」 - GIGAZINE</a></b><br /> <br /> <b><a href="https://gigazine.net/news/20180824-iconbox" onclick="ga('send', 'event', 'kanren', '20240922-simple-icons', '20180824-iconbox')" target="_blank">無料で商用利用可能な高クオリティ&汎用性高めのアイコン素材集「ICON BOX」 - GIGAZINE</a></b><br /> <br /> <b><a href="https://gigazine.net/news/20140401-free-2800-icons" onclick="ga('send', 'event', 'kanren', '20240922-simple-icons', '20140401-free-2800-icons')" target="_blank">無料で2800種類以上のデザインのアイコンを自由に選んで使える「Icons8」 - GIGAZINE</a></b><br /> <br /> <b><a href="https://gigazine.net/news/20210402-svgbox" onclick="ga('send', 'event', 'kanren', '20240922-simple-icons', '20210402-svgbox')" target="_blank">無料で簡単に色のカスタマイズができるアイコン集「SVGBOX」 - GIGAZINE</a></b></p> <!-- gpublic_ASO --> <div style="max-width:100%; overflow: hidden;"> <div id='div-gpt-ad-1583371000737-1'> <script> if( (navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) || navigator.userAgent.indexOf('Windows Phone') > 0 ){ googletag.cmd.push(function() {googletag.display('div-gpt-ad-1583371000737-1');}); } </script> </div> </div> <div class="rlcontents-s"> <p class="preface"><b>・関連コンテンツ</b></p> <ul id="rl-list"><li class="rl-list-item"> <div class="rl-list-item-image"> <a href="/news/20140617-github-octicons/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20140617-github-octicons')"><img data-src="https://i.gzn.jp/img/2014/06/17/github-octicons/00-top_m.png" class="lazyload"></a> </div> <div class="rl-list-item-link"> <a href="/news/20140617-github-octicons/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20140617-github-octicons')">GitHubで使用されているアイコンフォント「Octicons」が一般公開を開始</a> </div> </li> <li class="rl-list-item"> <div class="rl-list-item-image"> <a href="/news/20201003-wiki-js/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20201003-wiki-js')"><img data-src="https://i.gzn.jp/img/2020/10/03/wiki-js/00_m.png" class="lazyload"></a> </div> <div class="rl-list-item-link"> <a href="/news/20201003-wiki-js/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20201003-wiki-js')">無料とは思えない多機能っぷりなWikiインフラ「Wiki.js」レビュー、自前でホスト&外部サービスと連携可能</a> </div> </li> <li class="rl-list-item"> <div class="rl-list-item-image"> <a href="/news/20080722_fontspace/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20080722_fontspace')"><img data-src="https://i.gzn.jp/img/2008/07/22/fontspace/font_m.png" class="lazyload"></a> </div> <div class="rl-list-item-link"> <a href="/news/20080722_fontspace/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20080722_fontspace')">8900個以上のフォントが無料でダウンロードできる「FontSpace」</a> </div> </li> <li class="rl-list-item"> <div class="rl-list-item-image"> <a href="/news/20130107-condense-iconfont/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20130107-condense-iconfont')"><img data-src="https://i.gzn.jp/img/2013/01/07/condense-iconfont/00_m.png" class="lazyload"></a> </div> <div class="rl-list-item-link"> <a href="/news/20130107-condense-iconfont/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20130107-condense-iconfont')">無料で商用可のウェブでよく使われるアイコンをフォント化した「CONDENSE-iconFont」</a> </div> </li> <li class="rl-list-item"> <div class="rl-list-item-image"> <a href="/news/20170405-color-supply/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20170405-color-supply')"><img data-src="https://i.gzn.jp/img/2017/04/05/color-supply/00_m.png" class="lazyload"></a> </div> <div class="rl-list-item-link"> <a href="/news/20170405-color-supply/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20170405-color-supply')">カラーチャートをグルグル動かして好みの配色を探せる「Color Supply」</a> </div> </li> <li class="rl-list-item"> <div class="rl-list-item-image"> <a href="/news/20141107-colores/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20141107-colores')"><img data-src="https://i.gzn.jp/img/2014/11/07/colores/00-top_m.png" class="lazyload"></a> </div> <div class="rl-list-item-link"> <a href="/news/20141107-colores/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20141107-colores')">単語を入力するとそのイメージに合ったカラーパレットを自動生成してくれる「Colores」</a> </div> </li> <li class="rl-list-item"> <div class="rl-list-item-image"> <a href="/news/20240101-librum-reader/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20240101-librum-reader')"><img data-src="https://i.gzn.jp/img/2024/01/01/librum-reader/00_m.png" class="lazyload"></a> </div> <div class="rl-list-item-link"> <a href="/news/20240101-librum-reader/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20240101-librum-reader')">無料でEPUBやPDFのほか7万以上の書籍を自由に読めてWindows・Linux・macOSなどで同期できる電子書籍リーダー「Librum」レビュー</a> </div> </li> <li class="rl-list-item"> <div class="rl-list-item-image"> <a href="/news/20190302-simple-url-copy/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20190302-simple-url-copy')"><img data-src="https://i.gzn.jp/img/2019/03/02/simple-url-copy/00_m.png" class="lazyload"></a> </div> <div class="rl-list-item-link"> <a href="/news/20190302-simple-url-copy/" onclick="ga('send', 'event', 'kanrencontents', '20240922-simple-icons', '20190302-simple-url-copy')">1クリックでページタイトルとURLをコピーできるChrome拡張機能「Simple URL Copy」</a> </div> </li> </ul> </div> <nav><ul id="next-prev"><li><p><< 次の記事</p><div><a href="https://gigazine.net/news/20240923-boku-to-roboco-film/"><img data-src="https://i.gzn.jp/img/2024/09/23/boku-to-roboco-film/00_m.png" class="lazyload"></a></div><p class="np-bg"><a href="https://gigazine.net/news/20240923-boku-to-roboco-film/">劇場版「僕とロボコ」2025年4月公開に向けてスーパーティザービジュアル解禁</a></p></li><li><p>前の記事 >></p><div><a href="https://gigazine.net/news/20240922-corporate-slave-story-it/"><img data-src="https://i.gzn.jp/img/2024/09/22/corporate-slave-story-it/00_m.png" class="lazyload"></a></div><p class="np-bg"><a href="https://gigazine.net/news/20240922-corporate-slave-story-it/">読者から寄せられた「本当にあった社畜エピソード」IT系・エンジニア編</a></p> </li></ul></nav> <div class="items"> <p><time datetime="2024-09-22T23:00:00+09:00">2024年09月22日 23時00分00秒</time> in <a href="https://gigazine.net/news/C12/">レビュー</a>, <a href="https://gigazine.net/news/C37/">ウェブアプリ</a>, Posted by log1d_ts</p> <p>You can read the machine translated English article <strong><a href="/gsc_news/en/20240922-simple-icons" target="_blank">here</a></strong>.</p> </div><!-- end_.items --> </div><!-- end_#article --> <aside id="latest"> <!-- ad_flag: FALSE --><!-- gpublic_ASO --> <div id="LT"> <!-- /4330625/Google_LT --> <div id='div-gpt-ad-1524101924592-0'> <script> googletag.cmd.push(function() {googletag.display('div-gpt-ad-1524101924592-0');}); </script> </div></div> <h3>最新ニュース40件</h3> <ul id="list"></ul> <script data-cfasync="false"> fetch('/gsc/news_40?token=klc1qXWmf4BIJe0X') .then(r=>r.json()) .then(d=>d.map(e=>{ const li = document.createElement('li'); const a = document.createElement('a'); a.href = `/news/${e.url}/`; a.appendChild(document.createTextNode(e.title)); li.appendChild(a); return li; })) .then(li=>{ const fr = document.createDocumentFragment(); li.forEach(li=>fr.appendChild(li)); document.getElementById('list').appendChild(fr); }); </script> <!-- ad_flag: FALSE --><!-- gpublic_ASO --> <div id="LB"><div id="div-gpt-ad-1524100786099-0"></div></div> <script> googletag.cmd.push(function(){googletag.display('div-gpt-ad-1524100786099-0');}); </script> </aside><!-- end_#latest --> <aside id="sub"> <!-- gpublic_ASO --> <div id="subNav"> <dl class="list-1"> <dt>記事検索</dt> <dd id="searchform"> <form action="/gsc/search" method="get"> <input type="text" name="q" value="" max="40" placeholder="キーワード" required style="margin: 0 0 0 .5rem"> <input type="submit" value="検索" style="margin-left:0.5rem;background-color: #4d90fe;border: 1px solid #3079ed;border-radius: 5px;color: white;width: 56px;line-height: 1.6rem;"> </form> </dd> </dl> <dl class="list-2 navi-list-2col"> <dt>カテゴリ</dt> <dd><a href="https://gigazine.net/news/C7/"><i class="iconcat icon-catid7"></i><b>メモ</b></a></dd> <dd><a href="https://gigazine.net/news/C19/"><i class="iconcat icon-catid19"></i><b>ヘッドライン</b></a></dd> <dd><a href="https://gigazine.net/news/C12/"><i class="iconcat icon-catid12"></i><b>レビュー</b></a></dd> <dd><a href="https://gigazine.net/news/C22/"><i class="iconcat icon-catid22"></i><b>取材</b></a></dd> <dd><a href="https://gigazine.net/news/C17/"><i class="iconcat icon-catid17"></i><b>インタビュー</b></a></dd> <dd><a href="https://gigazine.net/news/C13/"><i class="iconcat icon-catid13"></i><b>試食</b></a></dd> <dd><a href="https://gigazine.net/news/C18/"><i class="iconcat icon-catid18"></i><b>モバイル</b></a></dd> <dd><a href="https://gigazine.net/news/C4/"><i class="iconcat icon-catid4"></i><b>ソフトウェア</b></a></dd> <dd><a href="https://gigazine.net/news/C5/"><i class="iconcat icon-catid5"></i><b>ネットサービス</b></a></dd> <dd><a href="https://gigazine.net/news/C37/"><i class="iconcat icon-catid37"></i><b>ウェブアプリ</b></a></dd> <dd><a href="https://gigazine.net/news/C6/"><i class="iconcat icon-catid6"></i><b>ハードウェア</b></a></dd> <dd><a href="https://gigazine.net/news/C30/"><i class="iconcat icon-catid30"></i><b>乗り物</b></a></dd> <dd><a href="https://gigazine.net/news/C29/"><i class="iconcat icon-catid29"></i><b>サイエンス</b></a></dd> <dd><a href="https://gigazine.net/news/C33/"><i class="iconcat icon-catid33"></i><b>生き物</b></a></dd> <dd><a href="https://gigazine.net/news/C9/"><i class="iconcat icon-catid9"></i><b>動画</b></a></dd> <dd><a href="https://gigazine.net/news/C23/"><i class="iconcat icon-catid23"></i><b>映画</b></a></dd> <dd><a href="https://gigazine.net/news/C38/"><i class="iconcat icon-catid38"></i><b>マンガ</b></a></dd> <dd><a href="https://gigazine.net/news/C20/"><i class="iconcat icon-catid20"></i><b>アニメ</b></a></dd> <dd><a href="https://gigazine.net/news/C10/"><i class="iconcat icon-catid10"></i><b>ゲーム</b></a></dd> <dd><a href="https://gigazine.net/news/C31/"><i class="iconcat icon-catid31"></i><b>デザイン</b></a></dd> <dd><a href="https://gigazine.net/news/C32/"><i class="iconcat icon-catid32"></i><b>アート</b></a></dd> <dd><a href="https://gigazine.net/news/C15/"><i class="iconcat icon-catid15"></i><b>食</b></a></dd> <dd><a href="https://gigazine.net/news/C14/"><i class="iconcat icon-catid14"></i><b>セキュリティ</b></a></dd> <dd><a href="https://gigazine.net/news/C8/"><i class="iconcat icon-catid8"></i><b>お知らせ</b></a></dd> <dd><a href="https://gigazine.net/news/C34/"><i class="iconcat icon-catid34"></i><b>ピックアップ</b></a></dd> <dd><a href="https://gigazine.net/news/C16/"><i class="iconcat icon-catid16"></i><b>コラム</b></a></dd> <dd><a href="https://gigazine.net/news/C36/"><i class="iconcat icon-catid36"></i><b>メンバー限定</b></a></dd> <dd><a href="https://gigazine.net/news/C21/"><i class="iconcat icon-catid21"></i><b>広告</b></a></dd> <dd><a href="https://gigazine.net/news/C45/"><i class="iconcat icon-catid45"></i><b>無料メンバー</b></a></dd> </dl> <dl class="list-3"> <dt>過去の記事</dt> <dd id="calendar"> <input type="date" id="calendar-datepicker" style="margin: 0 auto 8px; display:block; width: 200px; height:30px;" min="2005-07-23" max="2024-11-25" value="2024-11-25"> <button style="margin: auto; display:block; width: 200px; height:30px;" class="button-exp-style" onclick="(()=>{ window.location = '/news/' + getElementById('calendar-datepicker').value.replace(/-/g, '/'); })();">過去記事を見る</button> </dd> <dd id="Google_RT"> <!-- /4330625/Google_RT --> <div id="div-gpt-ad-1523935894717-2"> <script> if( (navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) || navigator.userAgent.indexOf('Windows Phone') > 0 ){ }else{ let id = 'div-gpt-ad-1523935894717-2'; let target = document.getElementById(id); target.style.height = '250px'; target.style.width = '300px'; googletag.cmd.push(function() {googletag.display(id);}); } </script> </div> </dd> </dl> </div><!-- end_#subNav --> <!-- a_lib_sub --> <!-- 20160726_ASO --> <div id="ranking-entry"><h3>人気記事ランキング</h3><p style="margin:.5rem"><small>直近24時間(1時間ごとに更新。5分ごとは<a href="https://gigazine.net/club/" target="_blank">こちら</a>)</small></p> <ol style="padding-left:1.8rem"> <li style="margin:.5rem 0"><a href="/news/20241120-minecraft-theme-park/">あの「マインクラフト」が現実世界にテーマパークを開業、2026年~2027年にオープン予定</a></li><li style="margin:.5rem 0"><a href="/news/20241124-dark-energy-from-black-holes/">ダークエネルギーが「逆再生ビッグバン」でブラックホールから生成されているとの研究結果が報告される</a></li><li style="margin:.5rem 0"><a href="/news/20241123-involute-gears/">インボリュート歯車の形は何が特別なのか?</a></li><li style="margin:.5rem 0"><a href="/news/20241122-ban-free-plastic-bags-groceries/">小売店が「レジ袋を有料化」するとかえってレジ袋の販売数が増加することが研究で判明</a></li><li style="margin:.5rem 0"><a href="/news/20241122-japanese-jomon-genetic-legacy-bmi/">縄文人のDNAを受け継いだ日本人はBMIが高いとの研究結果、狩猟採集民のDNAが現代では健康リスクになっている可能性</a></li><li style="margin:.5rem 0"><a href="/news/20241124-fiber-optic-splicer/">少しのズレも許されない光ファイバーを接合する方法</a></li><li style="margin:.5rem 0"><a href="/news/20241122-gusto-french-course/">ガストで2000円以下のフレンチコースが始まったので実際に食べてみたよレビュー</a></li><li style="margin:.5rem 0"><a href="/news/20241122-magnetic-keyboard-gaming/">ゲームをするならキーボードは「磁気式一択」</a></li><li style="margin:.5rem 0"><a href="/news/20241122-openscholar-scientific-research/">科学論文の調査に特化したAIモデル「OpenScholar」がベンチマークでGPT-4oを上回る、科学研究の大幅な効率化に期待</a></li><li style="margin:.5rem 0"><a href="/news/20241123-eating-nuts-lower-risk-dementia/">「一握りのナッツ」を毎日食べている人は認知症のリスクが低いとの研究結果</a></li></ol></div> <div id="yt-ranking"> <h3>人気動画</h3> <p id="yt-ranking-desc"><small>2024-11-18から2024-11-24の再生回数ランキング</small></p> <ul> <li><div><a href="https://www.youtube.com/watch?v=h9dNG7F2oVw" target="_blank"><img data-src="https://i.ytimg.com/vi/h9dNG7F2oVw/mqdefault.jpg" class="lazyload"></a></div> <div class="yt-ranking-link"><a href="https://www.youtube.com/watch?v=h9dNG7F2oVw" target="_blank">アンチレイプコンドーム「Rape-aXe」</a></div></li> <li><div><a href="https://www.youtube.com/watch?v=8uFdCM1Wn-E" target="_blank"><img data-src="https://i.ytimg.com/vi/8uFdCM1Wn-E/mqdefault.jpg" class="lazyload"></a></div> <div class="yt-ranking-link"><a href="https://www.youtube.com/watch?v=8uFdCM1Wn-E" target="_blank">ボディペイント姿でアザラシ猟の抗議活動を行うPETA</a></div></li> <li><div><a href="https://www.youtube.com/watch?v=2aqmv-PUS1c" target="_blank"><img data-src="https://i.ytimg.com/vi/2aqmv-PUS1c/mqdefault.jpg" class="lazyload"></a></div> <div class="yt-ranking-link"><a href="https://www.youtube.com/watch?v=2aqmv-PUS1c" target="_blank">シーシェパードのアディ・ギル号が沈没</a></div></li> <li><div><a href="https://www.youtube.com/watch?v=RXoBWF0k3cM" target="_blank"><img data-src="https://i.ytimg.com/vi/RXoBWF0k3cM/mqdefault.jpg" class="lazyload"></a></div> <div class="yt-ranking-link"><a href="https://www.youtube.com/watch?v=RXoBWF0k3cM" target="_blank">ブラックホールの重力レンズをシミュレートできる「Black Hole Vision」その1</a></div></li> <li><div><a href="https://www.youtube.com/watch?v=HzWAe2zuE9s" target="_blank"><img data-src="https://i.ytimg.com/vi/HzWAe2zuE9s/mqdefault.jpg" class="lazyload"></a></div> <div class="yt-ranking-link"><a href="https://www.youtube.com/watch?v=HzWAe2zuE9s" target="_blank">ブラックホールの重力レンズをシミュレートできる「Black Hole Vision」その2</a></div></li> <li><div><a href="https://www.youtube.com/watch?v=4mEokILM-Xs" target="_blank"><img data-src="https://i.ytimg.com/vi/4mEokILM-Xs/mqdefault.jpg" class="lazyload"></a></div> <div class="yt-ranking-link"><a href="https://www.youtube.com/watch?v=4mEokILM-Xs" target="_blank">Kindle2024年最新モデルの進化したページ送りやディスプレイを体感してみた</a></div></li> </ul> </div> <!-- ad_flag: FALSE --><!-- gpublic_ASO --> <!-- /4330625/Google_RB --> <div id="RB"> <div id='div-gpt-ad-1524184715175-0' style="text-align: center;"> <script> googletag.cmd.push(function() {googletag.display('div-gpt-ad-1524184715175-0');}); </script> </div></div> </aside><!-- end_#sub --> </div><!-- end_#main --> <footer> <dl class="navi-list-2col comments"> <dt><!-- footer --></dt> <dd><form name="iform" method="post" action="/news/contact2/" autocomplete="off" target="_blank"><i class="icon icon-ftid1"></i><input type="submit" value="誤字脱字の指摘" onclick="ga('send', 'event', 'outgoing', 'click', '/outgoing/gigazine.net/contact2');"><input type="hidden" name="memid" value="9524"><input type="hidden" name="inqtitle" value="無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」"><input type="hidden" name="inqentryid" value="96512"><input type="hidden" name="inqurl_title" value="20240922-simple-icons"><input type="hidden" name="csrf_token" value="a99747083e58aef9d20671b42619b6400825d494"></form></dd> <dd><a class="tarekomi" href="/news/contact3/" onclick="ga('send', 'event', 'outgoing', 'click', '/outgoing/gigazine.net/contact3');"><i class="icon icon-ftid2"></i><b>ネタのタレコミ</b></a></dd> <dd><a href="/news/contact4/" onclick="ga('send', 'event', 'outgoing', 'click', '/outgoing/gigazine.net/contact4');"><i class="icon icon-ftid3"></i><b>その他のお問い合わせ</b></a></dd> <dd><a href="https://gigazine.biz/" onclick="ga('send', 'event', 'outgoing', 'click', '/outgoing/gigazine.biz');" target="_blank" rel="nofollow"><i class="icon icon-ftid4"></i><b>広告掲載について</b></a></dd> <dd><a href="/news/about/" onclick="ga('send', 'event', 'outgoing', 'click', '/outgoing/gigazine.net/about');"><i class="icon icon-ftid5"></i><b>GIGAZINEについて</b></a></dd> <dd><a href="https://gigazine.co.jp/" onclick="ga('send', 'event', 'outgoing', 'click', '/outgoing/gigazine.co.jp');" target="_blank" rel="nofollow"><i class="icon icon-ftid6"></i><b>採用情報</b></a></dd> </dl> </footer> <!-- a_lib_footer --> <!-- Matomo --> <script type="text/javascript"> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(["setCookieDomain", "*.gigazine.net"]); _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://mt.gigazine.net/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '1']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <noscript><p><img src="https://mt.gigazine.net/matomo.php?idsite=1&rec=1" style="border:0;" alt="" /></p></noscript> <!-- End Matomo Code --> <script data-cfasync="false"> window.addEventListener('DOMContentLoaded',function(){ const clipButton = document.getElementById("URLClip"); clipButton.addEventListener("click", ()=>{ const text = `無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」 - GIGAZINE https://gigazine.net/news/20240922-simple-icons/`; if (navigator.clipboard) {navigator.clipboard.writeText(text);} else { const cpdiv = document.createElement('textarea'); cpdiv.textContent = text; document.body.appendChild(cpdiv); const userAgent = window.navigator.userAgent.toLowerCase(); if(userAgent.indexOf('chrome') != -1 ){cpdiv.select();} else { const cprange = document.createRange(); cprange.selectNode(cpdiv); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(cprange); } document.execCommand('copy'); document.body.removeChild(cpdiv); } clipButton.textContent = "コピーしました"; }); }); </script> <style> #donate_footer{ position: sticky; bottom: 0; background-color: white; width: 70%; margin: 0 auto; border: 1px solid gray; padding: 0 10px; transform: translateY(100%); display: grid; z-index: 1; } #donate_footer p{ border: 2px solid red; padding: 10px; border-radius: 16px; } #donate_footer_close { position: absolute; right: 0; top: 0; background: none; border: none; } #donate_footer.upMove{ animation: UpAnime 0.5s forwards; } @keyframes UpAnime{ from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } #donate_footer.downMove{ animation: DownAnime 0.5s forwards; } @keyframes DownAnime{ from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(100%); } } #donate_footer_kifu { background-color: royalblue; color: white; border: none; padding: 3px 10px; font-weight: bold; border-radius: 4px; } #donate_dialog label { width: 80%; display: block; margin-left: auto; margin-right: auto; } #donate_dialog input { width: 100%; height: 2em; } #donate_dialog_submit_button { width: 80%; margin-top: 6px; margin-left: auto; margin-right: auto; display: block; background-color: royalblue; color: white; border: none; font-weight: bold; padding: 5px; border-radius: 5px; } </style> <div id="donate_footer" style="display:none;"> <p>お邪魔して申し訳ないです。読者のための記事を掲載し続けるため、どうかサーバー代として300円をご寄付いただけないでしょうか。</p> <button id="donate_footer_close">×</button> <div style="margin-left: auto;"> <button id="donate_footer_delay">いいえ、後で時間があれば</button> <a href="https://donate.stripe.com/fZe4io1XSbOo0yk9AB" target="_blank"><button id="donate_footer_kifu">はい、寄付します</button></a> </div> </div> <dialog id="donate_dialog"> <button id="donate_dialog_close">←</button> <form method="POST" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeM-JwJuNTHw0cvBoqsf-WD7IHcpWN8NE0Id_04IiTX5pgePQ/formResponse" target="hidden_iframe" id="donate_remind_form" > <p> 喜んでメールでリマインドさせていただきます。 引き続き記事をお読みください。 </p> <label><span style="font-size: small;">メールアドレス</span><br> <input name="entry.936053808" type="email" > </label> <button type="submit" id="donate_dialog_submit_button">送信</button> </form> </dialog> <iframe name="hidden_iframe" style="display: none;"></iframe> <script src="https://i.gzn.jp/img/-side-ad.js"></script> <script> { let adblock = false; if(!document.getElementById('F1qAYhOnM7DF6mEd')){ adblock = true; } const sentDate = window.localStorage.getItem("donate_footer_sentDate"); const closeDate = window.localStorage.getItem("donate_footer_closeDate"); const donateFooter = document.getElementById("donate_footer"); const donateFooterScroll = ()=>{ if(window.scrollY >= 300){ donateFooter.classList.remove("downMove"); donateFooter.classList.add("upMove"); } else { if(donateFooter.classList.contains("upMove")){ donateFooter.classList.remove("upMove"); donateFooter.classList.add("downMove"); } } }; if(!window.localStorage.getItem("landing_flag_donate_footer")){ window.localStorage.setItem("landing_flag_donate_footer", Date.now()); } else { if( adblock && new Date("2024/08/01") < Date.now() && new Date("2024/09/01") > Date.now()){ if(!sentDate && closeDate < (Date.now() - 1000 * 3600 * 24)){ donateFooter.style.display = "grid"; document.addEventListener("scroll", donateFooterScroll); } } } const donateFooterClose = document.getElementById("donate_footer_close"); donateFooterClose.addEventListener("click", ()=>{ document.removeEventListener("scroll", donateFooterScroll); donateFooter.classList.remove("upMove"); donateFooter.classList.add("downMove"); window.localStorage.setItem("donate_footer_closeDate", Date.now()); window.setTimeout(()=>{ donateFooter.style.display = "none"; }, 1000); }); const donateDialog = document.getElementById("donate_dialog"); const donateFooterDelay = document.getElementById("donate_footer_delay"); donateFooterDelay.addEventListener("click", ()=>{donateDialog.showModal();}); const donateDialogClose = document.getElementById("donate_dialog_close"); donateDialogClose.addEventListener("click", ()=>{donateDialog.close();}); const donateFooterKifu = document.getElementById("donate_footer_kifu"); donateFooterKifu.addEventListener("click", ()=>{ document.removeEventListener("scroll", donateFooterScroll); window.localStorage.setItem("donate_footer_sentDate", Date.now()); donateFooter.classList.remove("upMove"); donateFooter.classList.add("downMove"); window.setTimeout(()=>{ donateFooter.style.display = "none"; }, 1000); }); const donateRemindForm = document.getElementById("donate_remind_form"); donateRemindForm.addEventListener("submit", ()=>{ donateDialog.close(); document.removeEventListener("scroll", donateFooterScroll); donateFooter.innerHTML = "<p>送信しました</p>"; window.localStorage.setItem("donate_footer_sentDate", Date.now()); window.setTimeout(()=>{ donateFooter.classList.remove("upMove"); donateFooter.classList.add("downMove"); window.setTimeout(()=>{ donateFooter.style.display = "none"; }, 1000); }, 1000); }); } </script> </body> </html><!-- comments_no_login -->