マークアップ

マークアップ

疑似クラス:has()を活用してみよう!

CSSの疑似クラスである:has()がようやく全ブラウザに対応してくれました! 「:has()ってなんだ?」という方もいらっしゃるかもしれません。 例えば通常は水色のボックスである『#abc』の中に『.xyz』が現れると『#abc』の背景をピンクにする、ということができます。 これまでは親要素に対して子要素が影響を与えることはJavaScriptなどに頼る必要があり、cssのみでは困難でした。 けれど:has()すべてを解決してくれます。 活用方法-チェックボックスの装飾 個 […]

マークアップ

【CSSのみ】スムーススクロール+アンカーリンク時の固定ヘッダーのずれを調整

今までの流れで、何となくスムーススクロールやアンカーリンク時の固定ヘッダーのずれをjsなどで処理していませんか? 実はCSSのみで対応できるようになっています。 主要なブラウザには対応していて、なおかつ簡単にできるので、ぜひ使っていきましょう。 CSSだけでスムーススクロールをする まずはcssだけでスムーススクロールをする方法についてご紹介します。 といっても1行書くだけです。 このようにhtml要素に対してscroll-behavior: smooth;と指定するだけです […]

マークアップ

実際のサンプルでアニメーション解説 [オープンキャンパス特設サイト]【CSS/JS】

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

マークアップ

実際のサンプルでアニメーション解説 [焼肉用のお肉ネット通販特設サイト編]【CSS/JS】

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

マークアップ

実際のサンプルでアニメーション解説 [ホームセキュリティ編]【CSS/JS】

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

マークアップ

実際のサンプルでアニメーション解説 [採用サイト編]【CSS/JS】

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

マークアップ

Intersection Observer APIを使って要素をアニメーションをさせてみる【初めての人向け】

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

マークアップ

スクロールバーをCSSで装飾しよう!【chrome・edge・Firefox】

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

マークアップ

hoverや時間経過などでグラデーションをアニメーションさせよう!

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

マークアップ

cubic-bezierを使ってアニメーションの雰囲気を変えてみよう!

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

マークアップ

色が敷かれてから画像やテキストが表示されるアニメーションを作ってみよう!

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

マークアップ

【css】borderにグラデーションをかけよう!

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

マークアップ

GoogleAnalytics(GA4)で性別や年齢などのユーザー属性が表示されない

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

マークアップ

『clamp()』関数を使ってフォントサイズを可変にしよう!

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

マークアップ

レスポンシブでのクリッカブルマップ対応は『image-map-resizer』を使おう!

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

マークアップ

iOSのSafariで100vhを使うとはみ出てしまうときはsvh,lvh,dvhを使おう!

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

マークアップ

【Grid CSS】grid-template-areasプロパティを使用して名前を付けて位置指定する

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

マークアップ

CSS Gridで実際にレイアウトを組んでみよう【初心者向け】

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

マークアップ

CSS Gridの初歩を知ろう【初心者向け】

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

マークアップ

CSSを使わないSVGアニメーションの作り方【キーフレームアニメーション編】

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

マークアップ

祝解禁!IEがなくなって使えるようになった便利なCSS 8選

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

マークアップ

【可変対応】中のテキストをはっきり表示させたまま、ブレンドモード(mix-blend-mode)を使おう!

『乗算』などを再現できる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を適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]

マークアップ

表示領域でスナップスクロールを実現!scroll-snap-typeプロパティを使ってみよう!

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

1 2 3 7