Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。 2022.12.01 井川 宜久 Figmaのモザイクプラグイン「Pixels」とは？ ネット上に写真や画像をアップする際、個人情報や特定の箇所にモザイクをかけたいことがある。 Figmaにはデフォルトでは備わっていないようなので、プラグインを探してみたところ、「Pixels」というシンプルで素敵なプラグインが見つかった。 Pixelsは、ただモザイクをかけられるだけでなく、ベクター画像としてモザイク処理... FigmamemosWebデザインデザイン
CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを！ 2022.11.30 井川 宜久 CSSブレンドモード。 PhotoshopやFigmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。 「描画モード」は英語では「Blend Mode（ブレンドモード）」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。 そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。 m... CSSmemosWebデザイン
counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。 2022.11.22 井川 宜久 CSSだけで連番を振ってくれる、counter-increment。 CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。 自動連番、ナンバリングもCSSオンリーで可能となっている。 番号を振ってくれる「counter-increment」プロパティに、「custom-ident（名前）」と「integer... CSSHTMLmemosWebデザイン
viewport-fit=coverで対応。iPhoneのSafe Area問題。 2022.11.17 井川 宜久 viewport-fit=coverで、iPhoneのSafe Area外をカバー。 iPhone X以降のiPhoneは、画面内にノッチがあったりコーナーが角丸になっている。 画像引用：Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11 Killian THORON さま ... CSSHTMLiPhonememosWebデザイン
CSS フォントサイズはどうする？ remの基本かつ効果的な使い方。 2022.11.15 井川 宜久 remで覚えると安全かつ便利。 Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。 pets単位とサイズ。 もし単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。 サイズについては、各ブラウザ間でほぼほぼ16... CSSmemosWebデザイン
Chromeデベロッパーツールでスマホ表示チェックする際の注意点。 2022.11.14 井川 宜久 デベロッパーツールのショートカット。 デベロッパーツールは右クリックからも開けるが、よく使う機能なのでショートカットで覚えておくと作業がはかどる。 ショートカット Mac： 「Command」 + 「Option」 + 「i」（FirefoxやSafariでも同じ。） Win： 「Ctrl」 + Shift「」 + 「i」 （「F12」でも可。） で開いた... CSSiPhoneJavaScriptmemosWebデザイン
ウイルス・マルウェアチェックサイト。オンラインかつ無料利用可。 2022.11.13 井川 宜久 ファイルやサイトのウイルスをチェック、「VirusTotal」。 オンラインかつ無料で、ウイルスやマルウェアをチェックしてくれるサイトがある。 いずれも英語だが、URLのコピペやファイルのアップロードだけでチェックしてくれるので、Chromeの翻訳機能を利用すればほとんど苦にならない。 VirusTotal Wikipediaによると、70種類以上のアンチウ... ITmemosWebデザインオンラインツール
WordPressのセキュリティをオンラインチェック、「Sucuri」。 2022.11.11 井川 宜久 WordPressのセキュリティをチェック、「Sucuri」。 世界中のWebサイトの約40%で利用されていると言われるほど非常に多くの人たちに利用されているツール（CMS：コンテンツ・マネジメント・システム）であるWordPress。 WordPressサイトの場合、大々的にサイトが乗っ取られたという事例が過去にある。最近は聞かないが、もし自分や会社が運用しているWordPr... ITmemosWebデザインWordPressオンラインツール
PageSpeed Insightsでサイト読み込みの改善。増えた４項目。 2022.11.10 井川 宜久 PageSpeed Insightsはアップデートが多い。 PageSpeed Insightsに限らず、AnalyticsやSearch Consoleもそうだが、UIや仕様が良く変わる。追いつくのがなかなか大変だ。 Googleのサービスは日進月歩。 サイト運営に密接に関わるGoogleサービスには、広告関連を除けば、大きく次の３つがある。これらはSEOに重視... memosPageSpeed InsightsSEOWebデザインオンラインツール
line-clampの使い方。CSSで複数行指定。効かないときは？ 2022.11.08 井川 宜久 CSSで複数行指定。line-clampの使い方。 line-clampの登場により、JavaScriptやPHPなどを使用しなければなからなった「複数行指定、文字列の抜粋」が、CSSだけでできるようになった。 まだ新しいプロパティなので使用方法に慣れが必要かもしれないが、IEのサポート終了によりモダンブラウザでの実装は可能である。 ブログやニュースなど、投稿記事のタイト... CSSmemosWebデザイン
CSS box-sizingは、リセット用のCSSに書いておくと使いやすい。 2022.11.07 井川 宜久 box-sizing: border-box;があちこちに記載されている。 良さげなデザインのサイトのコードを参考にしたり、Webサイトのコーディングの添削をしたりする際に、意外と遭遇するのが「box-sizing: border-box;」が指定されているCSSファイル。 box-sizingとは？ box-sizingはCSS3で登場したプロパティで、初期値は「con... CSSmemosWebデザイン
CSSの@whenと@else。新しいブレイクポイントの設定方法？ 2022.11.03 井川 宜久 @whenと@elseは普及するだろうか？ CSSのブレイクポイントの新しい書き方なのか、「@when」と「@else」を使用したif文のような条件分岐が草案となっている。 W3Cのサイトにドラフトで、@whenを使った条件分岐として下記のような例が記載されている。 引用元サイト：CSS Conditional Rules Module Level 5 @whe... CSSmemosWebデザイン
text-shadow 縁取りがおしゃれに効かない時はdrop-shadowで。 2022.11.01 井川 宜久 text-stroke使用時は、text-shadowの挙動がすこし違う。 文字を縁取りするためtext-strokeを使っているときに、さりげなくおしゃれな感じにtext-shadowでシャドウをかけたいことがある。 そこでちょっと試しに、静かで澄んだの山頂上空の写真と、賑やかなネオンのムーラン・ルージュの写真に文字を乗せて検証してみた。 [affiliate] ... CSSmemosWebデザイン
Highlighting Code Blockがおかしい！Easy Table of Contentsをアップデートするとコンフリクトする。。 2022.10.31 井川 宜久 突然、Highlighting Code Blockの表示に不具合が。 目次用のプラグイン「Highlighting Code Block」の表示が、突然おかしくなった。 ネット上に解決方法が見つからなかったので、もし参考になれば。 pets今回の現象としては、、、 HTMLとPHPのコードは表示不可。PHPの方は壊滅的で、サイトのレイアウトまで崩壊。 ... memosWebデザインWordPress
縁取り文字はCSSのtext-strokeで可能。（非推奨の時代は終わり。） 2022.10.29 井川 宜久 縁取り文字はtext-strokeを使った方が楽で確実。 DTPデザインでは当たり前で、イラレでもフォトショでもごく普通に使われている縁取り文字。 文字を縁取りするだけなので簡単そうだが、CSSではなかなか実装されなかった。 そのためWebデザインでは長年シャドウ用の「text-shadow」を駆使して代用していたが、そんな時代がようやく終わった。 2022年6月に... CSSmemosWebデザインデザイン
ドライブ・マイ・カーと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: rgb(0, 0, 255, 0.5); } 16進数、HEXのカラーコードで透明度を指定したい場合。 CSSで色を指定する際、#からはじまる6桁の英数字、16進数のカラーコードを使うことが多い。 カラーピッカーで感覚的に作った色でも、ロゴやイメージカラーと合わせ... CSSmemosWebデザインデザイン
ゴッホとピカソの違いがわからないのにデザイナー？知らなすぎて搾取されるWeb&DTPデザイン。 2022.10.18 井川 宜久 デザイナーって？ MacやWindowsなどの家庭用コンピュータが現れる前までは、日本で「デザイナー」と言えば、「ファッションデザイナー」のイメージが強かった。 現在は「デザイナー」と言えば、パソコンを使った「Webデザイナー」や「DTPデザイナー」を指すことの方が多く感じる。 日常生活でもそうだが、求人情報、ネットで「デザイナー」で検索してみると一目瞭然だ。 これ... memosWebデザインデザイン
