CSS: 書体周りの設定

CSS でテキストの見栄えを変えられる。

字詰め(カーニング)

font-feature-settings プロパティで字詰めできる。
書体の種類による。

  • TTF(True Type Font)だとできない。
  • OTF(Open Type Font)だと字詰めできる。
font-feature-settings: "palt";
カッコなどの約物と仮名が詰まる

font-feature-settings: "halt";
カッコなどの約物が詰まる(仮名は詰まらない)

試してみる

f:id:damdom:20201228132330p:plain

https://codepen.io/becolomochi/pen/zYKpvQx

参考

font-feature-settings - CSS: カスケーディングスタイルシート | MDN

CSS Fonts Module Level 3

"hwid"; / Half-width OpenType feature /

文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング - ICS MEDIA

上記サイトによると、他の値としては、

pwid(プロポーショナル字形に置き換える指定)

pkna(仮名や仮名関連の字形セットをプロポーショナル字形に置き換える指定)

などもあるとのこと

アンチエイリアス

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

試してみる

アンチエイリアスがかかって細く見える

f:id:damdom:20201228130939p:plain

https://codepen.io/becolomochi/pen/LYRepqZ

参考

developer.mozilla.org

qiita.com

qiita.com

creator.dwango.co.jp

縦書き

writing-mode プロパティで縦書きができる。
値は vertical-rl

writing-mode: vertical-rl;

参考

developer.mozilla.org

Pugのことを調べた

公式:

pugjs.org

コメントの書き方

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

終了できた。

初心者が楽しい面白いと感じたRubyのメソッドたち

f:id:damdom:20201221120355j:plain:w400

これは Ruby Advent Calendar 2020の21日目の記事です。

qiita.com

べこと申します。本業はデザイナーですがフィヨルドブートキャンプにて Ruby 勉強中です。
これまでプログラミングについては学校でやったり仕事で書いたりで基礎知識くらいはあるのですが、Ruby 自体はちゃんと書いたことがなく、オブジェクト指向についてはなんとなく理解しているが実際書くのは迷うな〜くらいのレベル感です。

続きを読む