パーツ番号 07-07-08 ・ CSSのみ

天気アイコンセット

晴れ・曇り・雨・雪・雷を表現したシンプルな天気アイコンの見本です。天気予報や生活情報のウィジェットに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="8" fill="none" stroke="#e0a63c" stroke-width="2"/><g stroke="#e0a63c" stroke-width="2" stroke-linecap="round"><line x1="20" y1="4" x2="20" y2="8"/><line x1="20" y1="32" x2="20" y2="36"/><line x1="4" y1="20" x2="8" y2="20"/><line x1="32" y1="20" x2="36" y2="20"/></g></svg>
          <svg viewBox="0 0 40 40"><path d="M12 24a7 7 0 0 1 1-14 9 9 0 0 1 17 3 6 6 0 0 1-2 11z" fill="none" stroke="#7a95ab" stroke-width="2" stroke-linejoin="round"/></svg>
          <svg viewBox="0 0 40 40"><path d="M12 20a7 7 0 0 1 1-14 9 9 0 0 1 17 3 6 6 0 0 1-2 11z" fill="none" stroke="#7a95ab" stroke-width="2" stroke-linejoin="round"/><g stroke="#3d6b8a" stroke-width="2" stroke-linecap="round"><line x1="14" y1="28" x2="12" y2="33"/><line x1="20" y1="28" x2="18" y2="33"/><line x1="26" y1="28" x2="24" y2="33"/></g></svg>
          <svg viewBox="0 0 40 40"><line x1="20" y1="6" x2="20" y2="34" stroke="#7a95ab" stroke-width="2"/><line x1="8" y1="13" x2="32" y2="27" stroke="#7a95ab" stroke-width="2"/><line x1="32" y1="13" x2="8" y2="27" stroke="#7a95ab" stroke-width="2"/></svg>
          <svg viewBox="0 0 40 40"><path d="M12 22a7 7 0 0 1 1-14 9 9 0 0 1 17 3 6 6 0 0 1-2 11z" fill="none" stroke="#7a95ab" stroke-width="2" stroke-linejoin="round"/><path d="M18 26l-3 6h5l-2 4" fill="none" stroke="#e0a63c" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/></svg>
        </div>

CSS

.d07-07-08 .row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
        .d07-07-08 svg{width:32px;height:32px}

クラス名 .d07-07-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。