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

はてなダイアリーガイド

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

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

 | 

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

文章中の文字を強調してみよう

文章の中でこんなふうに、またはこんなふうに文字を強調して見せる方法です。

まず強調したい部分をemタグかstrongタグでマークアップするのが基本です。日記に

わたくし、生まれも育ちも<em>葛飾柴又</em>、

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

と書くと、

わたくし、生まれも育ちも葛飾柴又

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

のように表示されます。*1

emはemphasizeで「強調」、あなたが強調(力説)したいと思ったところがem要素です。strongは「さらに強調」を表す要素です。

さてこの強調はあくまで文書構造の中で「ここは大事なところ」と知らせるものなので、見栄えはブラウザまかせです(使っているテーマによっては見栄えが指定してありますが)。この見え方を、スタイルシートで指定してやります。

太字や下線つき文字にする

ブラウザによりますが、上の例では「葛飾柴又」の文字が斜めになっているかと思います。日本語ではちょっと文章で使いにくいので、ただの太字にしてやります。em要素のほうでいってみましょう。管理画面、詳細デザイン設定のスタイルシート欄に

em {
 font-style: normal;
 font-weight: bold;
}

と記入してみると、em要素が

わたくし、生まれも育ちも葛飾柴又

のように、ただの太字になります。

font-styleにはnormal(通常), italic(イタリック体), oblique(斜体)の値が使えます。

font-weightは文字の太さを指定するプロパティで、bold(太字)とnormal(通常)をよく使います。bolder(相対的に太く), lighter(相対的に細く), 100, 200, 300, 400, 500, 600, 700, 800, 900(絶対値…ブラウザによる)といった値も使えます。

太字にさらに下線を引いてみましょう。

em {
 font-style: normal;
 font-weight: bold;
 text-decoration: underline; 
}

で、

わたくし、生まれも育ちも葛飾柴又

のようになります。下線の色を文字と変えたい場合は「text-decoration: underline;」の部分を「border-bottom: 1px solid #色コード ;」とすると良いでしょう。

emタグは使う人はけっこう頻繁に使うと思いますので、使いやすいシンプルな強調方法を決めてみてください。

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

次は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%の高さです)。

文字色のバリエーションを作る

強調にいろんなバリエーションを持たせたい方は、クラスを使うと良いでしょう。たとえばで作っていってみます。

たとえば、emで強調するバリエーションにを作りたいときは、まずスタイルシート欄に

em {
 font-style: normal;
 font-weight: bold;
 font-size: 1.5em;
}
.red { 
 color: #CE2618;
}
.blue {
 color: #1841CE;
}
.green {
 color: #4594A0; 
}

と指定しておきます(red,blue,greenといったクラス名は自分で名付けられます)。そして日記の中で

ねえ<em class="red">ラビー?</em> あっち向いて<em class="blue">バン!</em> <em class="green">ヒェー!!</em>

と書くと

ねえラビー? あっち向いてバン! ヒェー!!

のようになります。

特に強調はせず、上のクラスを利用して色だけ変えたいときはemタグでなくspanタグを使えばいいでしょう。上の指定のまま

ねえ<span class="red">ラビー?</span> あっち向いて<span class="blue">バン!</span> <span class="green">ヒェー!!</span>

と書くと

ねえラビー? あっち向いてバン! ヒェー!!

のようになります。

これもスタイルシートですから、あとで色みを微妙に調整するなど、デザイン性を高く保てます。

*1:ワンポイントテクニック。これをよく使う人は、例えば『えm』で『<em></em>』のように変換辞書登録しておくと便利でしょう。……と書いてたら、編集画面に入力支援ボタンができましたね。ボタンがない設定のときにどうぞ。

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

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

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

 | 

ホームページ制作