Web製作

GA4でクライアントID取得したい（analytics.jsからgtag.jsへの移行の場合）

先日、前々から言われていたユニバーサル アナリティクスの終了の日がついにアナウンスされました。 「うちもいよいよGA4移行か・・・」となったわけです。 ユニバーサル アナリティクスのしかもanalytics.js版でクライアントIDの取得を行っているのですが、GA4でも取得できるのかなと思って探していたら様々な取得パターンをまとめた記事がありまし……

続きを読む

funnydreamer

IE 11やIE 10でinputタグやtextareaタグにplaceholderがある時に変なタイミングでoninputイベントが発火する件の解決方法

遭遇 今まで、タイトルの状況に遭遇した事が無かったのです。年に1回くらいはフォーム関連のスクリプトは書いていたのに、なぜ今更と思ったんですが、良く考えるとjQuery使用していたり、IEを対象にしていないサイトだったりだったので、遭遇しなかったんだと思います。しかし、昨年辺りから「普通のサイトでも脱jQueryしたい」と思ってVanilla JSでコー……

続きを読む

funnydreamer

HTML5のCanvasでのグロー表現を使って花火っぽい何かを打ち上げる

もともとグロー表現が好きなのもあり、canvasでグロー効果ってどうやるんだろうって始まったのが2、3年くらい前でした。 いろんなコードを見てても、決定的な参考例が中々見つからずだったのですが・・・・その後も「そういえばグロー効果を探さなきゃ」と思い出す度に、インターネット上を飢えた狼のように探してたら、以下の記事を見つけることができました。 h……

続きを読む

funnydreamer

JavaScriptでSVGのpathをアニメーションする

以前どこかで見たSVGのパス（path）アニメーションがずーっと頭に残っていて、当時は作ってみたいと思っていたものの長い間放置していました。ふと、実装してみたくなったので、試行錯誤してみました。その結果が以下です。 See the Pen SVG Path Hover Animation by Shunichi Fujita……

続きを読む

funnydreamer

dlタグでflexレイアウトを使って困った時はdivが良い？

自分は、「W3C準拠を完全に守る」というタイプではなく、「ある程度、融通効かせてもいいんじゃないの？」というタイプの人間ですが、なるべく文章構造的に正しくするようには努めています。 そんな中で、これdlタグで作った方がいいようなという状況も多々あるわけですが、先日、仕事で行った実装の中で、flexが良いよなと思って、displayにflexを設定したと……

続きを読む

funnydreamer

CSS3のflexでspace-btweenを使うと最後の行で変になる

古いIEのサポートの切って、最近だと、flexを使う機会が多くなってきています。大変便利ですが、justify-contentのspace-betweenやspace-araoundを使って、4列とかにした時に、最後の行が、２、３個の要素しかない時に間がスカスカになったりしちゃいますよね。 こういう時だけは、左寄せにして欲しいんですがtext-align:……

続きを読む

funnydreamer

英語でWebフォントの組み合わせを考える時に参考になるサイト

前々職では、デザインをしたりしていたんですが、もともとコーディング畑で仕事をしていたので、デザイナーとしての能力はやはり力不足だなと転職活動を通じて痛感してました。デザインの基本みたいなのは本や記事を読んだりしていて理解しているつもりではありますが、ノンデザイナーから抜け出せるかどうかっていうレベルだと思います。インハウスといえど一応次の会社での職種はWeb……

続きを読む

funnydreamer

zoomした要素の中でzoomした要素の高さを取得しようとしたら

以前のプロジェクトで、訳あってレスポンシブとか使えないので、<html>にzoomを指定して、どんな機種でも画面幅にあわせるようにzoom値を変更する処理というのを行っていました。
さらにその中で、そのページをどうしても画面内に収めたいという仕様が降りてきました。イメージとしては、以下のような感じ。
<html&……

続きを読む

funnydreamer

Photoshopの画像アセット機能で画像解像度を変更後の生成画像が見切れたりしてしまう

Photoshopの画像アセット機能は便利ですよね。一度使ったらスライスを多用していた頃には戻れません。スライスを何枚も引いていたのは、もう遠い過去です。
そんなアセット機能ですが、ファイルメニューの「イメージ」>「画像解像度」で、画像解像度を変更した後に、画像アセットで生成される画像が画像解像度変更前のサイズで切り出されて見切れてしまうことが……

続きを読む

funnydreamer

CSSで子要素の高さが親要素に収まる時は高さ100%、超える時は可変にしたい

コンテンツの最低限の高さを100%として、 子要素がその高さより大きくなる時は、その大きさに合わせて、大きくなる ならない時は子要素は高さが100%になる ような要素を作りたい時があったんです。
まぁ、今でなら、flex使えばいけるのかな？というような気もしなくも無いんですが、IEの旧バージョン対応がどうしても必要だっていう時は、……

続きを読む

funnydreamer

インフォグラフィックの面白さ

インフォグラフィックという言葉がよく聞くようになりました。かく言う私も、1年前に本を買ったりして、興味を持ちました。
データを可視化して、さらにデザインがもつ情報伝達効率の向上を利用して、本当に目を引き分かりやすいものだなと思います。
データの可視化っていうのは、表現方法が違えど3DCGシミュレーションの時に通じるものがあります。……

続きを読む

funnydreamer

Web制作における英語が読めることの利点

私は、英会話はできませんが、大学が英語教育に力入れていたのと、研究室の教授が日本語を喋れない先生だったので、英語に触れる機会はそこそこありました。卒論も修論も英語で書かなければならず結構苦労したものです（笑）
そして大学卒業後に最初に就職した会社の面接を受ける時に、その事を話したところ、丁度、新規事業として海外のソフトウェアを日本で販売すること……

続きを読む

funnydreamer