すたすた式
Blogger QooQ
行幅、行送り等、いままでは自分の好みや感覚、大手サイトの数値を参考にしてきましたが、今回はアクセシビリティを考慮した行幅、行送りにしてみました。
少し調べてみました。
幅が 80 字を越えない (全角文字の場合は、40 字)。https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html
WCAG 2.0では文章の幅が半角文字80字、40字を越えないことが推奨されています。これは、16pxの全角文字の場合、おおよそ640pxになります。つまり、メインコンテンツの幅は640px前後を目安とすると良いでしょう。https://uxmilk.jp/59843
いくつかのソースによると、理想的な段落の幅は1行あたり65文字と言われているため、デザイナーは 1行あたり45字から85字内に収めるよう務めるべきと言われています。https://frasco.io/writing-css-with-accessibility-in-mind-4fc82b26aecb
おおよそ半角80字、全角40字を超えないのが望ましいようです。
widthのchという単位をはじめて見たので使ってみました。自分の環境だと65chでだいたい全角37文字でした。
ch
記事本文にだけ適用しました。（QooQの例）
#single-content
max-width: 65ch;
margin
auto
margin: 1em auto 0;
margin-top: 1em;
/* 個別記事本文 */ #single-content { /* margin-top: 1em; */ line-height: 1.8; max-width: 65ch; /* 追加 */ margin: 1em auto 0; /* 追加 */ }
段落中の行送りは、少なくとも 1.5 文字分ある。そして、段落の間隔は、その行送りの少なくとも 1.5 倍以上ある。https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html
最近読む機会が多いnoteだとline-heightは2倍
line-height
font-size: 18px; line-height: 36px;
とりあえず2倍にしてみました。
/* 個別記事本文 */ #single-content { /* margin-top: 1em; */ line-height: 2; /* デフォルト 1.8 */ max-width: 65ch; /* 追加 */ margin: 1em auto 0; /* 追加 */
liタグには効いていないようなので追加
#single-content li { line-height: 2; }
段落間について1.4.8 テキストの可読性を担保する - Ameba Accessibility Guidelinesにわかりやすい画像がありました。
自分はブログ用の大まかな文章をマークダウンエディターTyporaで 書いています。
Typoraの編集メニュー「HTMLとしてコピー」でHTMLに変換後、Bloggerに貼り付けをしている関係上、段落はpタグで構成されています。なので#single-contentにpタグ用のCSSを追加しました。
#single-content p { /* 追加 */ margin-block-start: 2em; margin-block-end: 2em; }
新しいBloggerエディターの作成ビューを使っている場合は、基本divタグで段落が構成されるようです。ただ前後にｐタグの段落があったりするとｐタグで段落が構成されたりしました。（2020年7月27日時点）
すべてを確認したわけではありませんが、改行についても<br />であったり<div><br /></div>や<p><br /></p>で行われるなど、前の段落構成に影響を受けるっぽいです。
<br />
<div><br /></div>
<p><br /></p>
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿