CSS の positionプロパティの relative と absolute の使い方を InstagramのIconを組み立てながら理解する

InstaIcon_position

SHARE

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、CSS の positionプロパティの relative と absolute の使い方を InstagramのIconを組み立てながら理解する方法について解説していきます。

relative と absolute の使い方を InstagramのIconを組み立てながら理解する

CSS の positionプロパティとは？

以前に、CSS の positionプロパティの種類一覧と、relative, absolute, fixed, sticky の使い分け方について解説をしました。

CSS の positionプロパティとは？ positionの種類一覧と使い方・relative, absolute, fixed, sticky の使い分け方まとめ

上記の記事でも考え方や、SampleCodeを交えて、CSS の positionプロパティについて解説しましたが、

この記事だけだは、relative と absolute の使い方が直感的にわからないと思いました。

そこで、今回は、relative と absolute の使い方に対する理解をより深めるために、

馴染み深いInstagramのIconで、relative と absolute の使い方を解説していきます。

完成系 (実行イメージ)と SampleCode

まず完成系は次のような InstagramIconになります。

SampleCodeは、こちらです。

注目してほしいポイントは、Code内のコメントにもあるとおり次のポイントです。

  1. instagram_icon_block (親要素・Wrapper) が、position: relative; で、重ねる要素の基準位置となる。
  2. 子要素は、position: absolute; で、親要素を基準に、絶対位置を決められるようになっている。

これは、position: relative; の通常の位置を基準に「相対位置」を指定できるようになる効果と、

position: absolute; の親要素を基準に「絶対位置」を指定できるようになる効果の合わせ技になります。

<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>InstagramIcon_Position</title>
    <style>
      .instagram_block_wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        cursor: pointer;
      }
      /* Instagram_Icon */
      .instagram_icon_block {
        /* 
          position: relative; (通常位置が基準点となる)で、
          重ねる要素たちの基準位置とさせる 
        */
        position: relative;
      }
      /* Instagram_Icon_Circle */
      .insta_icon_circle {
        /* 
          position: absolute; によって、
          親要素 (instagram_icon_block) を基準位置として、
          「絶対位置」を指定できるようになっている
        */
        position: absolute;
        top: 19px;
        left: 19px;
      }
      /* Instagram_Icon_Dot */
      .insta_icon_dot {
        /* 
          position: absolute; によって、
          親要素 (instagram_icon_block) を基準位置として、
          「絶対位置」を指定できるようになっている
        */
        position: absolute;
        top: 14px;
        left: 53px;
      }
      /* スマホサイズ */
      @media screen and (max-width: 767px) {
        .instagram_block_wrapper {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
      }
    </style>
  </head>
  <body>
    <div class="instagram_block_wrapper">
      <!-- ポイント1. instagram_icon_block (親要素) が、基準位置となる -->
      <div class="instagram_icon_block">
        <img src="./instagram/instaIconFlame.svg" alt="instaIconFlame" />
        <!-- ポイント2. 親要素を基準に、絶対位置を決める -->
        <img
          class="insta_icon_circle"
          src="./instagram/instaIconCircle.svg"
          alt="instaIconCircle"
        />
        <!-- ポイント2. 親要素を基準に、絶対位置を決める -->
        <img
          class="insta_icon_dot"
          src="./instagram/instaIconDot.svg"
          alt="instaIconDot"
        />
      </div>
      <div>
        <img src="./instagram/instaText.svg" alt="instaText" />
      </div>
    </div>
  </body>
</html>

Instagram Icon 素材 (SVG)

今回使用した、Instagram Icon の素材 (SVG) は、次のとおりです。

instagram Icon Flame

instagram Icon の Flame部分です。

<svg width="77" height="78" viewBox="0 0 77 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.0539 0.926492C32.9322 0.923071 31.0387 0.931867 29.3377 0.955817L24.7775 1.07801C23.4265 1.13666 22.2329 1.21315 21.1615 1.31213C20.6259 1.36149 20.1205 1.41672 19.6415 1.47758C19.1857 1.53503 18.7311 1.60192 18.278 1.67822C17.8467 1.75154 17.4373 1.83071 17.0449 1.91674C16.6524 2.00276 16.2775 2.09563 15.9158 2.19534C15.5622 2.29284 15.2114 2.40009 14.8637 2.51696C14.523 2.63182 14.1907 2.75352 13.8625 2.88353C13.206 3.14356 12.5658 3.43535 11.9064 3.76234C11.3991 4.01406 10.9303 4.26895 10.4851 4.53876C10.0398 4.80856 9.61797 5.09352 9.20496 5.40389C8.77962 5.72507 8.36966 6.06613 7.97643 6.42591C7.56537 6.80031 7.14551 7.2121 6.70928 7.67228C6.16113 8.24732 5.68482 8.7835 5.26203 9.30967C5.05064 9.57263 4.85268 9.83265 4.66622 10.0941C4.48181 10.3518 4.30552 10.6153 4.13761 10.884C3.97143 11.1504 3.81404 11.4217 3.6635 11.7007C3.51061 11.9846 3.36612 12.273 3.2302 12.5654C2.95209 13.1627 2.69255 13.8059 2.4335 14.5239C2.24132 15.0547 2.06923 15.5926 1.91761 16.1363C1.76291 16.6921 1.62532 17.2735 1.50264 17.9023C1.37996 18.5311 1.27291 19.2073 1.17883 19.9551C1.07744 20.7749 0.996437 21.597 0.935906 22.4207C0.867478 23.3264 0.81078 24.323 0.764347 25.4323L0.654374 29.1206L0.595232 33.6166L0.578125 39.051L0.628224 46.9537L0.784631 52.9411L0.905113 55.2799L1.05566 57.2179C1.10391 57.7403 1.16429 58.2614 1.23675 58.781C1.30273 59.2424 1.3736 59.6461 1.44985 59.9956C1.60456 60.7061 1.78751 61.4102 1.99825 62.1061C2.20004 62.7724 2.43079 63.4296 2.68987 64.0759C2.94452 64.7088 3.22312 65.3193 3.52616 65.9068C3.82919 66.4943 4.15667 67.0588 4.50859 67.6011C4.8605 68.1434 5.23686 68.6635 5.63863 69.1613C6.03994 69.6591 6.46681 70.1359 6.9175 70.5895C7.36888 71.044 7.84495 71.4766 8.34667 71.8877C8.85433 72.3034 9.38202 72.6941 9.92785 73.0583C10.4345 73.397 10.9357 73.7071 11.4406 73.9918C11.9455 74.2765 12.4548 74.5349 12.9783 74.7697C13.5018 75.0046 14.0384 75.216 14.599 75.4061C15.1597 75.5962 15.7438 75.7653 16.3611 75.9154C16.9784 76.0654 17.6319 76.1972 18.3235 76.312C19.0151 76.4269 19.7544 76.5254 20.5442 76.6102C21.3341 76.695 22.1767 76.7651 23.0822 76.8238C23.9876 76.8824 24.9554 76.9294 25.9953 76.967C27.6016 77.0251 30.0333 77.0591 32.8373 77.0721L41.9151 77.0537L50.5111 76.9333L53.7795 76.8414L55.9089 76.7319C56.3659 76.6947 56.8131 76.6507 57.2447 76.5992C57.6763 76.5476 58.102 76.4887 58.5165 76.4218C58.9309 76.3548 59.3361 76.28 59.7342 76.1969C60.1277 76.115 60.5192 76.0235 60.9083 75.9225C61.2934 75.8247 61.6732 75.7135 62.0491 75.5955C62.4249 75.4774 62.7969 75.3499 63.1666 75.213C63.5385 75.0753 63.907 74.9285 64.2717 74.7729C64.6391 74.6165 65.0059 74.4493 65.3739 74.2719C65.9392 73.9996 66.3942 73.7726 66.7938 73.551C67.1697 73.3448 67.5316 73.1142 67.8774 72.8608C68.2186 72.6096 68.5578 72.3236 68.9488 71.9634C69.3398 71.6032 69.7829 71.1692 70.3316 70.6203C70.8137 70.1383 71.2204 69.7195 71.5711 69.3385C71.9218 68.9575 72.2172 68.6146 72.4763 68.2842C72.7232 67.9707 72.9533 67.6442 73.1654 67.3062C73.3724 66.9762 73.5631 66.6336 73.7574 66.2536C74.0496 65.6817 74.3097 65.1521 74.5426 64.6411C74.7687 64.1487 74.9753 63.6474 75.1618 63.1386C75.3456 62.6339 75.5047 62.1205 75.6386 61.6002C75.7765 61.065 75.8952 60.5 75.9979 59.8802C76.1005 59.2605 76.1873 58.586 76.2626 57.8328C76.3378 57.0796 76.4019 56.2472 76.4581 55.3119L76.6071 52.1723L76.7352 48.2677L76.8266 43.9177L76.8618 39.3692L76.7802 30.4356L76.6709 26.4343L76.5219 22.9987L76.3361 20.3202C76.2687 19.5749 76.1958 18.9878 76.1186 18.591C76.0332 18.1524 75.9377 17.7159 75.8322 17.2818C75.7296 16.8593 75.6167 16.4394 75.4937 16.0225C75.3738 15.6162 75.2436 15.2131 75.1032 14.8135C74.9644 14.4188 74.8173 14.0324 74.6633 13.6544C74.5093 13.2763 74.3427 12.907 74.1691 12.5456C73.9956 12.1841 73.8138 11.8315 73.6229 11.4869C73.4321 11.1423 73.2331 10.8063 73.0252 10.4786C72.8172 10.1508 72.6007 9.83143 72.3751 9.52057C72.1508 9.2107 71.9169 8.90792 71.6737 8.61268C71.4317 8.31905 71.1806 8.03314 70.9205 7.75537C70.6609 7.47795 70.3925 7.20883 70.1158 6.94841C69.8389 6.68789 69.5537 6.43568 69.2594 6.19179C68.9641 5.94708 68.6612 5.71163 68.3513 5.48576C68.038 5.25758 67.7179 5.039 67.3913 4.83032C67.0603 4.61867 66.7231 4.41687 66.3801 4.22521C66.0311 4.03034 65.6766 3.84551 65.317 3.67094C64.7202 3.38086 64.1684 3.12352 63.6266 2.89527C63.094 2.66873 62.551 2.46754 61.9994 2.29236C61.4447 2.11763 60.8672 1.96782 60.2318 1.83854C59.5964 1.70926 58.9036 1.60148 58.1193 1.50984C57.3351 1.4182 56.4595 1.34415 55.458 1.28256C54.4565 1.22098 53.3301 1.17259 52.0439 1.13348L47.6728 1.03573L42.1406 0.97048L35.0564 0.926977L35.0539 0.926492ZM38.7332 7.6476L48.9492 7.70576L52.8032 7.78005C53.8646 7.80987 54.6745 7.84481 55.1493 7.88514C55.7676 7.93719 56.3566 8.00244 56.9199 8.08065C57.4605 8.1553 57.9985 8.24814 58.5328 8.359C59.046 8.46653 59.5355 8.58873 60.004 8.72656C60.4725 8.8644 60.92 9.01884 61.3494 9.18967C61.7788 9.3605 62.1893 9.54843 62.5845 9.75421C62.9765 9.95843 63.3575 10.1832 63.7258 10.4275C64.0924 10.6707 64.4457 10.9326 64.7889 11.2149C65.132 11.4972 65.4646 11.7997 65.7894 12.1233C66.1323 12.4647 66.4485 12.8125 66.7401 13.1712C67.0305 13.5277 67.2992 13.9014 67.5448 14.2903C67.7932 14.6846 68.017 15.0939 68.2149 15.5159C68.4173 15.946 68.5991 16.4005 68.7623 16.8837C68.9256 17.3668 69.071 17.8803 69.1998 18.4289C69.3347 19.0106 69.4477 19.5971 69.5385 20.1873C69.6363 20.8129 69.7198 21.4801 69.7907 22.1944C69.8616 22.9088 69.9202 23.6705 69.9686 24.4856C70.0072 25.1393 70.041 26.002 70.0696 27.0208L70.1412 30.4948L70.1959 39.0043L70.1336 47.5058L70.0588 50.9697L69.9559 53.4891C69.8846 54.6687 69.8093 55.6604 69.7194 56.5236C69.6741 56.9552 69.6253 57.3545 69.571 57.7292C69.5202 58.0831 69.46 58.4356 69.3904 58.7864C69.3269 59.1063 69.2531 59.4242 69.1693 59.7395C69.0889 60.0403 68.9985 60.3384 68.8982 60.6332C68.7972 60.9294 68.6872 61.2224 68.5685 61.512C68.4431 61.8178 68.3107 62.1207 68.1714 62.4204C68.0475 62.688 67.9173 62.9483 67.7794 63.2017C67.6431 63.4526 67.4984 63.6987 67.3454 63.9397C67.1939 64.1785 67.035 64.4104 66.8688 64.635C66.7036 64.8589 66.5303 65.0767 66.3493 65.288C66.1689 65.4985 65.9808 65.7023 65.7855 65.899C65.59 66.0957 65.3871 66.2856 65.177 66.4689C64.9668 66.6522 64.7488 66.8281 64.5232 66.9977C64.2977 67.1673 64.0643 67.3301 63.8231 67.486C63.5818 67.6419 63.3331 67.7915 63.0762 67.9342C62.8194 68.077 62.5544 68.2133 62.282 68.3431C62.0047 68.4748 61.7237 68.5982 61.4391 68.7131C61.1449 68.8318 60.8474 68.9422 60.5471 69.0442C59.9361 69.2524 59.2916 69.4352 58.6132 69.5929C57.9062 69.7562 57.1926 69.8897 56.4744 69.9932C56.1982 70.0335 55.5635 70.0714 54.6544 70.1066L51.19 70.2029L41.3681 70.3304L31.0878 70.3466L27.0505 70.3036L24.429 70.2219L22.4959 70.086C21.8957 70.0355 21.3375 69.9792 20.8145 69.9155C20.2915 69.8517 19.8045 69.7806 19.3462 69.7004C18.912 69.6253 18.4804 69.5357 18.0522 69.4316C17.6618 69.3366 17.2753 69.2259 16.8938 69.0997C16.526 68.9775 16.1744 68.8431 15.8322 68.6953C15.4901 68.5474 15.1577 68.3854 14.8285 68.2084C14.4993 68.0315 14.1736 67.8394 13.8441 67.63C13.5956 67.4721 13.3554 67.3123 13.1242 67.1429C12.893 66.9735 12.6696 66.8047 12.4546 66.6277C12.2395 66.4508 12.033 66.2685 11.8338 66.0808C11.636 65.894 11.4449 65.7002 11.261 65.4997C11.0777 65.2997 10.9025 65.094 10.7343 64.8809C10.5655 64.6669 10.4047 64.4468 10.2521 64.221C10.0973 63.9918 9.95086 63.757 9.81299 63.5172C9.67369 63.2752 9.54123 63.025 9.41537 62.7669C9.28741 62.5039 9.168 62.2368 9.05735 61.9661C8.94493 61.6904 8.83838 61.4059 8.73818 61.1122C8.53778 60.5244 8.36182 59.8988 8.20884 59.2316C8.05585 58.5645 7.92535 57.8557 7.81489 57.1006C7.70442 56.3454 7.61547 55.5448 7.5446 54.6939C7.4923 54.067 7.45075 53.0907 7.41898 51.859L7.35251 47.4784L7.37695 36.3112L7.56928 25.6403L7.71591 21.8806L7.799 20.6379C7.82784 20.3061 7.85766 20.0602 7.8882 19.9126C7.98889 19.427 8.09031 18.9751 8.19515 18.5521C8.29309 18.153 8.40205 17.7567 8.5219 17.3637C8.63578 16.9927 8.75577 16.6452 8.88408 16.316C9.0078 15.9971 9.14569 15.6839 9.29733 15.3773C9.44543 15.0791 9.60453 14.7937 9.77731 14.5158C9.95009 14.238 10.1366 13.9684 10.3399 13.7003C10.5432 13.4322 10.7622 13.1675 11.0005 12.8992C11.2387 12.6309 11.4961 12.3598 11.7752 12.0805C12.1004 11.7534 12.4391 11.4399 12.7903 11.1409C13.122 10.8587 13.4678 10.5937 13.8265 10.3468C14.1792 10.1025 14.5409 9.88495 14.9175 9.68504C15.2941 9.48514 15.6856 9.30453 16.0974 9.14202C16.5092 8.9795 16.9417 8.83409 17.4 8.70212C17.8814 8.56709 18.3681 8.45189 18.8589 8.35681C19.3751 8.25563 19.9232 8.1674 20.5085 8.09042C21.0939 8.01344 21.7165 7.94697 22.3823 7.88929C22.8466 7.84921 23.6467 7.81353 24.7003 7.78347L28.5347 7.70771L38.7349 7.6454L38.7332 7.6476Z" fill="url(#paint0_radial_2_602)"/>
<defs>
<radialGradient id="paint0_radial_2_602" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.7314 82.6228) rotate(-9.53101) scale(161.224 97.8623)">
<stop stop-color="#FED576"/>
<stop offset="0.263" stop-color="#F47133"/>
<stop offset="0.609" stop-color="#BC3081"/>
<stop offset="1" stop-color="#4C63D2"/>
</radialGradient>
</defs>
</svg>

insta Icon Circle

instagram Icon の Circle部分です。

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.7535 0.564699C19.0826 0.564699 18.4191 0.598914 17.7654 0.665876C17.1117 0.732837 16.467 0.832057 15.8333 0.962315C15.1996 1.09257 14.5771 1.25387 13.9672 1.44424L12.1768 2.10164L10.4722 2.92474L8.86364 3.9035L7.36066 5.02768L5.97377 6.28749L4.71274 7.67316L3.58734 9.17442L2.60735 10.7815L1.78377 12.4841C1.53621 13.0665 1.31602 13.6636 1.1254 14.2731C0.934774 14.8826 0.77348 15.5048 0.642977 16.1377C0.512475 16.7707 0.413255 17.4146 0.346049 18.0679C0.278843 18.7211 0.245117 19.3839 0.245117 20.054C0.245117 20.7241 0.279332 21.3869 0.346049 22.0401C0.412389 22.6882 0.511492 23.3325 0.642977 23.9705C0.77348 24.6059 0.934774 25.2257 1.1254 25.8352C1.31602 26.4447 1.53596 27.0415 1.78377 27.6241L2.60735 29.3267L3.58734 30.9336L4.71274 32.4351L5.97377 33.8208L7.36066 35.0806L8.86364 36.2048L10.4722 37.1835L12.1768 38.0066L13.9672 38.664L15.8333 39.1459C16.4719 39.2773 17.1168 39.3763 17.7654 39.4426C18.426 39.51 19.0895 39.5437 19.7535 39.5436C20.4243 39.5436 21.0878 39.5093 21.7413 39.4426C22.3899 39.3763 23.0348 39.2773 23.6734 39.1459L25.5398 38.664L27.3302 38.0066L29.0345 37.1835L30.6433 36.2048L32.1463 35.0806L33.5334 33.8208L34.7945 32.4351L35.9199 30.9336L36.8999 29.3267L37.7234 27.6241L38.3818 25.8352C38.5724 25.2257 38.7337 24.6035 38.8642 23.9705L39.1612 22.0399C39.2281 21.3866 39.2623 20.7239 39.2623 20.0538C39.2623 19.3837 39.2281 18.7209 39.1612 18.0676C39.0948 17.4196 38.9957 16.7754 38.8642 16.1375C38.7337 15.5021 38.5724 14.8825 38.3818 14.2728L37.7234 12.4839L36.8999 10.7813L35.9199 9.17418L34.7945 7.67291L33.5334 6.28725L32.1463 5.02744L30.6433 3.90326L29.0345 2.92449L27.3302 2.1014L25.5398 1.444L23.6734 0.962069L21.7413 0.665629C21.0809 0.598175 20.4174 0.564406 19.7535 0.564453V0.564699ZM19.7535 7.29167C20.197 7.29167 20.6347 7.31366 21.0658 7.35717L22.3366 7.5495L23.5642 7.86231L24.7397 8.28926L25.8573 8.82446L26.9081 9.46109L27.8906 10.1935L28.7963 11.0151L29.6186 11.9199L30.3518 12.9013L30.9891 13.9536L31.5243 15.0705C31.6851 15.4527 31.8279 15.8445 31.952 16.245C32.0762 16.6456 32.1805 17.0549 32.2648 17.4718C32.3491 17.8887 32.4115 18.313 32.4572 18.7439L32.5227 20.0552C32.5227 20.4983 32.5007 20.9358 32.4572 21.3668C32.4137 21.7979 32.3496 22.2222 32.2648 22.6389C32.18 23.0556 32.0754 23.4649 31.952 23.8657L31.5243 25.0402L30.9891 26.1571L30.3518 27.2091L29.6186 28.1908L28.7963 29.0956L27.8906 29.9172L26.9081 30.6496L25.8573 31.2862L24.7397 31.8214L23.5642 32.2484L22.3366 32.5612L21.0658 32.7533C20.6297 32.797 20.1916 32.8189 19.7532 32.8188C19.3148 32.8189 18.8766 32.797 18.4404 32.7533L17.1696 32.5612C16.7524 32.4766 16.3428 32.372 15.9418 32.2484L14.7663 31.8214L13.6487 31.2862L12.5979 30.6496L11.6154 29.9172L10.7097 29.0956L9.88737 28.1908L9.15421 27.2091L8.51685 26.1571L7.98165 25.0402L7.55397 23.8657L7.24116 22.6389L7.04883 21.3668C7.00509 20.931 6.98323 20.4933 6.98333 20.0552C6.98323 19.6173 7.00509 19.1796 7.04883 18.7439C7.09208 18.313 7.15636 17.8885 7.24116 17.4718C7.32511 17.058 7.4296 16.6487 7.55422 16.2452L7.98189 15.0707L8.5171 13.9539L9.15446 12.9016L9.88761 11.9201L10.71 11.0154L11.6157 10.1938L12.5981 9.46133L13.649 8.82471L14.7665 8.2895C15.1512 8.12796 15.5436 7.98548 15.9423 7.86256L17.1701 7.54974C17.5872 7.46519 18.012 7.40067 18.4409 7.35741C18.8771 7.3137 19.3153 7.29184 19.7537 7.29191L19.7535 7.29167Z" fill="url(#paint0_radial_26_442)"/>
<defs>
<radialGradient id="paint0_radial_26_442" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-6.26852 63.6227) rotate(-9.53101) scale(161.224 97.8623)">
<stop stop-color="#FED576"/>
<stop offset="0.263" stop-color="#F47133"/>
<stop offset="0.609" stop-color="#BC3081"/>
<stop offset="1" stop-color="#4C63D2"/>
</radialGradient>
</defs>
</svg>

insta Icon Dot

instagram Icon の Dot部分です。

<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.053 0.0205078C4.8981 0.0205389 4.74329 0.0283673 4.58916 0.0439672C4.43503 0.0595444 4.28177 0.0828744 4.12996 0.113864C3.97817 0.144823 3.82801 0.1834 3.68005 0.229457C3.53207 0.275542 3.38648 0.32905 3.24382 0.389776C3.10115 0.450573 2.96159 0.518514 2.82567 0.593347C2.68974 0.668035 2.55761 0.749519 2.42977 0.837491C2.3019 0.925559 2.1785 1.02001 2.06001 1.12049C1.94158 1.22087 1.8282 1.32715 1.72031 1.43893C1.6124 1.55077 1.51012 1.66798 1.41385 1.79011C1.31759 1.91225 1.22747 2.03917 1.1438 2.17037C1.06016 2.30148 0.983089 2.43671 0.912862 2.57557C0.842536 2.71452 0.779159 2.85693 0.722972 3.00226C0.666861 3.14757 0.618004 3.29561 0.576584 3.44583C0.535166 3.59603 0.501235 3.74823 0.47492 3.90185C0.448597 4.05543 0.429918 4.21024 0.418954 4.36569C0.411165 4.47582 0.407255 4.58619 0.407227 4.69659C0.407223 4.85256 0.414972 5.00843 0.430444 5.16361C0.445911 5.31873 0.469075 5.47297 0.499848 5.62575C0.530613 5.77853 0.568948 5.92967 0.61471 6.0786C0.660515 6.22757 0.713693 6.37414 0.774048 6.51776C0.834398 6.66142 0.90185 6.80196 0.976154 6.93884C1.05039 7.07569 1.13139 7.20872 1.21883 7.33743C1.3063 7.46605 1.4001 7.59019 1.49988 7.70939C1.59964 7.82867 1.70526 7.94286 1.81635 8.05153C1.9275 8.16012 2.04398 8.26305 2.16534 8.35994C2.2867 8.45689 2.41279 8.54767 2.54316 8.63194C2.67355 8.71621 2.80805 8.79386 2.94616 8.8646C3.08416 8.93537 3.22558 8.99915 3.36992 9.05571C3.51426 9.11219 3.66132 9.16138 3.81055 9.20307C3.95979 9.24471 4.11101 9.2788 4.26364 9.30523C4.41625 9.33177 4.57007 9.35061 4.72455 9.36168C4.83394 9.3695 4.94358 9.37341 5.05325 9.37341C5.20815 9.37346 5.36296 9.36571 5.5171 9.35019C5.67122 9.33461 5.82448 9.31129 5.9763 9.2803C6.12809 9.24934 6.27825 9.21076 6.42621 9.16471C6.57419 9.11862 6.71978 9.06511 6.86244 9.00439C7.0051 8.94367 7.14466 8.87581 7.28059 8.80106C7.41652 8.72629 7.54865 8.64473 7.67649 8.55667C7.80435 8.46868 7.92775 8.37431 8.04625 8.27392C8.16469 8.17346 8.27806 8.0671 8.38594 7.95524C8.49385 7.84339 8.59613 7.72619 8.69241 7.60406C8.78866 7.48191 8.87879 7.355 8.96245 7.22379C9.0461 7.0926 9.12318 6.95729 9.1934 6.81835C9.26372 6.6794 9.3271 6.53699 9.38329 6.39166C9.4394 6.24635 9.48825 6.09831 9.52967 5.9481C9.57109 5.79789 9.60502 5.64569 9.63133 5.49207C9.65766 5.33849 9.67634 5.18368 9.6873 5.02822C9.69509 4.9181 9.699 4.80773 9.69903 4.69732C9.69903 4.54144 9.69128 4.38565 9.67581 4.23055C9.66035 4.07544 9.63718 3.9212 9.60641 3.76841C9.57564 3.61563 9.53731 3.46449 9.49155 3.31557C9.44574 3.1666 9.39256 3.02003 9.33221 2.87641C9.27186 2.73274 9.2044 2.5922 9.1301 2.45533C9.05586 2.31847 8.97486 2.18544 8.88742 2.05673C8.79988 1.92802 8.706 1.8038 8.60613 1.68453C8.50645 1.56525 8.40091 1.45106 8.2899 1.34239C8.17876 1.23379 8.06228 1.13086 7.94092 1.03398C7.81956 0.937109 7.69346 0.84641 7.5631 0.762221C7.43271 0.677952 7.2982 0.6003 7.1601 0.529562C7.0221 0.458788 6.88067 0.395006 6.73633 0.338453C6.59199 0.281969 6.44494 0.232787 6.29571 0.191089C6.14647 0.149375 5.99525 0.115202 5.84262 0.0886932C5.69001 0.062236 5.53617 0.0434736 5.3817 0.0324817C5.27231 0.0246674 5.16267 0.0207575 5.053 0.0207539V0.0205078Z" fill="url(#paint0_radial_26_443)"/>
<defs>
<radialGradient id="paint0_radial_26_443" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-41.2687 68.6227) rotate(-9.53101) scale(161.224 97.8623)">
<stop stop-color="#FED576"/>
<stop offset="0.263" stop-color="#F47133"/>
<stop offset="0.609" stop-color="#BC3081"/>
<stop offset="1" stop-color="#4C63D2"/>
</radialGradient>
</defs>
</svg>

insta Text

instagram Icon の隣にある「Instagram」の Textです。

<svg width="159" height="46" viewBox="0 0 159 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.3369 3.9038C7.32357 0.972601 9.17529 0.883 9.17529 0.883C9.86235 0.876967 10.5429 1.01657 11.1721 1.2926C12.5865 1.78327 12.6654 2.55553 12.6654 2.55553V24.0382C12.8489 30.0457 11.3513 32.3518 9.56356 33.9582C9.02102 34.4505 8.34747 34.7751 7.62437 34.8926C7.56805 34.9067 7.50927 34.908 7.4524 34.8962C7.39553 34.8845 7.34204 34.8601 7.29592 34.8248C7.24979 34.7896 7.2122 34.7444 7.18596 34.6926C7.15972 34.6408 7.1455 34.5837 7.14436 34.5257C7.17403 34.1105 7.26312 33.7017 7.4089 33.3118C8.3113 30.9929 8.23663 27.0078 8.23663 27.0078L8.32197 3.88247C8.32197 3.88247 8.39236 3.4558 8.03183 3.63073C4.50756 6.66007 4.06383 10.9395 3.95077 13.0131C3.89317 16.1214 5.2137 17.7278 5.2137 17.7278C5.31535 17.8224 5.39512 17.938 5.44744 18.0666C5.49977 18.1952 5.52338 18.3337 5.51663 18.4723C5.52353 18.5463 5.51404 18.621 5.48883 18.6909C5.46361 18.7608 5.42328 18.8243 5.37073 18.8768C5.31817 18.9294 5.25468 18.9697 5.18477 18.9949C5.11485 19.0201 5.04023 19.0296 4.96623 19.0227C3.63929 18.8947 1.52303 17.4014 0.772095 15.5881C0.37752 14.7131 0.162778 13.7679 0.140625 12.8083C0.474176 9.44316 1.96301 6.29738 4.35396 3.90593L4.3369 3.9038ZM158.236 24.4115C158.236 31.3107 154.054 31.2019 154.054 31.2019C150.073 31.3406 149.058 27.1401 148.811 22.8691C148.618 19.6542 148.811 16.0787 148.811 16.0787C148.811 16.0787 148.811 15.9145 148.672 16.0787C147.339 18.4894 146.436 22.1587 145.992 24.9918C145.797 26.2471 145.679 27.5131 145.638 28.7827C145.659 28.9029 145.644 29.0265 145.596 29.1385C145.548 29.2506 145.469 29.3463 145.367 29.4142C143.206 30.4062 141.817 28.9982 141.325 27.4238C140.693 25.9305 140.288 16.9619 140.288 16.4947C140.288 16.0275 139.915 16.3497 139.915 16.3497C136.919 21.3203 136.894 28.6889 136.894 30.1673C136.894 31.6457 134.366 31.1913 134.366 31.1913C132.205 31.027 132.288 29.9753 132.288 29.9753L132.188 28.1939C131.437 29.5806 130.046 31.3513 127.9 31.2318C124.653 31.0227 124.028 27.6627 123.974 27.0931C123.974 27.0931 122.357 31.2745 117.916 31.2318C114.895 31.1806 113.683 28.0745 113.683 28.0745C113.683 28.0745 112.467 31.3385 109.502 31.2318C106.536 31.1251 104.083 27.6905 104.271 23.2403C104.311 20.9873 104.612 18.7465 105.169 16.563C105.169 16.563 105.41 16.1363 105.005 16.0894C104.599 16.0425 102.035 16.1321 102.035 16.1321C102.035 16.1321 100.584 21.9497 94.4532 29.1838L94.4958 33.9625C94.4958 38.7198 93.9028 45.0985 87.4558 45.619C81.8836 45.2393 82.1993 40.947 82.1993 40.947C82.067 39.6841 82.8606 37.3587 86.1886 34.2377L90.8393 29.9155L90.707 27.9187C88.578 31.4387 85.3246 31.2425 85.3246 31.2425C85.3246 31.2425 82.7966 31.7545 80.6953 28.0147C80.0638 29.2777 78.6601 31.4835 76.3497 31.2297C73.1028 30.867 72.4585 27.635 72.4073 27.059C72.4073 27.059 70.786 31.2787 66.3166 31.2297C63.2873 31.1785 62.0649 28.0403 62.0649 28.0403C61.7279 27.3474 61.4716 26.618 61.3012 25.8665L61.1689 26.259C60.4798 28.0211 58.7796 31.0846 56.1662 31.123C51.3662 31.123 51.1636 23.6819 51.1636 23.6819C49.762 27.0099 47.0505 31.2126 41.9966 31.187C36.9428 31.1614 36.3113 29.3353 36.3113 29.0707C36.2941 28.8175 36.3289 28.5635 36.4137 28.3242C36.4985 28.085 36.6313 27.8657 36.8041 27.6798C37.3844 26.8393 37.8708 26.4915 38.2974 26.4915C38.7191 26.6094 39.1066 26.8258 39.4281 27.123C40.0667 27.7342 40.8927 28.1123 41.7726 28.1961C43.3641 28.1385 43.714 26.8627 43.8249 25.5614C43.9358 24.2601 43.0142 22.8691 41.7406 21.7086L39.4921 19.6563L35.2724 26.6067C32.8148 30.6067 30.3764 31.2254 29.4356 31.0995C28.1556 30.9225 26.9076 29.5955 26.8329 25.7107L27.123 14.8521C27.123 14.5043 26.8073 14.675 26.8073 14.675C21.9497 19.8291 20.4926 30.4318 20.4926 30.6387C20.4081 30.7894 20.2805 30.9113 20.1261 30.9888C19.9718 31.0664 19.7978 31.096 19.6265 31.0739C19.1913 31.0739 19.7716 31.0739 18.035 30.9886C16.2985 30.9033 16.418 27.6457 16.418 27.6457L16.531 11.8526C16.531 11.3278 17.0494 11.1017 18.6985 11.5369C20.3476 11.9721 20.29 12.4841 20.29 12.4841L20.2324 21.6574C24.4841 9.11767 27.6926 11.0825 29.634 12.0425C31.5753 13.0025 31.283 14.3806 31.283 14.3806L30.9929 23.7033C30.9076 26.1353 31.2489 27.0889 31.8036 27.1806C33.1817 27.5091 38.0201 18.1715 38.0201 18.1715C35.8782 15.8526 37.0473 13.0217 38.7156 11.7971C39.4653 11.2773 40.3356 10.9579 41.2436 10.8691C41.2436 10.8691 43.411 10.7561 43.3556 12.5822C43.4132 14.579 41.1881 17.0046 41.1881 17.0046C45.4974 20.0766 47.5028 21.6979 47.8398 24.0745C47.9358 24.7019 47.8929 25.3428 47.714 25.9518C50.7774 23.2851 51.0121 20.3049 51.0121 20.3049L51.0633 10.3358L46.5193 10.2782C46.5193 10.2782 46.1716 10.2782 46.0926 9.40354C46.0622 8.98836 46.1215 8.57149 46.2665 8.18129C46.4116 7.79108 46.6389 7.43668 46.9332 7.1422L51.2681 7.1998L51.4388 1.98807C51.5838 0.942732 52.2494 0.799803 54.1545 1.2926C56.0596 1.7854 56.0489 2.2206 56.0489 2.2206L55.8356 7.46434L61.2436 7.75447C61.8836 7.81207 62.0841 7.9678 61.939 9.03447C61.9332 9.30507 61.8582 9.56968 61.7212 9.80308C61.5841 10.0365 61.3896 10.2309 61.1561 10.3678L55.7801 10.4809L55.4068 22.0435C55.4068 23.8355 55.4921 28.0702 57.1689 28.0169C59.5156 28.1299 60.8958 22.8862 60.8958 22.8862V22.8435C60.8651 21.8758 60.9007 20.9072 61.0025 19.9443C61.4441 15.731 63.3492 10.7966 67.6372 10.7966C68.472 10.8148 69.2863 11.0597 69.9927 11.5049C70.6992 11.9502 71.2713 12.5792 71.6478 13.3246L71.7182 12.3774C71.7182 12.3774 71.6244 11.2339 73.4356 11.5177C75.2468 11.8014 75.8676 12.5161 75.8249 13.0899L75.6798 24.7657C75.9209 27.2937 76.3561 28.7721 77.6382 28.6697C78.7433 28.5054 79.5326 26.995 80.002 25.7129C78.3977 12.371 85.6873 10.7518 85.6873 10.7518C85.6873 10.7518 88.9214 10.5385 90.3934 13.2094L90.4361 12.3134C90.4361 12.3134 90.291 11.1315 92.002 11.4601C92.5041 11.537 92.9973 11.6642 93.474 11.8398C94.2313 12.1235 94.4724 12.3134 94.4724 13.0217L94.3273 26.1993C94.3273 26.1993 98.1182 21.0942 99.0846 16.1299C98.7075 15.8474 98.3984 15.4841 98.1799 15.0666C97.9613 14.6491 97.839 14.188 97.8217 13.7171C97.9156 12.2963 98.6324 10.5961 100.723 10.5961C102.814 10.5961 102.984 12.4478 102.675 13.7107C102.675 13.7107 104.431 13.4974 105.954 13.0793C107.477 12.6611 109.517 12.4478 109.662 14.8286C109.716 15.351 109.618 15.878 109.378 16.3454C109.378 16.3454 108.171 21.6147 108.36 23.7438C108.55 25.8729 109.118 29.0878 110.786 28.7102C112.454 28.3326 113.022 25.9689 113.022 25.9689C112.606 24.0268 112.493 22.0319 112.687 20.0553C113.128 15.8739 114.999 10.9779 119.296 10.9779C120.128 10.9971 120.94 11.2426 121.643 11.6879C122.347 12.1333 122.916 12.7617 123.289 13.5059L123.341 12.5587C123.341 12.5587 123.247 11.4217 125.054 11.7054C126.861 11.9891 127.479 12.6974 127.428 13.2627L127.283 24.8467C127.524 27.3747 127.953 28.8275 129.229 28.7251C130.504 28.6227 131.496 26.6089 132.141 24.9342V24.3027L132.179 12.0019C132.197 11.8117 132.281 11.6336 132.415 11.4979C132.55 11.3622 132.727 11.2772 132.917 11.2574L134.396 11.4857C136.465 11.795 136.177 12.5843 136.177 12.5843V19.5347C137.713 14.8158 138.451 13.0153 139.147 11.8121C139.74 10.7881 141.674 11.4579 141.674 11.4579C141.674 11.4579 143.786 12.0211 143.808 13.9859C143.744 17.1945 144.2 22.419 144.2 22.419C144.2 22.419 144.281 22.5257 144.32 22.4894C144.341 22.4555 144.352 22.4163 144.352 22.3763C144.949 18.8197 145.989 15.3517 147.447 12.0531C148.211 10.6195 150.423 11.6371 150.423 11.6371C153.077 12.5459 152.717 14.1203 152.717 14.1203C151.934 27.6094 153.602 28.4606 154.588 28.5502C155.573 28.6398 156.092 27.3619 156.305 26.7582C156.518 26.1545 156.796 24.8254 156.936 24.3006C156.983 24.1516 157.073 24.0198 157.194 23.9219C157.316 23.8239 157.464 23.7642 157.619 23.7502C157.778 23.774 157.925 23.8482 158.039 23.9619C158.153 24.0755 158.227 24.2227 158.251 24.3817L158.236 24.4115ZM68.6996 14.0755C67.7716 14.1139 65.5849 14.707 65.1924 20.7955C64.7998 26.8841 66.4126 28.4457 67.7694 28.6249C69.1262 28.8041 71.5604 26.6195 71.6734 20.1555C71.7865 13.6915 68.6996 14.0755 68.6996 14.0755ZM87.7502 14.0755C86.803 14.1139 84.4265 14.9417 83.8889 20.8233C83.49 26.9758 85.1518 28.5673 86.5044 28.7529C87.8569 28.9385 90.2953 26.7262 90.466 20.1726C90.6366 13.619 87.7502 14.1075 87.7502 14.1075V14.0755ZM90.9076 32.947C85.5252 37.5977 85.058 40.9193 85.058 40.9193C85.058 40.9193 84.5246 43.6414 87.1166 43.7779C90.2313 44.0937 90.7561 40.3091 90.8372 36.9982L90.9374 32.9811L90.9076 32.947ZM120.454 14.291C119.526 14.3294 117.34 14.9225 116.947 21.011C116.554 27.0995 118.167 28.6611 119.524 28.8403C120.881 29.0195 123.315 26.835 123.428 20.371C123.541 13.907 120.454 14.291 120.454 14.291Z" fill="#16375F"/>
</svg>

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース（無料）

【IT道場】入校時0円！ 就職目的プログラミングスクール

エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

Twitterやってます！Follow Me！

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！

最近の投稿

【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 JS_uuid JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) py_csv_to_json PythonでCSVをJSONに変換する方法 py_csv_cut PythonでCSV・Dataframeを指定の行数まで切り取る方法 js_for_of JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 Python_VSCode VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法

前の記事

Nuxt_DomError
Nuxt.jsでDom系のエラーの対応方法(Reference…

次の記事

CSS の class名で wrapper と contain…
CSS_class_name