かなり前の事になるかオーマイニュースに「リニューアルサイトの記事の文字の大きさ適当ですか」というアンケートが実施されていた。
回答を見ると全体的には小さいと思われているようだ。俺もちょっと小さいなと思っていたがもう慣れた。
そこでどれくらい小さいかFireFoxに標準でアドオンされているDOM Inspectorを使って調べてみるとfont-size:11.6667pxらしい。
どのように丸められるのかわからなかったので少々実験してみた結果font-size:12pxと同様に表示されるようだ。
旧システムが14pxだったことを考えると少々小さい。リニューアル後慣れないうちは小さいと感じても無理がないところか。
しかしまた中途半端な数値だなと思い、少々調べたみた。
この記述方法（定義）なんか難しい、読み取り難いな。がんばって解読した結果の抜粋が下記。読み取る目標は主に記事のフォントサイズ。
記事の文字の大きさを最終的に決めているタグは一番下のPタグである。
参照される定義の部分は優先順位が高いものを先に記述している。記述形式は
となっている。
スタイルシート（正確にはCSSスタイルシート）をあまりよく知らない人の為に若干の説明をする。HTMLのタグについてはさすがにこのスペースでは㍉（無理）。
スタイルシートとはフォントサイズ等見かけに関する定義をタグとは分離して定義する仕組み。
スタイルシート定義とタグを結びつける方法には主に次の三種類がある。
2. 3. は似ているがidは特定のひとつのタグを指定するユニークな値、classは何度でも指定できる値であるという点が異なっている。
参照される定義中、#xxxxx となっているのはid指定、.xxxxx となっているのはclass指定である。タグ指定のものは body 指定のものが見受けられる。
さらには文脈指定というべき指定ができる。例えば #main-column .news_tmp_box と記述されていれば、id=main-column のタグに含まれている class=news_tmp_box のタグに対する指定といった具合だ。
このような指定が selector として記述されている。
となんだか難しいが結びつきは既に上記表によって示されているのであまり考えなくともよいはず。
優先順位とは例えば先頭の定義でフォントサイズ、フォント色が定義されており、２番目の定義でフォントサイズ、行間が指定されていた場合には、フォントサイズとフォント色の指定は先頭の定義から、行間の指定は２番目の定義から反映されるということだ。
さらにもうひとつ難しいことがあり、それはそのタグで指定されていない事柄は原則的にそのタグを含む上位のタグから引き継ぐという規則があるということだ。
ふ～っ、やっと前提の話が終わったので記事の文字の大きさを最終的に決めているPタグにどんな指定がされているか主なものだけ見て行く。
(1)P
基本的な行間と段落後の行間が指定されているようだ。フォントサイズは出てこない。そこで上位のタグを見る。
body * の指定と * の指定は皆共通になるので以降の参照内容例示からは除外する。おっと説明していなかったけど * は任意のタグね。
(2)DIV←P
font-size: 100%の指定がされているがこれは上位タグから継承された値に対する相対指定。100%なら書かなくても同じなんだけど・・・。
ひょっとして何か勘違いしていないかな？
あと記事部の幅はここで決めているのか・・・510pxね、なるほど。
フォントサイズについては相対指定なのでさらに上位のタグを見る。
(3)DIV←DIV←P
なんだ？白（背景と同じで見えない）罫線って。デバック用かな？、それともデザインに変更を重ねた結果なのかしら。
フォントサイズ指定がないのでさらに上へ。
(4)DIV←DIV←DIV←P
ん？再び幅指定。(2)と同じ510px。そういえば間(3)に幅1pxの罫線指定があるじゃん。
ほんの少しだけどまずいですな。意図通りかどうかわからない。
というか基本的にタグ階層上の複数箇所にサイズ指定があるのもどうよ。
このタグの子供を調べてみると・・・有意なタグは何もない。ということはこのタグ自体がいらないじゃん。まあいろんな理由や経緯からこうなっているのかもしれないけどね。
あとこの場合は関係ないけどついでに罫線はoutsetみたいなのでご注意くだされ。
そしてさらに上へ。
(5)TD←DIV←DIV←DIV←P
550pxの幅指定。実質的にパディングまたはマージン指定をしている訳ね。まあこういうやり方もあり。
ところで overflow-x, overflow-y って調べてないけど標準だっけ？overflow でよくね？というかこれが必要なのかどうかもよくわからん。
そしてさらに上へ。
(6)TR←TD←DIV←DIV←DIV←P
(7)TBODY←TR←TD←DIV←DIV←DIV←P
標準的なもの以外何もなし。
そしてさらに上へ。
(8)TABLE←TBODY←TR←TD←DIV←DIV←DIV←P
font-size: inherit。そうそうこれは必要ね。TABLEタグは意固地なのか上位タグの内容を引き継いでくれない。inheritは強制的に引き継ぐ指示。
だからさらに上へ
(9)DIV←TABLE←TBODY←TR←TD←DIV←DIV←DIV←P
出た～。font-size指定。でもまた相対じゃん。
まだかよと思いながら上へ。
(10)BODY←DIV←TABLE←TBODY←TR←TD←DIV←DIV←DIV←P
今度こそ本当に出た。
font-sizeは13pxね。13px × 90% で11.7px。11.6667pxとはなんか微妙に違うけどこれで正解だと思う。
ところで
font-family: arial,helvetica,clean,sans-serif
って
font-family: "ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Osaka,sans-serif
を上書きしちゃってるんだけど・・・。
DOM Inspectorを使って調べてみても確かに arial,helvetica,clean,sans-serif と見える。
これって意図通り？
(2)で指摘したことと合わせて気になるな♡
あっもうひとつついでに。BODYタグの直下にあるDIVタグもたぶんいらないでしょう。
そしてつづく♡
回答を見ると全体的には小さいと思われているようだ。俺もちょっと小さいなと思っていたがもう慣れた。
そこでどれくらい小さいかFireFoxに標準でアドオンされているDOM Inspectorを使って調べてみるとfont-size:11.6667pxらしい。
どのように丸められるのかわからなかったので少々実験してみた結果font-size:12pxと同様に表示されるようだ。
旧システムが14pxだったことを考えると少々小さい。リニューアル後慣れないうちは小さいと感じても無理がないところか。
しかしまた中途半端な数値だなと思い、少々調べたみた。
この記述方法（定義）なんか難しい、読み取り難いな。がんばって解読した結果の抜粋が下記。読み取る目標は主に記事のフォントサイズ。
| タグ階層 | id | class | 参照される定義 | |
| [1] | HTML | * default.css | ||
| [2] | ┗BODY | body_news | body common.css:8,body layout.css:1,body font.css:12,body default.css:15,* default.css:6 | |
| [3] | ┗DIV | container | #container common.css:52,#container layout.css:8,body * default.css:29,* default.css:6 | |
| [4] | ┗TABLE | contents-table | #contents-table layout.css:18,body * default.css:29,table fonts.css:13,* default.css:6 | |
| [5] | ┗TBODY | body * default.css:29,* default.css:6 | ||
| [6] | ┗TR | body * default.css:29,* default.css:6 | ||
| [7] | ┗TD | main-column | #main-column common.css:434,#main-column layout.css:23,default.css:29,* default.css:6 | |
| [8] | ┗DIV | news_tmp_box | #main-column .news_tmp_box common.css:395,#main_column * common.css:432,body * default.css:29,* default.css:6 | |
| [9] | ┗DIV | news_home_box_border | #main-column .news_home_box_border common.css:402,#main_column * common.css:432,body * default.css:29,* default.css:6 | |
| [10] | ┗DIV | news_entry_body | #main-column .news_tmp_box .news_entry_body common.css:697,#main_column * common.css:432,body * default.css:29,* default.css:6 | |
| [11] | ┗P | #main-column .news_tmp_box .news_entry_body p common.css:668,#main_column * common.css:432,body * default.css:29,* default.css:6 |
記事の文字の大きさを最終的に決めているタグは一番下のPタグである。
参照される定義の部分は優先順位が高いものを先に記述している。記述形式は
selector スタイルシート名:スタイルシート内の行番号、・・・
となっている。
スタイルシート（正確にはCSSスタイルシート）をあまりよく知らない人の為に若干の説明をする。HTMLのタグについてはさすがにこのスペースでは㍉（無理）。
スタイルシートとはフォントサイズ等見かけに関する定義をタグとは分離して定義する仕組み。
スタイルシート定義とタグを結びつける方法には主に次の三種類がある。
- タグ名に対して結びつける。
- タグに指定されているidに対して結びつける。
- タグに指定されているclassに対して結びつける。
2. 3. は似ているがidは特定のひとつのタグを指定するユニークな値、classは何度でも指定できる値であるという点が異なっている。
参照される定義中、#xxxxx となっているのはid指定、.xxxxx となっているのはclass指定である。タグ指定のものは body 指定のものが見受けられる。
さらには文脈指定というべき指定ができる。例えば #main-column .news_tmp_box と記述されていれば、id=main-column のタグに含まれている class=news_tmp_box のタグに対する指定といった具合だ。
このような指定が selector として記述されている。
となんだか難しいが結びつきは既に上記表によって示されているのであまり考えなくともよいはず。
優先順位とは例えば先頭の定義でフォントサイズ、フォント色が定義されており、２番目の定義でフォントサイズ、行間が指定されていた場合には、フォントサイズとフォント色の指定は先頭の定義から、行間の指定は２番目の定義から反映されるということだ。
さらにもうひとつ難しいことがあり、それはそのタグで指定されていない事柄は原則的にそのタグを含む上位のタグから引き継ぐという規則があるということだ。
ふ～っ、やっと前提の話が終わったので記事の文字の大きさを最終的に決めているPタグにどんな指定がされているか主なものだけ見て行く。
(1)P
#main-column .news_tmp_box .news_entry_body p common.css:66
padding-bottom: 15px
#main_column * common.css:432
line-height: 1.5em
body * default.css:29
line-height: 1.22em
* default.css:6
padding, margin の 0 設定
padding-bottom: 15px
#main_column * common.css:432
line-height: 1.5em
body * default.css:29
line-height: 1.22em
* default.css:6
padding, margin の 0 設定
基本的な行間と段落後の行間が指定されているようだ。フォントサイズは出てこない。そこで上位のタグを見る。
body * の指定と * の指定は皆共通になるので以降の参照内容例示からは除外する。おっと説明していなかったけど * は任意のタグね。
(2)DIV←P
#main-column .news_tmp_box .news_entry_body common.css:697
width: 510px
margin-top: 10px
font-size: 100%
#main_column * common.css:432
line-height: 1.5em
width: 510px
margin-top: 10px
font-size: 100%
#main_column * common.css:432
line-height: 1.5em
font-size: 100%の指定がされているがこれは上位タグから継承された値に対する相対指定。100%なら書かなくても同じなんだけど・・・。
ひょっとして何か勘違いしていないかな？
あと記事部の幅はここで決めているのか・・・510pxね、なるほど。
フォントサイズについては相対指定なのでさらに上位のタグを見る。
(3)DIV←DIV←P
#main-column .news_home_box_border common.css:402
border の設定(白)
#main_column * common.css:432
line-height: 1.5em
border の設定(白)
#main_column * common.css:432
line-height: 1.5em
なんだ？白（背景と同じで見えない）罫線って。デバック用かな？、それともデザインに変更を重ねた結果なのかしら。
フォントサイズ指定がないのでさらに上へ。
(4)DIV←DIV←DIV←P
#main-column .news_tmp_box common.css:395
width: 510px
text-align: center
#main_column * common.css:432
line-height: 1.5em
width: 510px
text-align: center
#main_column * common.css:432
line-height: 1.5em
ん？再び幅指定。(2)と同じ510px。そういえば間(3)に幅1pxの罫線指定があるじゃん。
ほんの少しだけどまずいですな。意図通りかどうかわからない。
というか基本的にタグ階層上の複数箇所にサイズ指定があるのもどうよ。
このタグの子供を調べてみると・・・有意なタグは何もない。ということはこのタグ自体がいらないじゃん。まあいろんな理由や経緯からこうなっているのかもしれないけどね。
あとこの場合は関係ないけどついでに罫線はoutsetみたいなのでご注意くだされ。
そしてさらに上へ。
(5)TD←DIV←DIV←DIV←P
#main-column common.css:434
text-align: center
#main-column layout.css:23
width: 550px
overflow-x: hidden
overflow-y: hidden
text-align: center
#main-column layout.css:23
width: 550px
overflow-x: hidden
overflow-y: hidden
550pxの幅指定。実質的にパディングまたはマージン指定をしている訳ね。まあこういうやり方もあり。
ところで overflow-x, overflow-y って調べてないけど標準だっけ？overflow でよくね？というかこれが必要なのかどうかもよくわからん。
そしてさらに上へ。
(6)TR←TD←DIV←DIV←DIV←P
(7)TBODY←TR←TD←DIV←DIV←DIV←P
標準的なもの以外何もなし。
そしてさらに上へ。
(8)TABLE←TBODY←TR←TD←DIV←DIV←DIV←P
#contents-table
clear: both
width: 950px
table fonts.css:13
font-size: inherit
clear: both
width: 950px
table fonts.css:13
font-size: inherit
font-size: inherit。そうそうこれは必要ね。TABLEタグは意固地なのか上位タグの内容を引き継いでくれない。inheritは強制的に引き継ぐ指示。
だからさらに上へ
(9)DIV←TABLE←TBODY←TR←TD←DIV←DIV←DIV←P
#container common.css:52
margin-top: 10px
font-size: 90%
#container layout.css:8
width: 950px
margin-top: 950px
text-align: left
margin-top: 10px
font-size: 90%
#container layout.css:8
width: 950px
margin-top: 950px
text-align: left
出た～。font-size指定。でもまた相対じゃん。
まだかよと思いながら上へ。
(10)BODY←DIV←TABLE←TBODY←TR←TD←DIV←DIV←DIV←P
body common.css:8
color 設定
body layout.css:1
background-color 設定
text-align: center
margin 0 設定
body font.css:12
font-family: arial,helvetica,clean,sans-serif
font-size: 13px
body default.css:15
background-color 設定
text-align: center
color 設定
font-family: "ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Osaka,sans-serif
color 設定
body layout.css:1
background-color 設定
text-align: center
margin 0 設定
body font.css:12
font-family: arial,helvetica,clean,sans-serif
font-size: 13px
body default.css:15
background-color 設定
text-align: center
color 設定
font-family: "ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Osaka,sans-serif
今度こそ本当に出た。
font-sizeは13pxね。13px × 90% で11.7px。11.6667pxとはなんか微妙に違うけどこれで正解だと思う。
ところで
font-family: arial,helvetica,clean,sans-serif
って
font-family: "ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Osaka,sans-serif
を上書きしちゃってるんだけど・・・。
DOM Inspectorを使って調べてみても確かに arial,helvetica,clean,sans-serif と見える。
これって意図通り？
(2)で指摘したことと合わせて気になるな♡
あっもうひとつついでに。BODYタグの直下にあるDIVタグもたぶんいらないでしょう。
そしてつづく♡
