テキストCSS

練習用ファイルダウンロード

❶ 基本テキストCSS

文字のサイズ

文字のサイズは、font-sizeプロパティで指定
font-size: ◯◯px or ◯◯em or ◯◯%

（例 h5にCSS）
h5 {
font-size: 21px;
}

文字サイズ

文字の色

color: 色名 or カラーコード

（例 h5にCSS）
h5 {
color:#ff3300;
}

文字の色

文字の太さ

文字の太さは、font-weightプロパティで指定
font-weight: 〇〇

（例 h1にCSS）
h1 {
font-weight:bold;
}

文字を太くする

行間を変える

行間はline-heightプロパティにより指定

（例 pにCSS）
p {
line-height: 1.8;

文字の行間を変更するには
line-height を指定する／これはline-height: 1;

文字の行間を変更するには
line-height を指定する／これはline-height: 1.8;

文字の字間を変える

文字どうしの字間はletter-spacingで設定

（例 pにCSS）
p {
letter-spacing: 0.1em;

文字の字間はletter-spacingで変更
これはletter-spacing: 0.1em;

文字の字間はletter-spacingで変更
これはletter-spacing: 0.3em;

行揃えの指定

文字の行揃えはtext-alignで設定

left ：左揃え
center ：中央揃え
right ：右揃え
justify ：両端揃え

（例 pにCSS）
p {
text-align: center;

この文字はtext-align: center;

text-align: right;

2行目以降を1文字下げる［text-indent］の使い方

CSSへ以下のように書く
p.indent-1 {
padding-left:1em;
text-indent:-1em;
}

※text-indentプロパティの便利な使い方。 
文章の段落などの2行目以降を1文字下げて空白を挿入する方法です。
この文章では［text-indent］による装飾を施しています。

※text-indentプロパティの便利な使い方。
文章の段落などの2行目以降を1文字下げて空白を挿入する方法です。この文章では［text-indent］による装飾を施しています。

フォントの指定

文字のフォント指定はfont-familyプロパティを使用し、その値にフォント名を指定します。

フォントは基本的に複数の種類を指定します。複数のフォントを指定するときはフォント同士の間を,で区切ります。
複数のフォントのうち、前に書かれたものから優先的に適用されます。
複数のフォントを書いて対応：MacでもiPhoneでもiOSでも使えるフォントを複数個並べてカバー

最低でも指定しておくもの
「sans-serif」ゴシック体系のフォント
「serif」明朝体系のフォント

このページで指定しているフォント
body {
font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳＰゴシック","MS PGothic",Sans-Serif;
}

おすすめフォント
body {
font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳゴシック',sans-serif;
}

❷ 文字に線を引く

文字に下線をひく

HTML
文字に下線をひく

CSS
.line1 {
text-decoration: underline;
}

文字に赤い２重線をひく

HTML
文字に赤い２重線をひく

CSS
.line2 {
text-decoration:underline red double;
}

文字に青い点線をひく

HTML
文字に青い点線をひく

CSS
.line3 {
text-decoration:underline blue dotted;
}

文字に緑の破線をひく

HTML
文字に緑の破線をひく

CSS
.line4 {
text-decoration:underline green dashed;
}

文字に青い波線をひく

HTML
文字に青い波線をひく

CSS
.line5 {
text-decoration:underline blue wavy;
}

文字に赤い取消線をひく

HTML
文字に赤い取消線をひく

CSS
.line6 {
text-decoration:line-through red;
}

文字に水色のマーカー線をひく

HTML
文字に水色のマーカー線をひく

CSS
.line7 {
background:linear-gradient(transparent 60%, #87ceeb 60%);
}

※「%」の値が大きいほどマーカーが細く、%の値が小さいほどマーカーが太くなります。

❸ ルビ（ふりがな）を振る方法

専門学校せんもんがっこうで勉強をしています

HTML
<ruby>専門学校<rt>せんもんがっこう</rt></ruby>で勉強をしています

❸ 説明リストの記述

用語と用語の説明リストを記述するには <dl>～</dl>中に
<dt>～</dt> と <dd>～</dd> を用います。

HTML: HTMLとは・・・
JavaScript: JavaScriptとは・・・

HTML
<dl>
<dt>HTML</dt>
<dd>HTMLとは・・・</dd>
<dt>JavaScript</dt>
<dd>JavaScriptとは・・・</dd>
</dl>

❹ CSSをHTMLのタグ内に直接書く方法

文字の色を変える

テキストの一部分を赤い文字にします。

HTML
テキストの一部分を赤い文字にします。

テキストの一部分を太字にする

テキストの一部分を太字にします。

HTML
テキストの一部分を太字にします。

テキストの一部分を斜体文字にする

テキストの一部分をItalicにします。

HTML
テキストの一部分をItalicにします。

テキストの一部分の大きさを変える

テキストの一部分を大きな文字にします。

HTML
テキストの一部分を大きな文字にします。

テキストの一部分のフォントを変更する

テキストの一部分を明朝体にします。

HTML
テキストの一部分を 明朝体 にします。

テキストの一部分のフォントを二つ以上変更する

テキストの一部分を白い文字と緑の背景にします。

HTML
テキストの一部分を白い文字と緑の背景にします。

❺ テキストデザイン

Text Shadow　テキストシャドウ

HTML
Text Shadow　テキストシャドウ

CSS
.ts01{
text-shadow: 2px 2px 3px #999;
}

Grow　グロウ

HTML
Grow　グロウ

CSS
.ts02{
color:#fff;
text-shadow:0 0 5px #999;
}

Bevel　ベベル

HTML
Bevel　ベベル

CSS
.ts03{
color:#ccc;
text-shadow:-1px -1px 0 #fff, 1px 1px 0 #aaa;
}

Embos　エンボス

HTML
Embos　エンボス

CSS
.ts04{
color:#ccc;
text-shadow:-1px -1px 0 #aaa, 1px 1px 0 #fff;
}

Stroke　ストローク

HTML
Stroke　ストローク

CSS
.ts05{
color:#fff;
text-shadow:
1px 1px 0 #999,
-1px 1px 0 #999,
1px -1px 0 #999,
-1px -1px 0 #999;
}

Neon ネオン

HTML
Neon ネオン

CSS
.ts06{
text-shadow:
0 0 5px #fff,
0 0 13px #f03,
0 0 13px #f03,
0 0 13px #f03,
0 0 13px #f03;
}

Neon ネオン2

HTML
Neon ネオン2

CSS
.ts07{
color: #fff;
text-shadow:
0 0 5px #0099ff,
0 0 13px #0066cc,
0 0 13px #0066cc,
0 0 13px #0066cc,
0 0 13px #0066cc;
}