Note: I received a lot of great feedback from the discussions at Mastodon and Hacker News, so I've updated the post with some improvements to the font! I've also added some further examples and acknowledgements at the end. Syntax Highlighting in Hand-Coded Websites The problem I have been trying to identify practical reasons why hand-coding websites with HTML and CSS is so hard (by hand-coding, I
タグ
- すべて
- まとめ (2)
- .NET (1)
- 2ch (2)
- 3d (3)
- 5g (1)
- ANA (1)
- Arduino (1)
- CASIO (2)
- COVID-19 (4)
- CSRF (1)
- ChatGPT (12)
- CheatSheet (2)
- CodeMirror (2)
- DEEokinawa (1)
- DIY (1)
- DMM (1)
- DOM (3)
- DTM (11)
- DX (4)
- DeepLearning (1)
- Design Sprint (1)
- Direction (1)
- ES2015 (1)
- ES2016 (1)
- Emoji (1)
- Fetch (2)
- FirefoxOS (1)
- Flash (3)
- GTM (1)
- Gamepad (1)
- Google Apps Script (1)
- GraphQL (2)
- Herlock (1)
- Honda (2)
- IDE (1)
- IME (2)
- IT (7)
- Interview (2)
- IoT (4)
- JAL (1)
- JSX (1)
- KPT (1)
- LGWAN (1)
- Linux (1)
- Lit (15)
- LitElement (7)
- LoL (1)
- M1 (1)
- ML (1)
- Mac (6)
- MachineLearning (1)
- Math (3)
- Meta (4)
- NAVER (1)
- NHK (7)
- OGP (1)
- PWA (14)
- Phaser (1)
- QA (1)
- REST (1)
- React.js (2)
- ReactNative (1)
- Ricarope (2)
- SEO (4)
- SIM (1)
- SNS (3)
- SPA (3)
- SaaS (3)
- Slack (3)
- SwiftUI (1)
- TCP (1)
- TensorFlow (2)
- TikTok (1)
- TypeScript (17)
- Unicode (4)
- VR (4)
- VScode (9)
- Vue.js (5)
- WAI-ARIA (1)
- Web Components (38)
- Web Push (1)
- Web3 (4)
- WebAssembly (3)
- Web魚拓 (1)
- WiMAX (1)
- XSS (4)
- accessibility (13)
- actvila (1)
- adobe (11)
- agile (2)
- ai (38)
- ajax (2)
- alexa (1)
- algorithm (2)
- amazon (2)
- amp (3)
- analytics (1)
- android (7)
- animation (6)
- apache (1)
- api (25)
- app (20)
- apple (17)
- audio (1)
- autocomplete (1)
- aws (8)
- babel (1)
- bar (4)
- bff (1)
- blink (2)
- blog (10)
- book (6)
- bot (4)
- brand (1)
- branding (1)
- browser (18)
- business (11)
- cache (1)
- calendar (5)
- camera (4)
- canvas (5)
- cat (1)
- cheat sheet (1)
- chrome (45)
- chromebook (4)
- cli (2)
- cloud (1)
- cms (2)
- code (2)
- codepen (6)
- coding (2)
- color (13)
- colorpicker (1)
- component (7)
- cook (3)
- cookie (2)
- craft (1)
- creative (2)
- csp (1)
- css (84)
- darkmode (1)
- database (6)
- db (1)
- debug (3)
- design (55)
- design system (4)
- designsystem (10)
- desktop (1)
- development (50)
- devtools (8)
- diagram (2)
- display (1)
- document (4)
- drag (2)
- draw (1)
- e-Sports (3)
- ecmascript (1)
- edge (3)
- editor (10)
- education (9)
- electron (8)
- email (5)
- engineering (3)
- es6 (3)
- esbuild (1)
- event (2)
- example (2)
- excel (2)
- express (1)
- extension (16)
- face detection (1)
- facebook (2)
- figma (13)
- firebase (1)
- fishing (1)
- flexbox (1)
- flow (1)
- flutter (1)
- font (19)
- food (6)
- form (13)
- formatter (1)
- framework (12)
- free (12)
- froala (1)
- frog (1)
- frontend (13)
- gallery (5)
- game (36)
- generator (10)
- gif (1)
- gist (1)
- git (6)
- github (38)
- goods (7)
- google (62)
- googlemaps (2)
- graph (3)
- graphic (1)
- grid (8)
- growth (1)
- guideline (4)
- health (1)
- history (15)
- hono (1)
- hotel (4)
- html (12)
- html5 (5)
- http (4)
- http2 (1)
- i18n (1)
- iPhone X (1)
- icon (11)
- idea (2)
- ie (8)
- iframe (1)
- illustrator (1)
- image (3)
- inspiration (1)
- interaction (1)
- interface (1)
- internals (1)
- ios (9)
- iphone (6)
- iterator (1)
- java (2)
- javascript (79)
- jazz (1)
- jquery (4)
- json (1)
- keyboard (6)
- kids (1)
- law (3)
- library (38)
- life (19)
- lifehack (7)
- line (2)
- lit-element (4)
- lit-html (4)
- log (2)
- logo (4)
- lottie (1)
- loupe (1)
- mail (6)
- management (11)
- markdown (1)
- marketing (3)
- mastodon (1)
- material (4)
- memory (1)
- midi (6)
- midjourney (1)
- minify (1)
- mobile (2)
- modal (1)
- mojo (1)
- movie (2)
- music (20)
- myhome (2)
- mysql (1)
- neta (3)
- news (8)
- nocode (4)
- node (2)
- note (11)
- notion (7)
- npm (5)
- nuxt (1)
- ocr (1)
- okinawa (14)
- oracle (2)
- oss (4)
- outdoor (1)
- password (1)
- pdf (6)
- performance (10)
- photo (3)
- photoshop (3)
- php (4)
- piano (4)
- pixi.js (1)
- pizza (1)
- playground (2)
- plugin (7)
- podcast (2)
- preact (1)
- presentation (1)
- private (4)
- product (16)
- programming (17)
- project (2)
- promise (1)
- prototype (1)
- pubg (2)
- python (5)
- qiita (28)
- radio (1)
- react (22)
- reactive (1)
- recipe (7)
- recorder (1)
- redux (2)
- regex (1)
- report (2)
- responsive (2)
- retro (1)
- ring (1)
- rizin (2)
- rollup (1)
- router (2)
- rss (2)
- rust (6)
- safari (13)
- salesforce (1)
- science (5)
- scroll (6)
- scrollbar (1)
- search (8)
- security (29)
- server (1)
- shop (3)
- shortcut (2)
- signal (1)
- slide (36)
- smartphone (1)
- sms (1)
- solidjs (3)
- sony (4)
- sort (1)
- sound (9)
- spreadsheet (3)
- sql (1)
- ssr (1)
- stackoverflow (1)
- state (4)
- stimulus (1)
- store (2)
- storybook (1)
- streaming (1)
- streming (1)
- studio (1)
- study (9)
- styleguide (2)
- stylelint (1)
- sublime text (1)
- survey (5)
- svelte (9)
- sveltejs (6)
- svg (10)
- switch (1)
- table (1)
- tailwind (2)
- technology (3)
- template (6)
- test (13)
- texture (1)
- theme (2)
- tips (18)
- togetter (11)
- token (1)
- tool (30)
- tooltip (1)
- touchbar (1)
- transition (2)
- translate (1)
- translation (1)
- trends (3)
- tutorial (6)
- tv (5)
- twitter (17)
- ua (1)
- ui (54)
- usability (3)
- utility (1)
- ux (25)
- vainglory (28)
- validation (4)
- video (2)
- virtualbox (1)
- virtualdom (1)
- visualization (1)
- vite (7)
- vocaloid (1)
- voice (5)
- vue (16)
- vuejs (3)
- vuex (1)
- w3c (1)
- web (19)
- webapp (6)
- webcomponents (5)
- webdesign (6)
- webgl (6)
- webkit (1)
- webpack (4)
- webservice (14)
- webデザイン (2)
- windows (6)
- wordpress (3)
- work (22)
- wysiwyg (2)
- youtube (19)
- zenn (6)
- あとで読む (24)
- いじめ (4)
- お金 (4)
- これはすごい (4)
- これはひどい (20)
- まとめ (19)
- ウイルス (2)
- エンジニア (27)
- ゲーム (14)
- コミュニケーション (8)
- サーバ (6)
- サービス (6)
- スマートフォン (2)
- セキュリティ (12)
- チートシート (2)
- チーム (8)
- ツール (6)
- テスト (3)
- テレワーク (2)
- デザイン (25)
- ドキュメント (2)
- ネタ (14)
- ネット (6)
- ビジネス (8)
- フォント (10)
- フロントエンド (6)
- ブラウザ (5)
- プログラミング (15)
- ホテル (2)
- マネジメント (10)
- マンガ (3)
- マーケティング (7)
- リモートワーク (4)
- レシピ (9)
- 人材 (3)
- 人生 (14)
- 仕事 (39)
- 仮想通貨 (2)
- 任天堂 (2)
- 住宅 (3)
- 便利 (2)
- 健康 (8)
- 入門 (4)
- 分析 (3)
- 勉強 (10)
- 動画 (4)
- 医療 (4)
- 参考 (2)
- 地震 (2)
- 増田 (15)
- 大学 (5)
- 子ども (4)
- 子育て (6)
- 学校 (4)
- 学習 (14)
- 宗教 (3)
- 家 (5)
- 年金 (4)
- 戦争 (5)
- 技術 (6)
- 政治 (8)
- 教育 (31)
- 文化 (3)
- 文章 (5)
- 料理 (5)
- 日本 (13)
- 日本語 (6)
- 本 (5)
- 東芝 (2)
- 機械学習 (2)
- 歴史 (5)
- 沖縄 (12)
- 法律 (3)
- 生活 (15)
- 研究 (9)
- 社会 (9)
- 福祉 (5)
- 税金 (4)
- 素材 (2)
- 経営 (6)
- 経済 (6)
- 絵文字 (2)
- 育児 (9)
- 脳 (4)
- 芸能 (2)
- 裁判 (7)
- 言語 (5)
- 設計 (20)
- 警察 (8)
- 車 (8)
- 開発 (63)
- 音楽 (8)
- css (84)
- javascript (79)
- 開発 (63)
- google (62)
- design (55)
- ui (54)
- development (50)
- chrome (45)
- 仕事 (39)
- Web Components (38)
fontとcssに関するpiayoのブックマーク (3)
-
piayo 2024/08/17
- font
- css
リンク -
CSSリセットにも新しい動きが！最近の実装に合わせて、見直すきかっけになる新しいCSSのリセット -CSS Remedy
最近、CSSのリセットを見直す動きが少しずつあるようです。 2018年おすすめのCSSリセット！「Reboot.css」の特徴と使い方を解説、CSSリセットの2019年用私流カスタマイズ方法など、当ブログでもCSSリセットの記事を公開しました。 今回紹介するのはMozilla Developerによる新しいプロジェクトで、後方互換性を備えつつ、現在のデスクトップやスマホの環境に合わせたCSSリセットです。 CSS Remedy -GitHub CSS Remedyの特徴 CSS Remedyのコード CSS Remedyの特徴 CSS RemedyはMozilla Developerによる、CSSリセットの新しいプロジェクトです。 CSSリセットの今までの流れ 何年もの間、リセット用やベース用のスタイルシートは、Web制作者がより早く作業を始めるのに役立ちました。 初期のリセットではすべて
-
Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
-
1
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
処理を実行中です
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
設定を変更しましたx