文字装飾の基本をまとめておきます。
難しくありませんので、一つ一つ確実に押さえておきたいです。
文字装飾は直接HTMLに書き込む方法もありますが。
HTMLが汚くなるのと。
まとめて装飾を変更しようとした場合に一々一つ一つ直していかないとならないなど。
欠点がありますので。
基本的には外部CSS を使って文字の装飾をしていきます。
CSSの書き方がよくわからない方は以下の記事を先に御覧ください。
文字の装飾の基本的設定と装飾①文字自体の装飾
フォントサイズ
文字のサイズは
font-size:〇〇em または〇〇emなど数字＋単位
で表します。
font-sizeプロパティで指定し、
サイズの値は他にもありますが、px(絶対的な単位)やem（現在のフォントに対する倍率 相対的な単位）などが一般的に使われます。
初期値の大きさと20pxや3emで大きさを指定した場合を比べてみます。
以下のようにHTMLを記述し。
<p>初期値の大きさ</p> <p class="px">20px</p> <p class="em">3em</p>
値はCSSで以下のように記述をします。
.px{
font-size: 20px;
}
.em{
font-size: 3em;
}
すると以下のようにブラウザ表示されます。
初期値は一般的に16pxですので。
それとの比較ができます。
emは初期値が変わればその大きさは変わります。
3emであれば３倍ということですね。
太さを変えたり斜体にする
太字にする場合は
{font-weight: bold}
をCSSに使います。
HTML
<p>これは太字にしていません</p> <p class="weight1">これは太字です</p>
CSS
.weight1{font-weight:bold;
}
すると以下のようにブラウザ表示されます。
細字にする値（font-weight: lighter;）や少し太くする値（{font-weight: bolder;}）もありますし。
値に数値を入れていくことで太さを調整することも可能なんですが
日本語フォント殆どに対応していませんので。
どうしても必要になったときに調べれば良いと思います。
斜体にするには
{ font-style: italic }
を使います。
HTML
<p>これは斜体にしてあります</p>
CSS
p{
font-style:italic;
}
すると以下のようにブラウザ表示されます。
文字色
文字の色は
{ color: 色名 oまたは カラーコード }
で表します。
色名の場合は英語で例えばred,grgreenなどとします。
カラーコードは#+６桁の数字で表されます。
カラーコードはネットで検索すると出てきますので。
選んだ色をコピペして使います。
私がいつも使っているのはこれ。
かなり便利です。
例をあげてみます。
指定しない場合と赤（red）にした場合
それと色コードで指定した場合です。
HTML
<p>指定しない</p> <p class="color1">red </p> <p class="color2 ">#8fbc8f</p>
CSS
.color1{
color: red;
}
.color2{
color: #8fbc8f;
}
ブラウザ表示は以下。
文字に影をつける
文字に影を付ける場合は
{ text-shadow: 影の右への長さ 影の下への長さ 影のぼけ具合 影の色 }
で指定します。
text-shadowプロパティに４つの値を指定していきます。
例えば影をぼかさなくてもよいという場合には値に３番目を０pxとします。
なお影を付ける場合は単位をpxにします。
実際に例を見てみます。
spanタグで挟んでその部分に影をつけてみます。
HTML
<p><span>テキストのこの部分</span>に赤い影をつけてみました<p>
CSS
p span{
text-shadow: 2px 2px 1px red;
font-weight:bold;
}
text-shadow: 2px 2px 1px red;で影のデザインを指定しました。
また影が区別しやすいように font-weight:bold;で太字に指定しました。
ブラウザ表示
フォント種類を変更するには
{ font-family: フォント名; }
を使います。
フォント指定は複数行うのが普通です。
というのもWindowsやMacやiPhone/iPad（iOS）、androidでは搭載されているフォントが異なるからです。
使っているOSに対応フォントが見当たらない場合ウェブページを見ることができません。
それぞれのOSに合うフォントをしておく必要があります。
また英語フォントでは日本語は表示されませんので。
それについても両方指定する必要があります。
またフォントは前に書かれたもののほうが優先度が高いので優先的に使ってほしいフォントを前に書きます。
日本語フォントとは別々に並べることが多いようです。
なお列記する場合にはフィント名とフォント名はカンマ,で区切り、フォント名をアポストロフィー’で囲みます。
特に半角スペースでつながっている２文字以上のフォント名はアポストロフィー’（またはクオーテーションマーク”）で囲まれていないと適用されません。
'Helvetica Neue'
そして最後に総称フォントファミリーを書いておきます。
総称フォントファミリーというのはもし記述したファミリーが搭載されていなかった場合。
似たようなフォントを適用させてね、とブラウザに伝えるものです。
総称ファミリーフォントは５つありますのでどれに似たフォントを使ってほしいかによって選ぶことができます。
ただ普通はゴシック系のフォントを指定する
sans-serifか
明朝体系のフォントを指定する
serif
が使用されることが多い様です。
フォントファミリー記述の一例です。
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sens-serif; }
文字の装飾の基本的設定と装飾②文字周りの装飾
行間や文字の間隔、位置の調整
行間を変えるには
{ line-height: 値 }
を使います。
行間というよりはテキストを挟んだ行の高さを表すものです。
値はpx、emなどの単位が使えますが、特にpxの場合。絶対値ですので。
フォントのサイズによっては重なったりしますのでおすすめできません。
単位をつけるのであればemなどの相対的な単位がおすすめですが、最もおすすめなのは値を数値のみにすること。
すると初期値に合わせて行間が収縮します。
例えば以下のような文章をHTMLの記述をし。
pタグで囲みます。
<p>インコ（鸚哥、true parrots）はインコ科（鸚哥科、Psittacidae）に属する約330種類の鳥の総称で、オウム目（Psittaciformes）を構成するふたつの科のうちの一つである。もうひとつの科であるオウム科（Cacatuidae）の鳥も英語ではparrotsとよばれるが、インコ true parrots には分類されない。インコはオウムよりも広く分布しており、アメリカ、アフリカ、アジア、オーストラリアとポリネシアに至る太平洋東方まで生息している種がある。 <br> <br> インコ科は、インコ亜科 (一般のインコとその仲間) とヒインコ亜科のふたつの亜科から構成される。しかしこれとは異なる分類法もあり、これらふたつのグループがインコ科（Psittacidae）とヒインコ科（Loriidae）と呼ばれ、正規の科として記述される場合もある。 </p>
この行間を変えるためにCSS出表の高さを2倍にしてみます。
p{
line-height: 2;
}
と指定すると以下のように2倍の高さの行になります。
数値を2以上にするとかなり空きが出てくるように感じられます^^;
でもまあきれいに配置されているのがわかると思います。
文字の間隔を変えるには
{ letter-spacing:値 }
を使います。
値はpxやemを使ったりしますが。line-heightのようにただの数値では反映されません。
単位としては
emは行の高さに対してその比率で表示されます（相対表示）のできれいに見えるのでおすすめです。
先程のHTMLの一部を切り取って文字の間隔を変えてみたいと思います。
CSS
p{
letter-spacing:0.5em: ;
}
すると以下のようにブラウザ表示されます。
行間の0.5倍というのは結構な長さなんで。時間の距離がかなり空いていることがわかります。
この値を0.2とした場合。
こんな感じになります。
指定しないほうが読みやすい場合が多いです^^;
気になる場合のみ文字間隔を調整するために使えば良いと思います。
文字の位置を変える
文字は初期設定では左寄せになっています。
これをtext-alignプロパティで指定することで真ん中(値はcenter)や左(値はleft)に寄せることができます。
{ text-align: center または right }
例えば
HTML
デフォルトではテキストは左寄せになっています。 </p> <p class="right"> 値をrightに取るとテキストは右寄せになっています。 </p> <p class="center"> 値をcenterに取るとテキストは真ん中に来ます。 </p>
CSS
.right{
text-align:right;
}
.center{
text-align:center;
}
とした場合。
ブラウザ表示は以下のようになります。
文字に線を引いたり枠で囲ったりする
文字に線を引いたり囲んだりすることができます。
文字に線を引く方法はたくさんありますが。
いくつか紹介していきたいと思います。
文字に線を引く
text-decoration
値には
初期値であるnone
行に下線を引くunderline
行に上線を引くoverline
行に中央を通る線を引く’（取り消し線としてよく使われます）line-through
例えばただ線を引くだけであればtext-decorationは簡単で便利です。
HTML
<p class="example1"> text-decolation:underlineを使って線を引きます </p> <p class="example2"> text-decolation:overlineを使って線を引きます </p> <p class="example3"> text-decolation:line-throughを使って線を引きます </p>
CSS
.example1{
text-decoration: underline;
}
.example2{
text-decoration: overline;
}
.example3{
text-decoration: line-through;
}
するとブラウザ表示は以下のようになります。
文字の色を変えれば同時にアンダーラインも変わります。
このtext-decoration。
CSS3 からはテキストの線・色・スタイルをまとめて指定できるプロパティになったんですが。
ただし、これらの値をまとめて指定した場合、旧いブラウザでは無視されてしまう可能性があります。
とはいえ私のブラウザはCSS3でOKなので。
CSSを以下のように変更してみました。
上からアンダーラインは点線、赤色。
次のオーバーラインは直線、オレンジ色。
真ん中を貫く線は破線で赤。
.example1{
text-decoration: underline dotted red;
}
.example2{
text-decoration: overline orange;
}
.example3{
text-decoration: line-through dashed red;
}
すると以下のようにブラウザ表示されました。
border
線を指定するプロパティとしては他にborderがあります。borderだけだとテキストを囲む形になります。
HTML
<p>borderだけで指定してみました。</p>
CSS
スタイルと太さを指定しないと枠が表示されないので枠を実線、枠の太さを3pxに指定しました。
p{
border:solid 3px;
}
ブラウザ表示
指定によって上下左右のいずれかのみに線を引くこともできます。
また色や太さ、スタイルを同時に変えられます。
先程のように例えばアンダーラインを引く場合には
border-bottom: スタイル 太さ 色;で半角スペースでまとめて指定をします。
また
スタイル（線の種類）には10種類ありますが。
とりあえず
点線:dotted
破線:dashed
二重線:double
が基本です。
:solid
HTML
<p class="example1"> border-bottomを使って赤い４pxの線を引きます </p> <p class="example2"> border-bottomを使って青い破線の2pxの線を引きます </p> <p class="example3"> border-bottomを使って緑の二重線、3pxの線を引きます </p> <p class="example4"> border-bottomを使ってpinkの点線、6pxの線を引きます </p>
CSS
.example1{
border-bottom: solid 4px red;
}
.example2{
border-bottom: dashed 2px blue;
}
.example3{
border-bottom: double 3px green;
}
.example4{
border-bottom: dotted 6px pink;
}
ブラウザ表示は以下のようになります。
ちなみに上下左右はそれぞれ以下のプロパティを使用します。
上にだけ線を引く⇒border-top:
下にだけ線を引く：⇒border-bottom:
左にだけ線を引く⇒border-left:
右にだけ線を引く⇒border-right:
上と右というふうに2つ以上設定する場合にはそれぞれ設定を行います。
例えば先程のアンダーラインの記述を以下のように変更をします。
HTML
<p class="example1"> 上と下に赤い４pxの線を引きます </p> <p class="example2"> 左と下に青い破線の4pxの線を引きます </p> <p class="example3"> 上と右に緑の二重線、4pxの線を引きます </p> <p class="example4"> 上と左にpinkの点線、6pxの線を引きます </p>
CSS
.example1{
border-bottom: solid 4px red;
border-top: solid 4px red;
}
.example2{
border-bottom: dashed 4px blue;
border-left: dashed 4px blue;
}
.example3{
border-top: double 4px green;
border-right: double 4px green;
}
.example4{
border-top: dotted 6px pink;
border-left: dotted 6px pink;
}
ブラウザ表示は以下。
選んだ２つの色や太さは同じにしましたが、もちろんそれぞれ設定しますから変えることが可能です。
linear-gradientを使って蛍光ペン風の演出
linear-gradientはグラデーションを指定する際に使用する値で。
linear-gradient(グラデーションの角度または方向, 開始色, 途中色, 終了色);
というようにカッコの中に値を入れてグラデーションのデザインを指定します。
角度はdeg（度）などで指定しますが。
初期値は180度です。何も指定しないと上から下に開始職から終了色に変化をしていきます。
また角度の代わりに方向で示す場合、
to
を付けてそれに続けて位置を表すキーワードを騎獣していきます。
0deg は to top 、 90deg は to right 、 180deg は to bottom 、 270deg は to leftで置き換えられます。
色については開始色, 途中色, 終了色とコンマで区切っていきます。
一般にプロパティをbackgraundにし以下のように記述をしていきます。
background:linear-gradient(グラデーションの角度または方向, 開始色, 途中色, 終了色);
例えば角度を記入せず（初期値 上から下に色が変わっていく）、色を開始職を赤終了職を黄色にしたとします。
HTML
<p>グラデーションを付けてみました。</p>
CSS
p {
background: linear-gradient(red, yellow);
}
ブラウザ表示
こんな感じでテキストにマーカーで引いたように表示することができます。
更に色の配分は％で表すことができます。
今度はテキストの一部に下の方にだけ印を付けてみます。
上に色がつかないようにするには開始色の値をtransparentに指定します。
transparent
とは背景を透過させるもので。今回の場合グラデーションの色を消すために使います。
<p>下半分だけのグラデーションを<span>ここの部分だけに</span>付けてみます<p>
CSS
spanタグで囲んだ部分の下に赤いマーカー風のラインを付けてみます。
半分にしようかと思いましたが赤の部分を30%にしてみます。
span{
background: linear-gradient(transparent 70%, red 30%);
}
ブラウザ表示
単色でテキスト全体にマーカー風の印をつけたい場合には。
開始色をtransparent かまたは適当な色にしてその上で開始色と終了色の値を両方ともゼロにします。
すると終了色の色で全体が塗りつぶされます。
HTML
<p>テキスト全体にマーカーで塗りつぶしたようにしてみました<p>
CSS
p{
background: linear-gradient(transparent 0%,yellow 0%);
}
ブラウザ表示
まとめ
文字装飾について割と簡単なものだけをまとめてみました。
縦書きの表示であるとか、画像をダウンロードしてテキストを装飾する、などの面倒くさいものpは省いてありますのであしからず。
それらは別記事でまとめてみたいと思います。
装飾には様々なものがありまして書いていくとキリがないんですが。
今回紹介したもの程度でも最初は十分かと思います。
外部CSSを使って簡単に装飾をすることができることがわかっていただけたら、と思います。
この記事へのコメントはありません。