ドライブ・マイ・カーとCODAと。アカデミーにおいてのリスペクトやオマージュとパクりの違い。 2022.10.26 井川 宜久 映画の批評ではなくある種のメタファー。 この記事は、映画「ドライブ・マイ・カー」と「CODA」と、Web業界を含む、教育・指導の現場でのパクり行為をなんとなく掛け合わせている。 ドライブ・マイ・カーとCODAには「手話」という言語が登場し、インターネットのサイトは「HTML」という言語でできており、その「HTML」を書くソフトに「Coda」がある。（現在はNova。） あ... EditormemomemosWebデザイン
CSS変数書き方例。:rootを使ってカスタムプロパティを覚える。 2022.10.23 井川 宜久 CSSで変数（カスタムプロパティ）を使うと、とにかく便利。 JavaScriptやPHPなど、プログラミング言語ではごくごく基本の変数。 変数のニーズ。 もともとCSSの生みの親であるホーコン・ウィウム・リー氏によると、CSSは意図的にプログラミング言語にならないようにしていたそうだ。 それが今では、時代の変化によるニーズの増加もあり、CSS変数（カスタムプロパティ... CSSmemosWebデザイン
CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。 2022.10.22 井川 宜久 CSSアニメーションでフェードイン。 数年前まではJavaScriptやjQueryプラグインで実装していた、Webサイトのフェードイン。 サイト訪問時にちょっとリッチな雰囲気を醸し出すフェードインは、今ではすっかりCSSだけで表現が可能となった。 シンプルなフェードインは、汎用性もある。 例えば、htmlセレクタに下記CSSをコピペするだけでOK。（値は変更可。）... CSSmemosWebデザイン
CSS カラーコードで透明度を指定したいとき。（16進数6桁+2桁で。） 2022.10.20 井川 宜久 .green { color: #00ff0080; } .blue { color: rgba(0, 0, 255, 0.5); } 16進数、HEXのカラーコードで透明度を指定したい場合。 CSSで色を指定する際、#からはじまる6桁の英数字、16進数のカラーコードを使うことが多い。 カラーピッカーで感覚的に作った色でも、ロゴやイメージカラーと合わ... CSSmemosWebデザインデザイン
ゴッホとピカソの違いがわからないのにデザイナー？知らなすぎて搾取されるWeb&DTPデザイン。 2022.10.18 井川 宜久 デザイナーって？ MacやWindowsなどの家庭用コンピュータが現れる前までは、日本で「デザイナー」と言えば、「ファッションデザイナー」のイメージが強かった。 現在は「デザイナー」と言えば、パソコンを使った「Webデザイナー」や「DTPデザイナー」を指すことの方が多く感じる。 日常生活でもそうだが、求人情報、ネットで「デザイナー」で検索してみると一目瞭然だ。 これ... memosWebデザインデザイン
学ぶは真似る。模写コーディングの際に気をつけるべきこと。 2022.10.17 井川 宜久 学ぶは真似る。 学ぶの語源は学ぶ、学ぶは真似る、というように、参考にしたい誰かの真似から始めるのは古来からの学習法の一つだ。 それは科学的にも裏付けがある。そもそも生命の遺伝子やミーム（文化的遺伝子）の伝達もコピー、模倣から始まる。 親の遺伝子の半分は子に伝わる。 ちなみにミームは1970年代にRichard Dawkins（リチャード・ドーキンスによって作られた造... memosWebデザインデザイン脳
ニュートンによる虹は７色というのは本当？（絵文字は６色だけど。） 2022.10.16 井川 宜久 ニュートンが虹を7色と決めた？ 日本では虹は7色であるというのは、一般的で当たり前のこととなっている。 だが虹の色数は国や地域によって異なり、例えばアメリカでは6色が一般的だという。2色や4色、5色という国、地域もあるらしい。 実際にAppleの初期のレインボーカラーのロゴは６色だった。現在のAppleやMicrosoft、GoogleやTwitterなどの絵文字でも６色... CSSmemosWebデザインデザイン脳
SVGテキストをセンタリングする方法。Safariの挙動も解決。 2022.10.12 井川 宜久 SVGテキストのセンタリングは、ブラウザによって挙動が違う。 SVGでのアイコンやテキスト表示は簡単だが、位置やアニメーションの設定をしていると、思わぬところで落とし穴にハマることがある。 表示位置やアニメーションはCSSの方で指定できるが、SVGテキストの場合、何故かSafariでだけうまくいかない場合があった。 実際に検証したところ、CSSの問題ではなく、HTML側で... CSSHTMLmemosWebデザイン
ノーコードは必要なのだろうか？ノーコードはなぜ広がらない？ 2022.10.09 井川 宜久 ここ数年話題のノーコード。 ここ数年Web業界でトレンドとなっている「ノーコード」。その名の通り、わざわざコードを書かなくてもカッコよくおしゃれなサイトが作れちゃう、というような一見最先端な技術だ。 と、言われているような雰囲気だが、そもそも同じようなことは20年ほど前も謳われていた。HTMLやCSSが分からなくても、ホームページビルダーやDreamweaverなどで簡単楽々に... CSSHTMLIoTITmemosWebデザインデザイン
VSCodeのタブ「ピン留め」機能が手軽で快適。 2022.10.07 井川 宜久 常に開いておきたいタブをピンで留められる。 ブラウザでたまに使っていた機能だが、いつの間にかVSCodeでも使えるようになっていた。気が付かなかったが、2020年頃から実装されていたようだ。 参考：Microsoftは、ピン留めされたタブなどが改善されたVS Code1.51をリリースしました-MSPoweruser VSCodeは、DreamweaverやCodaと比べ... EditormemosWebデザイン
WordPress pタグを投稿記事から削除する1行のコード。 2022.10.06 井川 宜久 記事を書いた後に、意図せずにpタグが挿入されている！？ WordPressで記事を作成している時、想定外にレイアウトが変わってしまうことがある。 よくあるのが、ブログ投稿時の「pタグの自動挿入」だ。 これはデザイナーにとっては（もしかしたらブロガーにも）悩ましく、特にCSSでpタグにスタイルを設定していると、思わぬ表示となり、場合によってはありがた迷惑でもある。 た... HTMLmemosPHPWebデザインWordPress
パソコンと目と健康管理。VDT症候群の予防とダークモードの活用のすすめ。 2022.10.01 井川 宜久 パソコンと目とVDT症候群。ブルーライトとダークモードの目への影響。 自分が職業訓練校で講師をしていた頃、カリキュラムの最初の段階で必ず「VDT症候群」についての内容があった。 VDT症候群とは、「Visual Display Terminal Syndrome（ビジュアル・ディスプレイ・ターミナル・シンドローム）」の略で、要するにパソコンの前での長時間労働に起因する、目や身体... ITmemosWebデザインデザイン脳
Googleアナリティクスで自分のアクセスを除外したい時は「IPv6」で。 2022.09.29 井川 宜久 アナリティクスへログインし、画面左下の「管理」をクリック。 「管理」の画面に切り替わる。 ここの、画面右に「ビューを作成」の項目があるので、その中から「フィルタ」を選択する。 すると、「ビューを作成」の画面が表示される。 「ビューを作成」画面で、「フィルタを追加」ボタンをクリック。 「ビューを作成」の画面に切り替わる。 ここに、「フィルタを追加」... memosWebデザインアナリティクス
CSS max-width レスポンシブ対応のピクセル指定は崩れる原因となる。 2022.09.28 井川 宜久 CSSのmax-widthでのピクセルはレスポンシブ対応ではない。 レスポンシブ対応の際に、max-widthでピクセル指定をしている場面がある。よくあるのがパソコン表示用の「max-width: 1000px;」や「max-width: 1100px;」などの指定だ。 実はスマホ以前の書き方。 実はこれは10年以上前の指定方法で、スマホが普及する以前の、主にデスクトップ... CSSmemosWebデザイン
GA4への移行。Google タグ（gtag.js）とGoogle タグ マネージャーの違いって？ アナリティクスの計測はどちらでもOK。 2022.09.26 井川 宜久 Google タグ（gtag.js）とGoogle タグ マネージャー。 Google タグとGoogle タグ マネージャーとの違いがよくわからない。 よくわかってはいないが、とりあえずUA（従来のユニバーサル アナリティクス）からGoogle アナリティクス 4(GA4)へ移行し、下記のようなGoogle タグをhead内へ記述することで、計測はできている。 複数のサ... memosSEOWebデザインアナリティクス
アイキャッチ画像（WordPressのサムネイル画像）がない場合、いらない場合は、これで解決。 2022.09.23 井川 宜久 アイキャッチ画像（サムネイル画像）が設定されていないときにできる空白をなくしたい。 ブログ投稿時にちょうどいい感じの画像が見つからないときや、そのまま投稿してしまいたい場合がある。 だからといってそのまま投稿してしまうと、アイキャッチ画像が入るはずの箇所に空白ができるので、見た目が悪くなってしまう。 そのようなことにならないために、あらかじめアイキャッチがない場合の代替と... memosPHPWebデザインWordPress
さくらのサーバーからさくらのサーバーへの引越しで、「DNSゾーンが既に登録されています」のエラーが出たとき。 2022.09.19 井川 宜久 さくらからさくらへ。WordPressではないサイトの引越し。 他社で取得しているドメインのサイトを、さくらのスタンダードプランのサーバーからビジネスプランのサーバーへ移行することとなった。案の定、一筋縄にはいかなかった。 あらかじめ手続き方法をヘルプページやネット上で探すが、さくら-さくら間の引越し方法がよくわからなかった。何度かカスタマーセンターとのやりとりをし、最終的に電... memosWebデザイン
第三者コードの影響を抑えてください？の対応と、preconnect。 2022.09.16 井川 宜久 第三者コードの影響を抑えてください！？ どうも最近サイトの表示速度が遅い。以前はPageSpeed Insightsで80前後のスピードが出ていたが、今では60を切ることが多々ある。40以下のときさえもある。 PageSpeed Insightsをチェックしていたところ、「第三者コードの影響を抑えてください」との表示が出ていた。 1番目と2番目にGoogl... HTMLmemosPageSpeed InsightsWebデザイン
さくらインターネットのコンテンツブーストの設定方法。（数ステップで。） 2022.09.15 井川 宜久 さくらインターネットでWordPressを使う場合の問題点。 さくらインターネットでWordPressを使用する場合、残念ながら速度が遅い。サーバーを移転すれば解決するのだが、さくらインターネットに愛着があるユーザーとしては非常に悩ましい問題だ。 例えば当サイトはデザインのポートフォリオサイトなので、そもそも画像が多い。画像が多いとサイトの読み込み速度に影響するが、すでにWeb... ITmemosWebデザイン
iPhone 14-15の解像度と、画像サイズ、CSSのピクセル設定をどうするか？ 2022.09.12 井川 宜久 iPhoneの「解像度」とは？ デバイスの解像度と、画像サイズと、CSSの解像度。 意外と知らない！？ 解像度を知っておこう。 基本的にWebで使用する写真などの解像度は72px/inchであり、Photoshopの解像度の設定も72px/inchが一般的となっている。 これはWindowsが普及する前の時代、Macの前身であるMacintoshの解像度に由... CSSHTMLiPhonememosWebデザイン
