*/
#edit-story {
width: auto;
text-align: center;
}
#title-box {
width: auto;
background: #f8f4f0;
}
#body-box {
width: auto;
background: #f8f4f0;
}
#button-bar {
width: auto;
}
#nav {
width: 110px;
float: left;
}
#nav ul {
padding: 0px;
margin: 0px;
}
#nav li {
list-style-type: none;
}
#comment {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
line-height: 150%;
text-align: left;
color: #666666;
margin-top: 50px;
}
#comment form {
}
#comment input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
line-height: 150%;
}
#comment table {
}
#comment tr {
background-color: #f8f4f0;
}
#header {
}
#containerA {
clear:both;
position: relative;
width: 100%;
height: auto;
background: #ffffff;
/*
background: #f8f4f0;
*/
}
#headerA {
position: static;
width: auto;
height: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 15px;
background: #f8f4f0
}
#sidebarL {
position: static;
float: left;
text-align: center;
width: 8em;
height: auto;
top: auto;
bottom: auto;
left: auto;
right: auto;
border: #960 thin solid;
overflow: hidden;
/*
margin: 2px;
*/
}
#sidebarR {
position: static;
float: right;
text-align: center;
width: 8em;
height: auto;
top: auto;
bottom: auto;
left: auto;
right: auto;
border: #960 thin solid;
overflow: hidden;
/*
padding-right: 0.2em;
margin: 2px;
width: 50%;
background: #e0e0e0
overflow: auto;
Value: visible | hidden | scroll | auto | inherit
see http://www.w3.org/TR/REC-CSS2/visufx.html
11 Visual effects
11.1 Overflow and clipping
*/
}
#main {
position: static;
width: auto;
height: auto;
margin-right: 9em;
margin-left: 9em;
/*
padding: 15px;
margin-left: 10%;
padding-left: 8.5em;
background: #f8f4f0
background: #e8e4e0
*/
}
#tail { /* main の お尻 につける version情報 とか) */
padding-top: 1em;
padding-bottom: 4px;
}
#footer { /* signature とか */
clear: both;
position: static;
width: auto;
height: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #666666;
background-color: #f8f4f0;
padding: 15px;
}
.contentA {
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
/*
background-color: #e8e4e0;
padding: 15px 15px 15px 15px;
padding-top: 15px;
padding-bottom: 15px;
background-color: #FFFFFF;
*/
}
.sidebarA {
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
background-color: #ffffff;
/*
padding: 15px;
background-color: #f8f4f0;
margin: 8px;
*/
}
/* tb.cgi 用 */
.tb-url {
}
.tb-ping-url {
margin-bottom: 15px;
background: #eeeeee;
border: thin solid #000000;
padding: 8px;
}
.tb-container {
}
.tb-header {
}
.tb-excerpt {
}
.tb-footer {
margin-bottom: 15px;
}
/*
W3C
@import url("home-import.css");
*/
/* ****************** columns *************** */
.newsBlock {
float: left;
width: 46%;
margin-bottom: 0;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
background: #fff;
color: #000;
text-align: left;
}
.navBlock {
float: left;
width: 26%;
border: none;
background: #eec;
color: #000;
text-align: left;
}
p.small + div.navBlock {
border-top: 1px solid #000;
border-left: 1px solid #000;
}
div.newsBlock + div.navBlock {
border-top: 1px solid #000;
border-right: 1px solid #000;
}
/* ****************** news ************** */
/* h2.newsHeading { */
.newsBlock h2 {
background: #005a9c;
color: #fff;
border: none;
border-top: 1px solid #000;
width: 100%;
font-weight: bold;
font-size: medium;
font-size: large;
text-align: center;
margin-top: 0;
padding: 0.1em;
text-align: center;
}
/*
div.item h3 {
font-size: 150%;
margin-bottom: -0.3em;
}
*/
div.item, .pastNews {
clear: both;
padding: 0 0.7em 0 1em;
}
.headline {
background: #fff;
color: #900;
margin-top: 0.6em;
}
img.newsImage {
float: left;
margin-right: 0.5em;
border: 1px solid #000;
background: #fff;
color: #000;
}
/*
div.item ul li {
margin-left: 12px;
}
*/
/* ****************** banner ************** */
div.banner {
background: #fff;
text-align: center;
font-weight: bold;
font-size: 120%;
}
div.banner a:link {
background: #fff;
color: #048;
}
div.banner a:visited {
background: #fff;
color: #636;
}
div.banner a:active {
background: #ffc;
color: #048;
text-decoration: none;
}
div.banner a:hover {
background: #ffc;
color: #900;
text-decoration: none;
}
/* ****************** navigation bars ************** */
.navBlock {
padding-bottom: 0.5em;
border-bottom: 1px solid #000;
}
/* .navBlock h2.navhead { */
.navBlock h2 {
background: #aa7;
color: #fff;
border: none;
width: 100%;
font-weight: bold;
font-size: medium;
text-indent: 0.5em;
margin-top: 0;
padding: 0.1em 0;
}
.navBlock div, .navBlock p, .navBlock ul, .navBlock span.navText {
background: #eec;
color: #000;
}
.navBlock div, .navBlock p, .navBlock ul {
margin-top: 0.2em;
}
.navBlock li {
margin-left: 0;
background: #eec;
color: #aa7;
}
.navBlock p, .navBlock div {
text-indent: 0.3em;
}
.navBlock p.navPara {
font-size: small;
margin: 0 0.2em 0.5em 0.75em;
text-indent: 0;
}
.navBlock form {
margin-top: 0;
padding-left: 0.2em;
}
a.navlink img { color: #eec; }
@media all {
a.navlink img {
color: inherit;
border: none;
}
}
/* next three rules for acronyms in Mac IE 4.01 and 4.5 */
.navBlock a:link {
background: #eec;
color: #037;
}
.navBlock a:visited {
background: #eec;
color: #636;
}
.navBlock a:active {
background: #ffc;
color: #900;
text-decoration: none;
}
/* next three rules for most browsers */
a.navlink:link {
background: #eec;
color: #037;
}
a.navlink:visited {
background: #eec;
color: #636;
}
a.navlink:active {
background: #ffc;
color: #900;
text-decoration: none;
}
/* ****************** testimonials ************** */
div.hpmt, div.hpmt-name, p.hpmt-testimonial, div.hpmt-logo {
background: #fff;
color: #000;
}
div.hpmt a:link {
background: #fff;
color: #037;
}
div.hpmt a:visited {
background: #fff;
color: #636;
}
div.hpmt a:active {
background: #ffc;
color: #900;
text-decoration: none;
}
div.hpmt {
text-indent: 0;
padding: 0.3em 0 0 0;
margin: -6px 4px 0.5em 4px;
border: 1px solid #885;
}
div.hpmt-name {
font-weight: bold;
}
div.hpmt-name, div.hpmt-logo {
padding: 0.1em 0.5em 0.1em 0.75em;
text-indent: 0;
}
p.hpmt-testimonial {
text-indent: 0;
margin: 0 0.3em 1em 0.75em;
padding: 0;
}
p.hpmt-testimonial, .hpmt-more {
font-family: Times New Roman, Times, serif;
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
/* ****************** highlight ************** */
h2.spot-head {
background: #4d8cba;
color: #fff;
border: none;
width: 100%;
font-weight: bold;
font-size: medium;
text-indent: 0.5em;
margin-top: 0;
padding: 0.1em 0;
}
h2.spot-subhead {
clear: both;
margin: 0 6px;
padding: 0.2em 0 0 0.2em;
font-variant: small-caps;
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
font-weight: bold;
border-bottom: 1px solid #778;
}
h2.spot-subhead, div.spot, p.spot-block, p.spot-more,
div.spot-image, ul.spot-block, ul.spot-block li {
background: #fff;
color: #000;
}
div.spot-image img {
float: left;
border-left: 3px solid #fff;
border-right: 6px solid #fff;
}
div.spot a:link {
background: #fff;
color: #037;
}
div.spot a:visited {
background: #fff;
color: #636;
}
div.spot a:active {
background: #ffc;
color: #900;
text-decoration: none;
}
div.spot {
padding: 0.2em 0.2em 0.4em 0.75em;
margin: -6px 4px 0.5em 4px;
border: 1px solid #885;
}
p.spot-block {
padding: 0;
margin: 0;
}
.spot-block + .spot-block,
.spot-block + h2.spot-subhead {
margin-top: 0.5em;
}
ul.spot-block {
margin-bottom: 0;
}
div.spot, p.spot-block, ul.spot-block, ul.spot-block li, .spot-more {
text-indent: 0;
font-family: Times New Roman, Times, serif;
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
/* ****************** print ************** */
@media print {
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid; page-break-inside: avoid }
blockquote,
pre { page-break-inside: avoid }
ul, ol, dl { page-break-before: avoid }
.navbar { background-color: #fff; color: #000; border-color: #000;
border-width: 1px; }
a.navlink, a.bannerLink { font-weight: normal }
}
/* ****************** speech ************** */
@media aural {
h1, h2, h3,
h4, h5, h6 { voice-family: paul, male; stress: 20; richness: 90 }
h1 { pitch: x-low; pitch-range: 90 }
h2 { pitch: x-low; pitch-range: 80 }
h3 { pitch: low; pitch-range: 70 }
h4 { pitch: medium; pitch-range: 60 }
h5 { pitch: medium; pitch-range: 50 }
h6 { pitch: medium; pitch-range: 40 }
li, dt, dd { pitch: medium; richness: 60 }
dt { stress: 80 }
pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
em { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
strong { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
dfn { pitch: high; pitch-range: 60; stress: 60 }
s, strike { richness: 0 }
i { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
b { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
u { richness: 0 }
a:link { voice-family: harry, male }
a:visited { voice-family: betty, female }
a:active { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}
/*
a common font size is 11pt. (at 72 ppi)
Do not specify the font-size in pt, or other absolute length units.
Absolute length units are only useful when the physical properties of the output medium are known.
The absolute units are:
* in: inches -- 1 inch is equal to 2.54 centimeters.
* cm: centimeters
* mm: millimeters
* pt: points -- the points used by CSS2 are equal to 1/72th of an inch.
* pc: picas -- 1 pica is equal to 12 points.
Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer).
Relative units are:
* em: the 'font-size' of the relevant font
* ex: the 'x-height' of the relevant font
* px: pixels, relative to the viewing device
★ 15.2.4 Font size: the 'font-size' and 'font-size-adjust' properties
'font-size'
Value:
| | | | inherit
Initial: medium
Applies to: all elements
Inherited: yes, the computed value is inherited
Percentages: refer to parent element's font size
Media: visual
This property describes the size of the font when set solid. Values have the following meanings:
An keyword refers to an entry in a table of font sizes computed and kept by the user agent. Possible values are:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
On a computer screen a scaling factor of 1.2 is suggested between adjacent indexes; if the 'medium' font is 12pt, the 'large' font could be 14.4pt. Different media may need different scaling factors. Also, the user agent should take the quality and availability of fonts into account when computing the table. The table may be different from one font family to another.
Note. In CSS1, the suggested scaling factor between adjacent indexes was 1.5 which user experience proved to be too large.
A keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are:
[ larger | smaller ]
For example, if the parent element has a font size of 'medium', a value of 'larger' will make the font size of the current element be 'large'. If the parent element's size is not close to a table entry, the user agent is free to interpolate between table entries or round off to the closest one. The user agent may have to extrapolate table values if the numerical value goes beyond the keywords.
A length value specifies an absolute font size (that is independent of the user agent's font table). Negative lengths are illegal.
A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in 'em's, leads to more robust and cascadable style sheets.
The actual value of this property may differ from the computed value due a numerical value on 'font-size-adjust' and the unavailability of certain font sizes.
Child elements inherit the computed 'font-size' value (otherwise, the effect of 'font-size-adjust' would compound).
Example(s):
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
★ Care With Font Size
A certain trend among designers, believing that small text gives a Web page a sleek appearance and provides more space per "page" for actual content, sometimes results in the use of unreasonably small font sizes.
Unfortunately, this does not go well with the diversity of platforms used to access Web pages, from portable devices with tiny screens to projection devices hooked to computers. And even within a specific platform, text settings may vary.
The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.
Recommended Practices
Forget , use CSS
The proper, modern way to set the size of the text displayed in a Web page is to use Cascading Style Sheets. This is strongly recommended over the use of tags in HTML, because CSS is more flexible, easier to maintain and saves bandwidth. It is not the purpose of the Tip to discuss the interest of CSS versus tags, readers wanting more details on this issue will ask their favorite Web search engine for related information... We will focus on good usage of the CSS technology to create legible Web pages.
Good usage of CSS's font properties
Here are a few basic rules that one should follow in order to create Web pages that are easy (enough) to read, using CSS's font properties.
* Do not specify the font-size in pt, or other absolute length units. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser).
* Use relative length units such as percent or (better) em, or, even better, set a base font-size for the document and use absolute size ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) or relative size ([ larger | smaller ]) when defining the font size for a particular element within the document.
* Avoid sizes in em smaller than 1em for text body, except maybe for copyright statements or other kinds of "fine print."
* If using a small font-size, prefer a legible font-family with a high aspect value (see the section on font-size-adjust in the CSS2 specification for an explanation of the aspect value), which are more likely to be legible at such small sizes.
* If using several choices in a font-family property (in order to let the system choose the best available font out of a list), you can use the font-size-adjust property to force a specific aspect value.
★ for acronyms in IE
IE と FF で small の大きさが違う。
IE6: 継承がめちゃくちゃ
IE6: line-height の計算がめちゃくちゃ
IE6 のバグを突くから body で line-heigh を指定しないこと。
IE6: charset でフォントの大きさがめちゃくちゃ
utf-8 の x-small は euc-jp の small と同じ大きさ。
フォントサイズを px で指定するのは邪道なので、
charset に応じて css を変えるしかない。
IE6: body で line-height してはまずい。IE が混乱する。
IE6: large の大きさがでかすぎ
IE5/Mac: フォーム の font-family で Osaka の前に英語フォントを書くと化ける
#8FABBE; mt navy
#ffd700; gold
#eee8aa; pale
#f8f4f0; べーじゅ
#fffacd; 淡いレモン
font-family: 'ヒラギノ角ゴ Pro W3', Verdana, Arial, Helvetica, 'MS UI Gothic', 'MS PGothic', 'MS Pゴシック', sans-serif;
*/
/*
background-color: #8FABBE;
background-color: #ffd700; gold
background-color: #eee8aa; pale
font-family: 'ヒラギノ角ゴ Pro W3', Verdana, Arial, Helvetica, 'MS UI Gothic', 'MS PGothic', 'MS Pゴシック', sans-serif;
margin: 0px 0px 20px 0px;
background: #FFF url(/~artrec/cgi-bin/mt/images/topnav-bg.gif) repeat-x scroll top left;
background: #FFF url(/~artrec/buttons/title-3_21-night-xv-2_21.gif) repeat-x scroll top left;
background: #FFF url(/~artrec/buttons/logo-001b-65x65.gif) repeat-x scroll top left;
background: #FFF url(/~artrec/buttons/logo-001b-repeat.gif) repeat-x scroll top left;
*/
/*
margin: 0;
padding: 1em;
overflow: visible;
background: #eeeeee;
overflow: auto;
overflow: scroll;
overflow: visible;
*/
/*
font-size: small;
line-height: normal;
font-family: Verdana, Arial, Helvetica, "MS UI Gothic", "MS PGothic", sans-serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: Osaka, Verdana, Arial, Helvetica, "MS UI Gothic", "MS PGothic", sans-serif;
font-family: Osaka, Courier, Helvetica, "MS UI Gothic", "MS PGothic", sans-serif;
font-family: Osaka, Courier, Helvetica, sans-serif;
font-family: Courier, Helvetica, sans-serif;
font-size: x-small;
*/
/*
border: 1px solid #f8f4f0;
color: #000000;
color: #666666;
background-color: #FFFFFF;
font-size: x-small;
line-height: 180%;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 25px 15px 5px 15px;
margin: 0px 0px 10px 0px;
marging: 0px 0px 5px 0px;
font-family: 'ヒラギノ角ゴ Pro W3', Verdana, Arial, Helvetica, 'MS UI Gothic', 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
font-family: 'ヒラギノ角ゴ Pro W3', Verdana, Arial, Helvetica, Osaka, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #f4f0e8;
background: #f8f4f0;
background: #f4f0f0;
*/
/*
margin-bottom: 1.5em;
font-size: small;
margin-bottom: 10px;
margin-top: 1.5em;
margin-bottom: 1.5em;
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Verdana, Arial, Helvetica, 'MS UI Gothic', 'MS PGothic', 'MS Pゴシック', sans-serif;
*/
.thum {
font-size: 0.8em;
color: #666666;
text-align:center;
}
.thum table {
width: 100%;
}
.thum td {
padding-bottom:1em;
}