グリッド表示/非表示

Webタイポグラフィまとめ 邦文本組

記事に戻る。吾輩（わがはい）は猫である。名前はまだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

SideNoteは12px。行間1.75で指定。幅は暫定で15字としている。+1emでネガティブマージンとFloatを使用して横に流しているが、その性格上、水平スクロールができないので画面幅への対応が弱い。ラッパーを使う？

吾輩（わがはい）は猫である。名前はまだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

引用文

別行にする引用文では，本文と同じ文字サイズで字下げだけで本文との区別を表す方法と，文字サイズも本文よりは小さくする方法がある．前者の方法が多い．この場合，一般に本文の文字サイズの2倍の字下げとする例が多い．
分量の多い引用文が数多く挿入される場合は，全角の字下げとして，さらに別行の引用文の前後を1行アキとする方法も行われている．文字サイズを本文よりは小さくする場合の字下げの方法は，本ドキュメントの将来の版で解説する予定である

3.5.2 字下げと字上げ

引用文のは本文12px。行間1.75。字下げは本文基準で2em(14/12*2 = 2.3333333339em)。縦ラインはあまり気にしていない。可読性のために設置したborderで、上下1pxのラインを-2pxのネガティブマージンで相殺している。

ここで問題なのは、<blockquote>内の段落(<p>)の余白。本文基準だと1.75となるが、<blockquote>内での位置(borderの内側)を中間に揃えるため、上下0.875emのpaddingとしている。ここのpx計算で誤差が発生する。だんだんとズレが増えていく性格のものではないので、無視して差し支えないが、以降グリッドがずれているので留意されたし。

参照コード

pre code {
    display: block;
    font-size: 12px;
    line-height: 1.75;
    padding: 0.875em 2.333333333em;
    margin : 0;
}

参照コードはこれまで、番号付きリストで整形する方法が好きだったが、行ラインを揃えるという意味では細かいborder指定が鬼門であるため、避けてみた。しかし、まーネガティブマージンを駆使すればいけるよなあ。

  1. pre {
  2. {ont-size: 12px;
  3. line-height : 1.75;
  4. /*
  5. borderを使うなら、border-width分ずらす。
  6. */
  7. border: 1px dashed #bbb;
  8. border-width: 1px 0;
  9. padding: 0;
  10. margin : -2px 0 1.75em;
  11. }
  12. pre code {
  13. display: block;
  14. font-size: 12px;
  15. line-height: 1.75;
  16. padding: 0.87em 2.333333333em;
  17. margin : 0;
  18. }

実際やってみたら、一番肝なのは行高1.75emで固定することでした。line-heightだと、ずれが出てくる。

画像

キャプションは行間1.75の12px。
画像の高さを行間の等倍に設定し、line-height: 1;を指定。display: block;が無いとスペースが入るようだ。

吾輩（わがはい）は猫である。名前はまだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

吾輩（わがはい）は猫である。名前はまだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

吾輩（わがはい）は猫である。名前はまだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

吾輩（わがはい）は猫である。名前はまだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

リスト

吾輩（わがはい）は猫である。名前はまだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

吾輩（わがはい）は猫である。名前はまだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

  1. 吾輩は猫である
  2. 吾輩は猫である
  3. 吾輩は猫である

吾輩（わがはい）は猫である。名前はまだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。