CSSブレンドモード。 PhotoshopやFigmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。 「描画モード」は英語では「Blend Mode（ブレンドモード）」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。 そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。 m...

Print for Figma。Figmaの印刷用プラグインとは？ Figmaはもともとデジタルデバイス向けのツールだが、工夫すればDTPやグラフィックデザインも可能だ。IllustratorやPhotoshopでの知識や経験があればやってやれないことはない。 逆に、Figmaは元々Photoshopを意識して作られたデザインツールなので、カラーパレットやレイヤーなどの機能やイ...

グラフィック（印刷の通販グラフィック）の名刺発注の手順。 近年ユーザーが増えているFigma。基本的にWeb向けのツールだが、名刺くらいは作れそうなので、実験的に自分の名刺で実際に作ってみた。 印刷は長年定期的に利用しているグラフィックさんに発注。 参考：Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。 参考：Figmaで名...

Figmaで印刷物を。名刺を作ってみる。 petsデジタルデバイス向けのデザインツール「Figma」で、紙媒体の名刺を作れるらしい。 Figmaで名刺制作。 ひとまずテストとして自分用の名刺制作を試みる。印刷物でよく使用するテキストのカーニングやアウトライン化も可能で、PDFでの書き出しもできる。 ある程度IllustratorやPhotos...

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

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

viewport-fit=coverで、iPhoneのSafe Area外をカバー。 iPhone X以降のiPhoneは、画面内にノッチがあったりコーナーが角丸になっている。 画像引用：Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11 Killian THORON さま ...

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

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

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

WordPressのセキュリティをチェック、「Sucuri」。 世界中のWebサイトの約40%で利用されていると言われるほど非常に多くの人たちに利用されているツール（CMS：コンテンツ・マネジメント・システム）であるWordPress。 WordPressサイトの場合、大々的にサイトが乗っ取られたという事例が過去にある。最近は聞かないが、もし自分や会社が運用しているWordPr...

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

CSSで複数行指定。line-clampの使い方。 line-clampの登場により、JavaScriptやPHPなどを使用しなければなからなった「複数行指定、文字列の抜粋」が、CSSだけでできるようになった。 まだ新しいプロパティなので使用方法に慣れが必要かもしれないが、IEのサポート終了によりモダンブラウザでの実装は可能である。 ブログやニュースなど、投稿記事のタイト...

box-sizing: border-box;があちこちに記載されている。 良さげなデザインのサイトのコードを参考にしたり、Webサイトのコーディングの添削をしたりする際に、意外と遭遇するのが「box-sizing: border-box;」が指定されているCSSファイル。 box-sizingとは？ box-sizingはCSS3で登場したプロパティで、初期値は「con...

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

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

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