FC2ブログ
091234567891011121314151617181920212223242526272829303111

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------(--) |  スポンサー広告 |  CM(-) | Top▲

CSS事始め 1

"HTML事始め 2"で見出しと本文を分け、改行させるをタグを付けました。
今回は、少し見栄えを整えましょう。見出し文字の体裁と、本文の幅をブラウザ一杯から一定の幅に固定します。見栄えを整えるHTMLタグもありますが、主流はCSS(スタイルシート)ですのでこれを使います。下記のように、開始タグ内の要素名に続けて指示を記入します。要素名と指示(属性と言います)は半角スペースで区切ります。

<h1 style="font: bold larger serif;">
うつぶしの森 </h1>
<p style="width: 600px;">
延元3年(1338)新田義貞が越前で亡くなり…
忽ち劣勢に追い込まれてしまいます。<br>
…落馬して最期を遂げました。</p>
<p style="width: 600px;">
地の民は、義宗の霊を「うつぶし明神」として祀り…</p>

エディタimg HTML書類を書くには、要素名や属性値などが色分けで表示されるテキストエディタが便利です。私は、フリーソフトの「TeraPad」を愛用しています。(左図)
では、見出し(h1)のスタイルから見て行きましょう。style=に続けて「"」で括られているのが見栄えの指示内容で、属性値と言います。ちなみにstyleが属性名です。
文字(font)を、太字(bold)で一段階大きく(larger)して明朝体(serif)で表示してください、とブラウザに指示をしています。
ブラウザimg 太くとか、一段階大きくとは何を基準にしているのでしょう?スタイルの指定をしていなくても、本文より太く、大きかったですよね。実は、最初に拡張子をhtmlに変えただけだ作ったホームページの文字が基準になっているのです。そしてそれは、ブラウザによって設けられた基準です。、また、OSやモニターの解像度よって表示に違いがありますが、細かいことを気にすると身体に障りますので大雑把に扱いましょう。
メジャーなブラウザでは、太さ400、大きさ16pxのゴチック体です。単位については、追々馴れて行きましょう。
指定したスタイルは、太さboldは700、大きさlargerは約12%増の18px、書体serifは明朝体です。スタイルを指定していない(以下、初期値と呼びます)h1は、太さ700(bold)、大きさ32px(200%大)のゴチック体(sans-serif)です。
h1~h6の初期値は、"続きを読む"でどうぞ。


見出しの初期値

見出し要素は、h1からh6まで6段階あります。h1が一番高いレベルです。初期値を見てみましょう。
以下のようにメモ帳に入力して、拡張子をhtmlにして保存します。

<h1>うつぶしの森</h1>
<h2>うつぶしの森</h2>
<h3>うつぶしの森</h3>
<h4>うつぶしの森</h4>
<h5>うつぶしの森</h5>
<h6>うつぶしの森</h6>

エディタimg ブラウザで開いて表示を確認しましょう。
太さは一律700です。大きさは
h1:32px(200%)、h2:24px(150%)
h3:18.7167px(117%)、h4:16px(100%)
h5:13.2833px(83%)、h6:10.7167px(67%)です。かっこ内の数値は、文字の大きさの初期値16pxに対する百分率です。

※タグを付けたメモ帳の上記のHTMLファイルをクリックでブラウザに表示します。

ちなみに、FC2ブログでは「ブログの名前」にh1が適用されていますので、私は「ブログタイトル」にh2を適用しています。

2014-03-07(金) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲
コメントの投稿












管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。