文章を読みやすくするCSSコード 100バイト

 (swyx.io)
11 ポイント 投稿者 xguru 2021-10-29 | 2件のコメント | WhatsAppで共有
  • ユーザースタイルシート拡張に入れて、Webサイトを見やすく

html {

max-width: 70ch; /* 70文字で左右の幅を設定 */

padding: 3em 1em; /* 上下の余白 */

margin: auto; /* 中央寄せ */

line-height: 1.75; /* 読みやすい行の高さ。フォントサイズに応じて調整されるよう、あえて単位は省略 */

font-size: 1.25em; /* この値は自分の好みの大きさに調整可能。emでスケールできるように */

}

  • 追加の100バイト

h1,h2,h3,h4,h5,h6 {

margin: 3em 0 1em;

}

p,ul,ol {

margin-bottom: 2em;

color: #1d1d1d;

font-family: sans-serif;

}

関連記事

2件のコメント

 
lunamoth 2021-10-29

よく見るWebページの場合

font-family: Lato,NanumBarunGothic;

font-size: 17px;

line-height: 200%;

word-break: keep-all;

を入れて見ているのですが、

これも一度入れてみないといけませんね。ありがとうございます。
 
xguru 2021-10-29

ブラウザー拡張機能 Stylebot https://github.com/ankit/stylebot

ブックマークレットで似たことをするもの