Google Tag Manager(GTM)とは? Google Tag Managerとは、UA(ユニバーサル アナリティクス)に変わるアナリティクス(分析)ツールで、「サイトへのアクセス状態」がわかるもの。 Google Tag Manager Googleアカウントさえあれば、無料で利用が可能。 導入自体は比較的簡単にできる。ネット上にも情報が多い。 企業...
Memos
slickの使い方。jQueryスライダーのシンプルなサンプル例。コピペも可。
slickの、シンプルなサンプル。 headタグ内に記述。 slickの使い方は一般的なスライダーと同様。 まずはjQuery本体とslickのJSと、slickのCSSを、CDNで読み込む。 HTML <script src="https://code.jquery.com/jquery-3.6.2.min.js" in...
detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。
detailsとsummary。HTMLだけでアコーディオンメニュー。 detailsタグとsummaryタグ。 JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉(アコーディオンメニュー)ができようになった。 情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。 コピペで使い...
Chromeデベロッパーツールでスマホ表示チェックする際の注意点。
デベロッパーツールのショートカット。 デベロッパーツールは右クリックからも開けるが、よく使う機能なのでショートカットで覚えておくと作業がはかどる。 ショートカット。 Mac: 「Command」 + 「Option」 + 「i」(FirefoxやSafariでも同じ。) Windows: 「Ctrl」 + Shift「」 + 「i」 (「F12」でも可。) ...
CSSとJSのマーカー。コピペで使えるグラデーション・アニメーション。
CSS & JSによるマーカー。 サイトにちょっとしたアクセントが欲しいとき、使い回しが効くマーカーがあると便利だ。 汎用性があるのでスニペットとして使える。 グラデーション付きの、動きのあるマーカー。 ざっくりと、3ステップでOK。 CSSで、マーカーの見た目と動きを作成。(class名「highlight」) JavaScriptで、スクロー...
Webデザインを独学で学ぶのなら。Webデザインで行き詰まったのなら。【ちょっと客観的に】
そもそも独学で可能なのか? 年齢による見極めが重要。 Webデザインを独学で学ぶことは可能だ。ただし、自分の年齢は考慮すべきである。 大前提として、ここの見極めをしなければならない。家族を養う立ち位置にいる人ならば、最重要の確認事項だ。 一部で溢れているような甘い情報に振り回されては危険なのだ。 中途採用のWebデザイナー、コーダーたち...
スライダーがうまく動かない時の対応。(jQueryはbodyの閉じタグの前じゃない。)
スライダーのカスタムを頑張れば頑張るほど、動きがカクカクする。 jQueryの読み込みの場所。 bodyの閉じタグ前じゃなくてもいい。 スライダーをカスタマイズして作り込んでいると、動きが不自然となり、スムーズに切り替わらないことがある。 そんなときは、jQueryの読み込み位置を、head内に入れて試してみると良いかもしれない。 jQuery本体はhead内...
jQueryの読み込み位置はhead内。(bodyの閉じタグの前じゃない!?)
jQueryの読み込みは、bodyの閉じタグの前じゃない。 jQueryはどこに書くか? bodyの閉じタグ前じゃなくてもいい。 なんとなくjQueryの読み込みは、bodyの閉じタグの直前に書いた方が良いと言われている。 ただし、盲目的にbodyの閉じタグの前に書く、というのはやめておいた方が無難。 jQueryはどこに書くか?という...