ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1902-02-01草稿「文章中の文字を強調してみよう」

大きなカラーの字にする。

次はstrong要素でいってみましょう(別にこれがem要素への指定でもかまいません)。strong要素は「より強調」なので、em要素より目立たせておきます。

strong {
 font-style: normal;
 font-size: 1.5em;
 color: #ff0000;
}

のように指定すると、strongタグでマークアップした部分が

人呼んでフーテンの寅ともうします。

のようになります。

  • 【補足】文字のサイズは「font-size」、文字色は「color」を使います。色の値の説明はごく簡単なHTMLの説明 - 色の値、文字サイズの値はとほほのスタイルシート入門 - font-sizeなどを見てください(ともに個人サイト)。
  • 【補足】ここでは説明しないのですが、fontタグやbタグといった、文字の見栄えを変えられるのでよく知られたタグがあります。が、スタイルシートの普及以前にウェブサイトのデザインのため各ブラウザが採用していった便宜的なもので、文書構造を決めるためにあるHTML本来の要素ではないのです。スタイルシートで見栄えを決めていけば、日記のデザインをリニューアルして基本の文字色や背景色を変えたときに、強調文字の色もそれに合わせていっぺんに変えられるといった利点があります。一文字ずつ大きさと色を変える文章でも書かない限りは、こちらでご紹介した方法のほうが便利でしょう。
  • 【補足】あと日記文中ですごく大きさの違う文字を使うときは、行間指定の値に「px」や「em」や「%」を使わないほうがいいです。テーマでそうなってる場合もあるかと思いますが、大きな文字が上の行と重なっちゃうことがあるので。『div.section p {line-height: 1.5em;}』のようになっていたら『div.section p {line-height: 1.5;}』のようにemの単位を取ってやりましょう(1.5は最大の文字の150%の高さです)。

nobodynobody2004/07/09 09:50「変換辞書登録しておく」のくだりは、注釈とか「ちょっといいテクニック」(コラム)として、本文から出してしまってはどうでしょうか。文意を追い掛けやすいように。▼あと、色の設定に関しては、アクセシビリチのかねあいもあるかと思うので、nyamaさんやinugamixさんのご意見も聞きたい気分が少し。(説明自体は、知りたいだろうなっていうところを、さくっとおさえていらっしゃって、イケてると思います)。▼ざっと読んだ感想でした。ではでは。

sugiosugio2004/07/09 15:51チェックありがとうございます。とりあえず注釈にしました。タグ編の充実があれば外す形で。アクセスバラチの話は、あるとすればここよりもう少し前に欲しいところですね。ここは目立たせようとする技なのでそんなに問題ないんじゃないかと思ってるんですよ。

sugiosugio2004/07/09 15:52でも認識不足があれば教えてください。

 | 

ホームページ制作