[B! コード][整理] masakuma0812のブックマーク

masakuma0812 id:masakuma0812

コードと整理に関するmasakuma0812のブックマーク (3)

簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは？実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整（カーニング）ができます。はじめに：ベタ組みと文字詰め日本語フォントは基本的にベタ組み（等幅）で読みやすいように設計をされています。長文を読むにはベタ打ちのほうがリズムよく読めて疲れないので、本文などはベタ打ちのままのほうがよい場合が多くあります。それでもフォントサイズの大きい見出しなどでバシッといい感じに決めたい場合もありますよね。個人的には記事のタイトルが並んでいるなかで、カッコから始まるものが混じっているときなどは、「んぁ〜」
masakuma0812 2022/06/08
CSS

フォント

間隔

整理

調整

自動

コード
リンク
読みやすい＝理解しやすい　Webの組版を整理してより良い文章を届けよう - Qiita
この記事はQiita Advent Calendar 2021の12日目の記事で、Qiita株式会社 CX向上グループの綿貫（@xrxoxcxox）が担当します！この記事の概要 Webの組版を現実的な手法で綺麗に整えるためのやり方をまとめました。同じ内容の文章でも組版次第で読みやすさは変わります。実は、意識していないとWebサイトの文章は余白がガタガタとかになりやすいんですね。 DTPに比べるとどうしても劣ってしまいますが、HTMLとCSSだけでできるだけ綺麗になるようにした & ステップバイステップで説明していますので良ければ真似てみてください！ちなみに今回載せているコードは全てこちらのリポジトリにあります。解決したいこと（≒よくあるWebの組版）余白がガタガタ見出しや本文のジャンプ率が適切でなく目が滑る禁則処理がほぼ何も無いあまり意識したことは無いかもしれませんが、こ
masakuma0812 2021/12/20
CSS

テキスト

ユーザビリティ

整理

余白

Web

DTP

文章

デザイン

コード
リンク
[CSS]かなり便利！スタイルシートを自分で決めたルール通りに整形する便利ツール
コードを決められたルール通りに記述するのは、素晴らしいことです。同じクォートを使い、セミコロンの後のスペースの有無、スペースやタブの数、改行の使い方など、統一するのは大変そうですが、ツールを使用すると簡単にできます。コードを決められたルール通りに、見やすく整形できる便利ツールを紹介します。 Prettier + Stylelint: Writing Very Clean CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Prettier Stylelint 対応エディタ Stylelintを使用した時によくある事関連 Prettier Prettierは2017年1月にローンチされた新しいプロジェクトで、すでに多くのWeb制作者が利用している人気ツールです。「頑固なコードフォーマッター」と呼ばれています。 Prett
masakuma0812 2017/11/01
ツール

テキスト

エディタ

プラグイン

コード

自動

整形

整理

SublimeText

Atom
リンク
1