コピペで使える！ CSS Animationだけで実現するキャラクターアニメーション - ICS MEDIA
みなさんは、CSSアニメーションどのように使っていますか？ ウェブサイトのちょっとした演出でCSSトランジションを使用している方が多いと思いますが、類似のCSSアニメーションはどういった使い道があるのかよくわかっていない方も多いのではないでしょうか。実は、CSSアニメーションを使うとキャラクターアニメーションを作ることができます。 今回はシンプルな変形アニメーションを組み合わせて、1枚の画像で実現できるキャラクターアニメーションを制作しました。オリジナルのキャラクターをアニメーションさせていますが、CSSのコードのコピー&ペーストで他のキャラクター（画像）にも簡単に適応できます。 商用・個人問わず無料で利用できるMITライセンスで公開していますので、ウェブサイトやコンテンツ制作に是非ご活用ください。 伸びるアニメーション 上方向に「ぷるんっ」と伸びるアニメーションです。scale()でタイ
HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選 - ICS MEDIA
テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつけてよりわかりやすくしたい場合や、サイト全体の雰囲気に合わせたい場合にちょっとしたアニメーションが効果的です。 今回はHTMLとCSSのみで作成できる、シンプルながら少し目を引くアニメーションをテーマに実装例を紹介します。 ▼今回紹介する実装例一覧 とくに、以下のようなデザイナー／エンジニアにとって参考になれば嬉しいです。 HTMLとCSSのみでどのようなホバー時のアニメーションができるのか知りたい 透明度の変化や、下線のつけ外し以外の実装例の引き出しを増やしたい ※今回の実装例では主にヘッダー／
CSSのみでノートのような罫線を実装する | Pulp Note
ノートのような罫線をCSSのみで実装します。昔は線の画像を使っておりましたが、background-image: linear-gradientを駆使すれば表現することができます。 CSSでテキストにノートのような罫線をつけることができます。これからは画像を用意しなくても大丈夫ですよ。行数が増えてもCSSが自動で罫線を引いてくれるので便利ですね。 .text { padding-right: 1.5em; padding-left: 1.5em; line-height: 3em; background-image: linear-gradient(transparent 0, transparent 97%, #ddd 100%); background-size: 100% 3em; } background-image: linear-gradientで罫線を実装します。transp
【html/CSS】tableの縦横を入れ替える方法
<style> table{ writing-mode: vertical-lr; } th,td{ writing-mode: horizontal-tb; } </style> <table border="1"> <tr> <th>都道府県</th> <th>県庁所在地</th> <th>人口</th> <th>面積</th> </tr> <tr> <th>北海道</th> <td>札幌市</td> <td>518万人</td> <td>78400㎢</td> </tr> <tr> <th>東京都</th> <td>新宿区</td> <td>1400万人</td> <td>2190㎢</td> </tr> <tr> <th>大阪府</th> <td>大阪市</td> <td>880万人</td> <td>1910㎢</td> </tr> </table> ただし、これだけでは子孫要素
CSSのみでアンカーリンクのスムーススクロールを実装 | Coding Methodology | CFニュース | CODING FACTORY - コーディング専門サービス
2022年6月15日にInternet Explorer 11のサポートが終了し、2023年2月14日にはInternet Explorer 11が完全無効化され、Microsoft Edgeへリダイレクト表示されるようになりました。 そのことから、Internet Explorerで表示が難しかったCSSプロパティやCSSの機能が積極的に使えるようになりました。 今回はCSSプロパティ「scroll-behavior」を使ってアンカーリンクのスムーススクロールを実装する方法と注意点をご紹介いたします。 CSS scroll-behaviorについて scroll-behaviorのプロパティ概要は以下の様になっています。 デフォルト値がautoで、スムーススクロール無しの値です。値をsmoothにすることでスムーススクロールが適用されます。
いざという時に使える7つのHTML&CSS Tips集vol.2 | BUILD Journal
いざという時のために覚えておくと便利なHTML＆CSS Tips集の第2弾です。何かで困った時に読み返してみてください。何かでお役にたてると思います。 グラデーションを使ったテキストアニメーション See the Pen Text gradient animation by BUILD (@buildstd) on CodePen. テキストカラーにグラデーションを使ったアニメーションを施す方法。 テキスト要素の背景にanimation プロパティでアニメーションさせたグラデーションを設定し、background-clip: text で背景グラデションをテキストのかたちに切り抜くイメージです。color: rgba(0 0 0 / 0) でテキストカラーを透明にしないと背景グラデーションが表示されないので指定します。 CSSp { color: rgba(0 0 0 / 0); -web
レスポンシブ対応のレイアウトを実装する最新テクニックを解説、モバイルファーストとデスクトップファーストの現状
モバイルファーストとデスクトップファーストの現状、それぞれのワークフローを解説し、今日のレスポンシブ対応のレイアウトを実装するより良いアプローチ方法について紹介します。 ビューポートサイズとは関係ないすべてのデバイスで共通の基本スタイルを優先的に記述する方法、メディアクエリを使用しない方法、モバイルとデスクトップの違いを考慮する必要がない方法など、最新の実装テクニックも解説します。 The State Of Mobile First and Desktop First by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モバイルファースト・デスクトップファーストとは何を意味するのか モバイルファーストのワークフローはどうあるべきか デスクトップファーストのワークフローはどうあるべきか スコ
埋め込んだiframeのサイズを調整 - transformで拡大縮小
Amazonアソシエイトのバナーをなんちゃってレスポンシブ対応させたけれど、設置する場所の親要素にピタリと収まるサイズがなかった。 小さすぎるか、ちょっと大きい。 小さいバナーはまあ我慢するとして、ちょっと大きいバナーは設置してはみ出した部分を「overflow: hidden;」としてお茶を濁した。 しかし、どうも気持ち悪い。 バナーのデザインによってはトリミングしたことで情報が伝わりにくくなることもある。 バナーサイズに合わせてサイトのレイアウトを決めてしまえばいいのかもしれないけれど、そのサイズのバナーが作られないこともあるし、そうなったら腹立たしいことこの上ない。 いろいろ考えてiframeの埋め込み元の要素を埋め込み先で調整しようと思ったけれど、それはできない。 ということで、「transform: scale();」を使用して全体を縮小させるという、シンプルかつ強引な方法で解決
CSS見出しデザイン WEB制作・ブログで使える
<html style="max-height: 100%;"><head><script id="js-section"> </script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-
様々な下線を引いたCSS見出しデザイン34選
CSSで下線を引いた見出しを34個、実装しました。 実線を引いただけのデザインから、ストライプや線の一部だけ色を変えたもの、グラデーションをかけたものなど様々なパターンで装飾しています。 気に入った見出しがあればコピペしてブログやホームページなどでご活用ください。
リストを左揃え中央寄せにするcss３選 | 五平餅くんの部屋
こんにちは。五平餅くんです。 テキストを左揃え中央寄せにしたい場面って実務では結構あると思います。 例えばこんな感じです。 しかし、text-align: leftにすると左よせになってしまいますし、そこにmargin: autoを指定してもうまくいきません。 ↑text-align: leftとmargin: autoしてもうまくいかない例 今回はテキストは左揃えだけど、中央に寄せたい時のcssを3パターンご紹介指定と思います！ 一番一般的な方法：親要素にtext-align: center まずは一番一般的な方法です。 親要素にtext-align: centerを指定し、子要素にtext-align: leftとdisplay: inline-blockを指定します。 <div id="content"> <div class="inner"> <div class="text-ce
Web Trends Lab.
アンカーリンクを使って、ナビゲーションメニュー等でページ内スクロールさせること、あるかと思います。 その際にあるあるなのが、スクロールしたときに見出しが隠れること😅 今まではjsやjqueryでスクロール位置を調整していました。 1pしかないサイトの場合は問題ないのですが、複数ページあるサイトで他のページからページ内スクロールがあるページにhttp://○○#hoge等で遷移してきた際にはうまく調整できないという問題点がありました。 そんな時に簡単にできるのが、cssの:beforeを使って見えないところに空間を作る方法です。
モダンCSSによる絶対配置（position: absolute;）の削減
テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめに ケース1: カードのオーバーレイ ケース2: カードのタグ ケース3: ヒーローセクション ケース4: display: contents; ケース5: カードアイテムの並べ替え ケース6: 中央寄せ ケース7: 画像のアス
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
insetで中央寄せ
https://twitter.com/tsurupiyooo/status/1731501667739369910
【CSSアニメーション】コピペでOK！フェードインでふわっと表示する方法
WordPress│ブロックにふわっとフェードインアニメーションを追加する方法 | WAZA │ WordPress・SWELL専門の技術サイト
CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】 | 第0版
ズームアウトしながら画像表示させるアニメーションをCSSで実装する｜にんじんみるく
