統計データマーケティングお役立ちレポート全てのカテゴリを見るferret記事をさがすCMS・Webサイト制作CSSCSSのみ!動きのあるデザインをコピー&ペーストで実装できるサンプルコード集CSSのみ!動きのあるデザインをコピー&ペーストで実装できるサンプルコード集2018年05月31日CSS会員登録する自由度の高い表現が可能になったCSS3は、簡単なアニメーションや動きをつけることもできます。今回は、CSSだけでできる動きのあるデザインをピックアップしてご紹介します。フロントエンジニアの方にとっては、CSSテクニックのレパートリーが増えるだけでなく、コピー&ペーストで手軽に利用できますので、動きのある表現をしたいという時に取り入れてみてはいかがでしょうか。CSSだけで表現できる動きのあるテクニックまとめ1.CSS3フルスクリーン背景スライドショーDigitalSkillCSSのみでフルスクリーン背景のスライドショー、タイトル表示をおこなうチュートリアルです。アニメーション部分は、複数パターンのサンプルデモを公開しています。Effectscodropsクリックすると、フルスクリーンのオーバーレイがかかるエフェクトのサンプルです。コーナー、スライド、小さな箱で埋め尽くすようなものまで様々なスタイルの動きを用意しています。3.スクリプト無し、動画をページの背景いっぱいに表示する方法colissjQueryのようなスクリプトを使わずとも、CSSだけで背景全体に動画を表示することが可能です。今主流のレスポンシブデザインにも対応していますので、動画を使いたいと思ったらぜひ取り入れたい方法となっています。Ideas画像にマウスオーバーすると、キャプションを表示してくれるCSSのサンプルです。エフェクトにはそれぞれLily、Honey、Sadieといったネーミングがついていて、名前の雰囲気に合わせて色、デザインが変わるようになっています。手軽に画像をお洒落にしたい時にぴったりです。20NxWorldCSSでエフェクト付きキャプションを表示する方法20個を紹介しています。画像のマウスオーバー時はもちろん、様々なシーンで使いやすい方法です。動きのバリエーションが豊富ですので、躍動感のあるデザインにすることができます。6.iHoveriHover円形の画像にマウスオーバーすると、キャプションとともに動きのあるエフェクトをかけるスタイル一覧です。全部で15個ものスタイルを一気に紹介しています。Effectscodrops入力フォームに素敵なエフェクトをかけるサンプルコードです。文字を入れようとクリックすると鮮やかな色のラインが横から飛び出してくるスタイルのほか、複数のスタイルをデモ付きで紹介しています。Stylescodrops矢印を取り入れたナビゲーションスタイルです。スライドショー、ギャラリーに使えるエフェクト、スタイルが揃っています。CSSCODEPENホバーすると、パネルの色が変わり拡大表示するという動きです。料金表、プラン一覧などを掲載する時に使えるテクニックです。label)CODEPEN各色のタブをクリックすると、横方向にスライドしながら色が切り替わるアニメーションです。見た目のインパクトがあるのはもちろん、コンテンツを見やすくする効果を得ることができます。hoverCODEPENマウスカーソルをメニューの文字に乗せると、上からスライドしてラインが引かれるアニメーションです。シンプルな動きで、取り入れやすくなっています。ListCODEPENスクロールに合わせて、中央の要素が変化するユニークなリストです。移動した位置の背景色、文字を表示するようになっています。scrollCODEPENスクロールすると、その位置のコンテンツに合わせて中央部の背景色が変わります。サンプルのような全体に画像を使っているデザインに取り入れると、それだけで見た目をぐっと印象的にしてくれるテクニックです。SCSSCODEPENCSSで表現した10種類のテキスト向けホバーエフェクトを紹介しています。広がる動きから括弧で囲むようなもの、文字に合った要素が出てくるものまで様々です。文字をちょっと装飾したい時に便利です。LogoCODEPEN小さな四角を組み合わせて表現した文字にマウスカーソルを重ねると、文字が弾けるというユニークなエフェクトです。弾けた文字は自動的に元の文字に戻ります。クールなデザインにぴったりな動きです。FlipCODEPEN文字が入ったピンク色のキューブにマウスカーソルを乗せると、くるっと回転します。可愛らしい動きで、ガーリーなデザインやワンポイントに重宝します。LettersCODEPENゼリーのように文字がぷるるんと揺れるテキストエフェクトです。CSSだけで実装しているとは思えないほど、スムーズでユニークな動きが素敵です。テキストメインのデザイン、見出しデザインにこだわりたいという時に活躍します。50NxWorldHTML+CSSのみで実装可能な、見出しデザインのサンプルコードを50個まとめた記事です。大半が複数行の見出しにも使えるシンプルなコードとなっているため、自分好みにカスタマイズしやすくなっています。数が豊富で様々なスタイリングができますので、見ておいて損はありません。Css3CODEPEN多種多様なエフェクトをCSS3で表現したサンプルです。枠が現れるもの、影が出るものといった動きをつけることができます。EffectsCODEPENボタンにマウスカーソルを合わせると動く、エフェクト5種類を掲載しています。輝くもの、ボタンをぐるっと囲うものなど、どれも実践的かつシンプルで使いやすい動きですので必見です。ButtonCODEPENあまり見かけない特徴的な動きを表現できるCSSサンプルです。枠のみデザインしてある青いボタンにマウスカーソルを合わせると、泡のようなものが出てきてボタン全体をうめつくします。EFFECTScodrops落ち着いたデザインに合いそうなボタンスタイル、エフェクトを掲載しています。どれも主張しすぎない効果ばかりですので、取り入れやすい印象です。Effectscodropsミニアイコンに使える、シンプルな動きのCSSサンプルです。全部で22タイプの動きを用意しています。定番のものからちょっと個性的な動きまで収録しています。ButtonCODEPENボタンクリックから読み込み完了まで、一連の流れにアニメーションをつけるサンプルです。シンプルなミニマルデザインで、そのままでもあらゆるホームページに使えます。ButtonCODEPENハートのボタンにマウスカーソルを乗せると、横に伸びてテキストを表示するアニメーションです。お気に入りボタンとして使用することを想定してデザインされています。ButtonsCODEPENマウスカーソルを合わせると、イラスト入りアイコンがくるっと回転するアニメーションのサンプルコードです。回転と同時に色、影の変化もあり、アイコンに立体感が出ます。27.購入ボタンを押すと美しく梱包してくれる見て楽しい触って気持ちいい購入ボタンの実装ホームページを作る人のネタ帳まるでギフトを実際に包装しているかのような、独特な動きが実装できるサンプル紹介です。ネットショップを運営している方にぜひオススメしたいエフェクトとなっています。EffectsCODEPENCSS3で実装した、16種類のボタンエフェクトのサンプルです。ボタンにマウスカーソルを合わせるとわずかな変化があり、動きのあるデザインにしてくれます。29.CSSのみでボーダーをスタイリッシュにアニメーションさせるQiitaマウスオーバーで四方から線が伸びる、スタイリッシュでクールなアニメーションです。CSSだけで手軽に実装できます。HighlightCODEPENマウスカーソルに沿って、テキストをハイライト表示してくれるエフェクトです。CSSで動きをつけるだけで、文字だけでのデザインでもかっこよく仕上がります。Effectscodropsクリエイティブにしてくれるリンク向けエフェクトのサンプルです。全部で21種類を収録しています。メニューに動きをつけたい時にぴったりです。まとめ以上、CSSだけで表現できる動きのあるテクニックをご紹介しました。テキストから画像、ボタンの装飾まで、あらゆるエフェクトがCSSだけで表現できます。紹介先ページのサンプルコードをコピー&ペーストでそのまま使うこともできますし、コードを確認しながらCSSを学んでみるといった使い方もできます。詳しい解説つきのサンプルもありますので、読むだけでも参考になるでしょう。CSSに触れたことがないという方も、これを機にデザイン制作に生かしてみてはいかがでしょうか。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るタイトルホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。詳しく見るナビゲーションナビゲーションとは、もともと「目的地までの経路」や「道順案内」を意味する英単語です。インターネットの分野では、ホームページにある主要コンテンツをまとめたリンクを指します。これがあることで、ユーザーは目的のページがどこにあるかを短時間で見つけることができます。検索エンジンのクローラー(検索ロボット)に対して、効率的にサイト内を巡回させるという効果もあります。ナビゲーションには「グローバルナビゲーション」と「ローカルナビゲーション」の二つがあります。詳しく見るコンテンツコンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。CD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。詳しく見るクロールクロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。詳しく見るクロールクロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。詳しく見るコンテンツコンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。CD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るテキストテキストとは、純粋に文字のみで構成されるデータのことをいいます。太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。詳しく見るテキストテキストとは、純粋に文字のみで構成されるデータのことをいいます。太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るテキストテキストとは、純粋に文字のみで構成されるデータのことをいいます。太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。詳しく見るHTMLHTMLとは、Webページを記述するための言語です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るテキストテキストとは、純粋に文字のみで構成されるデータのことをいいます。太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るテキストテキストとは、純粋に文字のみで構成されるデータのことをいいます。太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るリンクリンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るテキストテキストとは、純粋に文字のみで構成されるデータのことをいいます。太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。「Pardotユーザー会」が国内最大級のMAユーザー会へと成長した理由マーケティングオートメーション(MA)ADCMS・Webサイト制作Webサイト制作でよくある失敗例5選。プロのディレクターが教える処方箋とはCMS・Webサイト制作ADマーケティングオートメーション(MA)伝達から会話の時代へ。AI時代を一足先に予習する「マーケティングの練習問題」マーケティングオートメーション(MA)BtoBマーケティングのノウハウ資料をダウンロード!基礎から4ステップで実践まで!BtoBマーケティング実践ガイド(無料)BtoBマーケティング実践ガイドは、BtoB事業のマーケティングのノウハウを網羅的かつ体系的にまとめたものです。基礎から応用まで4つのステップでマーケティングが実践できるBtoBマーケターの永久保存版です。株式会社SoLabo「0→1」「1→10」がどちらも叶う。株式会社ベーシック【求人】サービス価値を高め市場を創造。編集部厳選!最新情報をお届けもう一度読みたい記事をブックマーク実務に役立つ資料をダウンロード無料会員登録会員ログインこの記事を書いたライターferret編集部ferret編集メンバーが不定期で更新します。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。プロのディレクターが教える処方箋とはAD記事を作っているのにサイト流入が足踏み・・・・・・。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。PIECE』を超える異例の売上。人気記事をもれなくチェックSNSで話題!BtoBビジネスで勝てるマーティングのノウハウを1冊の資料にまとめました。