コピペで使えるCSS【メニュー・ボタン・吹き出し】

CSS
スポンサーリンク
Toshi
Toshi
コピペで使えるCSSということで今回は、メニューボタン吹き出しを作ってみました!誰でもコピーして使えるため、ぜひWebデザインに使っていただけたらと思います。

今回解説していく内容は以下です!

 本記事の内容

・コピペで使えるCSS
・ハンバーガーメニュー
・ボタン見出し
・吹き出し
・番外編:待機アニメーション


スポンサーリンク

コピペで使えるCSS

コピペで使えるCSSということで、はじめにこの記事の使い方について説明します!まずは、Resultでデザインを確認しHTML」「CSSを確認します。

Result

HTML

CSS

もし使いたいデザインがあれば、HTML」「CSSをコピーして使いましょう!ということでさっそくデザインを見ていきましょう!

ハンバーガーメニュー

ハンバーガーメニューとは三本線のナビゲーションメニューですコピペで使える、ハンバガーメニューを作成してみました。レスポンシブデザインでよく見るデザインですよね!

See the Pen ハンバーガーメニュー by 平野寿和 (@pdxukuen) on CodePen.

このホームページの現在の携帯で見たときのメニューはこんな感じですが、ハンバーガーメニュー風のiconが使われていることがわかりますよね!

うまくこのCODEを使ってメニューをカスタマイズしましょう!

ボタン見出し

押したくなるボタンを設置したいですよね

コピペで使えるボタン一覧を作ってみました。どんなWebサイトでもボタンデザインは必要ですよね?

See the Pen ボタン by 平野寿和 (@pdxukuen) on CodePen.

カッコイイボタンデザインで他のサイトと差をつけましょう!

吹き出し

吹き出しで使えるCSSということで、記事をインタビュー風にしたい場合は吹き出し等を使用してみましょう!

See the Pen 吹き出し by 平野寿和 (@pdxukuen) on CodePen.

番外編:待機アニメーション

ちょっと記事の内容が薄くなってしまったので、待機アニメーションのCODEも記載しておこうかと思います!

See the Pen 待機アニメーション by 平野寿和 (@pdxukuen) on CodePen.

これは、CSS3で作っています。こういったアニメーションは  js、JavaScriptでも作成が可能です。jsを使って作りたい場合はJavaScriptのライブラリーであるAnime.jsを確認してみてください。

まとめ

Toshi
Toshi

いかがでしたか?コピペで使えるCSSということでメニュー・ボタン・吹き出しについて少しCODEを書いてみました!ぜひ参考にサイトや記事をデザイン綺麗にしてみてください

コメント