はじめに
学んだことを忘れないように備忘録として残しています
Webサイトでよく目にする、以下のようなセクションやコンテンツ区切りのウェーブをCSSジェネレーターを使って実装していきます。
今回使用するCSSジェネレーター
この記事ではGet Wavesというジェネレーターを使用していきます。
シンプルな波線のジェネレーターで、デザインのカスタマイズも可能です。色や波の形状を調整でき、SVG形式でダウンロードできるので、そのまま背景に利用できます。
https://getwaves.io/
手順
1.Get Wavesで波線を作成
Get Wavesを開いてページ上のスライダーやカラーピッカーを使って、波線の形や色をカスタマイします。
デザインが決まったら、「Export SVG」ボタンをクリックして、SVGファイルをダウンロードします。
2. SVGを表示させる
SVGはCSSでbackground-imageとして読み込む方法や、直接SVGのコードをHTMLに貼り付ける方法などがありますが、初学者にはimgタグを使うのがおすすめです。
方法は簡単で、上記1でダウンロードしたSVGファイルをimgフォルダへ移動して、imgタグで読み込むだけです。
<img src="path/to/your-wave.svg" alt="背景の波線">
まとめ
今回は、Get Wavesを使って簡単にウェーブデザインを作成し、Webサイトに実装する方法を紹介しました。
シンプルな操作でデザインをカスタマイズし、SVG形式でダウンロードできるため、誰でも手軽にオリジナルの背景が作れます。初学者にはタグでの表示が推奨されますが、今後CSSのbackground-imageとしての利用やHTMLに直接貼り付ける方法も試してみると、より柔軟に使いこなせるようになります。