タグ

qiitaとfontに関するslay-tのブックマーク (4)

  • CSSの単位remの正しい使い方 - Qiita

    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と書いたほうが楽だし。 なぜこんな変な書き方が流行ったのでしょうか?

    CSSの単位remの正しい使い方 - Qiita
  • 治安の良いCSSを目指して 〜 平和な世界のために僕たちができること 〜 - Qiita

    はじめに 業務でCSSを書くようになってから、いくつかの月日が流れました。 CSSを学び始めた当初は、要素をキレイに横並びにすることすら手こずっていましたが、最近は随分スムーズにデザイン通りのスタイルを書くことができるようになりました。 今日に至るまで、過去の自分が書いたCSSへの後悔の念で眠れない日々や、原因のよくわからない表示崩れの悪夢にうなされる夜もありました。1 これからCSSを学ぶ人、CSSにはあまり詳しくないけどたまに書くよという人にそんな思いをして欲しくない。できたらCSSのことを好きになって欲しい。 そんな思いで自分がスタイルを書く時・レビューをする時に気をつけていることを(自戒も込めて)まとめまてみました。 🤔 良いスタイルってなんだろう? スタイルを書く時に大切だと考えていることは3点あります。 開発効率 デザイン再現性 パフォーマンス 開発効率 色々な記事やでも引

    治安の良いCSSを目指して 〜 平和な世界のために僕たちができること 〜 - Qiita
  • ビジュアルデザインとアクセシビリティ - Qiita

    この記事はWWDC19のVisual Design and Accessibilityのセッション動画をまとめたものです。 ※ここに貼っている画像は、上記動画をスクショしたものです。 概要 アクセシビリティを視覚的に向上させる3つの方法について Dynamic Type Dynamic Type はユーザがフォントサイズをカスタマイズできる機能。Dynamic Type を実装するときは、次の4点に気をつける必要がある。 拡張性を持たせ、テキストはできるだけ動的に 画面の幅を最大限に利用する テキストを切り捨てず、デフォルトと同じだけの量を表示する テキストだけでなくグリフのサイズも調整して、UI のバランスを取る iOS では11種類のテキストスタイルで Dynamic Type を使うことができる。Dynamic Type を使う場合は次のように書く。 label.font = UIF

    ビジュアルデザインとアクセシビリティ - Qiita
  • SF Mono を使って最高のプログラミング用フォントを作った話 - Qiita

    みなさんターミナルは使ってますか? Terminal.app? iTerm2? Hyper? それとも他の何か? それではフォントは何を使っていますか? Menlo? Consolas? Ricty? 今日はそんなお話です。 対象とする読者 ターミナルやエディタでカコイイ等幅フォントが使いたい人。 既存のフォントを FontForge + Python で色々いじって遊びたい人。 プログラミング用フォント SF Mono Square ずっと Ricty を使っていたのですが、色々こだわる余り自分でフォント作ってしまいました。作ったものをそのまま配布するのはライセンス上できませんが、Homebrew で誰でも導入できるようにしています。 SF Mono Square には以下のような特徴があります。 レポジトリ: delphinus/homebrew-sfmono-square 半角フォン

    SF Mono を使って最高のプログラミング用フォントを作った話 - Qiita
  • 1