写真に映り込んだ不要な箇所を消したい。 Photoshopのように。 Cleanup Picturesで消していく。 写真の一部を消したいときに、なぞって消すことができるオンラインツール。 まるで、Photoshopの「修復ブラシ」や「コンテンツに応じた〜」のように。 Cleanup Pictures。 消したい写真をアップロード。 真ん中の点線で...
Memos
detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。
detailsとsummary。HTMLだけでアコーディオンメニュー。 detailsタグとsummaryタグ。 JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉(アコーディオンメニュー)ができようになった。 情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。 コピペで使い...
Material Symbols and Iconsの使い方。表示されないときの対処法。
Googleのアイコンフォント。 アイコンフォントといえば「Font Awesome」が有名だが、Google Fontsでもアイコンフォントを無料配布している。 Googleフォントのように使え、SVGやPNG形式で画像として個別にダウンロードすることもできる。 また、デザインツール「Figma」のプラグインとしても利用できる。 Google Fontsのサイトによる...
Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。
Figmaのペンツールとマスクで、背景から切り抜く。 ペンツールで切り抜き。 覚えると便利なペンツール。 IllustratorやPhotoshopでもそうだが、ペンツールの使い方を覚えておくと後々で役に立つ。 AIの普及などにより被写体の切り抜き精度が上がっている。ただ、それでもうまく切り抜けない時は、結局人の手によるペンツールの方が速かったりする。 また、...
Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。
Figmaで名刺を作成、印刷してみたところ、無事に完成。 FigmaでDTP。 Figmaで名刺? デザインツール「Figma」で、紙媒体の名刺を作って実際に発注し、仕上がりを確認してみた。 Figmaを印刷用に工夫。 単位やカラーモード、ファイル形式などを印刷用に。 Figmaは元々デジタルデバイス向けなので、単位がpxオンリー、カラー...
FigmaやFigJamを日本語化。言語設定や日本語版の使い方。
Figmaを日本語化。設定方法はMacもWindowsも同じ。 Figmaが日本語対応。より使いやすく。 言語変更で日本語のUI(ユーザーインターフェイス)に。 2022年にFigmaの日本法人が設立されてから、Figmaはデフォルトで英語⇄日本語の言語変更が可能となっている。 参考:Figma日本語対応のお知らせ Figmaの言語変更はシンプ...
Figmaで検索・置換する方法。ショートカットからでOK。
Figmaで検索・置換が可能に。 Figmaのアップデートで検索と置換の機能が実装されていた。 ショートカットで検索、置換ができるので、なかなか使い勝手が良い。 使い方は簡単で、以下のショートカットですぐに覚えられる。 ショートカット Mac:「Command」 + 「F」 Win:「Ctrl」 + 「F」 ※「F」は「Find...
Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。
Figmaのモザイクプラグイン「Pixels」とは? Pixelsで画像にモザイクを。 写真や文字にモザイクをかけたいとき。 ネット上などに写真や画像をアップする際、個人情報や特定の箇所にモザイクをかけたいことがある。 Figmaにはデフォルトでは備わっていないようなので、こういうときはプラグイン。 Pixelsでモザイクをかけられる。 プラグインを探し...
CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを。
CSSブレンドモード。 PhotoshopやFigmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。 「描画モード」は英語では「Blend Mode(ブレンドモード)」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。 そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。 m...
Figmaの印刷データ用プラグイン「Print for Figma」の使い方。
Print for Figma。Figmaの印刷物用プラグインとは? Figmaで作るDTP。 Figmaはもともとデジタルデバイス向けのツールだが、工夫すればDTPやグラフィックデザインもできる。 無料で使え、初心者にも向いている。 PhotoshopからのFigma。 FigmaはPhotoshopを意識して作られたデザインツールなのだそうで、カラーパレッ...
Figmaで名刺印刷。グラフィックで実際に発注、PDF入稿してみた手順。
グラフィック(印刷の通販グラフィック)の名刺発注の手順。 近年ユーザーが増えているFigma。基本的にWeb向けのツールだが、名刺くらいは作れそうなので、実験的に自分の名刺で実際に作ってみた。 印刷は長年定期的に利用しているグラフィックさんへ発注。 参考:Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。 参考:Figma...
Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。
Figmaで印刷物を。名刺を作ってみる。 Figmaで印刷物。 Figmaで紙媒体、DTPデザイン。 デジタルデバイス向けのデザインツール「Figma」で、紙媒体の名刺を作れるらしい。 それなら試しにと、ひとまず自分用の名刺を制作。 Figmaで名刺制作。 Figmaは印刷物でよく使用するテキストのカーニングやアウトライン化も可能...
counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。
CSSだけで連番を振ってくれる、counter-increment。 counter-increment CSSのプログラムでナンバリング。 CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。 自動連番、ナンバリングもCSSオンリーで可能となっている。 自動でナンバリング。 番号を振って...
iPhoneを鏡代わりに使う最も簡単な方法。(追加アプリなしで。)
手鏡代わりならiPhoneの「カメラ」が便利。 ふと、鏡がほしいとき。 iPhoneを鏡代わりに。 公共機関などで移動中に、ふと、身だしなみが気になることがある。 電車や飛行機であればトイレがあるが、地下鉄や市内バスではそうはいかない。 iPhoneだけで大丈夫。 アプリなしでも。 アプリをインストールするにも、Wi-Fi環境がなければ、パケット代...
viewport-fit=coverで対応。iPhoneのSafe Area問題。
viewport-fit=coverで、iPhoneのSafe Area外をカバー。 iPhone X以降、iPhone 14までのiPhoneは、画面内にノッチがあったりコーナーが角丸になっている。 画像引用:Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11 Killian ...
CSS フォントサイズはどうする? 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...
WordPressのセキュリティをオンラインチェック、「Sucuri」。
WordPressのセキュリティをチェック、「Sucuri」。 WordPressの普及率とセキュリティ対策。 WordPressとSucuri。 非常に多くの人たちに利用されているCMS(コンテンツ・マネジメント・システム)であるWordPress。 世界中のWebサイトの約40%で利用されていると言われるほど。 そのWordPressサイトが、大々的に乗っ...
PageSpeed Insightsでサイト読み込みの改善。増えた4項目。
PageSpeed Insightsはアップデートが多い。 PageSpeed Insightsに限らず、AnalyticsやSearch Consoleもそうだが、UIや仕様が良く変わる。追いつくのがなかなか大変だ。 Googleのサービスは日進月歩。 サイト運営に密接に関わるGoogleサービスには、広告関連を除けば、大きく次の3つがある。これらはSEOに重視...