HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選 - ICS MEDIA
テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつけてよりわかりやすくしたい場合や、サイト全体の雰囲気に合わせたい場合にちょっとしたアニメーションが効果的です。 今回はHTMLとCSSのみで作成できる、シンプルながら少し目を引くアニメーションをテーマに実装例を紹介します。 ▼今回紹介する実装例一覧 とくに、以下のようなデザイナー／エンジニアにとって参考になれば嬉しいです。 HTMLとCSSのみでどのようなホバー時のアニメーションができるのか知りたい 透明度の変化や、下線のつけ外し以外の実装例の引き出しを増やしたい ※今回の実装例では主にヘッダー／
【総まとめ】2023年世界で話題になったWebデザイン・ベスト50選
「このWebサイト、素敵。」と感じさせるモノとは、一体何でしょう。 それはデザインなのか、それとも機能性なのか、または「このフォント、配色が好き」といった特定のデザイン要素かもしれません。 ずばり、この問題の答えはポンと出せるほど単純ではなく、これらの要素を組みあわせることで、素晴らしいWebサイトは生まれます。 この1年間で、デザイン制作の参考にしたいWebサイトを２００以上紹介してきました。 製品やサービスを販売、紹介するサイトや、実験的なサイト、情報を提供する教育的なサイト、政治的なサイト、そして夢中になる体験型サイトまで、業種もさまざまです。 この記事では、デザインアイデアにしたり、トレンドを分析したり、２０２３年の振り返りに最適な５０のWebデザインを厳選してご紹介します。
CSSでスムーズなアニメーションを実現する4つの新しい機能
今年もCSSの進化が止まりません！ 先日紹介した表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今まではJavaScriptや複雑なCSSを使用しないと実装できなかった、スムーズなアニメーションを実現するCSSの4つの新しい機能を紹介します。 Four new CSS features for smooth entry and exit animations by Una Kravets, Joey Arhar 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに displayをキーフレームでアニメーションさせる 個別プロパティのトランジションを可能にする 最上位レイヤーとの間で要素をア
ここまでできる！CSS最新テクニックと書き方30選
ポップオバーAPI 最新版Chrome 114に搭載された新機能で、コンテンツの一番上に重ねて表示するUI「ポップオバー」。補足の情報やユーザーにアクションを促すことができます。 Introducing the popover APIでは、具体的な使い方や実装例が紹介されています。 範囲スライダーをCSSでカスタマイズ How to Create a Custom Range Slider Using CSSでは、モダンなCSSテクニックを使って、ネイティブHTMLの<input>要素だけで人目を引く、カスタム範囲スライダーを作成する方法が紹介されています。 See the Pen CSS only custom range sliders by Temani Afif (@t_afif) on CodePen.
Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | BUILD Journal
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
動くWebデザインの最新アイデア28個まとめ
ウェブサイトやモバイルアプリを魅力的にしたいときは、アニメーションを利用すると良いでしょう。 その理由は、ユーザーの注目を無意識に集め、美しさも表現できるから。 さまざまなデザイントレンドとしても、毎年選出されており、まずます需要が高まっています。 実際に、多くの最新ウェブデザインでも採用されており、アニメーションに特化したCSSライブラリも数多く公開されています。 ワンランク上のウェブデザインを作成したいクリエイターに、ぜひ参考にしてほしいアニメーションのアイデアを、まとめてご紹介します。 動くWebデザインの最新アイデアまとめ Daily UI “Luxury Interaction Concept” 高級車の販売を行う、インタラクティブで実験的なコンセプトページで、クリックに応じたコンテンツ遷移が心地よいつくりに。
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選 これまでの苦労が嘘のよう。新テクニックでデザインに差をつけよう 2022年は、CSSにとって過去最高の年になりました。 安定版ブラウザで、多くの新しいCSSプロパティやセレクタなどが対応となり、これまでは実装にJavaScriptなどが必要だったものも、CSSのみで表現できるようになっています。 ここでは、知っておくと便利な最新CSSテクニックや書き方をまとめてご紹介します。 「CSSって、こんなこともできるの?!」と思わず納得してしまう、驚きテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次 1. コンテナクエリ @container が全ブラウザ対応 2. CSSスタイルクエリの基本と具体サンプル例 3. グラデーション付き影のつくり方 4. どんな背景でも美しい影のつくり方 5.
流行先取り 注目の最新Webデザインおすすめ30選まとめ
「デザインのアイデアがなかなか見つからない」 「Webデザインの最新トレンドを知りたい」 「かっこいいデザインの見本サンプルが欲しい」 そんなときに目を通したい、旬のトレンドを取り入れた最新おすすめWebデザイン30選をご紹介。 国内外のウェブギャラリーでも取り上げられている、世界中からセレクトされたホームページやWebサイトばかり。 レイアウトや配色、フォントえらびなど、実用的なアイデアに困ったときに役立ちます。 流行先取り 注目の最新おすすめWebデザインまとめ 隅田川道中 ページ全体に広がる波紋エフェクトにはじまり、 和楽器集団による演奏など、一度見たら忘れなそうなサイト。コンテンツに進むにつれ音量がさがり、最後のフッターでふたたび最高潮に。 ノースマン公式サイト エレガントなフォント使い、 重なりのある自由なレイアウトなど、どれもサイト制作の参考になりそうな仕掛けがたくさん。 Ha
もっと早く知りたかった！便利な最新Web、オンラインツール30選
この記事では、「もっと早く知りたかった」と思ってしまう、便利な最新オンラインツールをまとめてご紹介します。 AIをフル活用した次世代ツールから、これまでの作業が嘘のように捗る便利なものまで、今後のワークフローを変えてくれそうなツールを中心に揃えています。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール 2. デザイン・配色ツール 3. モックアップ・アイコンツール 4. 面白・クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Webデザイン便利ツール 3D Perspective Glitch Hover Effect グリッチアニメーション中にピクセル化された画像を表示する、ユニークでたのしいホバーエフェクト。 Bike Demo Three.js マウススクロールに合
新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き
新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き こんな方法があったのか、思わず納得なCSSテクニックをご紹介 この記事では、ウェブ制作で積極的に活用したい最新CSSテクニックを、実例サンプルコードと一緒にご紹介します。 新しいCSSプロパティにはじまり、これまではJavaScriptが必要だったデザインも、CSSのみで実現できるようになっています。 普段からCSSを使いこなしているベテランデザイナーさんにこそオススメしたい、CSSの進化を感じるテクニックが揃います。 コンテンツ目次 1. ついにCSSコンテナクエリ利用可能に 2. グリッドに名前をつけてレイアウトを視覚化する方法 3. 長いテキストを短く省略する方法 4. transformプロパティが独立してより使いやすく 5. くるりと回転するアニメーション文字の作り方 6. :hasプロパティでAppleのO
クリエイティブスタジオ「HUG」のWebサイトのつくりかた｜MEFILAS
MEFILASのWebサイトの制作方法を事例から紹介する「Webサイトのつくりかた」シリーズも第五弾となりました！今回はクリエイティブスタジオ「HUG」のWebサイトがどのようにしてつくられたのかをご紹介します。 01. 案件概要クリエイティブスタジオ「HUG」代表のharu.さん率いる「HUG」は、習慣・常識・社会通念を新しい視点で見つめ直し、クライアントの課題に向き合うクリエイティブスタジオです。 EDのオンライン診療を提供する「Oops」のブランドディレクションや、”ムダかどうかは自分で決める。”のキャッチコピーが印象的な貝印「Pretty」のイメージビジュアル制作などを手がけています。 ブランドディレクションを担当された「Oops（ウープス）」また、クライアントワークの企画・制作だけでなく、アーティストのマネジメントや、「HIGH(er)magazine」「シアバター」を始めとする
これは便利！ありそうでなかった最新Web、オンラインツール36選
この記事では、「それ、何使ってるの？」と思わず聞きたくなるような、最新のWeb、オンラインツールをまとめてご紹介します。 めずらしいだけでなく、面倒で手間のかかる作業がほんの数クリックで完成の時短アイテムや、今までなかったけどあると便利なツールや素材を中心にセレクト。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. アイコンツール 4. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Make Way Grid Effect 一枚の画像を選択すると、他の画像が場所をゆずって、道を空けてくれるアニメーションエフェクト。 CSS Shadow Gradients 2色の配色によるグラデーションをつかった影、シャドウグ
【CSS】あっという間に悩み解決！新常識な最新テクニック24選
この記事では、これまでのCSSコーディングの悩みを解決できるかもしれない最新テクニック24個をまとめてご紹介します。 コピペで利用できるテクニックを中心に、実際の問題点や新しい解決案を、実用的なサンプル参考例を確認、プレビューしながら新しいCSSテクニックに触れてみましょう。 ただし、実験段階のプロトタイプも含まれているので、一部ブラウザでは非表示のケースもあります。実装するときは、対応ブラウザの確認を行いましょう。 前回までのお役立ちCSSテクニック集がこちら、少しずつ増えてます。 よくあるWeb課題をCSSで乗り切る！知っておきたい最新テクニック20選 よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 コンテンツ目次 1. background-imageによる実用アニメーションサンプル集 2. 無限
backgruond-imageを使ったCSSのアニメーションテクニック - ICS MEDIA
CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。 サンプルコードもありますので、実際の案件に取り入れてみたりbackground-imageの仕組みについて学んでみたりしてください。※サンプルコードはSass（SCSS）を使用しています。 サンプルを別ウインドウで開く コードを確認する background-imageとアニメーション タイトルと矛盾するようですが、background-imageプロパティ自体はanimationプロパティやtransitionプロパティを用いてアニメーションできません。もしbackground-imageプロパティをアニメーション可能に
よくあるWeb課題をCSSで乗り切る！知っておきたい最新テクニック20選
この記事では、日頃のホームページ制作で直面しがちな問題をCSSで乗り切る最新テクニック20個をまとめてご紹介します。 早く知っておけばよかったと思う、あまり知られていないCSSの実用的なテクニックが中心で、実際の問題ケースや参考サンプル用ソースコードを一緒に確認できます。 前回のお役立ちCSSテクニック集と合わせて確認してみてはいかがでしょう。 よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ コンテンツ目次 1. 画像の質感をアップしたい 2. グラスモーフィズム効果を表現したい 3. 入力フォームの使いやすさを改善したい 4. CSS Transformをつかった最新テクニック 5. 2022年に知っておきたい新しいCSSプロパティ 6. position: stickyの正しい使い方 7. レスポンシブ対応の区切り線のつくり方 8. するするとカーテンが降りてくるエ
2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2021年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2021 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 97位 Metallic Bordered Text with CSS Photoshopで作成し
Web制作を変える！2021年の便利オンラインツール・ベスト100選
この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ
わずかな時間で驚くほどWeb制作がはかどる最新オンラインツール43個まとめ
この記事では、Webデザイン制作を楽にする最新オンラインツール43個をまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Layout Patter
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AIで簡単に実装コードを生成できる！ テキストからCSSアニメーションのコードを生成できるツール -AI CSS Animations
