Skip to content

Instantly share code, notes, and snippets.

View tsmd's full-sized avatar

Shimada Takayuki tsmd

View GitHub Profile
@tak-dcxi
tak-dcxi / typography.md
Last active January 23, 2026 11:35
タイポグラフィCSS

タイポグラフィ

font-family

  • フォントは Web サイトの印象に直結するため、一概にこれが良いとは言えない。
  • 特にこれと言った指定がされていない場合は font-family: sans-serif のみで良い。
    • Windows 11/10 では 2025 年のアップデートにより Noto Sans JP が標準搭載された。色々と問題があった游ゴシックの呪縛から解放されたのは大きい。
    • Android はメーカーにより削除されている可能性はあるが、そうでない場合は原則的に Noto Sans CJK JP が適用される。
    • Mac/iOS はヒラギノ角ゴ ProN が適用される。
  • アップデートによるフォントの変更の懸念はあるものの、ディスクリシアの方々は UD デジタル教科書体などの読みやすいフォントを設定している可能性があるため、アクセシビリティの観点では font-family: sans-serif の指定を推奨する。
@hail2u
hail2u / apca.js
Last active September 11, 2023 05:18
Get contrast of colors using APCA (Advanced Perceptual Contrast Algorithm)
// https://github.com/Myndex/SAPC-APCA#the-plain-english-steps-are
// Example:
// const contrast = getAPCAContrast("rgb(255, 255, 255)", "rgb(136, 136, 136)");
// This returns `66.89346308821438` (66.893%)
// SAPC-APCA README says:
// > #888 vs #fff • 66.89346308821438
// 80% means 7:1 in WCAG 2.0
// 60% means 4.5:1 in WCAG 2.0
@hail2u
hail2u / Gruntfile.js
Last active June 27, 2025 19:42
This Grunt task renders `foo.hbs` using data based on `metadata.json` (Base) and `foo.json` (Extend) with Handlebars.js. `foo.hbs` can include other Handlebars.js template (e.g. `styles.inc.hbs`).
module.exports = function (grunt) {
grunt.initConfig({
generate: {
all: {
expand: true,
cwd: '.grunt/html/',
src: ['**/*.hbs', '!**/*.inc.hbs'],
filter: 'isFile',
dest: './',
ext: '.html'
// http://ejohn.org/blog/simple-javascript-inheritance/
function Class() {}
Class.extend = function extend(props) {
var SuperClass = this;
function Class() {
if (typeof this.init === 'function') {
this.init.apply(this, arguments);