文字に限らずですが、デザインを指定するには普通のHTMLの他に「style=〜」というスタイルシートもあります。
スタイルシートの方が推奨されていますが、お好みでいいと思います。
太字 Sample
太字（スタイルシート） Sample
|
<span style=font-weight:bold>【文字】</span>
|
斜体 Sample
斜体（スタイルシート） Sample
|
<span style=font-style:italic>【文字】</span>
|
下線 Sample
下線（スタイルシート） Sample
|
<span style=text-decoration:underline>【文字】</span>
|
上線（スタイルシート） Sample
|
<span style=text-decoration:overline>【文字】</span>
|
これはスタイルシートだけのデザインぽいです。
あまり使わなそうだけどｗ
取り消し線 Sample
取り消し線（スタイルシート） Sample
|
<span style=text-decoration:line-through>【文字】</span>
|
上付き 通常Sample通常
上付きにした文字は、少し小さめになります。
上付き（スタイルシート） 通常Sample通常
|
<span style=vertical-align:super>【文字】</span>
|
文字の大きさは変わりません。
下付き 通常Sample通常
下付きにした文字は、少し小さめになります。
下付き（スタイルシート） 通常Sample通常
|
<span style=vertical-align:sub>【文字】</span>
|
文字の大きさは変わりません。
等幅フォント 全角であいうえお１２３ａｂｃＡＢＣ半角でabcABC123
ルビ タコの缶詰め
ネスケには対応していなくて、上の例だと「タコの缶詰かんづめ」という風に並べて全部表示されます。
ちっちゃすぎて字だかゴミなんだかわからないのでいらないかも(´・ω・｀)
普通に、タコの缶詰め（たこのかんづめ）とかでいいと思いますｗ
|
<ruby><rb>【漢字】<rt>【ふりがな】</ruby>
|
ページ全体の文字の色
<body>の < > 内に以下のタグを追加します。
ページの一部だけ文字の色を変える
|
<span style="color:【色】">【文字】</span>
|
ページ全体の文字のサイズ
</title>〜</head>に以下のタグを入れます。
基本的には指定しない方が見る人にとって親切ですが、
指定する場合、文字のサイズの単位には「pt」、「px」、「cm」、「%」などがあり、一般的なのは「pt」、「px」あたりです。
<style type="text/css">
<!--
body,td,input,select{font-size:【サイズ】;}
-->
</style>
|
この場合、テーブルの中、フォーム ( ボタン、プルダウンメニュー、入力エリアなど )、の中の文字も同じ大きさになります。
必要でないときはそれにあたるものを消して下さい。
td＞テーブルの中、input＞フォーム、select＞プルダウンです。
ページの一部だけ文字のサイズを指定する
|
<span style="font-size:【サイズ】">【文字】</span>
|
上記以外に、大きくする「<big>〜</big>」、小さくする「<small>〜</small>」などもあります。
big→Sample small→Sample
ページ全体のフォントの指定
<body>の < > 内に以下のタグを追加します。
ふたつ以上を指定するには、「, ( コンマ )」で区切って続けます。
|
style="font-family:【フォント】"
|
ページの一部だけフォントを指定する
ふたつ以上を指定するには、「, ( コンマ )」で区切って続けます。
|
<span style="font-family:【フォント】">【文字】</span>
|
一部の文字の背景に色をつける ( 文字の部分だけ )
Sample
|
<span style="background:【色】">【文字】</span>
|
一部の文字の背景に色をつける ( 行単位 )
Sample
|
<div style="background:【色】">【文字】</div>
|
一部の文字の背景に画像をつける ( 文字の部分だけ )
Sample
|
<span style="background:url(【画像】)">【文字】</span>
|
一部の文字の背景に画像をつける ( 行単位 )
Sample
|
<div style="background:url(【画像】)">【文字】</div>
|
説明のポップアップ Sample
文字にマウスをのせると、説明などをポップアップして表示します。
|
<span title=【説明など】>【文字】</span>
|
※フォントについて
WinとMacではフォントが全く別のものなので、それぞれ指定するとベターです。
また、サイトを見る人のPCに入っていないフォントが指定された場合は無効となるので、一般的なもので近いものを
一緒に指定するとモアベターです(｀・ω・´)
一般的なフォントは、明朝体ならWinは「ＭＳ 明朝」、Macなら「平成明朝」など。
ゴシック体ならWinは「ＭＳ 明朝」、Macなら「Osaka」などです。
でもそこまでするより、何も指定しない方が柔軟に見る人が設定できていいのかもとも思います(´・ω・｀)
それと、フォント名は正確に入れないと表示されません。
全角・半角が違っていたり、必要なスペースが入っていなかったりしてもだめです。
＊めも＊
「span」は文字単位、改行しても文字の部分だけ。
「div」は行単位で、後ろに改行1つ分が入る。
「p」は行単位で、前後に改行2つ分が入る。
「HTMLタグ」のトップに戻る
|
|
|
