WebデザインやDTP、AIなどについてのメモです。 / いがわ

いがわ.

Memos

いがわが描いたイラストのにゃんこ。

CSSで連番。counter-incrementの使い方。

CSSだけで連番を振ってくれる、counter-increment。 counter-increment CSSのプログラムでナンバリング。 CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。 自動連番、ナンバリングもCSSオンリーで可能となっている。 自動でナンバリング。 番号を振って...

スマホを鏡代わりに使う方法。iPhoneをミラーに。

手鏡代わりならiPhoneの「カメラ」が便利。 ふと、鏡がほしいとき。 iPhoneを鏡代わりに。 公共機関などで移動中に、ふと、身だしなみが気になることがある。 電車や飛行機であればトイレがあるが、地下鉄や市内バスではそうはいかない。 iPhoneだけで大丈夫。 アプリなしでも。 アプリをインストールするにも、Wi-Fi環境がなければ、パケット代...

CSS フォントの単位はpx？ %？ em？ rem？

remで覚えると安全かつ便利。 Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。 単位とサイズ。 もし単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。 サイズについては、各ブラウザ間でほぼほぼ16pxが確...

Chrome デベロッパーツールでスマホ表示確認時の注意点。

デベロッパーツールのショートカット。 デベロッパーツールは右クリックからも開けるが、よく使う機能なのでショートカットで覚えておくと作業がはかどる。 ショートカット。 Mac： 「Command」 + 「Option」 + 「i」（FirefoxやSafariでも同じ。） Windows： 「Ctrl」 + Shift「」 + 「i」 （「F12」でも可。） ...

オンラインで無料、ウィルスチェックサイト。

ファイルやサイトのウイルスをチェック、「VirusTotal」。 VirusTotal オンラインかつ無料で、ウイルスやマルウェアをチェックしてくれるサイトがある。 いずれも英語だが、URLのコピペやファイルのアップロードだけでチェックしてくれるので、ブラウザの翻訳機能を利用すればほとんど苦にならない。 VirusTotal by Google Wik...

Sucuri 。オンラインで無料ウィルスチェック。

WordPressのセキュリティをチェック、「Sucuri」。 WordPressの普及率とセキュリティ対策。 WordPressとSucuri。 非常に多くの人たちに利用されているCMS（コンテンツ・マネジメント・システム）であるWordPress。 世界中のWebサイトの約40%で利用されていると言われるほど。 そのWordPressサイトが、大々的に乗っ...

サイトの読み込み速度を測る、PageSpeed Insights。

PageSpeed Insightsはアップデートが多い。 PageSpeed Insightsに限らず、AnalyticsやSearch Consoleもそうだが、UIや仕様が良く変わる。追いつくのがなかなか大変だ。 Googleのサービスは日進月歩。 サイト運営に密接に関わるGoogleサービスには、広告関連を除けば、大きく次の３つがある。これらはSEOに重視...

CSS line-clampが効かないときに確認すべきこと。

CSSで複数行指定。line-clampの使い方。 line-clampの登場により、JavaScriptやPHPなどを使用しなければなからなった「複数行指定、文字列の抜粋」が、CSSだけでできるようになった。 ブログやニュースなど、投稿記事のタイトルの抜粋が非常に楽であり、かつCSSなのでブレイクポイントによりスマホは２行、PCは３行などと簡単に振り分けができる。 li...

iPhoneの充電回数は何回？「最適化されたバッテリー充電」機能。

iPhoneの充電回数は本当に約500回なの？ iPhoneのバッテリー充電。 充電回数やタイミング。 iPhoneの充電はいつどう行うのがベストか？ なるべく使い切った方が良いのか、充電切れを無くすため、不測の事態を避けるためにも、毎日フル充電するのが良いのか？ 答えをAppleの公式サイトから探ってみた。 電池、バッテリーの特徴。 電池...

CSSの新しいブレイクポイント設定。

@whenと@elseは普及するだろうか？ CSSのブレイクポイントの新しい書き方なのか、「@when」と「@else」を使用したif文のような条件分岐が草案となっている。 W3Cのサイトにドラフトで、@whenを使った条件分岐として下記のような例が記載されている。 引用元サイト：CSS Conditional Rules Module Level 5 @whe...

CSS text-shadowで影がうまくいかない場合は、drop-shadowで代用可能。

text-stroke使用時は、text-shadowの挙動がすこし違う。 文字を縁取りするためtext-strokeを使っているときに、さりげなくおしゃれな感じにtext-shadowでシャドウをかけたいことがある。 そこでちょっと試しに、静かで澄んだの山頂上空の写真と、賑やかなネオンのムーラン・ルージュの写真に文字を乗せて検証してみた。 [affiliate] ...

Easy Table of Contentsをアップデートすると、Highlighting Code Blockがおかしくなる。

突然、Highlighting Code Blockの表示に不具合が。 目次用のプラグイン「Highlighting Code Block」の表示が、突然おかしくなった。 ネット上に解決方法が見つからなかったので、もし参考になれば。 pets今回の現象としては... HTMLとPHPのコードは表示不可。PHPの方は壊滅的で、サイトのレイアウトまで崩壊。 ...

CSSの縁取り文字はtext-strokeで可能。

縁取り文字はtext-strokeを使った方が楽で確実。 CSSのtext-stroke。 DTPデザインでは当たり前で、イラレでもフォトショでもごく普通に使われている縁取り文字。 文字を縁取りするだけなので簡単そうだが、CSSではなかなか実装されなかった。 そのためWebデザインでは長年シャドウ用の「text-shadow」を駆使して代用していたが、そんな時代がよ...

ドライブ・マイ・カーとCODAと。

映画の批評ではなくある種のメタファー。 ドライブ・マイ・カーとCODA。 言語の掛け合わせ。 この記事は、映画「ドライブ・マイ・カー」と「CODA」と、Web業界を含む、教育・指導の現場でのパクり行為をなんとなく掛け合わせている。 ドライブ・マイ・カーとCODAには「手話」という言語が登場し、インターネットのサイトは「HTML」という言語でできており...

CSS変数へ代入。書き方はカスタムプロパティを:rootで定義。

CSSで変数（カスタムプロパティ）を使うと、とにかく便利。 CSS変数を使う。 プログラムの基本。 JavaScriptやPHPなど、プログラミング言語ではごくごく基本の変数。 CSSでも使える便利な機能。 CSS変数のニーズ。 CSS変数（カスタムプロパティ）。 もともとCSSの生みの親であるホーコン・ウィウム・リー氏によると、CSSは意図的にプ...

CSSでフェードイン。JS不要、コピペ可。

CSSでフェードインできる、animationプロパティ。 CSSだけでフェードイン。JavaScript不要。 フェードインがCSSのanimationで実装できるように。 数年前まではJavaScriptやjQueryプラグインで実装していた、Webサイトのフェードイン。 サイト訪問時にちょっとリッチな雰囲気を醸し出すフェードインは、今ではすっかりCSSだけで表...

ソニータイマーとアップルタイマーとは。

SONYタイマーとAppleタイマー。 SONYタイマー、SONYタイムとは？ SONYやAppleの製品にはタイマーがある？ いつ頃からか、SONY製品はすぐに壊れるので、買ってから数年後（いわゆるSONYタイム）に故障するように「SONYタイマー」が付いていると揶揄されるようになった。 同様に、Apple製品もそう言われるようになっていた。 Pho...

カラーコードで透明度を指定する方法。

16進数（HEX）のカラーコードで透明度を指定したい場合。 CSSで多い、色の指定。 CSSで色や透明度を指定する。 CSSで色を指定する際は、#を付けた6桁の英数字、16進数のカラーコードを使うことが多い。 カラーピッカーで感覚的に作った色でも、ロゴやイメージカラーと厳密に一致させたい場合でも、デザインツールで数値化ができるため再現性が高い。 16進数、16...

レオナルド・ダ・ヴィンチの本名や由来について。生家の画像。

レオナルド・ダ・ヴィンチという名前の意味。 ヴィンチ村のレオナルド？ ダ・ヴィンチは本名ではない。 レオナルド・ダ・ヴィンチという名は本名ではなく、直訳では「ヴィンチ村のレオナルド」、という意味となる。 なので「ダ・ヴィンチ」と言うと、「ヴィンチ村の」と言っているようなものであるという。 ただしこのことは、20世紀の時代から言われていた。 ...

WebデザイナーとDTPデザイナーのMacBook。

デザイナーって？ ファッションデザイナーからWebデザイナー、DTPデザイナーへ。 デザイナーのイメージ。 MacやWindowsなどの家庭用コンピュータが現れる前までは、日本で「デザイナー」と言えば、「ファッションデザイナー」のイメージが強かった。 現在は「デザイナー」と言えば、パソコンを使った「Webデザイナー」や「DTPデザイナー」を指すことの...

模写コーディングも学ぶは真似る。

模写コーディングの注意点。 模写コーディングによるコーディング学習 学ぶは真似るは、コーディング学習でも一緒。 学ぶの語源は学ぶ、学ぶは真似る、というように、参考にしたい誰かの真似から始めるのは古来からの学習法の一つだ。 それは科学的にも裏付けがある。そもそも生命の遺伝子やミーム（文化的遺伝子）の伝達もコピー、模倣から始まる。 遺伝子もコピーに...

虹の色は7色。ニュートンと音階？

ニュートンが虹を7色と決めた？ ニュートンの光のスペクトルでは7色。 日本では7色。 日本では虹は7色であるというのは、一般的で、当たり前のこととなっている。 アメリカでは6色。 だが虹の色数は国や地域によって異なり、例えばアメリカでは6色が一般的だという。 2色や4色、5色という国、地域もあるらしい。 Appleの初期のレインボー...

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

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

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

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

ノーコードツールが広がらない。ノーコードは必要か？

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

VSCodeのタブのピン留め方法。

常に開いておきたいタブをピンで留められる。 VSCodeのタブをピンで固定。 VSCodeのタブのピン留め。 ブラウザでたまに使っていた機能のピン留め。いつの間にかVSCodeでも使えるようになっていた。2020年頃から実装されていた模様。 ファイルを閉じて開き直したり、VSCodeを終了して再度立ち上げたときにもピン留めしたタブはそのまま保持される。 VSC...

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

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

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

パソコンやスマホと、VDT症候群。 VDT症候群。目と健康管理。 VDT症候群とは？ 自分が職業訓練校で講師をしていたころ、カリキュラムの最初の段階で必ず「VDT症候群」についての内容があった。 VDT症候群とは、「Visual Display Terminal Syndrome（ビジュアル・ディスプレイ・ターミナル・シンドローム）」の略で、要するにパソコンの前での...

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

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

max-widthとレスポンシブデザインのイメージ。

CSSのmax-widthでのピクセルはレスポンシブ対応ではない。 max-widthとレスポンシブの誤解。 ピクセル指定では対応しきれない。 レスポンシブ対応の際に、max-widthでピクセル指定をしている場面がある。 よくあるのがパソコン表示用の「max-width: 1000px;」や「max-width: 1100px;」などの指定。 max-wid...

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

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

Miles 散歩する親子。

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

アイキャッチ画像がない場合の対応。

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

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

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

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

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

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

さくらインターネットでWordPressを使う場合の問題点。 WordPressの速度が遅い。 速度だけでなく、ムラが多い。 さくらインターネットの共用サーバーでWordPressを使用する場合、残念ながら速度が遅い。 サーバーを移転すれば解決するが、さくらインターネットに愛着があるユーザーとしては非常に悩ましい問題。 例えば当サイトはもともとデザインのポート...

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

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