タグ

2022年6月9日のブックマーク (3件)

  • 簡単!CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

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

    簡単!CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 【2024年最新版】オススメのプログラミング学習サービス集 - Qiita

    はじめに 今回はプログラミング初心者と中級者向けの、プログラミング学習サービスを紹介します。 自分自身が実際に学んできた中でよかったものだけをピックアップしています。 なお、progateやドットインストールといった誰でも知っている学習サービスは省いています。 web制作向け (1) web-design-textbook まずはじめに紹介するのはWeb制作を基礎から実装手法を網羅的に学ぶことができる「web-design-textbook」です。 こちらは基編~上級編とレベル別になっているので初心者でも入りやすい構成になっています。 かつ問題数もかなり豊富で図を多数用いて解説をしているので独学でも挫折せずに学習を進められる教材になっています。 ぜひこれからWeb制作の学習をはじめたいという人は使ってみてください。 (2) Codestep 次に紹介するのは、HTMLCSSといった基礎

    【2024年最新版】オススメのプログラミング学習サービス集 - Qiita
  • 覚えておこう! CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法

    CSSグラデーションといえば、linear-gradient()とradial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。 conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウザにサポートされています。 Use conic gradients to create a cool border まずは、実際のデモをご覧ください。 conic-gradient()のグラデーションは線形・放射とは異なり、色の変化は円の中心点から回転しながら色を変化させる扇型の円錐曲線グラデーションです。 See the Pen Conic Gradient Border by Adam Argyle (@argyleink

    覚えておこう! CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法