学ぶは真似る。模写コーディングの際に気をつけるべきこと。 2022.10.17 井川 宜久 学ぶは真似る。 学ぶの語源は学ぶ、学ぶは真似る、というように、参考にしたい誰かの真似から始めるのは古来からの学習法の一つだ。 それは科学的にも裏付けがある。そもそも生命の遺伝子やミーム(文化的遺伝子)の伝達もコピー、模倣から始まる。 親の遺伝子の半分は子に伝わる。 ちなみにミームは1970年代にRichard Dawkins(リチャード・ドーキンスによって作られた造... memosWebデザインデザイン脳
ニュートンによる虹は7色というのは本当?(絵文字は6色だけど。) 2022.10.16 井川 宜久 ニュートンが虹を7色と決めた? 日本では虹は7色であるというのは、一般的で当たり前のこととなっている。 だが虹の色数は国や地域によって異なり、例えばアメリカでは6色が一般的だという。2色や4色、5色という国、地域もあるらしい。 実際にAppleの初期のレインボーカラーのロゴは6色だった。現在のAppleやMicrosoft、GoogleやTwitterなどの絵文字でも6色... 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の解像度と、画像サイズ、CSSのピクセル設定をどうするか? 2022.09.12 井川 宜久 iPhone 14の「解像度」とは? [affiliate] デバイスの解像度と、画像サイズと、CSSの解像度。 意外と知らない!? 解像度を知っておこう。 基本的にWebで使用する写真などの解像度は72px/inchであり、Photoshopの解像度の設定も72px/inchが一般的。 これはWindowsが普及する前の時代、Macの前身であるMac... CSSHTMLiPhonememosWebデザイン
CSSのobject-fitで画像に統一感を。トリミングやサイズを調整。 2022.09.08 井川 宜久 CSSのobject-fitプロパティでできること。 coverでのトリミングが便利。 imgやvideoのサイズをCSSで指定したい時、object-fitプロパティが使える。 要素のボックス内で画像や動画の配置指定ができるので、サイト内に並べる際に、見た目や動きの統一化がしやすい。 object-fitの種類。 object-fit... CSSmemosWebデザイン
CSSとJS。使い勝手の良いグラデーション・マーカー・アニメーション。 2022.09.07 井川 宜久 CSS & JSによるマーカー。 サイトにちょっとしたアクセントが欲しいとき、使い回しが効くマーカーがあると便利だ。 汎用性があるのでスニペットとして使える。 グラデーション付きの、動きのあるマーカー。 ざっくりと、3ステップでOK。 CSSで、マーカーの見た目と動きを作成。(class名「highlight」) JavaScriptで、スクロー... CSSHTMLJavaScriptmemosWebデザイン
backgroundの複数指定が効かない時の確認事項。(CSSアニメーションとの組み合わせ。) 2022.09.06 井川 宜久 CSSで背景画像を複数指定したい。 backgroundプロパティで可能なはずだが... CSS3以降からは背景画像の複数指定が可能となっている。ところが、時々うまく表示されないことがある。 例えば、下記のような書き方では、Chromeでは普通に2つ表示されるが、Safariでは1つの画像しか表示されない。 デザイン的にシンメトリーにしたいのに、片方が表示さ... CSSmemosWebデザイン
Dark Readerのインストールと使い方。(PC & スマホ)ダークモードで目を大切に。 2022.09.05 井川 宜久 Webサイトをダークモードで。Dark Readerのインストール手順。 Web制作やサイト閲覧時での目の負担を軽減する「Dark Reader」はとてもおすすめ。 以前はダークモードがなかったため、個人的に現在、目の不調に悩まされ続けている。 ブルーライトは目に悪いと知っていながら、若さの勢いで頑張ってしまうと、長時間労働などにより後でつけが回ってくる。 自分のよ... ITmemosWebデザイン
Figmaがダークモードに対応。背景色設定も簡単、目に優しい! 2022.09.04 井川 宜久 Figmaがダークモードに対応。 無料プランでも十分に使えるデザインツール「Figma」がついにダークモードに対応している。 以前からブラウザ版では拡張機能の「Dark Reader」で対応できていたが、インストール版でもダークモードでデザインができるようになった。 [affiliate] ※後日追記) petsブラウザ版も同じ手順でダークモー... FigmaIoTmemosWebデザインデザイン