デザイナー、コーチ、ディレクター / いがわ

.

Memos

学ぶは真似る。模写コーディングの際に気をつけるべきこと。

学ぶは真似る。

学ぶは真似る。 学ぶの語源は学ぶ、学ぶは真似る、というように、参考にしたい誰かの真似から始めるのは古来からの学習法の一つだ。 それは科学的にも裏付けがある。そもそも生命の遺伝子やミーム(文化的遺伝子)の伝達もコピー、模倣から始まる。 親の遺伝子の半分は子に伝わる。 ちなみにミームは1970年代にRichard Dawkins(リチャード・ドーキンスによって作られた造...

ニュートンによる虹は7色というのは本当?(絵文字は6色だけど。)

虹の色は7色?ニュートンは?

ニュートンが虹を7色と決めた? ※敬称略 7色の虹の色。 日本では7色。 日本では虹は7色であるというのは、一般的で、当たり前のこととなっている。 だが虹の色数は国や地域によって異なり、例えばアメリカでは6色が一般的だという。 2色や4色、5色という国、地域もあるらしい。 Appleの初期のレインボーカラーのロゴは6色だった。現在のAppleやMi...

SVGテキストをセンタリングする方法。Safariの挙動も解決。

SVGテキストをセンタリングする方法。Safariの挙動を解決。

SVGテキストのセンタリングは、ブラウザによって挙動が違う。 SVGでのアイコンやテキスト表示は簡単だが、位置やアニメーションの設定をしていると、思わぬところで落とし穴にハマることがある。 表示位置やアニメーションはCSSの方で指定できるが、SVGテキストの場合、何故かSafariでだけうまくいかない場合があった。 実際に検証したところ、CSSの問題ではなく、HTML側で...

iPhoneで入力中の文字を取り消す方法。振ったりスワイプしたりで。

シェイクで取り消しの使い方。オフの設定や、できないとき。

iPhoneを振って入力文字を取り消す、「シェイクで取り消し」。 シェイクで取り消し。 取り消したい。 iPhoneでLINEやメール、メモなどを入力している時に、文字を打ち間違ってしまうことがある。 そんなときは、iPhone自体を上下や左右に振ると、心地よい感じの軽い振動があり、操作を取り消すことができる。 (※スクショはダークモード表示時...

ノーコードは必要なのだろうか?ノーコードはなぜ広がらない?

WordPressの記事投稿で自動的にpタグが入らないようにする、わずか1行のコード。

ここ数年話題のノーコード。 ※敬称略 オーサリングとノーコード。 ここ数年Web業界でトレンドとなっている「ノーコード」。その名の通り、わざわざコードを書かなくてもカッコよくおしゃれなサイトが作れちゃう、というような一見最先端な技術。 と、言われているような雰囲気だが、そもそも同じようなことは20年ほど前も謳われていた。HTMLやCSSが分からなくても、ホームページ...

VSCodeのタブ「ピン留め」機能が手軽で快適。

VSCodeのタブのピン留め。

常に開いておきたいタブをピンで留められる。 タブのピン留め。 ブラウザでたまに使っていた機能だが、いつの間にかVSCodeでも使えるようになっていた。気が付かなかったが、2020年頃から実装されていたようだ。 参考:Microsoftは、ピン留めされたタブなどが改善されたVS Code1.51をリリースしました-MSPoweruser VSCodeは、Dreamwe...

WordPress pタグを投稿記事から削除する1行のコード。

WordPress pタグを投稿記事から削除する方法。

記事を書いた後に、意図せずにpタグが挿入されている!? WordPressによる「wpautop」。 wpautop WordPressで記事を作成している時、想定外にレイアウトが変わってしまうことがある。 よくあるのが、ブログ投稿時の「pタグの自動挿入」。 これはデザイナーにとっては(もしかしたらブロガーにも)悩ましく、特にCSSでpタグにスタイルを設定して...

パソコンと目と健康管理。VDT症候群の予防とダークモードの活用のすすめ。

パソコンと目と健康管理。VDT症候群とダークモード。

パソコンと目とVDT症候群。ブルーライトとダークモードの目への影響。 パソコンからの、目と健康管理。VDT症候群。 自分が職業訓練校で講師をしていた頃、カリキュラムの最初の段階で必ず「VDT症候群」についての内容があった。 VDT症候群とは、「Visual Display Terminal Syndrome(ビジュアル・ディスプレイ・ターミナル・シンドローム)」の略で、要...

Googleアナリティクスで自分のアクセスを除外したい時は「IPv6」で。

IPアドレスを指定して、アナリティクスで計測。

アナリティクスへログインし、画面左下の「管理」をクリック。 「管理」の画面に切り替わる。 ここの、画面右に「ビューを作成」の項目があるので、その中から「フィルタ」を選択する。 すると、「ビューを作成」の画面が表示される。 「ビューを作成」画面で、「フィルタを追加」ボタンをクリック。 「ビューを作成」の画面に切り替わる。 ここに、「フィルタを追加」...

CSS max-width レスポンシブ対応のピクセル指定は崩れる原因となる。

max-widthとレスポンシブデザイン。効かない、崩れることのないように。

CSSのmax-widthでのピクセルはレスポンシブ対応ではない。 レスポンシブ対応の際に、max-widthでピクセル指定をしている場面がある。よくあるのがパソコン表示用の「max-width: 1000px;」や「max-width: 1100px;」などの指定だ。 実はスマホ以前の書き方。 実はこれは10年以上前の指定方法で、スマホが普及する以前の、主にデスクトップ...

GA4への移行。Google タグ(gtag.js)とGoogle タグ マネージャーの違いって? アナリティクスの計測はどちらでもOK。

Google タグ(gtag.js)とGoogle タグ マネージャー。アナリティクス。

Google タグ(gtag.js)とGoogle タグ マネージャー。 Google タグとGoogle タグ マネージャーとの違いがよくわからない。 よくわかってはいないが、とりあえずUA(従来のユニバーサル アナリティクス)からGoogle アナリティクス 4(GA4)へ移行し、下記のようなGoogle タグをhead内へ記述することで、計測はできている。 複数のサ...

ポイントアプリ「Miles」は、運動や移動でポイントを貯められる。

Miles 散歩。

Milesとは? Miles(マイルズ)とは、歩いたり走ったりして移動した分だけマイル(=ポイント)が貯まるスマホアプリ。1マイルにつき1ポイントが貰える。 利用は無料で、近年のウォーキングやランニングなどの運動ブームとの相性が良く、また低賃金や物価高に伴う「ポイ活」の一種にもなる。 貯まったマイルは、その分の特典や景品、抽選、ギフトカードなどと交換できる。また、生活に余...

アイキャッチ画像(WordPressのサムネイル画像)がない場合、いらない場合は、これで解決。

アイキャッチ(サムネイル)

アイキャッチ画像(サムネイル画像)が設定されていないときにできる空白をなくしたい。 アイキャッチ画像、サムネイル画像がないとき。 ブログ投稿時にちょうどいい感じの画像が見つからないときや、そのまま投稿してしまいたい場合がある。 だからといってそのまま投稿してしまうと、アイキャッチ画像が入るはずの箇所に空白ができるので、見た目が悪くなってしまう。 代わりの画像を用意し...

さくらのサーバーからさくらのサーバーへの引越しで、「DNSゾーンが既に登録されています」のエラーが出たとき。

さくらインターネットの引越し。

さくらからさくらへ。WordPressではないサイトの引越し。 他社で取得しているドメインのサイトを、さくらのスタンダードプランのサーバーからビジネスプランのサーバーへ移行することとなった。案の定、一筋縄にはいかなかった。 あらかじめ手続き方法をヘルプページやネット上で探すが、さくら-さくら間の引越し方法がよくわからなかった。何度かカスタマーセンターとのやりとりをし、最終的に電...

第三者コードの影響を抑えてください?の対応と、preconnect。

第三者コードの影響を抑えてくださいの対応。

第三者コードの影響を抑えてください!? PageSpeed Insightsの悪化。 どうも最近サイトの表示速度が遅い。以前はPageSpeed Insightsで80前後のスピードが出ていたが、今では60を切ることが多々ある。40以下のときさえもある。 PageSpeed Insightsをチェックしていたところ、「第三者コードの影響を抑えてください」との表示が...

さくらインターネットのコンテンツブーストの設定方法。(数ステップで。)

さくらインターネットのコンテンツブースト。

さくらインターネットでWordPressを使う場合の問題点。 さくらインターネットでWordPressを使用する場合、残念ながら速度が遅い。サーバーを移転すれば解決するのだが、さくらインターネットに愛着があるユーザーとしては非常に悩ましい問題だ。 例えば当サイトはデザインのポートフォリオサイトなので、そもそも画像が多い。画像が多いとサイトの読み込み速度に影響するが、すでにWeb...

iPhone 14-15の解像度と、画像サイズ、CSSのピクセル設定をどうするか?

iPhone 解像度と画面サイズ、CSSピクセル設定について。

iPhoneの解像度とは? デバイスの解像度と、画像サイズと、CSSの解像度。 意外と知らない!? 解像度を知っておこう。 基本的にWebで使用する写真などの解像度は72px/inchであり、Photoshopの解像度の設定も72px/inchが一般的となっている。 これはWindowsが普及する前の時代、Macの前身であるMacintoshの解像度に由来していると...

CSSとJSのマーカー。コピペで使えるグラデーション・アニメーション。

CSSマーカー。コピペで使えるグラデーション・アニメーション。

CSS & JSによるマーカー。 サイトにちょっとしたアクセントが欲しいとき、使い回しが効くマーカーがあると便利だ。 汎用性があるのでスニペットとして使える。 グラデーション付きの、動きのあるマーカー。 ざっくりと、3ステップでOK。 CSSで、マーカーの見た目と動きを作成。(class名「highlight」) JavaScriptで、スクロー...

backgroundの複数指定が効かない時の確認事項。(CSSアニメーションとの組み合わせ。)

CSSの背景画像を確認しよう。

CSSで背景画像を複数指定したい。 backgroundプロパティで可能なはずだが... CSS3以降からは背景画像の複数指定が可能となっている。ところが、時々うまく表示されないことがある。 例えば、下記のような書き方では、Chromeでは普通に2つ表示されるが、Safariでは1つの画像しか表示されない。 デザイン的にシンメトリーにしたいのに、片方が表示さ...