CSS

HTMLとCSS 初歩的な文字装飾 基本まとめ

Sponsored Link

Sponsored Link

文字装飾の基本をまとめておきます。

難しくありませんので、一つ一つ確実に押さえておきたいです。

文字装飾は直接HTMLに書き込む方法もありますが。
HTMLが汚くなるのと。
まとめて装飾を変更しようとした場合に一々一つ一つ直していかないとならないなど。
欠点がありますので。

基本的には外部CSS を使って文字の装飾をしていきます。
CSSの書き方がよくわからない方は以下の記事を先に御覧ください。

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であれば3倍ということですね。

太さを変えたり斜体にする

太字にする場合は

{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などとします。
カラーコードは#+6桁の数字で表されます。
カラーコードはネットで検索すると出てきますので。
選んだ色をコピペして使います。
私がいつも使っているのはこれ
かなり便利です。
例をあげてみます。

指定しない場合と赤(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プロパティに4つの値を指定していきます。

例えば影をぼかさなくてもよいという場合には値に3番目を0pxとします。
なお影を付ける場合は単位を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に合うフォントをしておく必要があります。

また英語フォントでは日本語は表示されませんので。
それについても両方指定する必要があります。

またフォントは前に書かれたもののほうが優先度が高いので優先的に使ってほしいフォントを前に書きます。
日本語フォントとは別々に並べることが多いようです。

なお列記する場合にはフィント名とフォント名はカンマ,で区切り、フォント名をアポストロフィー’で囲みます。

特に半角スペースでつながっている2文字以上のフォント名はアポストロフィー’(またはクオーテーションマーク”)で囲まれていないと適用されません。

'Helvetica Neue'

そして最後に総称フォントファミリーを書いておきます。

総称フォントファミリーというのはもし記述したファミリーが搭載されていなかった場合。
似たようなフォントを適用させてね、とブラウザに伝えるものです。
総称ファミリーフォントは5つありますのでどれに似たフォントを使ってほしいかによって選ぶことができます。

ただ普通はゴシック系のフォントを指定する

sans-serif

明朝体系のフォントを指定する

serif

が使用されることが多い様です。

フォントファミリー記述の一例です。

font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','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を使って赤い4pxの線を引きます
 </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">
  上と下に赤い4pxの線を引きます
 </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; 
}

ブラウザ表示は以下。

選んだ2つの色や太さは同じにしましたが、もちろんそれぞれ設定しますから変えることが可能です。

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を使って簡単に装飾をすることができることがわかっていただけたら、と思います。

Sponsored Link

Sponsored Link

関連記事

  1. CSS 幅と高さの指定方法 widthとheightプロパティ基…
  2. CSS 擬似要素beforeとafter 使い方基本
  3. CSSで要素を横並びにする方法(floatとdisplay)とd…
  4. HTML ul ol liタグで作る箇条書きリスト 使い方の基本…
  5. CSS WEBアイコンフォントの使い方 Font Awesome…
  6. テキストエディタATOM インストールから基本編集・操作を詳説(…
  7. HTMLの勉強で押さえておくべきこと①Markup Langua…
  8. HTMLの学習の前に環境を整える(Windows版)エディタとブ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. WordPressのフォルダ構成とバックアップの仕方
  2. サーバって何?どのレンタルサーバーを選べばよいのか?
  3. 【Basics of site construction】ドメインの選び方と名前の選定 サブディレクトリとサブドメインの役割について
  4. Windows10 でフォルダの拡張子を表示するには?
  5. WordPressエディタ「Gutenberg」の使い方 総まとめ
  6. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  7. 【Basics of site construction】多すぎる選択肢 ホームページ作成方法  HTMLとCMSの長所と短所を知るべし
  8. WordPress新エディタ「Gutenberg」の使い方

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
Windows10でブルーライトカットの設定 コントロールパネルの使い方
HTMLで動画や画像を埋め込みする方法を詳説
AviUtl 便利で楽しい カスタムオブジェクトの使い方
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク
AviUtlのすべてのエフェクトについての解説⑤透過・透明化エフェクト クロマキー・カラーキー・ルミナンスキー
AviUtlのすべてのエフェクトについての解説⑬アニメーション効果(3)

ソフト・アプリの使い方

PAGE TOP