WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した『受験生向け女子大学のオープンキャンパス特設サイト』のサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。 これを使うとスクロールをして表示領域に入った時にイベ […]

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、[焼肉用のお肉ネット通販特設サイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから 動画再生 メインビジュアルで動画を再生させています。 JSなどで再生させる方法もありますが、今回はCSSだけで対応してみます。 HTML CSS とりあえずvideoタグで動画を設置します。 #mainVisualで大元を括ります。 […]

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、ホームセキュリティサイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。 これを使うとスクロールをして表示領域に入った時にイベントを発生させることができます。 一緒にjqueryの読み込みも […]

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成したサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。 これを使うとスクロールをして表示領域に入った時にイベントを発生させることができます。 一緒にjqueryの […]

今回はIntersection Observer APIを使用してのアニメーションの方法をご紹介します。 正直この記事を書いている私も今手探りの状態なので、完全に初心者の方向けの記事です。 一緒に勉強していきましょう。 Intersection Observer APIってなに？ まずIntersection Observer APIってなに？という方もいると思います。 日本語交じりで言うと『交差オブザーバー』。 上記仕様書から抜粋すると 交差オブザーバー API (Inte […]

CSSでのスクロールバーの装飾。 以前はchromeとあたりの対応だけだったのが、いつの間にかFirefoxも対応していたので今更感もありますがまとめておきます。 chrome・edge・safari まずは手始めにchrome・edgeの方法をご紹介します。 See the Pen Untitled by kkdd (@kk8kk) on CodePen. コードとしてはこんな感じです。注釈で書いてある通りですが ::-webkit-scrollbar ここでスクロールバー […]

webサイトのサイトデザインでもよく使うようになったグラデーション。 例えばボタンに使った時にhoverしたとき、背景に使用したときなどにグラデーションの色をアニメーションさせながら変化させることができます。 hoverしたときにグラデーションが動く hoverしたときにグラデーションが左の方に流れていくようなイメージです。 それでは実際のHTML・CSS、動作を見てみましょう See the Pen グラデーションボタン by kkdd (@kk8kk) on CodePe […]

cssをよく使う人なら既におなじみ、transitionプロパティによるアニメーション。 例えばhoverをしたとき、スムーズに画像を拡大等してくれます。 コードの例 使用比較 See the Pen デフォルトアニメーション by kkdd (@kk8kk) on CodePen. これでもアニメーションが滑らかになって十分ではあるのですが、アニメーションをがっつり使うならcubic-bezierというイージング（動きの加減速）をさらに細かく自分で指定できる関数を使用した方 […]

Webサイトを見ると最初に色が敷かれてから画像などが表示、そのあと敷かれた色は非表示に…というアニメーションをよく見かけると思います。 言葉にするとややこしいですが図にすると下のような感じです。 これは、CSSのアニメーショと少しのjsで対応できます。 早速作り方の詳細を見ていきましょう。 実際にアニメーションを作ってみよう とりあえず実際に作成したデモと、これから使用するコードをまとめておきます。 js CSS HTML 上記のものを使用して解説していきます。 jquery […]

borderにグラデーション、いざやってみようと思うとあれ？borderプロパティに対してグラデーションをかけたらいいのかな？と少し戸惑います。 ちょっとしたコツさえつかめばすぐに再現できますので、ためしてみましょう！ 実際にやってみよう というわけで実際にやってみましょう。 See the Pen グラデーションborder by kkdd (@kk8kk) on CodePen. はい、できました。 cssだけで見てみましょう。 まずは通常のborderを指定します。ベー […]

Google AnalyticsがGA4にアップデートされてから、デフォルトの状態では性別や年齢などのユーザー属性は取得できないようになりました。今回はその設定や手順を紹介します。 もしまだGA4に移行していなければ、ぜひこちらもご確認ください。 Googleアナリティクス現行verが2023年7月廃止！新verに移行する方法を解説 GA4はデフォルトではユーザー属性が取得できない 以前のGoogle Analyticsでは性別や年齢のユーザー属性が自動で集計されていましたが […]

様々なデバイス対応をしなければいけない昨今、フォントサイズの指定は悩みどころだったりしますね。 そこで『clamp()』関数を使用すれば1行でフォントサイズの最小値、基準値、最大値を指定することができ、使いようによってはメディアクエリで細かく指定する手間が省けます。 clamp()を実際に使ってみよう では実際の挙動を見てみましょう。 例えば2vwを基準値としたいとき、PCぐらいの表示だと大きすぎるので最大値を20pxに、スマホぐらいの表示だと小さくなりすぎないように最小値を […]

忘れた頃にごく稀に使うことになるクリッカブルマップ。 レスポンシブでは設定したエリアがずれてしまうので『image-map-resizer』というjsに頼ります。 jQuery非依存で結構簡単に導入できます。 画像とHTMLを用意 とりあえずクリッカブルマップに使用する画像を用意します。 HTMLについては『HTML Imagemap Generator』さんを使用します。 画像をドラッグ&ドロップしましょう。 あとは右側のツールを使って図形をなぞるだけです。大変便 […]

iOSで100vhを使った場合、大きいviewportを基準にするため、小さいviewportの時はアドレスバーの分はみ出てしまったりステータスバーで予想外に隠れてしまったり…ということがあったりしますよね。 そんな時は新しい単位『svh』『lvh』『dvh』を使いましょう。 ちなみにこちらはiOS15.4以上から対応している単位なのでandroid対応も含めご注意ください。 『svh』について 『svh』では小さいviewportの方に合わせてくれます。 たぶんsmall […]

前回はGrid CSSの『grid-row』『grid-column』を使用してでレイアウトを組んでみました！ 今回はそこから応用的なことをしていきましょう。 グリッド領域に名前をつけて、表示場所の指定に使用する 今回はグリッド領域それぞれに名前をつけて表示場所の指定に使用する方法をご紹介します。 （ちなみに『グリッド領域』の概念についてはこちらをご参照ください） いまいち最初はピンとこないと思いますので実際の画面などを使いながら説明していきます。 See the Pen G […]

前回初歩をご紹介したCSS Grid。 今回はもっといかにもグリッドレイアウト、という感じのことに挑戦したいと思います。 グリッド線の定義を知ろう まずはグリッド線の定義を知りましょう。基本的にはy軸、x軸的な考え方です。 y軸＝row x軸＝column として定義していきます。 上の画像を見ると要素の区切りになるようなところに数字が振ってあるかと思います。 『column』『row』それぞれ振っている数字を使うことで、うまくレイアウトをしていくことができます。 定義を利用 […]

これまではIE対応もそこそこ必要・flexboxでなんとなくこと足りていたのでふわっとした知識だった『CSS Grid』。IE対応も無事なくなったのでこれを機に知識を少しずつ入れて模索中です。 基本的な部分を紹介するので、勉強中の方は一緒に頑張りましょう。 ボックスをグリッドで並べてみる とりあえず基礎的な感じで、ボックスをこんな感じでグリッドで並べてみます。 See the Pen CSS Grid by kkdd (@kk8kk) on CodePen. 基本のcssを使 […]

SVG画像をアニメーションさせる時は、CSSを使用するのが一般的かと思いますが、SVGファイルに直接記述してアニメーションさせることもできます。 SMILという名前の、SVGのアニメーション機能です。IEでは使用できなかったため、使いづらかったのですが、今後は気後れすることなく使用できます。 SMILにはざっくり3種類のアニメーションがありますが、複雑なのでまずは簡単なキーフレームアニメーションから、早速試してみましょう。 静止画のSVG アニメーションを作成する前に、まず静 […]

2022年6月16日、IEのサポートが切れました。フロントのエンジニアにとっての念願が叶った、記念すべき日です。IE6の頃から苦しめられてきた私ももちろんのこと浮かれています。 ただ、IEを除外することによって使用できるCSSが大幅に増え、勉強しなければならないこともまた増えました。少しずつ慣れていきましょう。 今日は使用できるようになったCSSで、頻度が高そうなものからいくつかご紹介したいと思います。 object-fit 今までは、画像をアスペクト比を維持したまま領域一杯 […]

『乗算』などを再現できるcssのブレンドモード（mix-blend-mode）。 大変便利なのですが、背景色だけ乗算をして文字はそのまま…ということが工夫をしないと地味に難しかったりします。 上の画像のように表現をしたかったのに、何も考えずに背景色と一緒にブレンドモード（今回は乗算）を設定すると以下のような感じになってしまいます。 See the Pen ブレンドモード（テキストが埋もれる） by kkdd (@kk8kk) on CodePen. 要はテキストも一緒に乗算に […]

サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcssの方を解説していきましょう。 HTML HTMLの方では上部に背景画像を置くエリア『.ma […]

例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]

スクロールをしたとき、要素の区切りのところで止まってほしいなあなんてことはないでしょうか。 そんな時はCSSのscroll-snap-typeを使うと、特に細かいこだわりさえなければjsに頼らなくてもあっさりと実現できます。 いまいち挙動がわからないかもしれないので、実際に見てみましょう。 縦スクロールをしてみる See the Pen Untitled by kkdd (@kk8kk) on CodePen. ちょっとずつ要素を縦スクロールするとわかりやすいと思うのですが、 […]

CSSのアニメーションを作成してまとめてみました。 今回は単純なテキストに対してのアニメーションになります。 ちなみにaタグのカラーやtext-decorationについてはあらかじめ調整しておいてください。 アニメーションの一覧は下のDEMOに置いておきます。 下線系 左から下線が現れてカーソルを外すと左側に消える サンプルテキスト HTML CSS ::afterで作成した下線をhoverしたときにwidth: 100%;にする、という割と単純なアニメーションです。 左か […]

WEBページの要素で、斜め方向にカットされたデザインを見たことがあると思います。 これを実際にレスポンシブでコーディングするとなると、工夫が必要です。 （筆者は過去、斜め画像を用意してbackgroundに配置したところ、超ワイドディスプレイで想定外の表示になってしまったりと、ため息をついた覚えがあります） 今回はCSSのclip-pathを使用して、手軽に斜めのデザインを追加してみましょう。 clip-path 斜めのデザインを作るには、CSSプロパティのclip-path […]