UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio
UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということができます。また、作成した比例スケールは、CSSで書き出されるのですぐに使用できます。 Proportio Proportio -GitHub Proportioの特徴 Proportioの使い方 Proportioの特徴 Proportioはデザインシステムに必要となるタイポグラフィ、スペースや角丸やシャドウなどのシェイプ、コンポーネントに使用する比例スケールを簡単に作成するためのツールです。 パラメトリックデザイン（変数を基準としてサイズを決める形状作成方法）を採用しているので、体系的なデザイン
Webフォントエバンジェリスト関口浩之が「情報通信技術賞」を受賞、Web表現の多様化を目指す活動が評価 | Webフォント・サービス FONTPLUS
Webフォントエバンジェリスト関口浩之が「情報通信技術賞」を受賞、Web表現の多様化を目指す活動が評価 一般社団法人情報通信技術委員会が開催する「情報通信技術賞」において、弊社Webフォントエバンジェリスト関口浩之の所属する「次世代Webブラウザのテキストレイアウトに関する検討会（代表者：村井純氏）」が総務大臣表彰を受賞しました。 「縦書きWeb」の活動が評価されての受賞 「次世代Webブラウザのテキストレイアウトに関する検討会」は、英語が標準設定であるWebブラウザにおいて、インターネット上のデザインや表現を多彩にするため、CSS Writing Modes Level 3の普及啓蒙に取り組んできました。 CSS Writing Modes Level 3とは、世界中のさまざまな言語の記述方向をWeb上で実装可能にするCSS（Cascading Style Sheets）の国際標準仕様で
Google Fontsのファイルサイズを簡単に軽量化できる！日本語フォントにも対応
Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。 タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。 Google Fonts -Optimizing your font requests Google Chromeのエンジニア マネージャーであるAddy Osmani氏によると、CSSファイルにパラメーターを付けるだけで簡単にできる、とのことです。 日本語フォントにも対応しています！ Tip: Shave up to 90% off the size
日本語フォント「森と湖の丸明朝」
日本語（和文）フォント「森と湖の丸明朝」は、アウトドアやカフェテリアなどでの使用をイメージした、素朴で温かな文字たちです。 ひらがなとカタカナ、教育漢字（1026文字）を収録したフォントデータです。 ● 仕様 フォントデータ形式：OpenType 収録字種：一丁七万三上下不世両並中丸主久乗九乱乳予争事二五井亡交京人仁今仏仕他付代令以仮仲件任休会伝似位低住佐体何余作使例供価便係保信修俳俵倉個倍候借値停健側備傷働像億優元兄兆先光児党入全八公六共兵具典内円冊再写冬冷処出刀分切刊列初判別利制刷券刻則前副割創劇力功加助努労効勇勉動務勝勢勤包化北区医十千午半卒協南単博印危卵厚原厳去参友反収取受口古句可台史右号司各合同名后向君否吸告周味呼命和品員唱商問善喜営器四回因団困囲図固国園土圧在地坂均垂型城域基埼堂報場塩境墓増士声売変夏夕外多夜夢大天太夫央失奈奏奮女好妹妻姉始委姿婦媛子字存孝季学孫宅宇守安完宗官宙
Speed Up Google Fonts – CSS Wizardry
19 May, 2020 Speed Up Google Fonts Written by Harry Roberts on CSS Wizardry. Table of Contents Testing Default/Legacy font-display: swap; Async CSS preload preconnect Bonus: font-display: optional; Comparisons and Visualisations Findings Google Fonts Async Snippet Ten-Second Version: If you really can’t be bothered going to all of the effort outlined in this post, there is a super rough-and-ready,
Bootstrap 5の新しいアイコンとFont Awesomeアイコンのそれぞれの使い方と使いやすさを比較
WebサイトやスマホアプリのUIでアイコンを使用する際に候補になるのが、アイコンのライブラリです。中でも無料で利用できるFont Awesome（有料版もあり）の人気が高いです。 Bootstrap 5用に最近リリースされたSVGアイコンとFont Awesomeアイコンの使い方と使いやすさを比較した記事を紹介します。 Bootstrap 5 icons vs Font Awesome: comparison based on design, variety and usability by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Font Awesomeのアイコン Font Awesomeアイコンの使用方法 Bootstrapのアイコン Bootstrapアイコンの使用方法 結論 はじめに
Performant Front-end Architecture | DebugBear
This post describes some techniques to make front-end apps load faster and provide a good user experience. We'll look at the overall architecture of the front-end. How can you load essential resources first, and maximize the probability that the resources are already in the cache? I won't say much how the backend should deliver resources, whether your page even needs to be a client-side app, or ho
rel=preload - HTML: HyperText Markup Language | MDN
HTML Tutorials HTML basics Introduction to HTML Introduction to HTML overview Getting started with HTML What's in the head? Metadata in HTML HTML text fundamentals Creating hyperlinks Advanced text formatting Document and website structure Debugging HTML Assessment: Marking up a letter Assessment: Structuring a page of content Multimedia and embedding Multimedia and embedding overview Images in HT
Multi-line gradient links | Zell Liew
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/multi-line-gradient-links. We hope to fix this soon!). When I saw the CSS Tricks redesign, I was hooked. I loved the links with gradients. I told myself I'm going to use gradient links for my next project. That's what I did fo
Hiding Elements On The Web
Through our work as web developers, we need to hide elements for many reasons. For example, a button that should be visible in a mobile viewport, and hidden in a desktop viewport. Or, a navigation element that is hidden on mobile and shown on the desktop. There are three different states when hiding an element: An element is completely hidden and removed from the document flow. An element is hidde
The New Generation of Performance Metrics for Better User Experience - Calibre
The New Generation of Performance Metrics for Better User Experience Traditional performance metrics like load time or DOMContentLoaded focus on details that are easy to measure, but these milestones don’t translate well to what the users care about. If you optimize only for fast loading time, you can quickly end up with sites that still have a poor user experience. A site can have fast total load
古いCSSリセットからはもう卒業！モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、CSSにおけるブラウザの互換性の問題はIE6の頃に比べるとはるかに少なくなりました。無理なリセットやすべてをリセットする必要は全くありません。 現在のWeb制作に合わせて制作された新しいCSSリセットを紹介します。 CSSの知見やテクニックも満載です！ A Modern CSS Reset A Modern CSS Reset -GitHub by Andy Bell 他のCSSリセットが気になる人は、こちらも注目です。 2020年、モダンブラウザに適したCSSリセットのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのCSSリセット 各CSSリセットの解説 まとめ はじめに 私は日々、CSSについて考えて楽しんでいます。それは、お
Fonts by Hoefler&Co.
H&Co designs fonts for print, web, and mobile environments.
技術書典7にて『RustではじめるOpenGL』を頒布します - Toshihiro YAMAGUCHI’s Diary
来る2019年9月22日、サンシャインシティ 文化会館ビル 展示ホールで開催される技術同人誌イベント「技術書典7」にて、書籍『RustではじめるOpenGL』を頒布いたします。 『RustではじめるOpenGL』表紙 『RustではじめるOpenGL』裏表紙 書籍の情報 書籍名: RustではじめるOpenGL サイズ: B5版 ページ数: 92ページ 価格: 1000円 サークル名: Team Jackalope (リンク) 販売ブース: 「こ32D」(池袋サンシャインシティ 文化会館ビル 展示ホール 2F ホールD) (マップ) 書籍執筆に寄せて 本書は、プログラミング言語のRustでOpenGLを扱うための入門書です。 私はこれまで、OpenGLを使ってネットワーク上のデータの流れを3Dで可視化させるソフトウェアを作成してきました。 まったくOpenGLを知らないところからスタートし
人気上昇中！2019年に注目されているウェブデザイントレンド10個まとめ
この記事では、2019年現在人気となっているウェブデザイントレンド10個をまとめて紹介しています。 2019年のウェブデザインの動向としては、あらゆるトレンドの組み合わせやユニークなデジタルエフェクトなど、ウェブサイトやブランドを魅力的にするものが多く含まれています。お好みのトレンドを見つけて、今後のプロジェクトに活用してみてはいかがでしょう。 コンテンツ目次 1. 効果的なタイポグラフィー 2. グラデーションカラーの変化 3. よりナチュラルで本物の写真を 4. 個人の用途に合わせたイラスト 5. 3Dイラスト 6. モバイルファースト・デザイン 7. マイクロインタラクション 8. ユニークなアニメーション 9. グリッド無視の重なり型レイアウト 10. ビデオコンテンツの統合 1. 効果的なタイポグラフィー 2019年に入り、タイポグラフィーの人気はますます高まっています。大きく表
The History of Clarus the Dogcow
Once upon a time, companies had real personalities. While the Apple of today is a gleaming white wall of corporate press releases and carefully-timed keynotes, long-time fans of the company can remember a time when the company had far more personality. Become a member of 512 Pixels. Support projects like these, receive exclusive content in the monthly newsletter and enjoy advanced screenings of my
ウェブの今を体感！参考にしたい最新ウェブデザイン48個まとめ 2018年10月度 - PhotoshopVIP
メッセージを伝えたり、商品を販売したり、ポートフォリオや企業サイト、ブログやランディングページなど、ウェブページには制作したデザイナーのアイデアがつまっています。まるで思いつかないようなユニークなアイデアが使われていたり、最先端のウェブ技術を駆使したこれまでにない体験をお届けするサイトなど、参考したいポイントがたくさんあります。 この記事では、最近国内外で話題となった最新ウェブデザインをまとめてご紹介します。ますます加速するウェブの世界をのぞいてみてはいかがでしょう。 実例で学ぶウェブデザイン！参考にしたい最新スタイル見本厳選50個まとめ ウェブの今を体感！参考にしたい最新ウェブデザインまとめ The Art Center 子どもたちにデザインの楽しさを伝えるワークショップを開催しているサイトで、カラフルでシンプルなシェイプをつかった統一感のあるデザインが素敵。chu Cowboy アプリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
東亜重工フォント『東亜重工』｜株式会社イワタ
Speckyboy Design Magazine
Weekly News for Designers № 454