# フロントエンドエンジニアのステップアップのための集合知 ジュニアとミドルはソフトスキル多めなのでフロントエンドエンジニアに限らなそうです - 期待役割 ... 該当ステップ内での TO BE - できてほしい ... 該当ステップ内での WANT (🔐は次ステップへ進む上では MUST) - 次のステップへの期待 ... 次のステップへ進む上での MUST ## ジュニア (ステップ1) ### 期待役割 - 指示された小さいタスクをこなすことができる - ~3人日くらいの影響範囲の閉じたタスクを想定 - 仕様が決まっている、あるいは不明な場合は質問できる ### できてほしい #### ハードスキル - 初歩的なセキュリティバグを生まない - #### キーワード - XSS - コード内に必要に応じて意図をコメントとして残せる - #### 🔐自立的にファイルや関数を分割ができ
ブーム来る？ 「和文バリアブルフォント」の世界
そんな事もあり、4月10日は新しいフォントがいくつか発表された。今年の目玉はなんといっても「和文バリアブルフォント」であろう。 われわれが普段使用するフォントは、同じデザインでも細いもの、太いもの、横が詰まったものなどがそれぞれ個別のフォントとして提供され、1つのファミリーを形成している。 一方バリアブルフォントは、そうした文字の変形を1つのフォントで提供していこうという比較的最近のフォントフォーマットで、米Adobe／米Apple／米Google／米Microsoftが共同開発した。フォントパラメータとして、太さや字幅がバリアブルで変更できるため、従来はファミリーで提供しなければならなかったフォントデータが、1つのフォントで小さく提供できるというメリットがある。 もちろんデザインする側も、細いか太いかの2択ではなく「中間」も選べるし、縦長、横長も選べるので、表現の幅が広がるわけである。た
追記) v10.2からデフォルトでGoogle Fontsの最適化が行われるように Next.js v10.2から自動でWebフォントの最適化が行われるようになりました。v10.2時点ではGoogle Fontsにのみ対応しているとのことです。特に設定は不要で、いつも通りGoogle Fontsを読み込めばOKです。 ↓ 詳細 これより下の解説は古い内容になります。実装の参考にしないようお願いします。 以前、Next.jsのリポジトリを眺めていたときにFont Optimizationsというプルリクエストを見つけました。 2020年12月時点ではExperimantalな機能のようですが、v10.0.4で既に使えるようになっていたので試してみました。 :::message alertz Next.js v10.0.4でのドキュメントに則っていない記録になります。 ::: Font Opt
Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印のボタン HTML<div class="button01"> <a href="">ボタンデザイン</a> </div> CSS.button01 a { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 1em 2em; width: 300px; color: #333; font-size: 18px; font-weight: 700; bac
行政機関が管理する膨大な数の「文字」がデジタル改革を阻んでいる。字形がわずかに異なる文字も含め、戸籍だけで約70万字。岸田文雄政権は自治体の情報システムを効率化するため、約7万字に絞り込む計画だ。だが、人によっては名前の漢字が変わる可能性があり、慎重論もくすぶる。文字を決めるのは誰なのか――。 スマホに表示できない 「スマートフォンやパソコンで表示できない文字がある。魑魅魍魎（ちみもうりょう）とした世界だ」 デジタル庁幹部は、戸籍などで使われてきた文字の特異性をそう表現し、「自治体システムを複雑にし、ガラパゴス化させた元凶だ」と言い切った。 政府は、自治体ごとに仕様がばらばらな戸籍や住民基本台帳、国民年金など20業務の情報システムを2025年度末までに標準化する方針を掲げている。 人口減少で公務員の確保が難しくなる中、システムの効率的な運用で行政サービスの質を維持する目的だ。多すぎる文字を
CSS カスタムプロパティによる流動的フォントサイズ
はじめに 画面幅に対して流動的にフォントサイズを変化させたい場合、vw などの単位を用いると実現できます。たとえば font-size: 5vw; を指定すると、幅 960px ではフォントサイズは 48px、幅 320px では 16px になります。しかし、320px で 16px は小さすぎるので 32px にしたいとなると、計算が必要になってきます。 この計算方法や流動的フォントサイズのさらなる詳細については、以前登壇したときの資料をご覧いただきたい 👇 資料にもございますが、計算して CSS を出力してくれるアプリも作っています 👇 Sass の mixin もあります 👇 今回は、calc() clamp() min() max() と CSS カスタムプロパティを駆使して、自分で計算する必要がなく、Sass なども不要で CSS のみでの実装を紹介いたします。 使い方と
令和元年ベストのfont-familyはこれだ / Better font-family 2019 in Japanese - Speaker Deck
🦠🦠🦠このスライドの内容の更新して記事にしたので、ICS MEDIAのほうを参照ください🦠🦠🦠 2020年に最適なfont-familyの書き方 - ICS MEDIA https://ics.media/entry/200317/ --- OSやブラウザのアップデートによりウェブサイト…
クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT（Flash of Invisible Text）か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT（Flash of Unstyled Text）のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、
Monaspace
Since the earliest days of the teletype machine, code has been set in monospaced type — letters, on a grid. Monaspace is a new type system that advances the state of the art for the display of code on screen. Every advancement in the technology of computing has been accompanied by advancements to the display and editing of code. CRTs made screen editors possible. The advent of graphical user inter
Eagle - 画像収集と管理するアプリ
デザイン事例、スクリーンショット、画像、動画、音声などの素材を簡単に整理し、アイデアを生み出し、仕事の効率をさらに高めましょう！
私たちは1年前に非常に野心的な目標を打ち立てました。それは、誰もがより快適にコードを書けるようにするフォントを作ることでした。 そしてついにその目標を達成しました！ 他の等幅フォントの何が問題なのでしょうか？ 私たち開発者は一日の大部分をコードを見て過ごします。 そのため、画面上のテキストを見やすくするために常に最適なフォントを探していても不思議ではありません。 しかし、多くの一般的なフォントのロジックでは、コードを読む場合と書籍を読む場合の違いが考慮されているとは限りません。 私たちの目はさまざまな方法でコードを追います。コードを横方向に読むのと同じくらい縦に読む必要があることもしばしばです。これは文章に沿って常に同じ方向に目を走らせる読書とは対照的なものです。 そのため、私たちはJetBrains Monoを作るにあたって、何よりもまず長時間コーディングを行う際に目の疲れを引き起こす可
Kosugi Maru（モトヤマルベリ） Google Fontsに登録されているフォントです。Googleスライドでクライアント向けの資料を作る際によく使っています。文字の美しさと読みやすさが気に入っています。 読み手に柔らかく優しい印象を与えるので、「リラックスして資料を読んでほしい」という気持ちを込めて使っています。 ヤスミノが好きなフォント ＞＞セザンヌ ProN＜＜ カッチリしすぎてもないし、崩しすぎでもないところが気に入っています。 馬鹿みたいな感想ですが「なんかちゃんとしてる感」が出る気がしてます。 まきのが好きなフォント ／ アニメ「鬼滅の刃」のフォント✨ Adobe Fontsに追加🔥 ＼ 皆さん、全集中「書体」の呼吸で聞いてください👂 アニメ「鬼滅の刃」で使用されている⼈気の⽑筆フォントメーカー「昭和書体」から、「黒⿓爽」「⼼⿓爽」のフォントも利用可能となりました
あの IBM が作ったオープンソース日本語フォントを使い、プログラミングフォント『PlemolJP』を作ってみた - Qiita
ダウンロード GitHub のリリースページからダウンロードできます。 各リリースノートの下部にある Assets という箇所を開くと、zip ファイルをダウンロードできます。 ✅ PlemolJP_HS_vx.x.x.zip になっているものは全角スペースを可視化しない版（HS: Hidden Space） ✅ PlemolJP_NF_vx.x.x.zip になっているものは Nerd Fonts 対応版（NF: Nerd Fonts） Powerline を始めとした多くのアイコンが表示できます。 ※Console 版のみの提供 ダウンロード⏩ Releases 気に入ったら GitHub でも Star🌟 を付けてもらえると大変嬉しいです！ 謝辞 IBM Plex シリーズを提供してくださっている IBM 社へ、この場を借りてお礼申し上げます。 IBM Plex Sans JP は
おしゃれな手書き！ 筆記体の英語フリーフォントの総まとめ
商用でも無料の英語フリーフォントをいざ探すとなると面倒だと思うので、まとめました。ブラシやペンで書かれたようなおしゃれな筆記体・手書き・スクリプト系の英語フリーフォントを紹介します。 画像にぽんと添えるだけで、おしゃれなデザインになる素敵なフォント達です。 日本語フリーフォントをお探しの人は、下記がお勧めです。 日本語のフリーフォント650種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 商用利用無料！手書きの日本語フリーフォント、筆文字・毛筆の日本語フリーフォントの総まとめ フォントは、商用でも無料、個人利用のみ無料の2ジャンルに分けました。 フリーフォントのインストール方法 商用無料、おしゃれな筆記体・手書きの英語フリーフォント 個人利用のみ無料の英語フリーフォント フリーフォントのインストール方法 フリーフォントのインストール方法を簡単に解説します。 フリーフォントをW
だれかWebのチョットワカル人、 「(日本語など大容量の)Web FontのCore Web Vitalsへの影響 使い続ける方法とその是非」 を記事に書いてほしい。。。 preload頼りでいいんだろうか。どのくらい失敗するんだろうか…… — 辻正浩 | Masahiro Tsuji (@tsuj) January 20, 2021 私自身も、WebフォントがどれくらいCore Web Vitals影響するのか、影響を回避しながらWebフォントを使う方法がハッキリ分かっていなかったので、調査してみました。 本投稿はWEB上から入手できる情報源をもとに内容をまとめています。情報の正確性には留意していますが、私の独自の解釈・予想も含まれています。以上から、本情報はいち見解として捉えていただきますようお願い致します。WebフォントによるCore Web Vitalsへの影響とはCore Web
昭和なプレートで景色が変わる
1971年東京生まれ。デイリーポータルZウェブマスター。主にインターネットと世田谷区で活動。 編著書は「死ぬかと思った」（アスペクト）など。イカの沖漬けが世界一うまい食べものだと思ってる。（動画インタビュー） 前の記事：お花畑は思ってたのと違う ＞ 個人サイト webやぎの目 これが元ネタです そのプレートとはこのようなものである。 たしか関門トンネルで かっこいい。 特徴としてはプラスチックの板に文字を彫ってインクを流し込んであること。そしてフォントが独特であることだ。 あれは機械彫刻用標準書体と呼ぶ書体で、手動の彫刻機のために細部を工夫してあるそうだ。これをフォント化して無償配布している人がいた。ありがとう！機械彫刻用標準書体フォント （全部はまだフォント化されていないので、ない文字は似た丸ゴシックで代用しました） レーザー加工機であの書体を彫ってインクを流し込めば自作できる。墨入れの
Webフォントの表示を最適化するテクニック
Webページに表示するフォントは通常、システムフォントとWebフォントの2種類があります。システムフォントはOSにインストールされているフォントで、Webフォントは表示用にフォントファイルを用意する必要があります。 WebフォントはさまざまなフォントをWebページに使用できるというメリットがありますが、パフォーマンス面でシステムフォントに劣るので使用を控えている人もいるかもしれません。Webフォントのフォントファイルを調整し、読み込みを最適化し、最大速度と最小のFOUTを実現するテクニックを紹介します。 5 steps to faster web fonts by Iain Bean 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Webフォントには最新のファイルフォーマットを使用する 2. font-displ
プログラミングに適したフォントを使うメリットとは？ フォントとは何か、そしてプログラミングに適したフォントを使うメリットについて解説します。 そもそもフォントとは？ フォントとは、パソコンの画面に表示したり、紙に印刷したりする場合などに利用できるようにセットになった書体データを意味します。 もともとは1つの文字サイズで書体ごとにまとめられた大文字・小文字・数字・記号などのセットのことをフォントと読んでいました。 しかし、デジタルのフォントは拡大縮小ができるようになったため、上述の意味で使われることが一般的です。 コードの視認性がアップする プログラミング向けのフォントを使うメリットとして、まずコードの視認性がアップすることが挙げられます。 コーディングを行なう際は、等間隔に文字が配置される等幅フォントを使うことが一般的。 文字幅が一定で表示されると、文字ごとで生まれるズレがなくなります。
VS Codeにお勧めのフォント！ 似た字形をはっきり区別でき、プログラミング向けに読みやすさを追求 -Commit Mono
コードがはっきりときれいに見えるように、プログラミング向けに読みやすさを追求したフォント「Commit Mono」を紹介します。 似た字形（「tl1I|!ij」「O0QDØ38B」「:;.,''''"」「2Z5S7T6b」）ははっきりと区別できるようにデザインされており、また等幅フォントでよくある特定の文字間で幅が等しく見えない問題（「mm」「oの左右」など）も改善されています。 Commit Mono. Neutral programing typeface Commit Monoは、デンマーク出身のクリエイティブデベロッパー兼デザイナーであるEigil Nikolajsen氏によるプロジェクトで、プログラミング向けに読みやすさを追求して作成されたフォントです。 ライセンスはSIL OPEN FONT LICENSE Version 1.1で、商用利用は無料、Webフォントに変換したり改
モリサワの高品質フォントに可読性抜群英字フォントを合成した「UDEV Gothic」レビュー、全角スペース可視化やリガチャにも対応
コーディングや文字入力作業をしていると、「アルファベットの『O』と数字の『0』」の見分けが付かない」「全角スペースのせいでエラーが出ているけど、どこに全角スペースがあるか分からない」といった問題に遭遇しがちです。これらの問題を解決しつつ老舗フォントメーカー・モリサワの高品質な日本語書体も利用できる可読性バツグンのフォント「UDEV Gothic」が登場していたので、実際に使ってみました。 GitHub - yuru7/udev-gothic: UDEV Gothic は、ユニバーサルデザインフォントのBIZ UDゴシックと、 開発者向けフォントの JetBrains Mono を合成した、プログラミング向けフォントです。 https://github.com/yuru7/udev-gothic UDEV Gothicの合成元であるモリサワ製「BIZ UDゴシック」は最近のWindowsやm
https://twitter.com/geo_vitya/status/1598518498887897089 https://support.discord.com/hc/en-us/community/posts/10647396120855 ¯\_(ツ)_/¯という絵文字がいい感じに表示されるためだけに日本語のツだけ形を変更して標準フォントに入れた結果、日本語フォントの中でツだけ見た目が浮いてる。 本当にひどい。
ソフトウェアの日本語文字が中華フォントに侵食されていて想像以上の危機らしい「違和感すごい」 というのが盛り上がっていた。 「想像以上」は主観的だけど、個人的にはちょっと煽りすぎのように思った。 前提: Han Unification はひっくりかえせない そもそも、UTF-8 がよく使われるようになって、絵文字もはいった UCS で、Han Unification しなくてもいいのでは、という話はある。 でもこれは後の祭りで、今更ひっくりかえすのは無理だと思うので、ここでは検討しません。 ユーザー側の言語情報を参照すれば、日本語のグリフは選べる ほとんどの OS には、このユーザーの言語はこれですよ、という情報があって、それでメニューやボタンの文字が日本語になる。日付の表示方法とかも、これを参照する。統合漢字でも日本語のグリフでレンダリングしたい、というのは、8割くらいはこれで解決するはな
藤原 麻里菜 | Marina Fujiwara @muda_zukuri みなさんも使えるようにダウンロードリンクを用意しました。ひらがなカタカナ簡単な漢字と記号が入っています。 fujiwaram.com/archives/1001
沈黙の巨人、「写研」が動いた “愛のあるユニークで豊かな書体”がわれらの手に届くまでの100年を考える（1/3 ページ） プレスリリースでは資本関係や相互の開発リソースについてどのような動きになるのかは具体的に述べられておらず、現時点では共同開発の合意について、それぞれの代表である写研の笠原義隆氏とモリサワの森澤彰彦氏が開発の声明を簡潔に出した、という段階である。合併や経営統合という内容のニュースではないので誤解なきように。 なぜこのタイミングでリリースされたのだろうか。文字と関わりの深い出版やデザイン業界にとっては、もっと早い時期にリリースされていればよかったのにとか、せめて10年前に写研の手で発売することはできなかったのかという思いが強いだろう。モリサワもフォントワークスもイワタも定額制のライセンス契約で豊富な書体を使えるし、タイプバンク、リョービといったベンダーの書体もかなり以前から
菅新汰 ｜ nottuo Inc. @suga_arata プロポーショナルフォントの方が字幅が調整されているので、見栄えは良い。 （プロポーショナルじゃない）等幅フォントだと、原稿用紙みたいに縦の見た目も揃う。 っていう特徴があると思う。
Noto emoji, a new black and white emoji font with less color, may gain us more in the long run Posted by Jennifer Daniel, Creative Director - Emoji & Expression In 1999 — back when Snake 🐍 was the best thing about your phone 📱 — there were three phone carriers in Japan 🗾 . On these phones were tiny, beautiful pictures called emoji (meaning “picture” and “character” in Japanese 🥰). These 176 im
妻の手書きのフリーフォントができました。 「ちひろもじ」(命名妻)です。ここからDLできます。 ・商用 個人利用 可 ・OS Windows / Mac ・形式 TrueType ・ひらがな◯ ・カタカナ◯ ・漢字◯(中学2年まで) きっかけ 妻とは出会ってから9年ぐらいになります。 付き合ってる時も結婚して生活を共にしてからもずっと気になってたことがありました。 めちゃくちゃ字がかわいい バランスが偏ってたり跳ね部分が一直線だったり、間隔が空き過ぎていたり、どこかしら崩れているのに、可読性もちゃんと合って文字として認識できる。 そんな妻の字を見かけるとくすっと笑いが出てくるので、時々見かけてはほんわかと和んでいました。 妻の職場でもそれはたびたび話題にあがり、彼女の上司もその文字をフォントとして残しておきたいと、冗談まじりに言っていたりしました。 フォントにできたらおもしろそう。 私
CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developers
CSS テキスト モジュール レベル 4 の 4 つの新しい国際的な CSS 機能が Chrome に導入されます。この投稿では、すでにリリース済みの製品と、間もなく提供予定の製品について説明します。 Chrome 119 以降: word-break: auto-phrase での日本語のフレーズ改行。 Chrome 120 のフラグの背後: text-autospace プロパティによるスクリプト間のスペース。 開発中: text-spacing-trim プロパティを使用した中国語、日本語、韓国語（CJK）の句読点カーニング。 言語間で最小フォントサイズを統一します。 日本語のフレーズの改行: word-break: auto-phrase 日本語の読みやすさを向上させるこの機能（Chrome 119 以降） 中国語や日本語など東アジアの一部の言語では、単語を区切るためにスペースを使
UIパーツにメイリオを指定しないほうがいい理由
はじめに 前提として本記事は特定のフォントを貶める意図はなく役割として使い分けることを推奨する記事です。 フォントにあるのは役割であり、優劣ではないということを念頭にご一読いただけると幸いです。 注意事項 メイリオという特殊なフォント まず具体的な問題点を挙げる前にメイリオというフォントについて軽く紹介させていただきます。 といってもWeb開発者にとっては馴染み深いフォントでありご存じの方が大半だと思います。 Windows Vistaより搭載されたこのフォントは未だに根強い人気があります。 記事にもあるように、このフォントは和文と英文の調和を重視して作られ英文のベースラインという考え方を取り込んでいます。 そこでメイリオでは和文を縦方向に95％に圧縮した形にして下部にスペースを開けた。こうすることで和文・欧文が混じったときに、それぞれのベースラインを合わせつつ、文字が上下に踊って見えると
Cloudflare Fonts試してみた
利用方法は非常に簡単で、CloudflareのWebコンソールからトグルをオンにするだけ。 オリジンの内容を変更したりなどの作業は一切不要。 サイドバーの Speed > Optimization を選択し、Content Optimization のタブの中にトグルが存在している。
(株)昭和書体
アニメや漫画の制作が困難な会社やクリエイターを応援するため、大人気アニメ「鬼滅の刃」で使われた「闘龍書体」と「陽炎書体」の2書体を組み合わせた「鬼セット」の販売を延長いたします。
概要 内容に応じてサイズが可変する textarea を、できるだけ手間をかけず、スマートな実装を試みます。 しかも、ネイティブのフォームが持っている利点をそのまま活かして、堅牢でアクセシブルな設計を目指します。 標準 textarea の難点 HTML の textarea 要素は基本的に高さが固定されていて使い勝手が悪いです。３行分くらいしか領域がなくて、長い文章を打つのがとにかく苦痛なんていうこともザラです。 最近のブラウザ実装では、多少気を利かせてくれているのか、テキストエリアの領域をドラッグで拡大・縮小できます。 ただ私は思うのです。めんどくさいし、最初っから、入力するテキスト量に応じて自動的に伸び縮みしてくれればいいのに……と。スクロールバーなんて、１ページにひとつあればじゅうぶんなんですよ。 実装方法 難しいことはありませんが、HTML と CSS、JS が協調して動作します
序 ウェブをブラウジングしていると、嫌というほど見る 無意味にひたすらシステムフォントを列挙している 同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定する という苦痛極まりないフォント指定をしているCSSをよく見かける。 ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。 それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。 ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。 起 話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。 それ以
ムゲンダイな文字｜Tsugumi Arai
去年の夏、ふと思いたちニンテンドースイッチを購入した。日常的にゲームをするようになったのは中学生の頃以来で、ゲームボーイアドバンス世代の私は今時のゲームの進化に驚きの連続である。 『ポケットモンスター ソード・シールド』『リングフィット アドベンチャー』などの話題作をいくつかプレイしたのだが、グラフィックデザイナーの私としてはUIで使われているフォントが気になるところ。 「ニタラゴ」先述した二作品のUIで共通して使われているフォントが、「ニュータイプラボゴシック」（以下、作者の意向に従い「ニタラゴ」と表記）だ。これはタイプデザイナーの佐藤豊さんが作った仮名フォントで、フォントワークスからは「ロダン」と混植した「ロダンNTLG」、タイプラボからは「ルイカ」と混植した「ニタラゴルイカ」、モリサワからは仮名フォント「タイプラボN」として販売されている。 『ポケットモンスター ソード・シールド』。
先日，深夜に友人と話している際に「スライドのフォントに結局 Noto Sans（≒ 源ノ角ゴシック）を選んでしまう」という話題が出ました*1．Noto Sans がオープンソースであり，Google スライド等のアプリケーションで最初から使用できるという理由も勿論あるのですが，個人的にはそれだけが理由でないように感じます． ときに，プレゼンテーション用のスライドにはどのような書体が適しているのでしょうか？ 遠くから見えるように，視認性が高いフォントを使いましょう！ ――という教科書的な回答はさておき，これは結構難しい問題に思えます．というのも（特に，洒落た発表ではなく研究発表のようにお堅い）スライドは，視認性のほかに，ある主の無味乾燥さが求められるように感じるからです．個人的には，「視認性」「ニュートラルさ」「デフォルト感がない」の 3 つを兼ね備えた書体が適切であると感じています．このあ
CSS Advent Calendar 201918日目に空きがあったので埋めます。 最終日も私です。 QiitaやGoogleでremと検索すると、間違った使い方をしている記事がたくさん出てきます。 remはroot emの略！ って分かってるならRootを潰すな！ rootはユーザー設定により変動するかもしれないものです。 ユーザビリティを考えるなら、きちんとユーザーの設定に対応出来るようにしましょう。 よく見る間違った使い方 間違った使い方の言い分 モダンブラウザの初期値は16pxです。 だからrootを62.5%（10px）にすれば1rem = 10pxで分かりやすいです。 15pxは1.5remと書きましょう！ [疑問] 全部pxじゃだめなの？ 1rem = 10pxより全部pxで書くほう分かりやすい。 15pxと書いたほうが楽だし。 なぜこんな変な書き方が流行ったのでしょうか？
2021年7月24日。IBMから『IBM Plex Sans JP』がリリースされました。 「だから？」と思われた方、罰としてこのまま長い序文をお読みください。それ以外の方は次の見出しでお会いしましょう。 以前の記事でもお話ししましたが、これまでにリリースされてきた日本語対応のプログラミング用フリーフォントは、一部を除いて『源ノ角ゴシック』と『M+』という2つのフォントから派生したもの。 なぜ他のフォントが使われないのか。それは選択肢が無いからです。この2つ以外で、 漢字を網羅しクオリティが高くライセンスフリーで使えるそんな都合の良いフォントはほぼありませんでした。あるとすればそれは、漢字を含まないフォントのみ。 ここに加わってきたのが『Plex Sans JP』という新たな選択肢です。 日常使いできる安定感、多彩なウェイト (太さ) 、そして商用利用可能なフリーフォントであるという大きな
顧客からのちょろちょろインプットを脱却 顧客からのめちゃ太いインプットを通して何を選んでもアウトカムを生み出すプロダクトバックログを実現する/Break free from narrow customer input 2024
よわよわプロダクトバックログアイテムで悩むプロダクト開発チームに向けて、顧客からのインプットを太くすることで、つよつよプロダクトバックログを作り出すための仕組みと構造を解説します。 発表者 https://twitter.com/_N_A_ https://note.com/mryy 関…
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドエンジニアのステップアップのための集合知 - HackMD
Next.jsのFont Optimizations（Webフォントの最適化）を試してみる
CSSのみのボタンデザイン – 現場で使ってきたボタンアイデア30選 | BUILD Journal
コモンエイジ：文字を決めるのは誰?「ガラパゴスの元凶」戸籍70万字が阻むDX | 毎日新聞
フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD
JetBrains Mono — 開発者向けの新しい書体 | Post Blog
プレゼンでも使える！バーグハンバーグバーグ社員が好きなフォントを集めてみた | オモコロブロス！
Web FontによるCore Web Vitalsへの影響と使い続ける方法｜平大志朗
フリーのアンチゴチ書体「びぜんアンチック」が公開、「BIZ UDゴシック」がベース／00年代のマンガや同人誌を思わせる雰囲気。ゆるいライセンスも魅力
【2021年版】プログラミングのおすすめフォント10選と選び方を解説 | プログラミングスクールならテックキャンプ
ソースコード用フォント「FiraCode」、文字だけでプログレスバー・リングを表現可能に／文字のバリエーションも拡充
Discordの新標準フォント、これこそ本当の文化盗用だろ
Unicode をレンダリングするときは言語情報を渡しましょう - blog.8-p.info
お医者さんからもらった診断書の衝撃的な文字を手書きフォントにして『走れメロス』を書いたらこうなった
沈黙の巨人、「写研」が動いた “愛のあるユニークで豊かな書体”がわれらの手に届くまでの100年を考える
MSゴシックとMSPゴシックの違いとは？フォント名称についている謎文字をまとめた画像がわかりやすいと話題に！
What is black and white and read all over?
妻がipadで手書きフォントを作った話｜siori designer
内容に応じてサイズが可変する <textarea> を素敵に実装する - Qiita
やめよう、CSSのシステムデフォルトフォント指定 - Chienomi
スライドに適した「ニュートラルでデフォルト感のない」フォントを考える - いなにわうどん
CSSの単位remの正しい使い方 - Qiita
PlemolJPか、それ以外か – プログラミング用フォント徹底比較！
www.iezo.net
katsuo.px.ebb.jp
www.maebashi-cvb.com
www.nikkei-science.com
forbesjapan.com
search.app