フーノページ

<!DOCTYPE html> <html lang="ja"> <head>   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133409287-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-133409287-1'); </script>  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-6918386144875495", enable_page_level_ads: true }); </script>  <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width"> <title>フーノページ</title> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@fukarararu" /> <meta property="og:url" content="https://fuuno.net/" /> <meta property="og:title" content="フーノページです。" /> <meta property="og:description" content="いろいろかいていきます。" /> <meta property="og:image" content="https://fuuno.net/main_img/fu_icon.png" />  <link rel = "stylesheet" href = "https://fuuno.net/ani/ani.css">    <link rel = "stylesheet" href = "https://fuuno.net/ani/ani03/ani03.css" >  <link rel = "stylesheet" href = "https://fuuno.net/ani/ani04/ani04.css" >  <link rel = "icon" type = "image/x-icon" href = "https://fuuno.net/fav02.svg"> <style> /*--------------ベースstyle。01.03更新。---------------------------------------*/ html{max-width:1000px; margin: 0 auto; } /*----------01/03変更分------------------*/ body {font-family:'メイリオ', 'Hiragino Kaku Gothic Pro', 'arial', sans-serif; width:100%; margin-left:0; font-size:130%; } img{width:80%; padding-left:10%; } @media only screen and (max-device-width: 480px) { body{ font-size:4.9vw; } header{ line-height:1.4; font-size:0.9em; } img{width:90%; padding-left:5%; } } /*---------01/03変更分ここまで▲-----------*/ /*.gamegamen{width:80%; margin-left:10%; } */ .komidasi {background-color:coral; text-align:center; } header {background-color:aquamarine; padding:1em; /*-----------headerにbackground-imageを設定----------------------- background-image:url("http://fuuno.chips.jp/magickeyboard.png"); background-size:cover; ---------------------------------------------------------------*/ } .codesample { font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace; line-height: 1.7; border: solid 1px; padding:0.5em; font-size:100%; font-weight:800; background-color:beige; margin-top:2em; margin-bottom:2em; } /*---------------------------------------------------------------*/ /*--------pの頭に◼︎をつけ、２行目以降インデントさせたい場合。--------------- p{ padding-left:2em; text-indent: -1em; } -----------------------------------------------------------------*/ p{ padding:5%; } /*-------------こっから記事リストのカスタマイズ。------------------*/ .kijilist{ list-style:none; padding-left:0; position:relative; } .kijilist li{ /*height:6em;*/ border:solid 2px; background-color:floralwhite; } .kijilist a { text-decoration:none; color:black; } .kijilist a img { height:auto; width:6em; float:left; margin-right:2em; margin-top:1.6em; margin-left:0; padding-left:1em; /*liのimageにはそもそもpaddingが設定されているみたいだ。だからpadding-leftを０にする。！！！そしてaspect fitさせること！正方形のViewに。 */ } .kijilist li a strong{ color:#000; display:block; padding-top:0.6em; font-size:1.2em; margin-top:0.5em; margin-bottom:-0.6em; display:flex; padding-right:1em; } .kijilist li a p { display:flex; padding:0.5em; padding-left:0; text-indent:0; color:#000; margin-left:9em; } /* .kijilist a img { height:auto; width:6em; float:left; margin-right:3em; margin-left:0; padding-left:0; .kijilist li a strong{ color:#000; display:block; padding-top:0.6em; font-size:1.2em; margin-bottom:-0.6em; display:flex; padding-right:1em; } .kijilist li a p { display:flex; padding:0.5em; padding-left:0; text-indent:0; color:#000; margin-left:9em; */ /*---------------------------------------------------------------*/ /*--------------記事リストプロトタイプ。------------------------------*/ .kijilist_pr{ list-style:none; padding-left:0; } .kijilist_pr li{ height:6em; border:solid 2px; background-color:floralwhite; padding:1em; } .kijilist_pr a { text-decoration:none; } .kijilist_pr a img { height:6em; width:6em; float:left; margin-right:3em; margin-left:0; padding-left:0; /*liのimageにはそもそもpaddingが設定されているみたいだ。だからpadding-leftを０にする。！！！そしてaspect fitさせること！正方形のViewに。 */ } .inline { height:6em; width:6em; float:left; margin-right:2em; margin-top:1em; padding-left:1em; } .kijilist_pr li a strong{ display:block; font-size:130%; } /*-----------文章の左に画像を載せる。--------------------------------*/ .kaisi:before{ content: ''; display:inline-block; width:4.5em; background-repeat:no-repeat; height:3.0em; background-image:url("IMG.png"); background-size:contain; vertical-align:middle; margin-left:0.5em; /*-------imgが正方形の場合、テキストとの調整を行う。---------------- margin-right:-0.6em; ----------------------------------------------------------*/ float:left; } /*---------------------------------------------------------------*/ #wrapper{ overflow:hidden; } /*-------------pに角丸長方形。-------------------------------------*/ .kadomaru{ border:solid 2px; border-radius:15px; } /*てんピョロだけのstyle。*/ .tenpyoro{ border-right:solid 3px; border-bottom:solid 3px; border-color:cadetblue; } /* #atama { margin-top:-1.2em; position:sticky; top:0; z-index:1; } */ #fuuno { width:50%; padding:0; margin-left:25%; animation: ani02 2s ease-in-out infinite; } @keyframes ani02 { 0% { transform: translateY(0); } 50% { transform: translateY(-4%); } 100% { transform: translateY(0); } } .kijilist a object { height:auto; width:39%; float:left; /* ⬆︎無効にしてもなかなかよい・・*/ overflow:visible; margin-right:2em; margin-top:1em; /* margin-top:1em;*/ margin-left:0; padding-left:1em; } /*-----------------newcard。-----------------*/ /* divの親のa。*/ .newa { text-decoration:none; } .newcard { display:flex; background-color:floralwhite; border:solid 2px black; } .hidari { width:69%; /* margin:1em;*/ margin:auto; /* padding-top:1em;*/ /* background-color:white;*/ } .newcard object { padding-left:1em; /* padding-right:1em;*/ display:block; width:100%; margin:auto; /* padding:1em;*/ } /* ⬆︎これ、いずれはviewportのアスペクトによって使い分ける。それが⬇︎。*/ #quad { width:69%; } .migi { color:black; margin-left:1em; width:100%; } .title { font-weight:900; font-size:1.3em; margin:0; padding-top:1em; /* padding-left:1em;*/ } .capt { padding-top:0; /* padding-bottom:0;*/ } /*--------------------3D用。--------------------*/ #svgs { position:relative; height:13em; } #svgs img { position:absolute; top:4em; transform-origin:center center -4em; } #nihongo1 { animation:go1 6s infinite; } @keyframes go1 { 0% { transform:rotate3d(1,0,0,0deg); } 50% { transform:rotate3d(1,0,0,-90deg); } 100% { transform:rotate3d(1,0,0,-90deg); } } #eigo { animation:go2 6s infinite; } @keyframes go2 { 0% { transform:rotate3d(1,0,0,90deg); } 50% { transform:rotate3d(1,0,0,0deg); } 100% { transform:rotate3d(1,0,0,-90deg); } } #nihongo2 { animation:go3 6s infinite; } @keyframes go3 { 0% { transform:rotate3d(1,0,0,90deg); } 50% { transform:rotate3d(1,0,0,90deg); } 100% { transform:rotate3d(1,0,0,0deg); } } #fu { z-index:0; opacity:0.1; } /*ーーーーーーーーーーー奥行きのあるアニメーション(ani20)。ーーーーーーーーーーーー*/ #svgs20 { perspective:10em; -webkit-perspective:10em; } #fu20 { padding:0; width:30%; margin-left:35%; transform-origin:center center 3em; animation:oku 4s linear infinite; } @keyframes oku { 100% { transform:rotateY(1turn); } } /* ----------take4(ani22）。-------------------------*/ #soto_22 { position:relative; transform-style:preserve-3d; perspective:600px; } #soto_22 img { padding:0; width:80%; margin-left:10%; } #t4b,#t4f { position:absolute; top:0; } #t4s { opacity:0; } #t4f { transform-origin:center center -4em; animation:t4f 5s linear infinite; } @keyframes t4f { 0% { transform:translateZ(4em) rotateY(0deg); } 100% { transform:translateZ(4em) rotateY(360deg); } } /* safari対応。*/ _:lang(x)+_:-webkit-full-screen-document, #t4b { transform:translateZ(2em); } _:lang(x)+_:-webkit-full-screen-document, #take4 { perspective:900px; } /* ----------take4。-------------------------*/ .nekomidasi { border-right:solid 0.5em forestgreen; border-left:solid 0.5em forestgreen; background-color:initial; text-align:center; color:#000; } </style> </head> <body>            <div id = "wrapper"> <div class = "komidasi" id = "atama" style = "margin-top:-1.2em;position:sticky;top:0;z-index:1;"> <h3>フーノページ</h3> </div> <div id = "map" style = "background-color:#fff;"> <br> <div id = "maparea"> <div class = "row"> <div class = "cell mada"> </div> <div class = "cell"> <a href = "https://fuuno.net/SVG/vec00/vec00.html"> <div class = "uenoe"> <img src = "Vec.png" alt = "Vectornator"> </div> <p class = "sitamoji"> Vectornator </p> </a> </div> <div class = "cell"> <a href = "https://fuuno.net/ani/ani00/ani00.html"> <div class = "uenoe"> <img src = "https://fuuno.net/sen_fu_mono.svg" alt = "SVGアニメーション"> </div> <p class = "sitamoji"> SVGアニメーション </p> </a> </div> </div> <div class = "row"> <div class = "cell"> <a href = "https://fuuno.net/web02/web_design/webdesign.html"> <div class = "uenoe"> <img src = "link_icon.svg" alt = "webデザイン"> </div> <p class = "sitamoji"> webデザインサンプル </p> </a> </div> <div class = "cell mada"> </div> <div class = "cell"> <a href = "https://fuuno.net/cani/cani00/cani00.html"> <div class = "uenoe"> <img src = "cani.svg" alt = "CSSアニメーション"> </div> <p class = "sitamoji"> CSSアニメーション </p> </a> </div> </div> <div class = "row"> <div class = "cell"> <a href = "https://fuuno.net/nani/nani00/nani00.html"> <div class = "uenoe"> <img src = "nani.svg" alt = "JavaScript"> </div> <p class = "sitamoji"> JavaScriptの「？」 </p> </a> </div> <div class = "cell mada"> </div> <div class = "cell mada"> </div> </div> </div> <style> #map { overflow-y:hidden; /*アヌ名ション葉。*/ /*heghtはcomputedで取得する必要が。*/ /* animation:takasa 2s ease-in infinite;*/ } /* @keyframes takasa { from { height:0px; } to { height:100vh; } } */ .row { width:93.75%; display:flex; margin:0 auto; justify-content:space-around; } #map .cell{ width:25%; /* aspect-ratio:1/2;←これもおもろい。*/ aspect-ratio:1/1; margin:3.33%; /* margin-bottom:1%;*/ /* ↑ブロック要素なのでmarginなのね。*/ /* border:solid 1px;*/ } .cell { /* border:solid 1px;*/ } #premap ul { padding-left:0; display:flex; } #premap li { list-style:none; text-align:center; width:25%; } /* 未登録のカード。*/ .mada { visibility:hidden; } /* カード上の画像*/ .uenoe { height:73.879814%; width:auto; display:flex; justify-content:center; overflow:hidden; } .uenoe img { width:auto; height:100%; object-fit:cover; } /* カード下の文字 */ .sitamoji { height:26.120186%; padding:initial; margin:initial; text-align:center; font-family: 'M PLUS 1', sans-serif; display:flex; align-items:center; justify-content:center; } /*　aタグの処理 */ .cell a { text-decoration:none; color:#000; } /* メディアクエリ */ @media(max-width:414px) { #map { overflow-X:auto; } ::-webkit-scrollbar { height:5px; } #maparea { width:150%; /* background-color:gold;*/ } #map .cell { margin-bottom:1%; } } </style>  <script> let resizeTimer; window.addEventListener("resize",function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(fuc,300); }) function fuc() { const cell = document.querySelectorAll(".cell"); const sitamoji = document.getElementsByClassName("sitamoji"); const cell_style = window.getComputedStyle(cell[0]); for (let m of sitamoji){ m.style.fontSize = `${parseFloat(cell_style.width)/10}px`; } const map = document.getElementById("map"); let area_haba = parseFloat(window.getComputedStyle(document.getElementById("maparea")).width); if(innerWidth < 760) { map.scrollLeft = area_haba/6; } } //新規読み込み時にも自動調整。 window.onload = fuc(); //const cell = document.querySelectorAll(".cell"); //const sitamoji = document.getElementsByClassName("sitamoji"); //const cell_style = window.getComputedStyle(cell[0]); //for (let m of sitamoji){ // m.style.fontSize = `${parseFloat(cell_style.width)/10}px`; //} </script>    </div> <header style = "background-color:#fff;"> <h1 style = "text-align:center;">フーノページ</h1>     <p>と　いいます。<br> 〽️ ← これは”いおりてん”といいます。</p> </header><br> <a href = "https://twitter.com/fukarakaru" style = "text-decoration:none; font-size:1.7em;"> <img src = "https://fuuno.net/main_img/twitter.svg " style = "width:3.5em; padding-left:0;padding-top:0;"> </a>   <p>初めまして。いいかげん情報提供者の「ふ」です。<br> ベクターグラフィック。<br> webアニメーション。<br> プログラミングなどについて紹介していきます。<br><br> それなりに更新・修正を重ねて、観ていてたのしいページにしたいと思いますので。よろしくお願いします。 </p> <hr><br><br>    <img id = "top_no_topbtn" src = "https://fuuno.net/main_img/to_mokuji.svg"> <style> #top_no_topbtn { /* display:block;*/ /* width:10%;*/ /* ⬆︎だめ。fullscreenだとでかくなる。*/ /* max-heightやwidthで対応するか。*/ height:10vh; width:auto; position:fixed; top:89vh; padding:0; z-index:2; cursor:pointer; } </style> <script> const topbtn = document.getElementById("top_no_topbtn"); topbtn.addEventListener("click",()=>window.scrollTo(0,0)); </script>  <h3 class = "nekomidasi"> SVG学習本、登場。 </h3><br>  <a class = "newa" href = "https://fuuno.net/ani/honnu/honnu.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/honnu/twitter.png" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <br> <strong> SVGコーディングブック。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.12.11 <br> 〽️ SVGのスキルがしっかり身に付く本。 </p> </div> </div> </a><br><br><br>  <h3 class = "komidasi"> 新着。 </h3><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/feDiffuseLighting/feDiffuseLighting.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feDiffuseLighting/topsita2.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、feDiffuseLightingで拡散照明。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2025.01.07 <br> 〽️ 3D空間をリアルにシミュレート。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/kenden/rotating_arrow/rotating_arrow.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/kenden/rotating_arrow/topsita.png"> </div> <div class = "migi"> <p class = "title"> <strong> イラレ、回転矢印アイコンの描き方。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.12.09 <br> 〽️ ４つのこだわりポイント。。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/svg_filter/svg_filter.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/svg_filter/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVGフィルター、使い方。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.11.25 <br> 〽️ SVGフィルターの基本と記事まとめ。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/fuunoJs/arr_sort/arr_sort.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/fuunoJs/arr_sort/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、配列要素の並び替え。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.11.15 <br> 〽️ 独自のルールも作れます。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/feDisplacementMap/feDisplacementMap.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feDisplacementMap/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、feDisplacementMap〜波形を要素にマッピング。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.10.16 <br> 〽️ <img>やテキストにも使える。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/fuuno_tool/SVG_to_dataURI/SVG_to_dataURI.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/fuuno_tool/SVG_to_dataURI/topsita_to_card.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG→dataURI変換。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.10.14 <br> 〽️ SVGをdataURIに変換。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/fuunoCSS/CSStop/CSStop.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/fuunoCSS/CSStop/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> フーノページCSS。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.09.15 <br> 〽️ CSS記事のまとめです。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/fuunoCSS/font_max_min/font_max_min.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/fuunoCSS/font_max_min/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> CSS、font-sizeの最大値/最小値を指定。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.09.09 <br> 〽️ max/min/clamp関数の理解。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/feTurbulence/feTurbulence.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feTurbulence/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、feTurbulenceでノイズ発生。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.09.02 <br> 〽️ SVGフィルターの大ボス。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/fuunoCSS/sticky_fixed/sticky_fixed.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/fuunoCSS/sticky_fixed/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> position:stickyとfixedの違いと使い分け。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.08.26 <br> 〽️ ２つの特徴を知って適切に使う。 </p> </div> </div> </a><br>   <a class = "newa" href = "https://fuuno.net/ani/filter/feTile/feTile.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feTile/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、feTileで画像をタイル状に並べる。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.08.11 <br> 〽️ オブジェクトの形に合わせて敷き詰め。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/feBlend/feBlend.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feBlend/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、feBlendで色をブレンド。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.08.05 <br> 〽️ 各modeの仕組みも解説。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/feImage/feImage.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feImage/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVGのfeImageフィルター。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.07.25 <br> 〽️ 外部画像をフィルターで合成。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/feCompsite/feComposite.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feCompsite/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、feCompositeで要素を切り抜き。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.07.04 <br> 〽️ SVGでパスファインダー的な。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/filter/filter.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/filter/twitter2.png"> </div> <div class = "migi"> <p class = "title"> <strong> CSSのフィルター、使い方。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.06.23 <br> 〽️ CSSだけでCG処理。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/kenden/curly_braces/curly_braces.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/kenden/curly_braces/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> イラレ、波括弧{ }の作り方。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.06.17 <br> 〽️ パスデータなのでアレンジも自在。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web/trim/trim.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web/trim/topsita.png"> </div> <div class = "migi"> <p class = "title"> <strong> CSSで画像をぴったりと配置する、 object-fit:cover。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.06.13 <br> 〽️ object-positionで位置も調整。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/js_sample/forward_reverse/forward_reverse.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/js_sample/forward_reverse/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、スクロール方向を判定する。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.06.05 <br> 〽️ 使い道いろいろ。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/feOffset/feOffset.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feOffset/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVGのずらしフィルター、feOffset。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.06.02 <br> 〽️ 「合成ありき」のフィルター。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/js_sample/modori_header/modori_header.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/js_sample/modori_header/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、スクロールを戻したときにヘッダーを出現させる。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.05.28 <br> 〽️ ハンバーガーボタンよりも便利。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/feMerge/feMerge.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feMerge/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、feMergeでフィルター効果を重ねて表示。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.05.23 <br> 〽️ filter結果を合成しよう。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/feGaussianBlur/feGaussianBlur.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feGaussianBlur/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVGのぼかしフィルター、feGaussianBlur。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.05.11 <br> 〽️ x/y方向個別に指定が可能。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/Cini/pursue/pursue.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/Cini/pursue/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> CSS、要素を一定の区間だけ追尾させる。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.05.06 <br> 〽️ そのうち消えるのでうざくない追尾。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/kotei/kotei.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/kotei/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> CSSだけでヘッダー固定（一部のみも可）。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.04.29 <br> 〽️ position:stickyが便利。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web/yoko/yoko.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web/yoko/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> CSS、横スクロールをflexで作成。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.04.28 <br> 〽️ x/y方向個別に指定が可能。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web/snap/snap.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web/snap/topsita2.svg"> </div> <div class = "migi"> <p class = "title"> <strong> CSS、決まった位置にスナップさせるスクロール。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.04.24 <br> 〽️ ユーザに気持ちよく操作してもらいたい。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/js_sample/click_change/click_change.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/js_sample/click_change/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、クリックで画像切り替え。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.04.11 <br> 〽️ 商品紹介ページによくあるやつ。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/feComponentTransfer_2/componentTransfer2.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feComponentTransfer_2/topsita.png"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、feComponentTransferのgamma、discrete、table関数について。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.03.18 <br> 〽️ トリッキーな効果を演出。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/gamma/gamma.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/gamma/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> ガンマ特性、ガンマ補正について知っておく。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.02.27 <br> 〽️ web屋向けガンマ講座。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/feComponentTransfer_1/feComponentTransfer_1.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feComponentTransfer_1/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、feComponentTransferフィルターで色変換。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.02.19 <br> 〽️ RGBAごとの操作が可能。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/filter/feMorphology/feMorphology.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/filter/feMorphology/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、feMorphologyフィルターで要素を太く/細くする。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2024.02.06 <br> 〽️ 1番簡単なSVGフィルタ。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/honnu/taxation/taxation.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/honnu/taxation/topsita2.svg"> </div> <div class = "migi"> <p class = "title"> <strong> iTunes Connect、税務情報の登録。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.12 <br> 〽️ これで出版準備はOK。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/honnu/account_infomation/account_infomation.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/honnu/account_infomation/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> iTunes Connect、口座情報の登録。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.12 <br> 〽️ 出版準備まであと少し。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/honnu/Corporation/Corporation.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/honnu/Corporation/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> iTunes Connect、ブックの法人登録。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.12 <br> 〽️ Bookを販売するための手続きです。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/honnu/itunes_booksaccount/itunes_booksaccount.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/honnu/itunes_booksaccount/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> Apple Books用のiTunes Connectアカウントを登録。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.12 <br> 〽️ Apple IDを紐づけるだけ。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/honnu/AppleIDfromweb/AppleIDfromweb.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/honnu/AppleIDfromweb/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> Apple IDをweb上で作成、支払い情報の登録。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.12 <br> 〽️ ブラウザ環境があればOK。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/count_to_and_from/count_to_and_from.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/count_to_and_from/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、カウンターのup/downを往復させる。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.09.09 <br> 〽️ いろんな往復処理に使えます。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/cani/scroll-driven/driven.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/cani/scroll-driven/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> CSS、scroll-drivenでスクロールアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.09.03 <br> 〽️ ２種類の関数が使える。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/range_style/range_style.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/range_style/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> input type = "range"をCSSでカスタマイズ。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.08.21 <br> 〽️ 使い分けて作業効率⤴️ </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/kenden/svg_out/svg_out.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/kenden/svg_out/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> イラレSVG書き出し、ファイル/アートボード/オブジェクト単位で行う方法。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.08.11 <br> 〽️ 使い分けて作業効率⤴️ </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani90/ani90.html"> <div class = "newcard"> <div class = "hidari"> <object class = "web_sum" data = "https://fuuno.net/ani/ani90/topsita.svg"> </object> </div> <div class = "migi"> <p class = "title"> <strong> SVG、文字が起き上がってくるアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.07.25 <br> 〽️ ２つのタイプを解説。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/cani/auto_letter/auto_letter.html"> <div class = "newcard"> <div class = "hidari"> <object class = "web_sum" data = "https://fuuno.net/cani/auto_letter/topsita.svg"> </object> </div> <div class = "migi"> <p class = "title"> <strong> JavaScriptで１文字ごとのアニメーションを自動化。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.07.14 <br> 〽️ 引数指定だけで実現。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/range/range.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/range/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、スライダーに応じて要素を変化させる。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.06.30 <br> 〽️ input type = "range" </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/nani/nani20/nani20.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani20/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、アロー関数のthisについて。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.06.22 <br> 〽️ 「外側の関数スコープ」を見ればよい。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/nani/nani19/nani19.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani19/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> <br> JavaScript、thisの基本法則。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.06.16 <br> 〽️ 「メソッドかどうか」がポイント。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/googlefonts_subset/googlefonts_subset.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/googlefonts_subset/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> Google Fonts日本語、必要な文字だけを読み込んで軽量化。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.05.31 <br> 〽️ フォントをサブセット化しよう。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/googlefonts/googlefonts.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/googlefonts/twitter_2.png"> </div> <div class = "migi"> <p class = "title"> <strong> Google Fonts 使い方。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.05.27 <br> 〽️ デバイスを問わないwebフォントを使おう。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/nani/nani18/nani18_02.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani18/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、shallowコピーとdeepコピーについて。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.05.14 <br> 〽️ ２つの違いを知っておきましょう。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/nani/nani17/nani17.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani17/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、オブジェクトを一時的に変更して使う。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.04.27 <br> 〽️ 最短の方法を見つけました。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani89/circle_graph.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani89/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG円グラフを自動生成。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.04.22 <br> HTMLコードだけで完結。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/width_change/width_change.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/width_change/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、画面サイズが変わったときに１度だけ処理をする。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.04.14 <br> イベントリスナの重複を回避する方法。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/iphone_hack/iphone_hack.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/iphone_hack/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、iPhoneを特定してCSSを変更。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.04.11 <br> iPhone対応の「奥の手」。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/wani/wani01/wani01.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/wani/wani01/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> Web Animations API、再生/停止などの制御。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.04.06 <br> メディアプレーヤー並みの実装が可能。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/wani/wani00/waapi00.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/wani/wani00/twi.svg"> </div> <div class = "migi"> <p class = "title"> <strong> Web Animations APIのシンプルな使い方。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.03.23 <br> JavaScriptを使ったアニメーションが便利♬ </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/auto_manual_slide/auto_manual_slide.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/auto_manual_slide/icon.svg"> </div> <div class = "migi"> <p class = "title"> <strong> 自動/手動の両方に対応したスライドショー。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.03.08 <br> 〽️ せっかちなユーザにもやさしく。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/interval_control/interval_control.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/web02/interval_control/topsita.svg" style = "padding-top:1em;padding-bottom:1em;width:80%;" loading = "lazy"></object> </div> <div class = "migi"> <p class = "title"> <strong> setInterval(一定時間ごとの処理）の中断と再開。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.02.24 <br> interval IDについて知る。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/slide01/slide01.html"> <div class = "newcard"> <div class = "hidari" style = "overflow:hidden;"> <img src = "https://fuuno.net/web02/slide01/icon.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> 自動スライドショー、中央にきた画像を拡大表示。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.02.20 <br> <b>リクエストコーナー</b> 〽️２。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/mado/mado.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/web02/mado/topsita.svg" style = "padding-top:1em;padding-bottom:1em;width:80%;" loading = "lazy"></object> </div> <div class = "migi"> <p class = "title"> <strong> webページに窓を開けて背景画像を表示する〜JavaScript/SVG。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.02.15 <br> <b>リクエストコーナー</b> 〽️１。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/nani/nani16/nani16.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani16/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScriptの連想配列について〜ドット表記との違いとメリット。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.02.06 <br> 「文字列を渡す」ということ。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani87/ani87.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani87/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、放物線を使った落下アニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.02.03 <br> y = ax²の自然な動きを再現。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/nani/nani15/nani15.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani15/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、コンストラクタ/インスタンスについて。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.01.22 <br> 「this x = x」の解明。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/nani/nani14/nani14.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani14/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScriptの参照渡しと値渡しについて。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.01.14 <br> メモリの仕組みを知っておきましょう。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/nani/nani13/nani13.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani13/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、オブジェクトの操作いろいろ。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2023.01.06 <br> ５種類知っておけば困らない。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/aspect-ratio/aspect-ratio.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/aspect-ratio/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> CSS、要素の縦横比を固定〜aspect-ratio。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.12.14 <br> heightの相対値問題を解消。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/nani/nani12/nani12.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani12/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、windowオブジェクトとは。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.12.08 <br> Jsの構造を、そろそろはっきりさせましょう。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/click_zoom/click_zoom.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/click_zoom/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、クリックで画像を拡大表示。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.12.04 <br> 操作を快適にする２つのポイント。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/nani/nani11/nani11.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani11/twitter.png" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScriptのメソッドについて。〜関数との違いは？ </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.11.27 <br> 名前空間の独立とthisキーワード。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec80/Vec80.html"><img src ="https://fuuno.net/Vec/Vec80/icon.png"> <strong>Vectornator、シェイプビルダー実践編。 </strong> <p>2022.11.23<br> 落書きが均整のとれたロゴマークに。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/nani/nani10/nani10.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani10/icon.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScriptのオブジェクトとは？ </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.11.19 <br> jsの本質を知る第１歩はここ。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec82/Vec82.html"><img src ="https://fuuno.net/Vec/Vec82/icon.png"> <strong>Vectornator、アクションバーのカスタマイズについて。 </strong> <p>2022.11.14<br> 設定項目を画面に配置。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/nani/nani09/nani09.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani09/twitter.png" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、再帰関数とは？ </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.10.29 <br> 正体は「自作のループ処理」。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani85/ani85.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani85/topsita2.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> スクロールに合わせて見出しテキストをアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.10.23 <br> ２つのアニメーションで動きを豊かに。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/Vec/Vec69/Vec69.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/Vec/Vec69/twitter.png" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> Vectornator、シェイプビルダー使い方（基本編）。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.10.13 <br> 塗り絵気分でブーリアン。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani67/ani67.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani67/icon_b.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVGで巻物アニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.10.02 <br> テキスト要素をSVGで装飾。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/Vec/Vec68/Vec68.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/Vec/Vec68/twitter.png" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> 袋文字の作り方〜Vectornator。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.08.24 <br> 「選択状態のキープ」がコツ。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/scroll_change/scroll_change.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/scroll_change/icon.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、スクロール量に応じて要素を変化させる。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.08.14 <br> アニメーション組み立ての手順も紹介。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/Vec/Vec67/Vec67.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/Vec/Vec67/twitter.png" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> パスのオフセット、仕組みと使い方〜Vectornator。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.07.29 <br> 拡大/縮小ではできない表現。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/cani/cani28/cani28.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/cani/cani28/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> CSS、要素を弾ませるバウンドアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.07.18 <br> アニメーション組み立ての手順も紹介。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/Vec/Vec66/Vec66.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/Vec/Vec66/twitter.png" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> Vectornator、色を抽出〜スポイト機能について。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.07.11 <br> インポートした画像からも。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/interrupt_scroll/interrupt_scroll.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/interrupt_scroll/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> CSS/JavaScript、スクロールの禁止と解除。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.07.04 <br> １番軽いやり方を見つけました。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani84/ani84.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani84/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> ボタン要素をキランとさせる、 SVGアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.06.14 <br> 「クリックせざるを得ない」デザイン。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/linksaki/linksaki.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/linksaki/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、リンク先urlを取得。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.06.10 <br> 〽️ サイト管理に役立てよう。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani83/ani83.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani83/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、角度を付けてゆらゆら。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.05.31 <br> モーフィング＋モーションパスの合わせ技。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/marusuuji/marusuuji.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/marusuuji/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> HTML、丸数字に自動変換。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.05.18 <br> 〽️ ①〜㊿までを一瞬で入力。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/js_slide/js_slide.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/js_slide/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScriptで表示切り替えアニメーション（エンドレス）。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.05.14 <br> 〽️ 端まで行ってもイライラさせない。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/kirikae_loop/kirikae_loop.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/kirikae_loop/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、画像切り替えをループさせる。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.05.01 <br> 〽️ ユーザに親切な切り替えを実装。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani82/ani82.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani82/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、要素のバウンディングボックスを取得〜getBBox。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.04.21 <br> オブジェクトの正確な配置・整列を実現。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/setAttribute_lump/setattribute_lump.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/setAttribute_lump/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> setAttribute、複数の属性を一括で追加【JavaScript】。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.04.16 <br> 関数にもしてしまおう。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani81/ani81.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani81/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVGをcreateElementするには「NS」が必要。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.04.13 <br> 名前空間とは？なぜ必要なのか？ </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/web02/alternate_color/alternate_color2.html"> <div class = "newcard"> <div class = "hidari">  <img src = "https://fuuno.net/web02/alternate_color/topsita.svg" style = "padding-top:1em;padding-bottom:0.6em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> HTML、テキストの背景色を１行ごとに変更。 </strong> </p> <p class = "capt"> 2022.04.07<br> 折り返しの位置を自動で検出。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/nani/nani08/nani08.html"> <div class = "newcard"> <div class = "hidari">  <img src = "https://fuuno.net/nani/nani08/topsita.svg" style = "padding-top:1em;padding-bottom:0.6em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、はてなにドット「?.」〜オプショナルチェーンについて。 </strong> </p> <p class = "capt"> 2022.04.02<br> アクセスエラーを回避する方法。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/ani/ani80/ani80.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani80/twitter.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVGでもやもやのアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.03.28 <br> steps( )を使った画像切り替え。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/nani/nani06/nani06.html"> <div class = "newcard"> <div class = "hidari">  <img src = "https://fuuno.net/nani/nani06/topsita.svg" style = "padding-top:1em;padding-bottom:0.6em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScriptのforEachとは？〜配列のループメソッドについて。 </strong> </p> <p class = "capt"> 2022.03.24<br> HTML要素の一括編集にも。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/ani/ani69/ani69.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani69/twitter.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> 絵文字をSVGで自作してwebに表示。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.03.20 <br> しかもアニメーション。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani68/ani68.html"> <div class = "newcard"> <div class = "hidari">  <object data = "https://fuuno.net/ani/ani68/08.svg" style = "width:80%;"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVG、桜を散りばめるアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.03.16 <br> サイトを「春」で彩りましょう。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/cani/cani27/cani27.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/cani/cani27/icon.svg " style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> CSS、テキストを徐々に表示する。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.03.11<br> widthを変化させるだけ。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/nani/nani04/nani04.html"> <div class = "newcard"> <div class = "hidari">  <img src = "https://fuuno.net/nani/nani05/topsita.svg" style = "padding-top:1em;padding-bottom:0.6em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> for in for ofとは？〜ループ処理について。 </strong> </p> <p class = "capt"> 2022.03.07<br> ２つの違いとつかいかた。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/cani/cani26/cani26.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/cani/cani26/icon..svg " style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> CSS+JavaScript、スクロールに合わせて要素をふわっと浮かばせる。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.03.01<br> 複数や時間差にも対応。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/nani/nani04/nani04.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani04/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScriptの引数「e」とは？〜イベントオブジェクトについて。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.02.20<br> イベントリスナのもう１つの働き。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/cani/cani25/cani25.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/cani/cani25/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> CSS、hoverで親要素/子要素をtransition。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.02.17<br> 複数セットも簡単。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/nani/nani03/nani03.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani03/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScriptの点３つ「 ... 」〜スプレッド構文（演算子）について。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.02.14<br> 本質は「オブジェクトの複製」にあり。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/nani/nani02/nani02.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani02/topsita2.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScriptのドルマーク$に中括弧{ }、テンプレートリテラルについて。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.02.09<br> クオテーション祭り、さようなら。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/ani/ani66/ani66.html"> <div class = "newcard"> <div class = "hidari"> <object id = "obj" type = "image/svg+xml" data = "https://fuuno.net/ani/ani66/icon.svg" style = "width:80%;" loading = "lazy"></object> </div> <div class = "migi"> <p class = "title"> <strong> IntersectionObserver、複数の要素や発生位置に対応する（実践編）。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.02.06<br> スクロールに応じたアニメーションを実践。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/ani/ani54/ani54.html"> <div class = "newcard"> <div class = "hidari"> <object id = "obj" type = "image/svg+xml" data = "https://fuuno.net/ani/ani54/icon.svg" style = "width:80%;" loading = "lazy"></object> </div> <div class = "migi"> <p class = "title"> <strong> IntersectionObserverを使いこなす（理解編）。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.01.30<br> 「動いているだけのアニメーション」の先へと進もう。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/nani/nani01/nani01.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/nani/nani01/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScriptのはてな「?」とコロン「:」〜条件演算子について。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.01.18<br> if文の代わりになるのか? </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/ani/ani65/ani65.html"> <div class = "newcard"> <div class = "hidari"> <object id = "obj" type = "image/svg+xml" data = "https://fuuno.net/ani/ani65/topsita.svg" style = "width:80%;" loading = "lazy"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVG、JavaScriptを埋め込んでobject呼び出し。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.01.15<br> サイトをおめでたくしよう。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/web02/arrow/arrow.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/arrow/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScriptの矢印「=>」〜これはアロー関数というものです。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.01.09<br> 使い方とメリットについて解説。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/ani/ani64/ani64.html"> <div class = "newcard"> <div class = "hidari"> <object id = "obj" type = "image/svg+xml" data = "https://fuuno.net/ani/ani64/gaibude.svg" style = "width:80%;" loading = "lazy"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVG、扇子アニメーション２〜好きな画像を貼り付ける。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2022.01.05<br> サイトをおめでたくしよう。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/ani/ani63/ani63.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani63/topsita_pre.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVGで扇子のアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.12.30<br> ２つのキーフレームで実現。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/ani/ani62/ani62.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani62/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、要素を基準にtransform。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.12.18<br> これまでの苦労は何?（笑）。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec63/Vec63.html"><img src ="https://fuuno.net/Vec/Vec63/icon.png"> <strong>Vectornator、iCloudでファイルを同期させる。 </strong> <p>2021.12.13<br> アプリ内にファイルマネージャー。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani61/ani61.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani61/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVGでborderのアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.12.06<br> SVGとHTMLの座標空間を調和させる。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/web02/click/click.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/click/topsita2.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> ブログのクリックをGoogle Analyticsで計測。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.11.30<br> 新たなツールは導入せずともOK。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/ani/ani60/ani60.html"> <div class = "newcard"> <div class = "hidari"> <svg viewBox="0 0 841.9 595.3"> <style type="text/css"> .ani60st0{fill:#231815;stroke:#B7B7B7;stroke-width:4;stroke-miterlimit:10;} /* .ani60st1{fill:none;stroke:forestgreen; stroke-width:10;stroke-miterlimit:10;}*/ .ani60st2{fill:red;} /* 記事コンテンツの色⬇︎*/ .ani60st3{fill:#999999;} .st5{fill:none;stroke:#EA5514;stroke-width:5;stroke-miterlimit:10;} /* 中身のアヌ名ション*/ #fncontents { transform:translateY(-30%); animation:fncontents 3s alternate infinite; } @keyframes fncontents { from { transform:translateY(-50%); } to { transform:translateY(-100%); } } /* 記事の内容とアニメーションを内包してCLIP。*/ #fnugoki { clip-path:url(#fnclip); } /* twiyou */ #fnsotowaku,#fnclip { transform-origin:center; transform:rotate(90deg); } #twiback { opacity:0.5; clip-path:url(#fnclip); } /* twiyou */ </style> <g id=""> <path id="fnsotowaku" class="ani60st0" d="M570.2,587.3H271.7c-18.1,0-32.8-14.7-32.8-32.8V51.2c0-18.1,14.7-32.8,32.8-32.8h298.4 c18.1,0,32.8,14.7,32.8,32.8v503.3C603,572.6,588.3,587.3,570.2,587.3z"/> <clipPath id = "fnclip"> <path id="clipyou" class="ani60st1" d="M271.7,34.4c-9.3,0-16.8,7.6-16.8,16.8v503.3c0,9.3,7.6,16.8,16.8,16.8h298.4 c9.3,0,16.8-7.6,16.8-16.8V51.2c0-9.3-7.6-16.8-16.8-16.8H271.7z"/> </clipPath> </g>  <rect id = "twiback" width = "100%" height = "100%" fill = "forestgreen"/>  <g id = "fnugoki">  <g id="fncontents"> <g id="nakami_1_"> <rect x="253.3" y="34.4" class="ani60st2" width="333.7" height="1127.1"/> <path class="ani60st3" d="M562,304.3H461c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C565.7,302.6,564.1,304.3,562,304.3z"/> <path class="ani60st3" d="M562,327.2H461c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C565.7,325.5,564.1,327.2,562,327.2z"/> <path class="ani60st3" d="M562,350H461c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C565.7,348.4,564.1,350,562,350z"/> <path class="ani60st3" d="M562,372.9H461c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C565.7,371.3,564.1,372.9,562,372.9z"/> <path class="ani60st3" d="M562,800.4H461c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C565.7,798.7,564.1,800.4,562,800.4z"/> <path class="ani60st3" d="M562,823.2H461c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C565.7,821.6,564.1,823.2,562,823.2z"/> <path class="ani60st3" d="M562,846.1H461c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C565.7,844.5,564.1,846.1,562,846.1z"/> <path class="ani60st3" d="M562,869H461c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C565.7,867.3,564.1,869,562,869z"/> <g> <path class="ani60st3" d="M562.3,194.6H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,193,564.2,194.6,562.3,194.6z"/> <path class="ani60st3" d="M562.3,213.5H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,212,564.2,213.5,562.3,213.5z"/> <path class="ani60st3" d="M562.3,232.4H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,230.9,564.2,232.4,562.3,232.4z"/> <path class="ani60st3" d="M562.3,251.4H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,249.9,564.2,251.4,562.3,251.4z"/> <path class="ani60st3" d="M562.3,270.3H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,268.8,564.2,270.3,562.3,270.3z"/> <path class="ani60st3" d="M562.3,448.7H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,447.2,564.2,448.7,562.3,448.7z"/> <path class="ani60st3" d="M562.3,467.6H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,466.1,564.2,467.6,562.3,467.6z"/> <path class="ani60st3" d="M562.3,486.6H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,485,564.2,486.6,562.3,486.6z"/> <path class="ani60st3" d="M562.3,505.5H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,504,564.2,505.5,562.3,505.5z"/> <path class="ani60st3" d="M562.3,524.5H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,522.9,564.2,524.5,562.3,524.5z"/> <rect x="276.2" y="294.8" class="st3" width="169.9" height="110.4"/> <rect x="397.9" y="552.9" class="st3" width="169.9" height="110.4"/> <path class="ani60st3" d="M562.3,690.6H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,689.1,564.2,690.6,562.3,690.6z"/> <path class="ani60st3" d="M562.3,709.6H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,708,564.2,709.6,562.3,709.6z"/> <path class="ani60st3" d="M562.3,728.5H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,727,564.2,728.5,562.3,728.5z"/> <path class="ani60st3" d="M562.3,747.5H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,745.9,564.2,747.5,562.3,747.5z"/> <path class="ani60st3" d="M562.3,766.4H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,764.9,564.2,766.4,562.3,766.4z"/> <rect x="276.2" y="790.9" class="st3" width="169.9" height="110.4"/> <path class="ani60st3" d="M380.9,562.4h-101c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C384.6,560.7,382.9,562.4,380.9,562.4z"/> <path class="ani60st3" d="M380.9,585.2h-101c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C384.6,583.6,382.9,585.2,380.9,585.2z"/> <path class="ani60st3" d="M380.9,608.1h-101c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C384.6,606.4,382.9,608.1,380.9,608.1z"/> <path class="ani60st3" d="M562.3,935.3H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,933.7,564.2,935.3,562.3,935.3z"/> <path class="ani60st3" d="M562.3,954.2H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,952.7,564.2,954.2,562.3,954.2z"/> <path class="ani60st3" d="M562.3,973.1H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,971.6,564.2,973.1,562.3,973.1z"/> <path class="ani60st3" d="M562.3,992.1H279.6c-1.9,0-3.4-1.5-3.4-3.4V986c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,990.6,564.2,992.1,562.3,992.1z"/> <path class="ani60st3" d="M562.3,1011H279.6c-1.9,0-3.4-1.5-3.4-3.4v-2.6c0-1.9,1.5-3.4,3.4-3.4h282.7c1.9,0,3.4,1.5,3.4,3.4v2.6 C565.7,1009.5,564.2,1011,562.3,1011z"/> <rect x="397.9" y="1039.5" class="st3" width="169.9" height="110.4"/> <path class="ani60st3" d="M380.9,1048.9h-101c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C384.6,1047.3,382.9,1048.9,380.9,1048.9z"/> <path class="ani60st3" d="M380.9,1071.8h-101c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C384.6,1070.1,382.9,1071.8,380.9,1071.8z"/> <path class="ani60st3" d="M380.9,1094.7h-101c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C384.6,1093,382.9,1094.7,380.9,1094.7z"/> <path class="ani60st3" d="M380.9,631h-101c-2,0-3.7-1.7-3.7-3.7v-2.1c0-2,1.7-3.7,3.7-3.7h101c2,0,3.7,1.7,3.7,3.7v2.1 C384.6,629.3,382.9,631,380.9,631z"/> </g> </g> </g> </g>    <radialGradient id = "fntama" cx = "60%" cy = "40%" r = "80%"> <stop offset = "0" style = "stop-color:#fff"/> <stop offset = "0.5" style = "stop-color:#eee"/> </radialGradient> <symbol id = "fnsym"> <circle cx = "30%" cy = "10%" r = "25" fill = "url(#fntama)"/> </symbol>  <g id = "fnindefi"> <use id = "fn" href = "#fnsym"/> </g> <style> #fn { filter:blur(4px); animation:fn 4s linear forwards; } @keyframes fn { from { transform:translate(15%,-40%); } to { transform:translate(15%, 150%); } } #fnindefi { clip-path:url(#fnclip); } </style> </svg> <script> const fnindefi = document.getElementById("fnindefi"); const fn = document.getElementById("fn"); function fntuika() { let clone = fn.cloneNode(true); clone.addEventListener("animationend",function() { clone.remove(); }); let iti = String(Math.random()*50-20)+"%"; clone.setAttribute("x",iti); fnindefi.appendChild(clone); } setInterval(fntuika,400); </script> </div> <div class = "migi"> <p class = "title"> <strong> SVG、画面全体に雪を降らせるアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.11.25<br> これからの季節に必要（笑）。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/web02/random/random.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/web02/random/twitter.png" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> JavaScript、乱数の範囲や重複を指定〜Math.random使い方。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.11.17<br> 整数/範囲/重複の有無を自在にあやつろう。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/ani/ani59/ani59.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani59/line06.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、テキストにグラデーション、しかもアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.11.12<br> １つの定義から多彩な表現。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/ani/ani58/ani58.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani58/moji2.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、グラデーションのアニメーション ②〜円形編。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.11.07<br> カギはCSSのstep関数。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec62/Vec62.html"><img src ="https://fuuno.net/Vec/Vec62/icon.png"> <strong>Vectornator、ブラシがパスになりました。 </strong> <p>2021.10.31<br> 筆圧感知にもなった。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani56/ani56.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani56/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、グラデーションのアニメーション ①〜線形編。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.10.30<br> パターンの繰り返しとユニット切り替え。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani55/ani55.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani55/icon.png" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVGのグラデーションについて。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.10.23<br> カラーストップ/オフセットとは？ </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/kenden/kenden01/kenden01.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/kenden/kenden01/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> イラレ、オブジェクトのサイズでアートボード生成、png書き出し。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.10.13<br> サッとpng書き出しならこれ。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani53/ani53.html"> <div class = "newcard"> <div class = "hidari"> <svg viewBox="0 0 963.1 595.3" style="height:100%;" xml:space="preserve"> <style type="text/css"> .st_53_2{fill:#134AA3;} .st_53{fill:none;opacity:0;} #sen_53{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.75;stroke-miterlimit:10;} #sen_53 { transform-origin:center; animation:sen 0.5s infinite; } @keyframes sen { to { opacity:0; } } #moji { fill:#fff; stroke-width:0; } </style> <defs> <polygon id = "sen_53" points="481.6,235.2 490,-281.9 473.1,-281.9 "/> </defs> <g id="soto_53"> <rect class="st_53_2" width="963.1" height="600.3"/> </g> <g id="レイヤー_1"> <g id="moji"> <g> <path d="M372.9,389.6v-2.7h-1.4v-1.3h-1.4v-5.7h-1.4v-30h-1.3v0.8l-9.8,3.2v1.8h-4.1v1.3h-1.4v1.3h-4.3v1.1h-1.4v1.6l-6.9,2.5 v1.5l-5.5,1.3v4.4h-1.4v6.5h-4.2v-2.7h0v2.1H327v1.1h-1.4v1.8l-2.9,0.6v1.4l-4.3,0.6v2.3h-1.2v1.1h-4.3v2.1h-4.2v-0.8h-1.4v-1.6 l-2.3-0.3l-0.4,0.1v1.8h-7.1v-1.7l-5.7-1.1v-5.4h2.9v-2l3.5-1.1v-3.4h0.8v-2.7l5.5-1.9v-1.9h2.9v-1.3h1.4v-1.9h1.4v-1.9l6.9-0.6 v-2h1.4v-1.3h1.2v-1.9h1.4v-1l4.3-0.8v-1.4h1.4v-1.3h1.4v-1.3h1.2v-1l2.9-0.6v-1.7h1.4V344l4.3-1.1v-3.1h0.2l-4.3-0.6v2.9h-1.4 v1.3h-4.2v-4.6h0v1.3h-2.7v1.9h-4.4v-0.6h-1.4v-1.3h-1.3v0.6h-12.6v-1.9h-1.3v1.9h-4.2v-1.9h-1.4v-6.5h-1.4v-6.9h1.4v-2.7h15.3 l2.8,0.8v-0.8h8.5v1.5l9.6,1v-1.1h6.9v-1.3h5.7v0.6h4.3v0.8h15.1v-2.1h1.4v-10.6h-1.4v-1.3h-11.1v4h-1.2v1.6l-8.6,1.3v1.5 l-16.9,0.7V318h-1.2v-40.3h-1.4v-5.1h-1.3v1.1h-1.4v1.3h-6.9v1.3h-2.9v1.3h-1.4v1.3h-1.4v3l-5.5,0.9v7.2h-1.4v3.2h-2.9v1.3h-7.1 v-1.3h-4.1v-17.4l2.7-0.8v-2.4l4.3-1.3v-1.8h1.4v-1.3h1.4v-5.7l6.9-0.6v-2.8h1.4v-1.6l2.7-0.6v-1.7h2.9v-1.3h1.4v-1.3h1.4v-1.3 h1.4v-9.1h0.6v-3.8h0.6v-7.8h1.4v-4h1.4V218h1.4v-1.9h2.9v-6.5h1.4v-1.2l19.5-1.6v1.7l4.3,0.6v1.4l4.1,0.8v1.3l2.9,0.6v1.6h1.4 v1.3h1.4v1.3h2.9v8.4l-8.6,2.1v1.7h-1.2v1.1h-1.4v2.3h1.4v5.3h1.2v1.1h2.7v-1.1h5.4l3,0.3v-0.3h4.3v-0.8h1.4v-8.4h1.4v-1.3h1.2 v-1.1l4.3-0.6v-2.3h1.4v-15h1.4V207h2.7v-1.3h4.5l0.4,0.2c1.5,0.8,3.3,1.1,5.4,1.1c2.6,0,5,0.5,7,1.5l0.8,0.4v0h4.4v0.8h1.4v1.3 h2.7v1.3h1.4v1.1h2.9v1.3h1.4v2.1h1.4v6.1h-1.4v3l-5.7,0.8v1.3l-8.4,1.3v1.8l-9.8,1.9v3.1h1.4v2.1h1.3v-0.8h4.4v0.8h11v0.8l0,0 v-0.8h5.5v-0.6l5.5-0.6v-1.5h1.4v-1.3h1.4v-1.3h5.5v-1.3h1.4v-3.8h2.9v-5.3h4.3V222h2.7v-1.3h4.4v1.1l2.7,0.6v2.9h4.3v2.7h1.4 v4.6h2.7v0.6h4.3v1.3h1.4v2.7h1.4v11.4l-22.6,0.7v-1.6l-6.8-0.7v0.9h-4l-2.6-0.5l-13.1,3.8V249h-0.8l-5.7,1.4l-5.6-1.4l-10.1,1.1 v3.8h5.5l5.3,1.3l2.9-0.8l5.7,1.6v-0.8h4.3v-1.3h1.4v-0.8h4.1v-1.9h4.3V250h4.1v-0.6h4.4v0.6h1.4v0.8h4.1v1l2.9,0.8v0.7h4.1v0.8 h1.4v4.6h1.4v5h-1.4v5.1h-1.4v1l-7.9,1.7l-5.7-0.8l-1.8,0.5v1.3l6.5,0.4l10.2-0.7v13.7l-3.6,0.7h3.6v1.8l5.7-0.8v4.1h4.1v1.3h2.9 v1.3h1.4v2.7h2.9v1.3h1.2v10.7h-16.7v1.4l-1,0.5c-2.9,1.4-6.1,2.1-9.4,2.1h-7.7v1.3h-1.4v1.6l-5.3,0.9l-4-0.6l-3,0.6l-6-1.6v-2.2 h-1.2V310l-7.9-1.1l-1.9,0.4v2.2H401v5.1h-1.4v1.3h-1.4v1.3h-5.5v2.9l18.2,0.8v0.5h2.5v-0.6h5.7v-1.3h5.7v1.3h10.6l3.3-0.9v-2.7 l2.7-0.6v-1.1h2.9v-1.1h1.4v-2.7h4.1v-2.7h5.9v1.7l2.7,0.6V313h4.2v2.1h1.4v1.3h1.4v1.1h2.7v1.3h1.4v2.4l2.9,0.6v2.3h1.4v2.5h0.6 v4.4h-0.6v6.5h-17.2c-5,0-9.7,0.4-14.2,1.3l-0.3,0.1l-7.1-0.8l-2.8,0.8l-3-0.8l-4.3,0.8l-2.8-0.8l-11.2,0.6v0.7l2.7,0.8v0.1h5.7 v2.1h5.5v1.1h2.9v1.3h1.4v1.3h8.4v2.8l3.9,0.3v-0.4h8.5v1.3h0.7l0.6-0.2v-1.9h4.4v1.6l5.5,0.8v1.1h4.1v-0.8h4.2v0.8h2.9v1.1h4.1 v1.3h1.4v1.9h1.4v1.7l2.9,0.8V370h-1.4v0.9l-2.9,0.8v1.2l-8.4,2.1v8.2H468v1.3l-4,0l-12.5-0.8l-15.7,0.9v-1.4h-1.4v-1.3h-1.4 v-1.3h-1.4v-1.3h-6.9v-3.6l-2.9-0.6v-1h-1.2v-1.3H419v-7.8h-3.5c-2,0-3.8-0.5-5.5-1.6l-0.8-0.5v-0.5h-1.4v-1.3h-1.4V359H405v-1.3 h-1.4V356l-2.7-0.6v-2.6l-2.9-0.6v-2l-2.9-0.8V348h-1.4v-1.9h-1.1v9.3h1.2v3.2h1.4v23.2h-1.4v2.7h-1.2v1.1h-1.4v1.3h-1.4v1.3 h-1.4v1.3H372.9z M358.9,300.4v-1.2l2.2,0.4c0.8,0.2,1.5,0.2,2.2,0.2c0.8,0,1.6-0.1,2.3-0.3c1.7-0.5,3.5-0.9,5.4-1.3l0.4-0.1 l0.2,0v-1.3h1.4v-3.7l-10.8-0.5l-8.6,0.5v1.4h-1.4v0.8v0.7h1.4v2.1h1.4v1.6L358.9,300.4z M417.6,298.3L417.6,298.3l1.4-0.1v-1.3 h5.7v0.6h2.9v0.8h5.3v-0.9l2.9-0.8v-2.3h1.4v-1.5h-4l-5.3-0.7l-2.9,0.8l-4.1-0.8l-2.7,0.7l-12.7-0.8l-4.4,0.8v1.5h1.2v1.9h1.4 v1.4L417.6,298.3z M437.4,291.8l2.7-0.5v-1.3h-2.2l-0.5,0.1V291.8z M359.9,279.9l7.4-1.8v0.5l4.1-1v-1.9h-1.4v-4.3l-9.4-1 l-7.1,0.6v7h1.4v1.3L359.9,279.9z M407.8,278.1l3.9,1.1l5.6-1.1l1.7,0.3V276h1.4v-1.3h1.2v-1.1h1.4v-1.3h4.3v-1.3h2.9v-0.9h-0.8 l-4.4,1.4l-12.5-1.3l-2.8,0.6L401,270v1.2h-1.4v2.3h1.4v2.5h1.2v2.9l1.3,0.1v-0.9H407.8z M358.9,257v-0.9l5.4-0.9l3,0.8v-0.8h2.9 v-5.1l-2.4-0.3l-2.9,0.6l-4.5-2.1v-0.8l-4.9-0.4l-0.4,0.1v1.8h-1.4v4h-1.4v0.2h1.4v1.3h1.4v2.2L358.9,257z"/> <path class="st_53" d="M389.4,207.5c1.8,0.9,3.8,1.3,6.2,1.3c2.4,0,4.5,0.4,6.2,1.3v1.3h3.5v-0.8h0.8v0.8h1.4v1.3h2.7v1.3h1.4v1.1 h2.9v1.3h1.4v2.1h1.4v2.5H416v3.2l-5.7,0.8v1.3l-8.4,1.3v1.9l-9.8,1.9v6.5h1.4v2.1h4.9v-0.8h0.8v0.8h11v0.6l3.7,0.6v-1.1h3.5v1.1 h2v-1.9l5.5-0.6v-1.3h1.4v-1.3h1.4v-1.3h5.5v-1.3h1.4v-3.8h2.9v-5.3h4.3v-0.6h0.6v0.6h2v-1.9h0.8v0.8l2.7,0.6v3.2h4.3v2.7h1.4 v5.1h2v-0.6h0.6v0.6h4.3v1.3h1.4v2.7h1.4v7.8l-19,0.6v-1.3l-10.4-1.1v1.1h-2l-2.9-0.6l-11.2,3.2v-1.3h-2.9l-5.5,1.3l-5.5-1.3 l-12,1.3v7.2h1.4v1.3h3.5v-1.3h2.2l5.5,1.3l2.9-0.8l7.5,2.1v-1.3h2.2v1.3h2v-2.7h1.4V255h0.6v0.8h1.4l2-0.8v-1.9h4.3v-1.3h4.1 v-0.6h0.8v0.6h1.4v1.3h3.5v-0.6h0.6v0.6l2.9,0.8v1.1h4.1v0.8h1.4v4.6h1.4v1.3H448v5.1h-1.4v1.3l-6.1,1.3l-5.7-0.8l-2.7,0.8v-1.3 h-2.9l-4.3,1.3l-12.4-1.3l-2.9,0.6l-10.4-0.6v1.3h-4.3v1.9h1.4v1.3h1.4v2.7h1.4v2.5h1.2v2.7l4.9,0.6v-1.1h2.2l4.1,1.1l5.7-1.1 l3.5,0.6v-2.7h1.4v-1.3h1.2v-1.1h1.4V274h4.3v-1.3h2v1.3l8.4,0.6l8.4-0.6v10.3l-4.1,0.8v1.3h-1.4v4.6h2v-1.3h1.4v-1.3h2v1.9h1.4 l4.3-0.6v3.8h4.1v1.3h2.9v1.3h1.4v2.7h2.9v1.3h1.2v7h-16.7v2.1c-2.7,1.3-5.6,1.9-8.7,1.9c-3.1,0-6.2,0-9.5,0v1.3h-1.4v1.9 l-3.5,0.6l-4.1-0.6l-2.9,0.6l-4.3-1.1V311h-1.2v-2.7l-9.8-1.3l-3.7,0.8v1.9h-1.2v5.1h-1.4v1.3h-1.4v1.3h-5.5v6.5l18.2,0.8v1.3h2 v-0.8h0.6v0.8h3.5v-1.3h3.5v1.3h2.2v-2.7h2v1.3h12.6l4.9-1.3v-2.7l2.7-0.6v-0.8h2.9v-1.1h1.4v-2.7h4.1v-2.7h2.2v1.3l6.3,1.3v-0.8 h0.6v2.1h1.4v1.3h1.4v1.1h2.7v1.3h1.4v2.1l2.9,0.6v2.7h1.4v2.5h0.6v0.8h-0.6v6.5c-5.2,0-10.3,0-15.4,0s-10,0.4-14.6,1.3l-7.1-0.8 l-2.7,0.8l-2.9-0.8l-4.3,0.8l-2.7-0.8L409,337v3.8l2.7,0.8v1.9l3.5,0.8v-2.1h2.2v2.1h5.5v1.1h2.9v1.3h1.4v1.3h4.1v1.3h2v-1.3h2.2 v2.7l7.5,0.6v-0.6h4.9v1.3h2.9l2-0.8V350h0.8v1.3l5.5,0.8v1.3h2.9v0.6l3.5,0.6v-1.1h1.4v-0.8h0.6v0.8h2.9v1.1h4.1v1.3h1.4v1.9 h1.4v1.3l2.9,0.8v8.4h-1.4v1.3l-2.9,0.8v1.1l-8.4,2.1v7.8h-1.4v1.3h-2l-12.7-0.8l-13.9,0.8v-1.3h-1.4V380h-1.4v-1.3h-1.4v-1.3 h-6.9v-3.2l-2.9-0.6v-1.3h-1.2v-1.3h-1.4v-7.8c-1.9,0-3.7,0-5.3,0c-1.6,0-3.1-0.4-4.5-1.3v-1.3h-1.4v-1.3h-1.4v-1.9h-1.4v-1.3 h-1.4v-1.3l-2.7-0.6v-2.7l-2.9-0.6v-1.9l-2.9-0.8v-1.9h-1.4v-2.7l-3.5-0.6v1.3h-1.2v12.9h1.2v3.2h1.4v12.3h-1.4v3.2h1.4v4h-1.4 v2.7h-1.2v1.1h-1.4v1.3H388v1.3h-1.4v1.3h-11.8v-2.7h-1.4v-1.3h-1.4v-5.7h-1.4v-31.9H369v-1.3h-2v3.2h-1.4v1.3l-9.8,3.2v1.3h-4.1 v1.3h-1.4v1.3H346v1.1h-1.4v2.1l-6.9,2.5v1.3l-5.5,1.3v4h-1.4v6.5h-0.6v-4.6h-2.2v1.9h-1.4v2.1h-1.2v1.1h-1.4v2.1l-2.9,0.6v1.3 l-4.3,0.6v2.1h-1.2v1.1h-4.3v2.1h-0.6v-0.8h-1.4v-1.3l-4.3-0.6l-2,0.6v1.3h-3.5v-1.3l-5.7-1.1v-2.1h2.9v-2.5l4.3-1.3v-1.9h-0.8 v-0.8h0.8v-3.2l5.5-1.9v-1.3h2.9v-1.3h1.4v-1.9h1.4v-2.1l6.9-0.6v-1.9h1.4v-1.3h1.2v-1.9h1.4v-1.3l4.3-0.8v-1.1h1.4v-1.3h1.4 v-1.3h1.2v-1.3l2.9-0.6v-1.3h1.4v-2.1l4.3-1.1v-2.7h1.2v-3.2l-9-1.3v3.2h-1.4v1.3h-0.6V337h-3.7v1.3h-2.7v1.9h-0.8v-0.6h-1.4 v-1.3h-2.7V337h-2.2v1.9h-9V337h-1.4v-1.3h-2v1.3h-1.4v1.9h-0.6V337h-1.4v-4h-0.8h0.8v-2.5h-1.4v-3.2h1.4v-2.7h13.3l4.9,1.3v-1.3 h4.9v1.3l13.3,1.3V326h6.9v-1.3h2v1.3h3.5v-0.8h0.8v0.8H369v-2.1h1.4v-14.2H369v-1.3h-14.7v4h-1.2v1.9l-8.6,1.3v1.3l-13.3,0.6 v-1.3h-1.2v-40.3h-1.4v-14.2h-2.2v3.8h-1.2v5.3h-1.4v1.1h-1.4v1.3h-6.9v1.3h-2.9v1.3h-1.4v1.3h-1.4v3.2l-3.5,0.6v-1.9h-2v9.1 h-1.4v3.2h-2.9v1.3h-3.5v-1.3h-4.1v-14.2l2.7-0.8V274l4.3-1.3v-1.3h1.4V270h1.4v-5.9l6.9-0.6v-2.7h1.4V259l2.7-0.6v-1.3h2.9v-1.3 h1.4v-1.3h1.4v-1.3h1.4v-2.7h1.2v-3.2h-1.2V244h1.2v-3.2h-0.6v-0.6h0.6v-7.8h1.4v-4h1.4v-8.5h1.4V218h2.9v-6.5h1.4v-1.3l15.9-1.3 v1.3l4.3,0.6v1.3l4.1,0.8v1.3l2.9,0.6v1.9h1.4v1.3h1.4v1.3h2.9v5.1l-8.6,2.1v1.3h-1.2v1.1h-1.4v3.4h-0.8v1.1h0.8v1.3h1.4v5.3h1.2 v1.1h6.3v-1.1h3.5l4.9,0.6v-0.6h2.2v1.1h2v-1.9h1.4v-8.4h1.4v-1.3h1.2v-1.3l4.3-0.6v-2.1h1.4v-15h1.4v-1.9h2.7v-1.3H389.4 M350.3,255h1.4v1.3h1.4v2.1l7.5,0.6v-1.3l3.5-0.6l4.9,1.3v-1.3h2.9V255h1.4v-2.5h-1.4v-4l-4.3-0.6l-2.7,0.6l-2.9-1.3v-1.3 l-6.9-0.6l-2,0.6v1.3h-1.4v4h-1.4V255 M350.3,275.9h1.4v4h1.4v1.1l6.9,0.8l5.5-1.3v1.3h2v-1.3l5.7-1.3V274h-1.4v-1.3h1.4V270 l-12.6-1.3l-9,0.8v3.8h-1.4V275.9 M433.3,290.9l-5.5-0.8l-2.9,0.8l-4.1-0.8l-2.9,0.8l-12.6-0.8l-7.5,1.3v2.7h1.4v1.9h1.2v1.9h1.4 v1.3L416,300v0.6l3.5,0.8V300h1.4v-1.3h2v1.3h2v-0.8h0.8v0.8h9v-1.3l2.9-0.8V296h1.4v-2.7l2.9-0.6v-4.6h-4.3l-2,0.6v2.1H433.3 M350.3,295.5v2.5h1.4v2.1h1.4v1.3l7.5,1.1v-1.1c0.9,0.2,1.7,0.3,2.6,0.3c1,0,1.9-0.1,2.8-0.4c1.6-0.4,3.4-0.9,5.3-1.2l2,0.6 v-1.9h1.4v-7.2l-12.6-0.6l-10.4,0.6v1.3h-1.4V295.5 M350.9,295.5h-0.6H350.9 M390.3,203.9h-0.9h-2.2h-3.6v1.3h-2.7v1.9h-1.4v3.6 v11.4h-1.4v2.5l-1.1,0.2l-3.2,0.4v0.9h-1.2v1.3h-1.4v3.6v4.7h-1.4v0.8H369h-3.6v0.1l-0.8-0.1l-0.2,0h-0.2h-3.5H358h-1.2v-1.7 v-2.3v-1.1h1.2v-2.1l5.8-1.4l2.8-0.7v-2.9v-5.1v-3.6h-2.9v-1.3h-1.4V213h-1.4v-1.2l-2.9-0.6v-1.4l-3-0.6l-1.1-0.2v-1.5l-3.2-0.4 l-1.1-0.2v-2.1l-3.9,0.3l-15.9,1.3l-3.3,0.3v1H325v3.6v2.8h-2.9v1.9h-1.4v3.6v4.9h-1.4v3.6v0.4h-1.4v3.6v4.2h-0.6v3.6v0.2h-0.6 v3.6v3.2v2.3h-1.4v1.3h-1.4v1.3h-1.4v1.3h-2.9v2l-2.7,0.6v1.2h-1.4v2.9l-3.6,0.3l-3.3,0.3v3.3v2.3h-1.4v1.3h-1.4v2.3l-1.7,0.5 l-2.6,0.8v2.4l0,0l-2.6,0.8v2.7v14.2v3.6h3.6h0.4v1.3h3.6h3.5h3.6v-1.3h2.9v-3.2h1.4v-3.6v-3.8l2.5-0.4l3-0.5v-2.7h1.4v-1.3h1.4 v-1.3h2.9v-1.3h3.3h2.7v2.7h1.4v36.6v3.6h1.2v1.5l3.8-0.2l13.3-0.6l3.5-0.1v-1.7l5.5-0.9l3.1-0.5V316h1.2v-3.6V312h7.4v1.3h1.4v7 h-1.4v2.1h-11.5v-0.8h-3.6h-0.7v-0.6H346h-2h-3.6v1.3H337h-3.6v0.9l-6-0.6v-1.7h-3.6h-4.9h-3.6v0.2l-0.3-0.1l-0.5-0.1h-0.5h-13.3 h-3.6v2.7h-1.4v3.6v3.2v3.6h1.4v2.8v3.6h1.4v1.9h3.6h0.6h3.6h1.3h9h1.3v0.8h1.4v0.6h3.6h0.8h2.7v1.3h3.6h0.4v0.6l-2.9,0.6v0.7 h-1.2v1.3H325v1.3h-1.4v1.7l-1.3,0.2l-3,0.5v0.7h-1.4v1.9h-1.2v1.3h-1.4v2.2l-3.6,0.3l-3.3,0.3v1.8h-1.4v1.9h-1.4v1.3h-2.9v2.4 l-3.1,1.1l-2.4,0.8v2.2h-0.8v3.6v0.2l-0.9,0.3l-2.6,0.8v1.5h-2.9v3.6v2.1v3l2.9,0.6l2.8,0.6v2h3.6h3.5h3.6h0.5v0.8h3.6h0.6h3.6 v-2.1h0.7h3.6v-1.1h1.2v-2.5l1.1-0.2l3.2-0.4v-1.5l2.9-0.6v-1.4h1.4V379h1.3h0.6h3.6v-3.6v-2.8h1.4V369v-1.1l2.7-0.7l2.8-0.7 v-1.6l4.5-1.6l2.4-0.9v-1h1.4v-1.1h0.7h3.6v-1.3h1.4v-1.3h0.4h3.6v-2.3l7.3-2.4l0.1,0v25.3v3.6h1.4v2.1v3.6h1.4v1.3h1.4v2.7h3.6 h11.8h3.6v-1.3h1.4v-1.3h1.4v-1.3h1.4v-1.1h1.2v-2.7h1.4V380v-3.6v-3.6v-12.3v-3.6h-1.4v-3.2h-1.2v-2.4l1.6,0.4l0.2,0v2.1 l2.9,0.6v2.6l2.7,0.6v2h1.4v1.3h1.4v1.9h1.4v1.3h1.9l1.1,0.7c2,1.3,4.1,1.9,6.5,1.9h1.7v4.2v3.6h1.4v1.3h1.2v0.7l2.9,0.6v0.2v3.6 h3.6h3.3v1.3h1.4v1.3h1.4v1.3h1.4v1.5l3.8-0.2l13.7-0.7l12.4,0.7l0.1,0h0.1h2h3.6v-1.3h1.4v-3.6v-4.9l5.6-1.4l2.8-0.7v-1.2l0.2,0 l2.7-0.7v-0.5h1.4v-3.6v-8.4V357l-2.7-0.7l-0.2,0v-2.2h-1.4v-1.9h-1.4v-1.3h-3.6h-0.4v-1.1h-2.9V349h-3.6H467h-3.6v0.8h-0.5v-0.9 l-3.1-0.4l-2.4-0.3v-1.8h-3.6h-0.8h-3.6v0.8H448h-4.9h-3.6v0.3l-0.3,0v-2.9h-3.6h-0.7h-3.6h-0.4v-1.3h-1.4v-1.3h-2.9v-1.1h-1l0,0 l3.5-0.6l2.1,0.6l1,0.3l1-0.3l2-0.6l6.4,0.7l0.5,0.1l0.5-0.1c4.4-0.8,9.1-1.3,13.9-1.3h15.4h3.6v-3.6v-2.8h0.6v-3.6v-0.8v-3.6 h-0.6v-2.5h-1.4v-2l-2.9-0.6v-2.7h-1.4v-1.3h-2.7v-1.1h-1.4v-1.3h-1.4v-2.1h-3.6H460h-2.7v-0.5h8.8h3.6V307v-7v-3.6h-1.2V295 h-2.9v-2.7h-1.4v-1.3h-2.9v-1.3h-3.6h-0.4v-0.2v-4.1l-4.1,0.5l-1.6,0.2v-1.9V274v-3.6v-3.6v-1.5h1.4v-3.6v-1.3v-3.6h-1.4v-0.9 v-3.6h-1.4v-0.8h-3.6h-0.4v-0.3l-0.9-0.2l18.4-0.6l3.5-0.1v-3.5v-7.8v-3.6h-1.4v-2.7h-1.4v-1.3h-3.6H460v-0.6h-2.7v-0.9v-3.6 h-1.4v-2.7h-3.6h-0.7v-2.5l-2.7-0.6v-1.5h-3.6h-0.8h-3.6v1.3h-2.7v0.6h-0.7H434v3.6v1.7h-2.9v3.6v0.2h-1.4v1.3h-1.9h-3.6v1.3 h-1.4v1.3h-1.4v1.7l-2.2,0.2l-3.3,0.3v0.4h-1.9h0h-3.6h-7.4v-0.8h-3.6h-0.8h-1.3v-1.3h-0.5l6-1.2l2.9-0.6v-1.8l5.3-0.8l3.1-0.5 v-1.2l2.6-0.3l3.2-0.4v-2.8h1.4v-3.6v-2.5v-3.6h-1.4V213h-1.4v-1.3h-2.9v-1.1h-1.4v-1.3h-2.7v-1.3h-1.4v-0.8h-3.6h-0.8h-1.5 l-0.4-0.2c-2.3-1.1-4.9-1.7-7.8-1.7c-1.8,0-3.3-0.3-4.6-0.9L390.3,203.9L390.3,203.9z M355.3,250.8h1.4v-1.8l1.7,0.1v0.3l2.1,1 l2.9,1.3l1.1,0.5l1.2-0.3l2-0.4l0.5,0.1v0.8v0.9h-2.9v0.2l-0.3-0.1l-0.8-0.2l-0.8,0.1l-3.5,0.6l-3,0.5v0.5l-0.3,0v-2.4h-1.4v-1.3 v-0.2V250.8L355.3,250.8z M395.7,251.8l8.2-0.9l4.9,1.2l0.9,0.2l0.9-0.2l3.9-0.9v2.2l1.4-0.4v0.5h-0.7h-3.6v0.2l-2.9-0.8l-1-0.3 l-1,0.3l-2,0.5l-4.6-1.1l-0.4-0.1h-0.4h-2.1h-1.4V251.8L395.7,251.8z M409.9,272.3l0.5-0.1l2.3-0.5l7.2,0.8v0.3h-1.2v1.3h-1.4v2 l-0.5,0.1l-4.9,1l-3.2-0.9l-0.5-0.1h-0.5h-2.2h-1.3v-2.1h-1.2v-1.1v-1.1l6.6,0.4L409.9,272.3L409.9,272.3z M355.3,272.8l5.3-0.4 l7.6,0.8v0.9v2.1l-3.5,0.9l-4.9,1.2l-3.1-0.3v-1.5h-1.4v-0.4V272.8L355.3,272.8z M404.1,294l1.5-0.3l12.2,0.7l0.6,0l0.6-0.2 l2.1-0.5l3.3,0.6l0.8,0.2l0.8-0.2l2.1-0.6l4.8,0.7l0.2,0h0.2h0.7v0.6l-0.2,0l-2.7,0.7v0.5h-1.7v-0.8h-2.9V295h-3.6h-2h-3.6v1.3 h-1.2l-10.5-0.6v-1.5h-1.4V294L404.1,294z M355.3,294.9l6.8-0.4l9,0.4v0.1h-1.4v1.6c-1.6,0.3-3.2,0.7-4.7,1.1 c-0.6,0.2-1.2,0.2-1.8,0.2c-0.6,0-1.2-0.1-1.8-0.2l-4.3-0.9v1.3l-0.3,0v-1.8h-1.4V294.9L355.3,294.9z M404.1,310.8l0.2,0l6,0.8 v3.1h1.2v1.8l2.7,0.7l4.3,1.1l0.8,0.2l0.8-0.2l2.3-0.4l3.5,0.5l0.5,0.1l0.5-0.1l3.5-0.6l3-0.5V316h1.4v-1.3h5.9c0.5,0,1,0,1.6,0 v1.1h-2.9v1.5l-2.7,0.6v2.8l-1.7,0.5h-8.5v-1.3h-3.6h-2h-3.6v1.3h-2.1h-3.6v0.1l-2.3-0.1l-9.2-0.4v-0.9h1.4v-1.3h1.4v-3.6v-1.5 h1.2V310.8L404.1,310.8z M442.3,314.6c0.5,0,0.9-0.1,1.4-0.1v0.1H442.3L442.3,314.6z M421,340l0.9,0l2.1,0.6l0.3,0.1h-1.4H421 V340L421,340z M335.7,341.6v-0.3l0.5,0.1v0.1L335.7,341.6L335.7,341.6z"/> </g> <g> <path d="M585.8,387.3l-2.9-1.2v-12.5h-1.2V265.7h-1.4v-1.3h-1.4v-1.5l-14.8-1.2l-4.8,1v-0.8l-5,1.2l-8.3-0.8l-0.6,0.2v9.6h-1.2 v3.8h-1.4v9.1h-1.4v2.7h-1.4v3.2l2.9,0.8v1.5h1.4v1.3h1.2v2.1l6.7,0.6l6-1.1v3h7.7l4.9-1.3v10.8h-1.4v1.1h-1.4v1.3l-22.4,0.8v3.3 h-1.2v1.3h-1.4v3.8h-1.4v1.3h-1.4v2.7h-1.4v1.3h-1.4v1.1h-1.4v1l-4.1,0.8v1.4l-5.4,0.9l-6-1.9V328h-1.4v-1.3h-1.2v-1.1h-1.4v-1.3 h-1.4v-1.9h-1.4V301h1.4v-1.9h1.4v-1l2.7-0.6v-1.7h1.4v-24.5h-1.4v-4.8h1.4v-2.3h-1.4v-1.3h-2.7v-1.3h-1.4v-1.3h-1.4v-14.6h1.4 v-1.8l21-0.9l2.8,1.5v0.6l23.9,0.6v1.3h1.2v1.3h2.2l3-0.8l4.6,0.6v-1.1h4l2.4,0.5l0.5-0.1v-5.7h1.4v-0.9h-0.8v-4.2h0.8v-4.2h-1.4 v-12.6l-5.7-0.8v-3h-0.6V212h0.6v-2.4L587,208l8.2,1.3l6-2v2h1.4v1.3h6.9v1.3h1.4v6.5h1.4v5H611v4.6h-1.4v1.3h-1.2v1.3h-2.9v1.1 H604v15.4c2.6,0,5.1,0.1,7.4,0.3c2.1,0.1,4.3,0.4,6.5,0.7v-1h6.9l2.5,0.5c2.7-0.4,5.5-0.7,8.2-0.9c2.1-0.2,4.2-0.7,6-1.6v-2.6 h18.3v1.7l2.9,0.6v2.3h1.4v1.3h1.2v2.5h2.9v1.3h1.4v1.9h2.9v7.6h-5.7v1.3h-1.4v1.3h-1.2v49.9h-1.4v1.3h-1.4v1l-4.3,0.8v0.9h-4.2 v-0.6h-0.8l-4.1,1.2l-11.8-0.7v-1.8h-1.4v-2.7h-2.9v-1.9h-1.4v-1.3h-0.7l-5.9,0.6l-2.6-0.6l-7.3,1.4l-2.1-0.8h-4.8v4.6h-1.4v1.3 H604v9.5h1.4v1.1h1.4v8.5v5h-1.4v1.5h1.4v32.3h-1.4v0.3l-4.3,0.8v2.8H600v2.2l-2.9,0.8v2.3h-4.3v1.3h-1.4v1.9H585.8z M617.2,299.1l0.7-0.2v-5.1h1.4v-0.6h7.1v1.3h1.4v3.3l7.6,0.5l0.6-0.2v-2.3h1.4v-2.1h2.7v-5.7h1.4v-0.4H641v-4.2h0.6V280h-1.4 v-5.5h0.8v-2.3h-0.8v-5.3h-1.4v-1.4l-4.1-0.8v-2.2l-2.4,0.6l-4.3-0.9v0.1h-4.4v-0.6h-3.4l-4.6,1.4l-3-1.2v0.3H607l-1.5-0.2v1H604 V298l6.8,0.9v-1.1h5.9v1.3H617.2z"/> <path class="st_53" d="M599.4,209.8v1.3h1.4v1.3h6.9v1.3h1.4v6.5h1.4v1.3h-1.4v4.6h-1.4v1.3h-1.2v1.3h-2.9v1.1h-1.4v2.7h-0.6v1.3 h0.6v8.5h-0.6v1.1h0.6v5.3c3.3,0,6.3,0.1,9.1,0.3c2.8,0.2,5.6,0.5,8.5,1v-1.3h4.9l2.7,0.6c2.9-0.4,5.7-0.7,8.5-0.9 c2.8-0.3,5.3-1,7.7-2.3v-1.9h14.7v1.3l2.9,0.6v2.7h1.4v1.3h1.2v2.5h2.9v1.3h1.4v1.9h2.9v4h-5.7v1.3h-1.4v1.3h-1.2v49.9H661v1.3 h-1.4v1.3l-4.3,0.8v0.6h-0.6V316h-2.9l-4.1,1.1l-9.8-0.6v-1.9h-1.4V312h-2.9v-1.9h-1.4v-1.3h-2.7l-5.7,0.6l-2.7-0.6l-7.1,1.3 l-3.5-1.3v0.6h-5.5v4.6h-1.4v1.3h-1.4v13.1h1.4v1.1h1.4v6.6v3.2h-1.4v5.1h1.4v28.7h-1.4v0.6l-4.3,0.8v2.5h-1.2v2.7l-2.9,0.8v1.9 H591v1.3h-1.4v1.9h-3.5l-1.4-0.6v-13.1h-1.2v-4.6h1.2v-1.9h-1.2V364h1.2v-2.7h-1.2v-4.6h1.2v-1.9h-1.2v-91H582v-1.3h-1.4v-1.3 l-16.7-1.3l-2.9,0.6v-0.6h-1.4l-5.5,1.3l-8.4-0.8l-2.2,0.8v9.1h-1.2v3.8h-1.4v9.1h-1.4v2.7H538v6.5l2.9,0.8v1.9h1.4v1.3h1.2v1.9 l8.6,0.8l4.1-0.8v2.7h9.8l2.9-0.8v6.6h-1.4v1.1h-1.4v1.3l-22.4,0.8v3.2h-1.2v1.3h-1.4v3.8h-1.4v1.3H538v2.7h-1.4v1.3h-1.4v1.1 h-1.4v1.3l-4.1,0.8v1.3l-3.5,0.6l-4.3-1.3v-1.3h-1.4v-1.3h-1.2v-1.1h-1.4v-1.3h-1.4v-1.9h-1.4v-2.1h1.4V316h-1.4v-13.1h1.4V301 h1.4v-1.3l2.7-0.6v-1.3h1.4v-24.1h-0.6h0.6v-4h-1.4v-1.1h1.4v-5.9h-1.4v-1.3h-2.7v-1.3h-1.4v-1.3h-1.4v-11h1.4v-1.9l18.8-0.8 l1.4,0.8v1.3l23.9,0.6v1.3h1.2v1.3h4.3l2.9-0.8l6.3,0.8v-1.3h2l2.7,0.6l2.2-0.6v-5.3h1.4V239h-0.8v-0.6h0.8v-7.8H582v-9.1h1.4 v-1.9H582v-1.3l-5.7-0.8v-3.2h-0.6v-0.6h0.6v-2.7l10.6-1.3l8.4,1.3L599.4,209.8 M607.1,260.5l-3.5-0.6v1.3h-1.4v38.4l10.4,1.3 v-1.3h2.2v1.3h2.7l2.2-0.8v-4.6h1.4v-0.6h3.5v1.3h1.4v3.2l9.6,0.6l2.2-0.6v-1.9h1.4v-2.1h2.7v-5.7h1.4v-4h-0.6v-0.6h0.6v-7.2H642 v-1.9h1.4v-2.7h-0.6V273h0.6v-2.7H642v-5.3h-1.4v-1.1l-4.1-0.8v-2.7h-1.4l-2.9,0.8l-6.1-1.3v0.6h-0.8v-0.6h-5.5l-4.3,1.3 l-4.9-1.9v1.1H607.1 M605.7,336.1h-0.6H605.7 M603,204.8l-4.8,1.6l-3.2,1.1l-7.5-1.2l-0.5-0.1l-0.5,0.1l-10.6,1.3l-3.2,0.4v2.2 h-0.6v3.6v0.6v3.6h0.6v2.8l3.2,0.4l2.6,0.3v1.8v7.4v3.6h1.4v0.5H579v3.6v0.6v0.9h-0.6v3.6v1.9l-0.5-0.1l-0.4-0.1h-0.4h-2h-3.6 v0.9l-2.3-0.3l-0.7-0.1l-0.7,0.2l-2.4,0.6h-0.2v-1.3H564V244l-3.5-0.1l-20.4-0.5l-1.9-1l-1.4-0.8l-0.9-0.5l-1,0l-18.8,0.8 l-3.5,0.1v1.8h-1.4v3.6v11v3.6h1.4v1.3h1.4v1.3h2.7v1.3v2.3v1.1v3.6h1.4v0.4v20.5h-1.4v2l-2.7,0.6v0.6h-1.4v1.9h-1.4v3.6V316v3.6 v0.9v3.6h1.4v1.9h1.4v1.3h1.4v1.1h1.2v1.3h1.4v0.4l2.6,0.8l4.3,1.3l0.8,0.3l0.8-0.1l3.5-0.6l3-0.5V330l1.1-0.2l3-0.6v-0.7h1.4 v-1.1h1.4v-1.3h1.4v-2.7h1.4v-1.3h1.4v-3.6v-0.2h1.4v-1.3h1.2v-3.3l18.9-0.6l3.5-0.1v-1.2h1.4v-1.1h1.4v-3.6v-6.6v-4.7l-4.6,1.2 l-2.4,0.6h-5.7v-3.4l-4.3,0.8l-3.6,0.7l-4.8-0.4v-2.2h-1.2v-1.3h-1.4v-1.1l-2.7-0.7l-0.2,0v0h1.4v-2.7h1.4v-3.6v-5.5h1.4v-3.6 V274h1.2v-3.6v-6.1l6.6,0.6l0.6,0.1l0.6-0.1l2.4-0.6v0.7l4.3-0.9l2.4-0.5l12.9,1v1.6h1.4v1.3h1.4v87.3v3.6v2.8v3.6v0.4v3.6v2.8 v3.6h1.2v9.5v2.5l2.3,0.9l1.4,0.6l0.6,0.3h0.7h3.5h3.6v-1.9h1.4v-1.3h0.7h3.6v-2.7l0.2,0l2.7-0.7v-1.8h1.2v-3.1l1.3-0.2l2.9-0.5 h1.5v-3.6v-28.7V343v-3.6v-3.2v-6.6v-3.6h-1.4v-1.1h-1.4v-5.8h1.4v-1.3h1.4v-3.6V313h1.9h0.8l1.4,0.5l1,0.4l1-0.2l6.4-1.2 l1.9,0.4l0.6,0.1l0.6-0.1l4.4-0.4v1.2h1.4v1.9h2.9v2.7h1.4v1.7l3.4,0.2l9.8,0.6l0.6,0l0.6-0.2l2.3-0.6v0.2h3.6h0.6h3.6V319 l1.3-0.2l3-0.5v-0.7h1.4v-1.3h1.4v-3.6v-46.3h1.2v-1.3h1.4v-1.3h2.1h3.6v-3.6v-4v-3.6h-2.9v-1.9h-1.4v-1.3h-2.9v-2.5h-1.2v-1.3 h-1.4v-2l-2.9-0.6v-2h-3.6h-14.7h-3.6v3.2c-1.4,0.5-2.8,0.8-4.3,1c-2.6,0.2-5.3,0.5-8,0.9l-2-0.4l-0.4-0.1h-0.4h-4.9h-3.6v0.7 c-1.5-0.2-3.1-0.3-4.6-0.4c-1.8-0.1-3.7-0.2-5.7-0.3v-2.9v-6.2v-2.7h1.4v-1.1h2.9v-1.3h1.2v-1.3h1.4v-3.6v-0.9h1.4v-3.6v-1.3 v-3.6h-1.4v-2.8v-3.6h-1.4v-1.3h-3.6h-3.3v-1.3H603V204.8L603,204.8z M620.3,263.6h1.3v0.6h3.6h0.8h2.2l3.1,0.7l0.9,0.2l0.6-0.2 v1.3l3,0.6l1.1,0.2v1.8h1.4v1.7v3.6v2.3v1.9v3.6h0.8v3.6v0.6v0.4h-0.8v3.6v2.1h-2.7v2.1h-1.4v2.4l-4.6-0.3v-3.4h-1.4v-1.3h-3.6 h-3.5h-3.6v0.6h-1.4v3.6v0.4h-1.3h-2.2H609v0.8l-3.1-0.4v-31.5h1.4v-0.8h3.3h2.3l1.3,0.5l1.2,0.5l1.2-0.4L620.3,263.6 L620.3,263.6z"/> </g> </g> </g> </svg> </div> <div class = "migi"> <p class = "title"> <strong> SVG、集中線のアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.10.08<br> ランダムな「遅れ」を指定するだけ。 </p> </div> <script> const soto_53 = document.getElementById("soto_53"); const sen_53 = document.getElementById("sen_53"); let kakudo_53 = 0; for(i =0;i<=35;i++) { let clone = sen_53.cloneNode(true); clone.style.transform = "rotate(" + String(kakudo_53) + "deg)"; clone.style.animationDelay = String(Math.random()) + "s"; soto_53.appendChild(clone); kakudo_53 += 10; } </script> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec61/Vec61.html"><img src ="https://fuuno.net/Vec/Vec61/icon.png"> <strong>ぺジェ曲線、パス、オブジェクトとは〜Vectorグラフィック知識編。 </strong> <p>2021.10.06<br> ベクターグラフィックの構造を理解しましょう。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani52/ani52.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani52/topsita2.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVGでニューモフィズムのアニメーション。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.10.01<br> 拡張性のある実装にしています。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/hsl/hsl_convert.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/hsl/twitter.png" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> HSL変換を使った配色や色指定。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.09.24<br> 配色パターンを秒作。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani51/ani51.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani51/topsita2.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、金属文字を表現。 </strong> </p> <p class = "capt" style = "padding-bottom:0;"> 2021.09.17<br> CGビギナーの課題曲。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/cani/cani24/cani24.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/cani/cani24/thumb.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> CSSアニメーション、期末テスト。 </strong> </p> <p class = "capt"> 2021.09.12<br> transform/transitionのスキル。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani50/ani50.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani50/topsita.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVGとCSSで画像の境界線をぼかす。 </strong> </p> <p class = "capt"> 2021.09.07<br> 内側は鮮明、周りはblur。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani23/cani23.html"><img src = "https://fuuno.net/cani/cani23/icon.svg" loading = "lazy"> <strong>CSSアニメーション10、transformの複数指定。 </strong><br> <p>2021.09.02<br> 記述上の注意と「内包」現象。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani48/ani48.html"> <div class = "newcard"> <div class = "hidari"> <svg id = "hanaouter" viewBox = "0 0 841.9 595.3" style = "overflow:visible;transform:translateY(25%);"> <svg id = "inner" viewBox="0 0 595.3 595.3" style = "overflow:visible;" x = "-100%"> <style type="text/css"> .hanasen{fill:none;stroke-miterlimit:10;stroke-width:9;} #hitohana { stroke-dasharray:5% 45%; /* stroke-dashoffset:-10%;*/ /* stroke-dasharray:50%;*/ /* stroke-dashoffset:50%;*/ animation:hitohana 2.5s linear forwards 1; } @keyframes hitohana { from { /* stroke-width:1;*/ } 60% { stroke-width:6; transform:translateY(0%); } 90% { opacity:1; } to { opacity:0; stroke-width:6; transform:translateY(10%); stroke-dasharray:50%; stroke-dashoffset:-50%; } } </style> <g id = "hitohana" style = "stroke:green;"> <line class="hanasen" x1="297.6" y1="297.6" x2="297.6" y2="595.3"/> <line class="hanasen" x1="297.6" y1="297.6" x2="297.6" y2="0"/> <line class="hanasen" x1="297.6" y1="297.6" x2="374.7" y2="585.1"/> <line class="hanasen" x1="297.6" y1="297.6" x2="220.6" y2="10.1"/> <line class="hanasen" x1="297.6" y1="297.6" x2="446.5" y2="555.4"/> <line class="hanasen" x1="297.6" y1="297.6" x2="148.8" y2="39.9"/> <line class="hanasen" x1="297.6" y1="297.6" x2="508.1" y2="508.1"/> <line class="hanasen" x1="297.6" y1="297.6" x2="87.2" y2="87.2"/> <line class="hanasen" x1="297.6" y1="297.6" x2="555.4" y2="446.5"/> <line class="hanasen" x1="297.6" y1="297.6" x2="39.9" y2="148.8"/> <line class="hanasen" x1="297.6" y1="297.6" x2="585.1" y2="374.7"/> <line class="hanasen" x1="297.6" y1="297.6" x2="10.1" y2="220.6"/> <line class="hanasen" x1="297.6" y1="297.6" x2="595.3" y2="297.6"/> <line class="hanasen" x1="297.6" y1="297.6" x2="0" y2="297.6"/> <line class="hanasen" x1="297.6" y1="297.6" x2="585.1" y2="220.6"/> <line class="hanasen" x1="297.6" y1="297.6" x2="10.1" y2="374.7"/> <line class="hanasen" x1="297.6" y1="297.6" x2="555.4" y2="148.8"/> <line class="hanasen" x1="297.6" y1="297.6" x2="39.9" y2="446.5"/> <line class="hanasen" x1="297.6" y1="297.6" x2="508.1" y2="87.2"/> <line class="hanasen" x1="297.6" y1="297.6" x2="87.2" y2="508.1"/> <line class="hanasen" x1="297.6" y1="297.6" x2="446.5" y2="39.9"/> <line class="hanasen" x1="297.6" y1="297.6" x2="148.8" y2="555.4"/> <line class="hanasen" x1="297.6" y1="297.6" x2="374.7" y2="10.1"/> <line class="hanasen" x1="297.6" y1="297.6" x2="220.6" y2="585.1"/> </g> </svg> </svg> <script> const outer = document.getElementById("hanaouter"); const inner = document.getElementById("inner"); const iro = ["red","blue","yellow","green","orange","purple"]; console.log(iro[((Math.random()*6)|0)]); function random() { let clone = inner.cloneNode(true); clone.children[1].addEventListener("animationend",function() { clone.remove(); }); let horizon = String(Math.random()*100 - 25) + "%"; let vertical = String(Math.random()*100 - 50) + "%"; let randomcolor = iro[((Math.random()*6)|0)]; let ookisa = String(Math.random()*20 +30) + "%"; clone.setAttribute("x",horizon); clone.setAttribute("y",vertical); clone.setAttribute("width",ookisa); clone.setAttribute("height",ookisa); clone.children[1].style.stroke = randomcolor; hanaouter.appendChild(clone); } setInterval (random,500); inner.children[1].style.stroke = "purple"; inner.setAttribute("width","50%"); console.log(0.5938|0); </script> </div> <div class = "migi"> <p class = "title"> <strong> 花火のアニメーションをSVGで作ろう。 </strong> </p> <p class = "capt"> 2021.08.30<br> 空洞を作りつつ広がっていく線分。 </p> </div> </div> </a> <br>  <a class = "newa" href = "https://fuuno.net/cani/cani22/cani22.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/cani/cani22/thumb.svg" loading = "lazy" style = "padding-top:1em;"> </div> <div class = "migi"> <p class = "title"> <strong> transform:skewの仕組みを理解する。 </strong> </p> <p class = "capt"> 2021.08.27<br> ５つの法則が存在します。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani21/cani21.html"><img src = "https://fuuno.net/cani/cani21/icon.svg" loading = "lazy"> <strong>CSSアニメーション19、transform:skew（傾斜）について。 </strong><br> <p>2021.08.18<br> 予測不能なtransform関数。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani20/cani20.html"><img src = "https://fuuno.net/cani/cani20/icon.svg" loading = "lazy"> <strong>CSSアニメーション18、transform:translate（移動）について。 </strong><br> <p>2021.08.12<br> ロゴや画像を動かそう。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani19/cani19.html"><img src = "https://fuuno.net/cani/cani19/icon.svg" loading = "lazy"> <strong>CSSアニメーション17、transform:scale（拡大縮小）について。 </strong><br> <p>2021.08.08<br> ボタンアクションに最適。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani18/cani18.html"><img src = "https://fuuno.net/cani/cani18/icon.svg" loading = "lazy"> <strong>CSSアニメーション16、transform:rotate（回転）について。 </strong><br> <p>2021.08.06<br> 回転の仕組みとアレンジサンプル。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani45/ani45.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani45/ware.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVGで転がりアニメーション。 </strong> </p> <p class = "capt"> 2021.07.28<br> 回転量と移動距離を一致させる方法。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec60/Vec60.html"><img src = "https://fuuno.net/Vec/Vec60/icon.png" loading = "lazy"> <strong>Vectornator、クイックアクションについて〜環境設定⑤。 </strong><br> <p style = "white-space:nowrap;">2021.07.25<br> タッチデバイスでのショートカット。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani17/cani17.html"><img src = "https://fuuno.net/cani/cani17/icon.svg" loading = "lazy"> <strong>CSSアニメーション15、変形の基準を指定〜transform-origin。 </strong><br> <p>2021.07.22<br> 変形の基準、定義と指定方法。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani47/ani47.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani47/kasanari.svg" style = "padding-top:1em;padding-bottom:1em;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVG要素のtransformについて。 </strong> </p> <p class = "capt"> 2021.07.16<br> 普通のHTML要素とは大きく違います。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani16/cani16.html"><img src = "https://fuuno.net/cani/cani16/icon.svg" loading = "lazy"> <strong>CSSアニメーション14、transformについて。 </strong><br> <p>2021.07.12<br> transform実装に必要なこと。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec18/Vec18.html"><img src = "https://fuuno.net/Vec/Vec18/icon_new.png" loading = "lazy"> <strong>Vectornator、等尺性グリッドと垂直グリッドについて〜環境設定④。 </strong><br> <p style = "white-space:nowrap;">2021.07.09<br> 今すぐアイソメトリック図を描こう。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani46/ani46.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani46/topsita.svg" style = "padding-top:0;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> transform:matrixの使い方② 〜要素の反転と基準点について。 </strong> </p> <p class = "capt"> 2021.07.05<br> matrixにおける「基準点」の役割とは？ </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani44/ani44.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani44/topsita.svg" style = "padding-top:0;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> transform:matrixの使い方①。 </strong> </p> <p class = "capt"> 2021.06.24<br> 基本的な変形をmatrixで行う。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani14/cani14.html"><img src = "https://fuuno.net/cani/cani14/icon.svg" loading = "lazy"> <strong>CSSアニメーション13、transitionについて②。 </strong><br> <p>2021.06.20<br> 各プロパティと一括指定。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani43/ani43.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani43/topsita.svg" style = "padding-top:0;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> transform:matrixを理解する。 </strong> </p> <p class = "capt"> 2021.06.14<br> 行列計算は必要なし。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani13/cani13.html"><img src = "https://fuuno.net/cani/cani13/icon.png" loading = "lazy"> <strong>CSSアニメーション12、transitionについて①。 </strong><br> <p>2021.06.10<br> もう１つのCSSアニメーション。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec59/Vec59.html"><img src = "https://fuuno.net/Vec/Vec59/icon.png" loading = "lazy"> <strong>Vectornator、環境設定③〜表示設定。 </strong><br> <p style = "white-space:nowrap;">2021.06.07<br> 　・物差し<br> 　・ガイド<br> 　・スマートガイド<br> 　・寸法<br> 　・タッチ </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/cani/cani12/cani12.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/cani/cani12/icon1.svg" style = "padding-top:0;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> CSSアニメーション、中間テスト。 </strong> </p> <p class = "capt"> 2021.06.03<br> 基本編を終えたらチャレンジしましょう。 </p> </div> </div> </a><br>  <a class = "newa" href = "https://fuuno.net/ani/ani42/ani42.html"> <div class = "newcard"> <div class = "hidari"> <svg id = "soto2" viewBox="0 0 841.9 595.3" style = "width:80%;display:block;margin:0 auto;overflow:visible;"> <svg id = "ame2" viewBox="0 0 841.9 595.3"> <style type="text/css"> .st11{fill:none;stroke:#bbb;stroke-width:6;stroke-miterlimit:10;} #hamon2 { animation:hamon1 1.4s linear ; } #hamon2,#sizuku2 { transform-origin:50% 91.93%; } #sizuku2 { animation:sizuku1 1.4s linear; } #hamon1,#sizuku1 { transform-origin:50% 91.93%; } #hamon1 { animation:hamon1 1.4s linear infinite; } @keyframes hamon1 { from { transform:scale(0); } 50% { transform:scale(0); } } #sizuku1 { animation:sizuku1 1.4s linear infinite; } @keyframes sizuku1 { from { transform:translateY(-80%) scaleY(1); } 50% { transform:translateY(0%) scaleY(1); } /* 80% { transform:translateY(0%) scaleY(0); } */ 100% { transform:translateY(0%) scaleY(0); } } </style> <ellipse id = "hamon2" class="st11" cx="420.9" cy="547.3" rx="99.8" ry="33.1"/> <line id = "sizuku2" class="st11" x1="420.9" y1="350.3" x2="420.9" y2="547.3"/> </svg> </svg> <script> const ame2 = document.getElementById("ame2"); const soto2 = document.getElementById("soto2"); ame2.setAttribute("x","-400%"); function random2() { let clone = ame2.cloneNode(true); clone.children[1].addEventListener("animationend",function() { clone.remove(); }); let horizon = String(Math.random()*100-50)+"%"; clone.setAttribute("x",horizon); soto2.appendChild(clone); } setInterval(random2,500); </script> </div> <div class = "migi"> <p class = "title"> <strong> 雨のアニメーションをSVGで作ろう。 </strong> </p> <p class = "capt"> 2021.05.30<br> webページ上に雨を降らせます。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec58/Vec58.html"><img src = "https://fuuno.net/Vec/Vec58/icon.png" loading = "lazy"> <strong>Vectornator、ドキュメントについて〜環境設定②。 </strong><br> <p style = "white-space:nowrap;">2021.05.26<br> 　・ファイル名<br> 　・単位<br> 　・取り消しとやり直し </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani11/cani11.html"><img src = "https://fuuno.net/cani/cani11/icon.svg" loading = "lazy"> <strong>CSSアニメーション10、animation-play-state。 </strong><br> <p>2021.05.23<br> アニメーションの一時停止と再開をコントロール。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani41/ani41.html"> <div class = "newcard"> <div class = "hidari"> <svg class = "pi-graph1" viewBox = "0 0 100 64" style = "width:80%;transform-origin:center;transform:rotate(-90deg);"> <style type = "text/css"> .engo { fill:none; stroke-width:14; stroke-dasharray:100; stroke-dashoffset:100; /* transform:translateX(13%);*/ } #yellow5 { animation:yellow5 4s ease-in-out infinite; } @keyframes yellow5 { to { stroke-dashoffset:0; } } #blue5 { animation:blue5 4s ease-in-out infinite; } @keyframes blue5 { to { stroke-dashoffset:25; } } #red5 { animation:red5 4s ease-in-out infinite; } @keyframes red5 { to { stroke-dashoffset:60; } } </style> <circle id = "yellow5" class = "engo" cx = "50%" cy = "50%" r = "15.9154" fill = "none" stroke = "#d6e900" stroke-width = "14"/> <circle id = "blue5" class = "engo" cx = "50%" cy = "50%" r = "15.9154" fill = "none" stroke = "#00a0e9" stroke-width = "14"/> <circle id = "red5" class = "engo" cx = "50%" cy = "50%" r = "15.9154" fill = "none" stroke = "#e90800" stroke-width = "14"/> </svg> </div> <div class = "migi"> <p class = "title"> <strong> SVGで円グラフアニメーション。 </strong> </p> <p class = "capt"> 2021.05.21<br> SVGの「破線」と「円周率」。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec57/Vec57.html"><img src = "https://fuuno.net/Vec/Vec57/icon.png" loading = "lazy"> <strong>Vectornator、クイック設定について〜環境設定①。 </strong><br> <p>2021.05.16<br> 目的の機能に１発アクセス。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani10/cani10.html"><img src = "https://fuuno.net/cani/cani10/icon.svg" loading = "lazy"> <strong>CSSアニメーション09、animation-fill-mode。 </strong><br> <p>2021.05.13<br> アニメーション終了時の状態を維持したり。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani40/ani40.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani40/topsita.svg" style = "padding-top:0;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVGで棒グラフのアニメーション。 </strong> </p> <p class = "capt"> 2021.05.09<br> SVGを「htmlの部品」として利用する。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani09/cani09.html"><img src = "https://fuuno.net/cani/cani09/icon.svg" loading = "lazy"> <strong>CSSアニメーション08、animation-directionで再生方向を指定。 </strong><br> <p>2021.05.05<br> アニメーションの順/逆再生や往復。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani08/cani08.html"><img src = "https://fuuno.net/cani/cani08/icon.svg" loading = "lazy"> <strong>CSSアニメーション07、steps( )でコマ送り動画。 </strong><br> <p>2021.04.29<br> timing-functionの隠し玉。 </p> </a> </li> </ul>    <a class = "newa" href = "https://fuuno.net/ani/ani39/ani39.html"> <div class = "newcard"> <div class = "hidari"> <svg id = "outer12" viewBox="0 0 792 612" style = "overflow:visible;"> <style type="text/css"> .st00{fill:#FFFFFF;} .st1{fill:#939390;} .st2{display:none;} .st3{display:inline;fill:#FFFFFF;stroke:#00A0E9;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} </style> <svg id = "inner12" x = "-300%" viewBox="0 0 841.9 595.3"> <style type="text/css"> .st0{fill:#E5E39C;stroke:#383838;stroke-width:6.8145;stroke-linejoin:round;stroke-miterlimit:10;} #kira1 { transform-origin:center; animation:kira1 1.7s linear; stroke-width:0; } @keyframes kira1 { from { transform:scale(0); opacity:0; stroke-width:30; } 50% { transform:scale(1); opacity:0.8; stroke-width:14; } to { transform:scale(0); opacity:0; } } </style> <g> <path id = "kira1" class="st0" d="M225.2,298c49.1,7.3,94.5,30,130.3,65.8c35.8,35.8,58.5,81.1,65.8,130.3c7.3-49.1,30-94.5,65.8-130.3 c35.8-35.8,81.1-58.5,130.3-65.8c-49.1-7.3-94.5-30-130.3-65.8s-58.5-81.1-65.8-130.3c-7.3,49.1-30,94.5-65.8,130.3 S274.4,290.7,225.2,298z"/> </g> </svg> </svg> </div> <div class = "migi"> <p class = "title"> <br> <strong> SVG アニメーション、ランダムにキラキラ。 </strong> </p> <p class = "capt"> 2021.04.25<br> 〜SVG in SVG。 </p> </div> </div> </a> <script> const outer12 = document.getElementById("outer12"); const inner12 = document.getElementById("inner12"); function random12() { let clone = inner12.cloneNode(true); let horizon = String(Math.random()*100-12.5) + "%"; let vertical = String(Math.random()*100-12.5) + "%"; let ookisa = String(Math.random()*50) + "%"; clone.setAttribute("x",horizon); clone.setAttribute("y",vertical); clone.setAttribute("width",ookisa); clone.setAttribute("height",ookisa); clone.addEventListener("animationend",function() { clone.remove(); }); outer12.appendChild(clone); } setInterval(random12,280); </script>    <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani06/cani06.html"><img src = "https://fuuno.net/cani/cani06/icon.svg" loading = "lazy"> <strong>CSSアニメーション06、cubic-bezier。 </strong><br> <p>2021.04.22<br> 進捗を任意にコントロール。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani05/cani05.html"><img src = "https://fuuno.net/cani/cani05/icon.svg" loading = "lazy"> <strong>CSSアニメーション05、animation-timing-function。 </strong><br> <p>2021.04.14<br> 初期値は一定にあらず。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani36/ani36.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani36/topnosita.svg" style = "padding-top:0;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVG アニメーション、カメラのシャッターを再現。 </strong> </p> <p class = "capt"> 2021.04.11<br> 「アニメーションごと」重ねていく。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec56/Vec56.html"><img src = "https://fuuno.net/Vec/Vec56/icon.png" loading = "lazy"> <strong>Vectornator4.0の新機能。 </strong><br> <p>2021.04.08<br> メジャーアップデートの内容をチェック！ </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani04/cani04.html"><img src = "https://fuuno.net/cani/cani04/icon.svg" loading = "lazy"> <strong>CSSアニメーション04、animation-delay。 </strong><br> <p>2021.04.04<br> １つのキーフレームで時間差攻撃。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani03/cani03.html"><img src = "https://fuuno.net/cani/cani03/icon.svg" loading = "lazy"> <strong>CSSアニメーション03、プロパティ概要と一括指定について。 </strong><br> <p>2021.03.31<br> コードの短縮化←注意事項あり。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani02/cani02.html"><img src = "https://fuuno.net/cani/cani02/icon.png" loading = "lazy"> <strong>CSSアニメーション02、キーフレームについて。 </strong><br> <p>2021.03.29<br> 変化の保留/複数のプロパティ/始めと終わりの省略。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/cani/cani01/cani01.html"><img src = "https://fuuno.net/cani/cani01/icon-2.png" loading = "lazy"> <strong>CSSアニメーション01、基本的なアニメーションの実装。 </strong><br> <p>2021.03.26<br> 今日から入門しよう！ </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec55/Vec55.html"><img src = "https://fuuno.net/Vec/Vec55/icon.png" loading = "lazy"> <strong>Vectornator、スナップ機能について（後編）。 </strong><br> <p>2021.03.22<br> 不思議なスナップも登場。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani38/ani38.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani38/14.svg" style = "padding-top:0;" loading = "lazy"> </div> <div class = "migi"> <p class = "title"> <strong> SVG アニメーション、パスの内側を切り抜いて透過させる。 </strong> </p> <p class = "capt"> 2021.03.18<br> 不透明度を移植する。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec54/Vec54.html"><img src = "https://fuuno.net/Vec/Vec54/icon.png" loading = "lazy"> <strong>Vectornator、スナップ機能について（前編）。 </strong><br> <p>2021.03.15<br> 「位置合わせ」だけじゃない。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani37/ani37.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani37/topsita02.svg" style = "padding-top:0;"> </div> <div class = "migi"> <p class = "title"> <strong> SVGアニメーション、回転の中心を指定する。 </strong> </p> <p class = "capt"> 2021.03.09<br> 座標を取得して％変換。 </p> </div> </div> </a>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec53/Vec53.html"><img src = "https://fuuno.net/Vec/Vec53/icon.png"> <strong>Vectornatorの設定〜作業面タブについて④。 </strong><br> <p>2021.03.07<br> 〽️ルーラー。〽️ガイドを表示。〽️キャンバスを回転。〽️寸法。〽️チュートリアルモード。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec17/Vec17.html"><img src = "https://fuuno.net/Vec/Vec17/icon_new.png"> <strong>Vectornator、定規（ルーラー）について。 </strong><br> <p>2021.03.05（更新）<br> 〽️ お手軽な「固定定規」。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani34/ani34.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani34/topsita.svg "> </div> <div class = "migi"> <p class = "title"> <br> <strong> SVGアニメーション、回転スワイプで画像切り替え。 </strong> </p> <p class = "capt"> 2021.02.27<br> ポイントは「２重クリップ」。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec52/Vec52.html"><img src = "https://fuuno.net/Vec/Vec52/icon.png"> <strong>Vectornatorの設定〜作業面タブについて③。 </strong><br> <p>2021.02.23<br> 〽️白色の背景。〽️CYMKプレビュー。〽️アートボードのサイズ/単位。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani35/ani35.html"> <div class = "newcard"> <div class = "hidari" > <img src = "https://fuuno.net/ani/ani35/dekaicon.png" style = "padding-top:0;"> </div> <div class = "migi"> <p class = "title" style = "word-break:break-all;"> <br> <strong> SVGに画像をぴったりと配置〜<br> preserveAspectRatio。 </strong> </p> <p class = "capt"> 2021.02.19<br> 縦横比が違っても安心。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec51/Vec51.html"><img src = "https://fuuno.net/Vec/Vec51/icon.png"> <strong>Vectornatorの設定〜作業面タブについて②。 </strong><br> <p>2021.02.14<br> 〽️Magic Canvas。〽️アクティブレイヤの分離。〽️アウトラインモード。〽️グリッド。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani33/ani33.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani33/topsita.svg "> </div> <div class = "migi"> <p class = "title"> <br> <strong> clip-pathをアニメーションさせる。 </strong> </p> <p class = "capt"> 2021.02.09<br> 「覗き窓」自体を動かす。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec50/Vec50.html"><img src = "https://fuuno.net/Vec/Vec50/icon.png"> <strong>Vectornatorの設定〜作業面タブについて①。 </strong><br> <p>2021.02.06<br> 〽️テーマ。〽️取り消しとやり直し。〽️ズームされたインターフェース。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani32/ani32.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani32/hontop.svg"> </div> <div class = "migi"> <p class = "title"> <br> <strong> ページめくりアニメーション作り方。 </strong> </p> <p class = "capt"> 2021.02.02<br> 画像を読み込むだけで実装。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web02/irekae/irekae.html"><img src ="https://fuuno.net/web02/irekae/icon.png"> <strong>JavaScript : 要素の順番を逆にする。 </strong><br> <p>2020.01.28<br> 〽️ 配列化は不要、for文１発で完了。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani31/ani31.html"> <div class = "newcard"> <div class = "hidari"> <svg viewBox="0 0 297 210" width = "80%" style = "margin-left:10%;overflow:visible;"> <style type="text/css"> image { /* width:100%;*/ height:100%; transform-origin:center; } .left { clip-path:url(#leftclip); } .right { clip-path:url(#rightclip); } #ameL { animation:ameL 2s linear alternate infinite; } #hareR { animation:hareR 2s linear alternate infinite; } @keyframes ameL { 0% { transform:rotateY(-90deg) skewY(20deg); } 25% { transform:rotateY(-90deg) skewY(20deg); } 50% { transform:rotateY(0deg) skewY(0deg); } 100% { transform:rotateY(0deg) skewY(0deg); } } @keyframes hareR { 0% { transform:rotateY(0deg) skewY(0deg); } 25% { transform:rotateY(90deg) skewY(-20deg); } 100% { transform:rotateY(90deg) skewY(-20deg); } } rect { transform-origin:center; } #kageR { animation:kageR 2s alternate linear infinite; } @keyframes kageR { 0% { transform:scaleX(1); opacity:1; } 25% { transform:scaleX(0); opacity:0; } 100% { transform:scaleX(0); opacity:0; } } #kageL { animation:kageL 2s alternate linear infinite; } @keyframes kageL { 0% { transform:scaleX(0); opacity:0; } 25% { transform:scaleX(0); opacity:0; } 50% { transform:scaleX(1); opacity:1; } 100% { transform:scaleX(1); opacity:1; } } </style> <image class = "left" xlink:href = "https://fuuno.net/ani/ani31/ame_sennasi.png"/> <image class = "right" xlink:href = "https://fuuno.net/ani/ani31/hare_sennasi.png"/> <rect id = "kageL" width = "297" height = "210" class = "left" fill = "gray" fill-opacity = "0.4"/> <rect id = "kageR" width = "297" height = "210" class = "right" fill = "gray" fill-opacity = "0.4"/> <image id = "ameL" class = "left" xlink:href = "https://fuuno.net/ani/ani31/hare_sennasi.png"/> <image id = "hareR" class = "right" xlink:href = "https://fuuno.net/ani/ani31/ame_sennasi.png"/> <clipPath id = "leftclip"> <rect x = "0" y ="0" width = "148.5" height = "210"/> </clipPath> <clipPath id = "rightclip"> <rect x = "148.5" y ="0" width = "148.5" height = "210"/> </clipPath> </svg> </div> <div class = "migi"> <p class = "title"> <br> <strong> SVGとCSSで、見開きページ風に画像切り替え。 </strong> </p> <p class = "capt"> 2021.01.24<br> SVG領域を確保すると便利。 </p> </div> </div> </a> <br>   <a class = "newa" href = "https://fuuno.net/ani/ani30/ani30.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani30/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <br> <strong> HTMLで画像を重ねる、便利な方法。 </strong> </p> <p class = "capt"> 2021.01.20<br> positionやz-index指定なし。 </p> </div> </div> </a> <br>   <a class = "newa" href = "https://fuuno.net/ani/ani29/ani29.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani29/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <br> <strong> SVG、波を表現する。 </strong> </p> <p class = "capt"> 2021.01.16<br> 合成されたリアルな波を目指す。 </p> </div> </div> </a> <br>   <a class = "newa" href = "https://fuuno.net/ani/ani28/ani28.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani28/Vecnamida4.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG モーフィングが動かない！ </strong> </p> <p class = "capt"> 2021.01.11<br> ３つの確認ポイント。 </p> </div> </div> </a> <br>   <a class = "newa" href = "https://fuuno.net/ani/ani27/ani27.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani27/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVGでモーフィングアニメーション。 </strong> </p> <p class = "capt"> 2021.01.10<br> オブジェクトをなめらかに変形させる。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec49/Vec49.html"><img src = "https://fuuno.net/Vec/Vec49/icon.png"> <strong>Vectornator、タイムラプスでコマ送り動画。 </strong><br> <p>2021.01.03<br> 〽️作成工程を動画で表現。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani26/ani26.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani26/topsita02.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVGアニメーション、複数のボタンを一括制御。 </strong> </p> <p class = "capt"> 2020.12.29<br> １度作っておけば楽チン ♬ </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec48/Vec48.html"><img src = "https://fuuno.net/Vec/Vec48/icon.png"> <strong>Vectornator、画像取り込み〜importタブについて。 </strong><br> <p>2020.12.24<br> 〽️アプリ内で写真やストック素材にアクセス。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani25/ani25.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani25/topsita.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVGでボタンアニメーション【Web Animations API】。 </strong> </p> <p class = "capt"> 2020.12.19<br> event.targetからオブジェクトを動かす。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec47/Vec47.html"><img src = "https://fuuno.net/Vec/Vec47/icon.png"> <strong>Vectornator、ブラシが進化中。 </strong><br> <p>2020.12.10<br> 〽️「筆跡」をデザイン。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani24/ani24.html"> <div class = "newcard"> <div class = "hidari"> <img src = "https://fuuno.net/ani/ani24/btn.svg"> </div> <div class = "migi"> <p class = "title"> <strong> SVG、ボタンのon/offを表現。 </strong> </p> <p class = "capt"> 2020.12.03<br> イベントにも効率よく対応。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec46/Vec46.html"><img src = "https://fuuno.net/Vec/Vec46/icon.png"> <strong>Vectornator、オブジェクトをレイヤーパネルで操作する。 </strong><br> <p>2020.11.29<br> 〽️精度の高い選択/編集。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani22/ani22.html"> <div class = "newcard"> <div class = "hidari"> <div id = "soto_22"> <img id = "t4b" src = "https://fuuno.net/ani/ani22/hon_b3.svg"> <img id = "t4f" src = "https://fuuno.net/ani/ani22/hon_f3.svg"> <img id = "t4s" src = "https://fuuno.net/ani/ani22/sikaku.svg"> </div> </div> <div class = "migi"> <p class = "title"> <strong> SVG、3D空間に配置してアニメーション〜preserve-3d。 </strong> </p> <p class = "capt"> 2020.11.20<br> 〽️ オブジェクトごとに重ねて配置。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec45/Vec45.html"><img src = "https://fuuno.net/Vec/Vec45/icon.png"> <strong>Vectornator、アートボードの操作について（後編）。 </strong><br> <p>2020.11.15<br> 〽️書き出し時には余白を詰めましょう。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani21/ani21.html"> <div class = "newcard"> <div class = "hidari"> <div id = "svgs20"> <img src = "https://fuuno.net/ani/ani21/iconyou..svg"> </div> </div> <div class = "migi"> <p class = "title"> <strong> SVGでWeb Animations API。 </strong> </p> <p class = "capt"> 2020.11.12<br> 〽️ ネイティブJavaScriptでのアニメーション。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec44/Vec44.html"><img src = "https://fuuno.net/Vec/Vec44/icon.png"> <strong>Vectornator、アートボードの操作について（前編）。 </strong><br> <p>2020.11.08<br> 〽️複数配置で本領発揮。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani20/ani20.html"> <div class = "newcard"> <div class = "hidari"> <div id = "svgs20"> <img id = "fu20" src = "https://fuuno.net/ani/ani20/fu.svg"> </div> </div> <div class = "migi"> <p class = "title"> <strong> perspectiveで奥行きのあるアニメーション。 </strong> </p> <p class = "capt"> 2020.11.01<br> 〽️ 1点透視の環境を再現。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec43/Vec43.html"><img src = "https://fuuno.net/Vec/Vec43/icon.png"> <strong>iOSでカスタムフォント！Fontinator 使い方。 </strong><br> <p>2020.10.28<br> 〽️いろんなアプリで外部フォント。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/gajet/ai_ipad01/ai_ipad01.html"><img src = "https://fuuno.net/gajet/ai_ipad01/icon.png"> <strong>イラレiPad版をチェック。 </strong><br> <p>2020.10.24<br> 〽️PC版ユーザ目線で検証。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani19/ani19_02.html"> <div class = "newcard"> <div class = "hidari"> <div id = "svgs"> <img id = "fu" src = "https://fuuno.net/ani/ani19/fu.svg"> <img id = "nihongo1" src = "https://fuuno.net/ani/ani19/nihongo.svg"> <img id = "eigo" src = "https://fuuno.net/ani/ani19/eigo.svg"> <img id = "nihongo2" src = "https://fuuno.net/ani/ani19/nihongo.svg"> </div> </div> <div class = "migi"> <p class = "title"> <strong> CSSで3D回転アニメーション。 </strong> </p> <p class = "capt"> 2020.10.21<br> 〽️ rotate3dに挑戦。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec42/Vec42.html"><img src = "https://fuuno.net/Vec/Vec42/icon.png"> <strong>Vectornator、レイヤー操作④〜ガイドレイヤーについて。 </strong><br> <p>2020.10.15<br> 〽️レイアウトに最適。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani18/ani18.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani18/topsita.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVGアニメーション、裏表を見せながら回転。 </strong> </p> <p class = "capt"> 2020.10.09<br> 〽️ X軸を基準に回転。 </p> </div> </div> </a> <br>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec41/Vec41.html"><img src = "https://fuuno.net/Vec/Vec41/icon.png"> <strong>Vectornator、レイヤー操作③〜レイヤーの編集（後編）。 </strong><br> <p>2020.10.04<br> 〽️工夫されたうれしい機能。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani17/ani17.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani17/katamuki.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVGアニメーション、mask要素で手書き風テキスト。 </strong> </p> <p class = "capt"> 2020.10.01<br> 〽️ <mask>要素について理解しましょう。 </p> </div> </div> </a> <br>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec40/Vec40.html"><img src = "https://fuuno.net/Vec/Vec40/icon.png"> <strong>Vectornator、レイヤー操作②〜レイヤーの編集（前編）。 </strong><br> <p>2020.09.27<br> 〽️ファイル/アプリをまたいだ編集も。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani16/ani16.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani16/sen_fu.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVG、線を描くアニメーション。 </strong> </p> <p class = "capt"> 2020.09.23<br> 〽️ 破線のプロパティをつかいます。 </p> </div> </div> </a> <br>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec39/Vec39.html"><img src = "https://fuuno.net/Vec/Vec39/icon.png"> <strong>Vectornator、レイヤー操作①〜レイヤーを重ねてイラストを描いてみる。 </strong><br> <p>2020.09.17<br> 〽️ まづはレイヤーを重ねてみましょう。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/web00/web00.html"><img src = "https://fuuno.net/web/web00/icon.png"> <strong>WEBサイト作り方。 </strong><br> <p>2020.09.09<br> 〽️ web制作の小ワザをまとめました。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani13/ani13.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani13/topsita.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVG、use要素を使ったモーションパス。 </strong> </p> <p class = "capt"> 2020.09.07<br> 〽️ ポイントは‥「マイナスの遅れ」。 </p> </div> </div> </a> <br>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec38/Vec38.html"><img src = "https://fuuno.net/Vec/Vec38/icon.png"> <strong>Vectornator、レイヤーとアートボードの構成について。 </strong><br> <p>2020.09.02<br> 〽️ アートボードごとにレイヤーが構成される。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani15/ani15.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani15/kansei.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVG、モーションパスで複数の要素を動かす。 </strong> </p> <p class = "capt"> 2020.08.29<br> 〽️ 小技を集結させて実装します。 </p> </div> </div> </a> <br>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec37/Vec37.html"><img src = "https://fuuno.net/Vec/Vec37/icon.png"> <strong>レイヤーの役割について〜Vectornator。 </strong><br> <p>2020.08.23<br> 〽️ 「重ね順」の親子関係。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani14/ani14.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani14/senari.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVGでモーションパス（基本編）。 </strong> </p> <p class = "capt"> 2020.08.18<br> 〽️ 好きな軌道で画像を動かす。 </p> </div> </div> </a> <br>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec36/Vec36.html"><img src = "https://fuuno.net/Vec/Vec36/icon.png"> <strong>Vectornator、パスのアウトライン化（破線？）について。 </strong><br> <p>2020.08.14<br> 〽️ 線の「輪郭」を拡張せよ。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani12/ani12.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani12/to_obj.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVGとCSSで作る、吹き出しアニメーション。 </strong> </p> <p class = "capt"> 2020.08.10<br> 〽️ 吹き出しの形は自由自在。 </p> </div> </div> </a> <br>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec35/Vec35.html"><img src = "https://fuuno.net/Vec/Vec35/icon.png"> <strong>Vectornator、アンカーポイントの追加と削除。 </strong><br> <p>2020.08.06<br> 〽️ ２つのツールの合わせ技。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/ani/ani11/ani11.html"><img src = "https://fuuno.net/ani/ani11/icon.png"> <strong>SVGコード、読み方（構成を知る）。 </strong><br> <p>2020.08.02<br> 〽️ 構成さえ読み取れればOK。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec34/Vec34.html"><img src = "https://fuuno.net/Vec/Vec34/icon.png"> <strong>Vectornator、パスの結合・パスの閉じ方。 </strong><br> <p>2020.07.28<br> 〽️ ２つのツールの合わせ技。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani10/ani10.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani10/hon_kumo.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVGアニメーション、エンドレスに流れる画像。 </strong> </p> <p class = "capt"> 2020.07.23<br> 〽️ タイトル部分に使えそう？ふふふ。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec33/Vec33.html"><img src = "https://fuuno.net/Vec/Vec33/icon.png"> <strong>複合パスとパスの方向について〜Vectornator。 </strong><br> <p>2020.07.20<br> 〽️ オブジェクトの「重ね順」を無くすことで便利に使える。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani09/ani09.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani09/dekita.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVGアニメーション06、アニメーションに合わせてテキストの色を反転。 </strong> </p> <p class = "capt"> 2020.07.15<br> 〽️ ３つの長方形を動かします。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec32/Vec32.html"><img src = "https://fuuno.net/Vec/Vec32/icon.png"> <strong>Vectornator、マスク（クリッピングパス）について。 </strong><br> <p>2020.07.10<br> 〽️ 「画像切り抜き」はこれ。 </p> </a> </li> </ul>   <a class = "newa" href = "https://fuuno.net/ani/ani08/ani08.html"> <div class = "newcard"> <div class = "hidari"> <object data = "https://fuuno.net/ani/ani08/kore.svg" type = "image/svg+xml"></object> </div> <div class = "migi"> <p class = "title"> <strong> SVGアニメーション05、アニメーションしている部分をクリッピング(マスク)する。 </strong> </p> <p class = "capt"> 2020.07.06<br> 〽️ テキストの内部だけアニメーション。 </p> </div> </div> </a>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/ani/ani00/ani00.html"><img src ="https://fuuno.net/ani/ani00/aniicon.svg"> <strong>SVGアニメーション作り方。 </strong><br> <p>2020.06.30<br> 静的コンテンツの枠を飛び出す。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec31/Vec31.html"><img src = "https://fuuno.net/Vec/Vec31/icon.png"> <strong>Vectornator、パスファインダー（ブーリアン）について。 </strong><br> <p>2020.06.28<br> 〽️ その「使いどころ」も紹介。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/ani/ani06/ani06.html"><object data = "https://fuuno.net/ani/ani06/icon.svg" type = "image/svg+xml"></object> <strong>要素が画面内に表示されたらアニメーション、Intersection<br>Observer。 </strong><br> <p>2020.06.22<br> 〽️ コピペで試してみてね。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec30/Vec30.html"><img src = "https://fuuno.net/Vec/Vec30/icon.png"> <strong>Vectornator、Transform 〜アレンジタブについて④。 </strong><br> <p>2020.06.17<br> 〽️ 「基準点」を記憶させる便利機能。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/ani/ani05/ani05.html"><object data = "https://fuuno.net/ani/ani05/axis.svg" type = "image/svg+xml"></object> <strong>SVGアニメーション04、軸を基準に拡大/縮小〜 </strong><br><br> <p>2020.06.13<br> 〽️ 「切実な一言」に使おう。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec29/Vec29.html"><img src = "https://fuuno.net/Vec/Vec29/icon.png"> <strong>Vectornator、アラインメントと分散〜アレンジタブについて③。 </strong><br> <p>2020.06.10<br> 〽️ オブジェクトを整頓して配置。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/ani/ani04/ani04.html"><img id = "center" src = "https://fuuno.net/ani/ani04/fuuno02.svg"> <strong>SVGアニメーション03、中心を基準に拡大/縮小〜transform:scale（）。 </strong><br> <p>2020.06.06<br> 〽️ 映画のタイトルのような‥ </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec28/Vec28.html"><img src = "https://fuuno.net/Vec/Vec28/icon.png"> <strong>Vectornator、アレンジタブについて②。 </strong><br> <p>2020.06.03<br> 〽️ グループ。〽️ 反転。〽️ 順番。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/ani/ani03/ani03_02.html">   <svg version="1.1" class="inline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 411.9 411.9" style="enable-background:new 0 0 411.9 411.9;" xml:space="preserve"> <g> <path class="st0" d="M114.9,188.8c-50.8,0-92.1,7.5-92.1,16.7v172.8c0,9.2,41.2,16.7,92.1,16.7s92.1-7.5,92.1-16.7V205.4 C207,196.2,165.8,188.8,114.9,188.8z"/> <radialGradient id="SVGID_1_" cx="115.0002" cy="207.2676" r="67.0301" gradientTransform="matrix(1 0 0 0.2027 0 165.2462)" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#9FA0A0"/> <stop offset="0.5837" style="stop-color:#F4F3F3"/> <stop offset="0.8335" style="stop-color:#FFFFFF"/> </radialGradient> <ellipse class="st1" cx="115" cy="207.3" rx="84.1" ry="11.5"/> <g> <path class="st2" d="M119.3,206.7c-0.1-0.4-0.2-0.9-0.5-1.3c-7.8-13.2,5.1-45.7,10.7-57.1c1-2,0.2-4.4-1.8-5.4 c-2-1-4.4-0.2-5.4,1.8c-0.2,0.5-5.5,11.2-9.5,24.3c-5,16.5-5.8,29.1-2.3,37.7"/> <path class="st3" d="M110.6,206.9c0,0.1,0.1,0.2,0.3,0.3c-0.1-0.1-0.1-0.3-0.2-0.5C110.6,206.8,110.6,206.9,110.6,206.9z"/> <path class="st2" d="M110.6,206.8c0.1,0.2,0.1,0.3,0.2,0.5c0.9,0.3,2.3,0.6,4.2,0.6c2.1,0,3.9-0.3,4.4-0.7c0-0.1,0-0.3-0.1-0.4"/> </g> </g> <path id = "fire" class="st4" d="M154.8,146.7c-1.7,22.2-18.1,40.3-40.3,40.3s-44.6-19.4-38.7-47c7.8-36.8,40.7-107.1,40.7-107.1 S158.9,92.8,154.8,146.7z"/> <g id="YPM3dQ_1_" class="st5"> <image style="display:inline;overflow:visible;" width="259" height="265" id="YPM3dQ_2_" xlink:href="CBA2EB8DDF90E6C7.png" transform="matrix(1 0 0 1 278.417 109.9602)"> </image> </g> <path id = "switch" class="st6" d="M378.8,376.3H254.5c-6.2,0-11.2-5-11.2-11.2v-46.7c0-6.2,5-11.2,11.2-11.2h124.3c6.2,0,11.2,5,11.2,11.2v46.7 C390.1,371.3,385,376.3,378.8,376.3z"/> <g> <g> <path class="st7" d="M279.7,338.8c-1.8,0-2.2,0.6-2.2,2.1v0.2h13.7v6.4h-13.7v6.3h-9v-12.8c0-6.5,3-9.6,9.3-9.6H292v7.4H279.7z"/> <path class="st7" d="M296.3,353.8v-22.4h9.3v22.4H296.3z"/> <path class="st7" d="M324.8,353.8v-4.1c0-1.1-0.5-1.6-1.8-1.6h-3.5v5.7h-9.2v-22.4h15.2c5.2,0,8.3,1.8,8.3,7.9v1.3 c0,1.8-0.6,3.2-1.6,4.2c1.2,0.9,1.7,2.2,1.7,4.1v4.8H324.8z M324.9,340.3c0-1.1-0.5-1.5-1.8-1.5h-3.6v3h3.6c1.4,0,1.8-0.6,1.8-1.3 V340.3z"/> <path class="st7" d="M347,353.8c-7.2,0-9.2-3.5-9.2-8.5v-4.3c0-5.7,1.3-9.6,9.3-9.6h14.1v7.1h-12.5c-1.1,0-1.7,0.4-1.9,1.5h13.3 v5.3h-13.4c0,1,0.2,1.5,1.9,1.5h12.5v7H347z"/> </g> </g> </svg> <strong>CSSアニメーション、発火のタイミングを制御する。 </strong><br> <p>2020.05.31<br> 〽️ 好きなタイミングで発火/消火。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec27/Vec27.html"><img src = "https://fuuno.net/Vec/Vec27/icon.png"> <strong>Vectornator、アレンジタブについて①。 </strong><br> <p>2020.05.27<br> 〽️ 移動。〽️ 位置。〽️ 回転。〽️ サイズ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/ani/ani02/ani02.html"><img id = "ani02" src = "https://fuuno.net/ani/ani02/fu.svg"> <strong>SVGアニメーション02、画像を宙に浮かべる。 </strong><br> <p>2020.05.22<br> 〽️ 要素を変形させるtransformプロパティ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec26/Vec26.html"><img src ="https://fuuno.net/Vec/Vec26/icon.png"> <strong>ブレンドモード実践編-3 〜 Vectornator スタイルタブその⑦。 </strong><br> <p>2020.05.18<br> 〽️ 「色相」「彩度」「カラー」「輝度」。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vecanother/Vecanother.html"><img src ="https://fuuno.net/Vec/Vecanother/icon.png"> <strong>HSL、HSBの違いについて〜Vectornator外伝。 </strong><br> <p>2020.05.15<br> 〽️ 未知のパラメータを理解してブレンドモードに臨む。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/ani/ani01/an01.html"><img id = "pre_ani_02" src ="https://fuuno.net/ani/ani01/title03.svg" style = "width:30%;"> <strong>SVGアニメーション01、画面内にフェードインさせる方法。 </strong><br> <p>2020.05.10<br> 〽️ 新シリーズはじめました。 </p> </a> </li> </ul>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec25/Vec25.html"><img src ="https://fuuno.net/Vec/Vec25/icon.png"> <strong>ブレンドモード実践編-2 〜 Vectornator スタイルタブその⑥。 </strong><br> <p>2020.05.07<br> 〽️ 「オーバレイ」「差の絶対値」「除外」。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec24/Vec24.html"><img src ="https://fuuno.net/Vec/Vec24/icon.png"> <strong>ブレンドモード実践編-1 〜 Vectornator スタイルタブその⑤。 </strong><br> <p>2020.05.05<br> 〽️ 「明るくなる系」と「暗くなる系」。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec23/Vec23.html"><img src ="https://fuuno.net/Vec/Vec23/icon.png"> <strong>ブレンドモードについて（理解編）〜 Vectornator スタイルタブその④。 </strong><br> <p>2020.05.02<br> 〽️ 理解してから使うとスムーズ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec22/Vec22.html"><img src ="https://fuuno.net/Vec/Vec22/icon.png"> <strong>Vectornator、SVGを書き出してwebに配置。 </strong><br> <p>2020.04.30<br> 〽️ 作品をwebでくっきり表示、そして‥ </p> </a> </li> </ul>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec21/Vec21.html"><img src ="https://fuuno.net/Vec/Vec21/icon.png"> <strong>Vectornator、影について。〜スタイルタブその③。 </strong><br> <p>2020.04.23<br> 〽️ 影を落とすだけでいろんな効果が。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec20/Vec20.html"><img src ="https://fuuno.net/Vec/Vec20/icon.png"> <strong>Vectornator、線のスタイルを指定〜スタイルタブその②。 </strong><br> <p>2020.04.18<br> 〽️ 機能が多すぎてお腹いっぱい。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec19/Vec19.html"><img src ="https://fuuno.net/Vec/Vec19/icon.png"> <strong>Vectornator、塗りつぶし設定〜スタイルタブその①。 </strong><br> <p>2020.04.10<br> 〽️ 基本の「塗り」をマスターしよう。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec18/Vec18.html"><img src ="https://fuuno.net/Vec/Vec18/icon.png"> <strong>Vectornator、新機能②〜アイソメトリック(等尺性）グリッド。 </strong><br> <p>2020.04.03<br> 〽️ スナップさせて3D表現。 </p> </a> </li> </ul>      <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec15/Vec15.html"><img src ="https://fuuno.net/Vec/Vec15/icon.png"> <strong>Vectornator、パレット/カラーブレンド/カラー調整について。 </strong><br> <p>2020.03.21<br> 〽️ 色指定その３。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec16/Vec16.html"><img src ="https://fuuno.net/Vec/Vec16/icon.png"> <strong>Vectornator、グラデーション使い方。 </strong><br> <p>2020.03.16<br> 〽️ 色指定その２。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec14/Vec14.html"><img src ="https://fuuno.net/Vec/Vec14/icon.png"> <strong>Vectornator、カラーピッカーで色を指定。 </strong><br> <p>2020.03.12<br> 〽️ 色指定その１。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec13/Vec13.html"><img src ="https://fuuno.net/Vec/Vec13/icon.png"> <strong>テキストのアウトライン化〜Vectornator。 </strong><br> <p>2020.03.06<br> 〽️ どういうメリットがあるのか。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec12/Vec12.html"><img src ="https://fuuno.net/Vec/Vec12/icon.png"> <strong>Vectornator、テキストツールについて。 </strong><br> <p>2020.03.01<br> 〽️ 素敵なロゴ作成に向けての準備。 </p> </a> </li> </ul>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec11/Vec11.html"><img src ="https://fuuno.net/Vec/Vec11/icon.png"> <strong>Vectornator、ハサミツールと消しゴムツール。 </strong><br> <p>2020.02.22<br> 〽️ 分断と消去。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec10/Vec10.html"><img src ="https://fuuno.net/Vec/Vec10/icon.png"> <strong>Vectornator、ハンドル操作について。 </strong><br> <p>2020.02.19<br> 〽️ 曲線のコントロール。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec09/Vec09.html"><img src ="https://fuuno.net/Vec/Vec09/icon.png"> <strong>Vectornator、ノードツールについて。 </strong><br> <p>2020.02.17<br> 〽️ アンカーポイントを使いこなそう。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec08/Vec08.html"><img src ="https://fuuno.net/Vec/Vec08/icon.png"> <strong>Vectornator、選択ツールについて〜後編。 </strong><br> <p>2020.02.09<br> 〽️ 「基準点」を使った変形を紹介。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec06/Vec06.html"><img src ="https://fuuno.net/Vec/Vec06/icon.png"> <strong>Vectornator、選択ツールについて〜前編。 </strong><br> <p>2020.02.04<br> 〽️ オブジェクトをさまざまに変形。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web02/mokuji/mokuji.html"><img src ="https://fuuno.net/web02/mokuji/icon.png"> <strong>サイト記事の目次を自動作成〜JavaScript８行でOK。 </strong><br> <p>2020.01.28<br> 〽️ コンテンツの「質」に集中できる環境を。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec05/Vec05.html"><img src ="https://fuuno.net/Vec/Vec05/icon.png"> <strong>Vectornator、シェイプ（図形）ツール。〜後編〜 </strong><br> <p>2020.01.25<br> 〽️ クセがあるシェイプ達。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec04/Vec04.html"><img src ="https://fuuno.net/Vec/Vec04/icon.png"> <strong>Vectornator、シェイプ（図形）ツール。〜前編〜 </strong><br> <p>2020.01.20<br> 固有のパラメータもあって面白い。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec03/Vec03.html"><img src ="https://fuuno.net/Vec/Vec03/icon.png"> <strong>Vectornator、ペン/ブラシ/鉛筆ツールについて。 </strong><br> <p>2020.01.09<br> ３種類の描画ツール。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec02/Vec02.html"><img src ="https://fuuno.net/Vec/Vec02/icon.png"> <strong>Vectornator 使い方02。ワークスペースについて。 </strong><br> <p>2020.01.03<br> 概要を押さえておけ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/Vec/Vec01/Vec01.html"><img src ="https://fuuno.net/Vec/Vec01/icon.png"> <strong>Vectornator 使い方01。スタート画面について。 </strong><br> <p>2020.01.02<br> まずはここから。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/SVG/vec00/vec00.html"><img src ="https://fuuno.net/SVG/vec00/icon.png"> <strong>Vectornator 使い方。 </strong><br> <p>2020.01.01<br> モバイルでベクター画像作ろうよ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/SVG/font/font.html"><img src ="https://fuuno.net/SVG/font/icon.png"> <strong>Vectornator iPad、外部フォントを追加。 </strong><br> <p>2019.12.30<br> ファイルアプリにフォントがあればOK。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/SVG/icon/icon.html"><img src ="https://fuuno.net/SVG/icon/icon.png"> <strong>Vectornatorは数千のアイコンが入手できる。 </strong><br> <p>2019.12.25<br> 〽️ ホントに無料でいいのか？ </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/SVG/nator/nator.html"><img src ="https://fuuno.net/SVG/nator/icon.png"> <strong>Vectornator、「 iPadのイラレ」となりうるのか。 </strong><br> <p>2019.12.19<br> 〽️ 結論。ほぼイラレ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/SVG/data/data.html"><img src ="https://fuuno.net/SVG/data/icon.png"> <strong>iPadでSVGデータを作成、<br>Vectornator+ LiquidLogic〜無料。 </strong><br> <p>2019.12.12<br> 〽️ 都合のいい話がありました。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/SVG/passgoto/passgoto.html"><img src ="https://fuuno.net/SVG/passgoto/icon.png"> <strong>SVG、オブジェクト単位でCSSを適用させる。 </strong><br> <p>2019.12.08<br> 〽️ 必要な箇所だけカスタマイズしたい！ </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/SVG/tyoku/tyoku.html"><img src ="https://fuuno.net/SVG/tyoku/icon.png"> <strong>SVGをCSSで編集。 </strong><br> <p>2019.12.06<br> 〽️ 結果、用途が広がりまくります。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/sonota/ring/ring.html"><img src ="https://fuuno.net/sonota/ring/icon.png"> <strong>イラレ : リングを交差させる。 </strong><br> <p>2019.11.30<br> 〽️ 1番単純な方法。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/sonota/obj/obj.html"><img src ="../sonota/obj/icon.png"> <strong>Photoshopのオブジェクト選択ツールが便利すぎる。 </strong><br> <p>2019.11.22<br> 〽️ フォトショ初心者のハードルが下がった。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web02/retukotei/retukotei.html"><img src ="https://fuuno.net/web02/retukotei/icon.png"> <strong>CSS : tableの先頭列を固定させてスクロール。 </strong><br> <p>2019.11.18<br> 〽️ スマホで観ても苦しゅうない。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/swift/computed/computed.html"><img src ="../swift/computed/icon.png"> <strong>Swift : 変数の後に{ }・・これはComuputedプロパティ(get/set)というものです。 </strong><br> <p>2019.11.13<br> 〽️ get/setを理解しよう。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/gajet/pen/pen.html"><img src ="../gajet/pen/icon.png"> <strong>iPadでのコーディング環境はこれなのか？Codepen。 </strong><br> <p>2019.11.04<br> 〽️ 物理キーボードとセットでね。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/sonota/rori/rori.html"><img src ="../sonota/rori/icon.png"> <strong>ロリポップ！の取次店になりました。 </strong><br> <p>2019.10.30<br> 〽️ 「ふ」が使ってるレンタルサーバーを紹介します。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/swift/protocol/protocol.html"><img src ="../swift/protocol/icon.png"> <strong>Swiftのプロトコルとは？役割・使いどころ・存在意義やメリット。 </strong><br> <p>2019.10.26<br> 〽️ 存在意義を知った上で理解しましょう。 </p> </a> </li> </ul>      <ul class = "kijilist"> <li><a href = "https://fuuno.net/swift/static/static.html"><img src ="../swift/static/icon.png"> <strong>Swift static（静的）変数とは？ </strong><br> <p>2019.10.20<br> 〽️ SwiftUI準備編。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/gajet/irareside/irareside.html"><img src ="../gajet/irareside/icon.png"> <strong>イラレ、SidecarでiPadを液タブ化。 </strong><br> <p>2019.10.16<br> 〽️ ペジェ曲線も描けるよ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/gajet/side/side.html"><img src ="https://fuuno.net/gajet/side/icon.png"> <strong>Sidecar。Catalinaでついに実現。 </strong><br> <p>2019.10.13<br> 〽️ 待ち望んでいたぞ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web02/hankaku/hankaku.html"><img src ="../web02/hankaku/icon.png"> <strong>Javascript：文字数を全角/半角別にカウントしてはみ出し処理。 </strong><br> <p>2019.10.10<br> 〽️ 画面幅の変化にも対応。。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/gajet/kimida/kimida.html"><img src ="https://fuuno.net/gajet/kimida/icon.png"> <strong>iPad用マウスは君だ！　logicool　pebble m350。 </strong><br> <p>2019.10.05<br> 〽️ 一目惚れしたマウスをご紹介。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web02/realtime/realtime.html"><img src ="../web02/realtime/icon.png"> <strong>JavaScript : 要素幅をリアルタイムに取得。 </strong><br> <p>2019.10.04<br> 〽️ ユーザによる手動での変化にも対応。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/gajet/fileido/fileido.html"><img src ="https://fuuno.net/gajet/fileido/icon.png"> <strong>iPadOS、USBメモリ接続とファイル操作。 </strong><br> <p>2019.09.30<br> 〽️ 「じゃあsurfaceにしろよ」その２。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web02/over/over.html"><img src ="https://fuuno.net/web02/over/icon.png"> <strong>JavaScript/CSS: 文字数オーバーしたときに「…」で表示する。 </strong><br> <p>2019.09.28<br> 〽️ テキストボックスを整えよ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/gajet/mouseexcel/mouseexcel.html"><img src ="../gajet/mouseexcel/icon.png"> <strong>iPadOSのマウス操作でexcelを使ってみる。 </strong><br> <p>2019.09.25<br> 〽️ 「じゃあsurfaceにしろよ」とか言われそう・・ </p> </a> </li> </ul>      <ul class = "kijilist"> <li><a href = "https://fuuno.net/web02/flex02/flex02.html"><img src ="../web02/flex02/icon.png" loading = "lazy"> <strong>flex-basis、flexについて〜flexプロパティ後編。 </strong><br> <p>2019.09.19<br> 〽️ 残りの２つも解明しましょう。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web02/flex/flex.html"><img src ="../web02/flex/icon.png"> <strong>flex-grow,flex-shrinkについて〜flexプロパティ前編。 </strong><br> <p>2019.09.16<br> 〽️ 「比率」を指定するということ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web02/googlefonts/googlefonts.html"><img src ="../web02/googlefonts/icon.png"> <strong>Google Fontsを使って統一されたフォントを表示。 </strong><br> <p>2019.09.12<br> 〽️ デバイス内のフォントに左右されない。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/indicate/indicate.html"><img src ="https://fuuno.net/web/indicate/icon.png"> <strong>JavaScript : スクロールのインジゲータを作成。 </strong><br> <p>2019.09.09<br> 〽️ 一目で位置がわかるよう・・。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/linkcard02/linkcard02.html"><img src ="../web/linkcard02/icon.png"> <strong>HTML:flexboxを使ってリンクカードを作ろう。 </strong><br> <p>2019.09.06<br> 〽️ 「コチラ」よりもクリック欲高まるよ。 </p> </a> </li> </ul>      <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/jsnap/jsnap.html"><img src ="https://fuuno.net/web/jsnap/icon.png"> <strong>JavaScriptでもスナップスクロール。 </strong><br> <p>2019.08.28<br> 〽️ PCでも快適に。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/center/center.html"><img src ="../web/center/icon.png"> <strong>CSS:上下中央揃えはflexを使おう。 </strong><br> <p>2019.08.24<br> 〽️ コード３行でできるよ。 </p> </a> </li> </ul>      <ul class = "kijilist"> <li><a href = "https://fuuno.net/sonota/BOXY/BOXY.html"><img src ="https://fuuno.net/sonota/BOXY/icon.png"> <strong>BOXY SVG 〜お手軽SVG作成アプリを使ってみる。</strong><br> <p>2019.08.15<br> 〽️ UI部品作成には最適。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/sonota/shadow/shadow.html"><img src ="../sonota/shadow/icon.png"> <strong>SVG画像に影を落とす。</strong><br> <p>2019.08.09<br> 〽️ 読み込みspeedを速めたい。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/exp02/exp02.html"><img src ="../web/exp02/icon.png"> <strong>JavaScript:exec()メソッドについて。</strong><br> <p>2019.08.05<br> 〽️ 恐怖！無限ループ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/sonota/svg/svg.html"><img src ="https://fuuno.net/sonota/svg/icon.png"> <strong>HTML：SVGファイルでくっきり画像。</strong><br> <p>2019.07.27<br> 〽️ ベクターファイルを使ってみよう。 </p> </a> </li> </ul>      <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/quotation/quotation.html"><img src ="../web/quotation/icon.png"> <strong>JavaScript : " "で囲まれた部分のCSSを書き換える。</strong><br> <p>2019.07.13<br> 〽️ 技ありreplace。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/responsive/responsive.html"><img src ="../web/responsive/icon.png"> <strong>レスポンシブwebデザイン、２カラムをやってみる。</strong><br> <p>2019.06.27<br> 〽️ アウストラロピテクスにもできるレスポンシブデザイン講座。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/class_js/class_Js.html"><img src ="../web/class_js/icon.png"> <strong>JavaScript:class要素のHTMLをreplace。</strong><br> <p>2019.06.10<br> 〽️ これが実用的なreplace。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/sonota/youtube_wind/youtube_wind.html"><img src ="https://fuuno.net/sonota/youtube_wind/icon.png"> <strong>YouTube風フォントを使ってみよう。</strong><br> <p>2019.05.30<br> 〽️ ポップでインパクトのある画像になるよ ♪ </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/tag/tag.html"><img src ="../web/tag/icon.png"> <strong>HTML:ソースコードをページ上に貼り付ける。</strong><br> <p>2019.05.21<br> 〽️ タグもろとも表示したい。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/regular_replace/regular_replace.html"><img src ="https://fuuno.net/web/regular_replace/twitter.png"> <strong>JavaScript : 正規表現で一括replace。</strong><br> <p>2019.05.12<br> 〽️ 少しだけ正規表現。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/marginpadding_kit/marginpadding_kit.html"><img src ="https://fuuno.net/web/marginpadding_kit/marginpadding_kit03.png"> <strong>margin,padding実験キット。</strong><br> <p>2019.05<br> 〽️ 自身での試行錯誤が理解を深めるのじゃ。 </p> </a> </li> </ul>    <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/replace_method/replace_method.html"><img src ="../web/replace_method/twitter.png"> <strong>JavaScript:<br>replaceメソッドを使ったHTMLの置換</strong><br> <p>2019.05<br> 〽️ 色んなことができそうだ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/text_haba/text_haba.html"><img src ="../web/text_haba/text_haba04.png"> <strong>HTML <br>テキストの幅に合わせてCSS(border、背景色)を適用させる。</strong><br> <p>2019.04.03<br> 〽️ brock要素とinline要素の使い分け。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/swift/swift_sansyou/swift_sansyou.html"><img src ="../swift/swift_sansyou/sansyo_icon.png"> <strong>参照渡しと値渡しとは〜Swift</strong><br> <p>2019.03.12<br> 〽️ 久々Swift。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/gajet/keyboard_cover/keyboard_cover.html"><img src ="../gajet/keyboard_cover/keyboard_cover_icon.png"> <strong>Magic Keyboard用カバー、BEFINE KEYBOARD KEYSKINを試す。</strong><br> <p> 2019.03.11 　<br> 〽️ 俺が守らなくては。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/gajet/tablet_stand/tablet_stand.html"><img src ="https://fuuno.net/gajet/tablet_stand/standicon.png"> <strong>iphone/ipad/タブレット用スタンド、安くてコンパクトな3Q foreverのFoldStand。</strong><br> <p> 2019.02.16 　<br> 〽️ 即買い。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/hstart02/hstart02.html"><img src ="../main_img/cssicon.png"> <strong>HTMLとっとと始めよう02</strong><br> <p> 2019.01.17 　<br> 〽️ レッツゴーCSS。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/Bra&Ch/Bra&Ch.html"><img src ="../main_img/BraChro.png"> <strong>HTML入門者もAdobe Bracketsを使おう！</strong><br> <p> 2019.01.03 　<br> 〽️ 快適な環境をととのえてHTMLを始めましょう。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/hstart/hstart.html"><img src ="../main_img/htmlicon.png"> <strong>HTMLとっとと始めよう！</strong> <br> <p> 2019.01.03　<br> 〽️ 〜「前置きは抜き」で始めればとても簡単です。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/gajet/magickeyboard/magickeyboard.html "><img src ="https://fuuno.net/gajet/magickeyboard/miniset.png"> <strong>Magic Keyboard最強説。 </strong><br> <p> 2018.12.30 <br> 〽️ 最強のモバイルキーボードは自宅にありました。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/sonota/typing_mind/typing_mind.html "><img src ="../sonota/typing_mind/homeposition.png"> <strong>タイピング習得への道 </strong> <p> 2018.12.23<br> 〽️ タイピング、考えすぎてる人たちへ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/gajet/ipad_pro_early/ipad_pro_early.html"><img src ="../gajet/ipad_pro_early/penbake.png"> <strong>ipadpro(wifi版)を６日間で入手できたお話。</strong><br> <p> 2018.12.09<br> 〽️ 発表から3週間あまりの注目製品を１週間で入手する方法。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/swift/bo_bi_1/bo_bi_1.html"><img src ="../swift/bo_bi_1/ffukusuuview.png"> <strong>複数のViewControllerを扱う〜Swift忘備録</strong><br> <p> 2018.07.23<br> 〽️ これ、忘れがちなので貼っておいて観ました。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/web/closure/closure.html"><img src ="../web/closure/closure2.png"> <strong>JavaScriptのクロージャの説明に挑戦してみる。</strong><br> <p> 2018.12.09　<br> 〽️ 〜苦戦したよ。 </p> </a> </li> </ul>      <br><br><br>  <div id = "profile"> <hr><hr> <img src = "../main_img/fu_icon.png " style = "width:31%;float:left"> </div> <div class = "komidasi" style = "background-color:forestgreen; color:azure;"> <h3 style = "padding:0.5em;">「ふ」です。</h3> </div> <p>swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いて行きたいと思います。<br><br>  <br><br><br><br> © 2019 ふ<br> <a href = "https://fuuno.net/policy.html" target ="_blank" style = "text-decoration:none;"> ▶︎ プライバシーポリシー </a> <br> <a href = "https://fuuno.net/contact.html" target ="_blank" style = "text-decoration:none;"> ▶︎ お問い合わせ </a> </p><hr>  </div> </body> <script> const stro = document.querySelectorAll("strong"); console.log(`記事数は${stro.length}`); stro.forEach(function(value) { console.log(value.innerText); }); </script>  </html>

CINXE.COM

フーノページ