Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

忘れた頃にごく稀に使うことになるクリッカブルマップ。 レスポンシブでは設定したエリアがずれてしまうので『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 […]

先日Googleから、Googleアナリティクスの現行バージョン（ユニバーサルアナリティクスといいます）が2023年7月に廃止というアナウンスがなされました。 サポート自体が終了となるため、期間内に新バージョンのGoogleアナリティクス4プロパティに移行が必要になります。今回は、移行が必要かどうかの見分け方や、以降の方法を紹介します。 現行verと新verの見分け方 現在使用中のアナリティクスのプロパティが現行か新かを見分けるには、プロパティIDを確認します。 現行verプ […]

機能豊富なGoogle Analyticsですが、画面も複雑で、サイトに計測タグ仕込んだだけでそのままな場合も多いのではないでしょうか。 一段階ステップアップして、イベントトラッキングと参照元の機能を使用してみましょう。 これらを活用すれば、より深い分析が可能です。 イベントトラッキング イベントトラッキングとは？ イベントトラッキングを使用すると、サイト内にいるユーザーがどんな行動をとったかを知ることができます。 事例ページからお問合せのボタンをクリックした 特定のPDFを […]

特殊な形で画像を切り抜きたい時単純に1枚画像を用意することもできますが、例えば切り抜きたい画像が動的に変わる場合などはCSSで画像を自由な形で切りぬくことができるようにしておくと便利です。 今回はCSSで画像をマスクする方法をご紹介します。 mask-image プロパティ mask-imageプロパティを使うと、指定した画像の形で切り抜くことができます。 基本的にマスクレイヤーとして使用する画像はSVGなどのパスデータで用意するとサイズの変更もきれいにできます。 HTML […]

WEBサイトを見ていると例えばスクロールをしたときにヘッダーが追従してくる、といった動作はよく見かけると思います。 だいたいposition:fixed;等のcssとjs等の組み合わせをしていることが多いと思いますが、cssでposition: sticky;を使うとすぐに実現できます。 ヘッダーを追従させてみる 実際の画面をとりあえず見ていただくと早いかと思います。 DEMOを見ていただくとわかりやすいですが、スクロールをするとヘッダーがついてくるようになっています。 コー […]

IEがお役目を終えるということで、CSSでスクロールスナップが使用できるようになります。 これを使用すると、CSS数行で簡易的なカルーセルを実装できるようになります。 特にスマートフォンなどのタッチデバイスではJSでの実装とほとんど変わらないような操作感を実現できます。 ＜JSを使用しないスクロール例＞ スクロールスナップさせる スクロールをスナップさせるには、scroll-snap-typeとscroll-snap-alignを使用します。 なんとこれだけで、子要素の横スク […]

Photoshopなどのグラフィックソフトで使用する乗算やオーバーレイなどのブレンドモードですが、CSSでも使用することができます。 mix-blend-mode ブレンドモードを使用するには、前面に重なる要素に、CSSで mix-blend-mode を追加するだけでOKです。簡単ですね。 ＜HTML＞ ＜CSS＞ 画像と背景が重なるように配置し、div.background には背景色を付けました。 multiply で乗算表示になります。 ブレンドモード一覧 15種類の […]

レイアウトを組むのに便利な『flexbox』。 今回は『flexbox』と『margin: auto;』を使用していい感じにレイアウトを組んでみましょう。 左に3つの要素、右に1つの要素を置きたい このレイアウトだと左側の3つをさらにdivなどで囲み『justify-content: space-between;』を一緒に指定する方法などが考えられます。 ただその分余計な囲みが増えてしまう、ということでもあります。 そのため一番最後の要素（右側）の要素に対して『margin- […]

jQueryでアコーディオンを実現したい、ということはよくあると思います。 実現したいときは単純に『slideToggle』を使うのが早いです。 ただ、いろんな都合によりアコーディオンをcssの切り替え『toggleClass』で実現したいということがあるかもしれないです。 そんな時にちょっとだけ悩んだのでメモがてら書いておきます。 『slideToggle』を使ったアコーディオン まずは『slideToggle』を使ったスタンダードなアコーディオンです。 cssで要素を非表 […]

2021年現在、新規でWebサイトを作成する際はレスポンシブ対応するのがほとんどかと思います。 そんな時PCだけまたはスマホだけでjavascript(jQuery)の読み込みを行いたい時があるかと思います。 実はファイルに何行か追記するだけで簡単に切り分けができます。エラー回避やサイト軽量化のためにもやってみましょう。 ①画面サイズで切り分ける方法 画面サイズで切り分ける際はこのように記述します。cssのメディアクエリと同じようにmax-width: 〇〇pxのように切り分 […]

IE11でflexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならないという現象が発生します。 元のコード HTML CSS これを参考に修正していきます。 解決方法 解決には高さ指定をIEのみ通常のheightで指定したりtable要素にしたり…等色々あります。 が、flex要素をさらにflex要素で囲むと解決します。 修正したコード HTML CSS flexWrapを追加して、そこにdisplay: flex; […]

ここ最近は前以上にアニメーションをcssに頼るようになってきた気がします。 今回は主にhover時のアニメーションのコードを配布してくださっているサイトをご紹介します。 使用時の注意事項などは各サイトをご覧ください。 Hover.css お馴染みHover.cssです。嫌味がなく使い勝手のいいアニメーションがそろっています。 CSS ANIMO hoverとローディングのアニメーションがそろっています。 要素をクリックするとコードのコピーができます。hoverした時に下線を引 […]

cssアニメーションを使いたいけれど、細かく調整したりする時間がない！という時ありますよね…。 そんな時は『Animista』を使って気軽にcssアニメーションを使ってみましょう！ 早速使ってみよう ページを開くと、上にアニメーションの大まかな分類があります。 　BASIC拡大縮小や回転系のアニメーション 　ENTRANCES要素が表示されるときのアニメーション 　EXITS要素が消えてしまうときのアニメーション 　TEXTテキストのアニメーション 　ATTENTION要素が […]