CSS: 書体周りの設定
CSS でテキストの見栄えを変えられる。
- 字詰め(カーニング)
- アンチエイリアス
- 縦書き
字詰め(カーニング)
font-feature-settings
プロパティで字詰めできる。
書体の種類による。
- TTF(True Type Font)だとできない。
- OTF(Open Type Font)だと字詰めできる。
font-feature-settings: "palt"; カッコなどの約物と仮名が詰まる font-feature-settings: "halt"; カッコなどの約物が詰まる(仮名は詰まらない)
試してみる
https://codepen.io/becolomochi/pen/zYKpvQx
参考
font-feature-settings - CSS: カスケーディングスタイルシート | MDN
"hwid"; / Half-width OpenType feature /
文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
上記サイトによると、他の値としては、
pwid(プロポーショナル字形に置き換える指定)
pkna(仮名や仮名関連の字形セットをプロポーショナル字形に置き換える指定)
などもあるとのこと
アンチエイリアス
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
試してみる
アンチエイリアスがかかって細く見える
https://codepen.io/becolomochi/pen/LYRepqZ
参考
縦書き
writing-mode
プロパティで縦書きができる。
値は vertical-rl
。
writing-mode: vertical-rl;
参考
Pugのことを調べた
公式:
コメントの書き方
https://pugjs.org/language/comments.html
スラッシュ2個で <!-- -->
として出力される
// 出力されるコメント
スラッシュ2個のあとにハイフンを追加すると出力されない
//- 出力されないコメント
ブロックでコメントを書く方法
改行+インデント?(未検証
//- 出力されないコメント ブロック
// HTML に出力されるコメント ブロック
テンプレート分け
https://pugjs.org/language/includes.html
include ファイル名
で呼び出せる
変数
https://pugjs.org/language/attributes.html
- 変数の設定はハイフンを付けて var
- var authenticated = true
- 呼び出すときは
#{}
で囲む- 例:
#{name}'s Pug source code!
- 例:
- 呼び出す前に先に変数を用意しておかないとだめ(よく考えれば当たり前だけどハマった)
if 文
https://pugjs.org/language/conditionals.html
if elseif else
end はいらない
block
https://pugjs.org/language/inheritance.html
exclude で呼び出したりできる
継承
for 文
https://pugjs.org/language/code.html
- for (var x = 0; x < 3; x++) li item
webpack serve で起動したサーバーを強制的に停止する
webpack serve で起動したサーバーを停止できておらず、また起動しようとしたときにエラーが出た。
エラー文
> webpack serve ✖ 「wds」: Error: listen EADDRINUSE: address already in use 127.0.0.1:9000 at Server.setupListenHandle [as _listen2] (net.js:1318:16) at listenInCluster (net.js:1366:12) at GetAddrInfoReqWrap.doListen [as callback] (net.js:1503:7) at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:69:8) { code: 'EADDRINUSE', errno: -48, syscall: 'listen', address: '127.0.0.1', port: 9000 }
バージョン
$ webpack -v webpack-cli 4.2.0 webpack 5.9.0
停止する方法
9000 は使っているポートの番号(適宜変更する)
$ lsof -i :9000
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME node 23828 beco 26u IPv4 0x8913259821ec0eb3 0t0 TCP localhost:cslistener (LISTEN)
PID は 23828
$ kill -9 23828
終了できた。