講座1

記事の文字をHTMLとCSSを使って大きさを変える方法

  • Jo Masafumi
  • Jo Masafumi
学習状況をツイッターでつぶやく

次は、記事の文字をHTMLとCSSを使って大きさを変える方法をします。

記事の文字をHTMLとCSSを使って大きさを変える方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「記事の文字をHTMLとCSSを使って大きさを変える方法」と入力します。

右側の「テキスト」を押します。

ここにコードを貼り付けます。

テキストのところに、下記コードをコピーして貼り付けます。

記事の文字をHTMLとCSSを使って<span class="mozisize">大きさを変える方法</span>

貼り付けました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

「大きさを変える方法」の文字が大きく表示されていることを確認します。

学習状況をツイッターでつぶやく
↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

.mozisize{
  font-size: 1.5em;
}

HTML

<span class="mozisize">サンプル表示</span>

CSSは、「ドット（点）」のあとの「mozisize」という文字の部分は好きな文字を入れても大丈夫です。

例えば、下記のように「ookiimozi」と入れても問題ありません。

CSS

.ookiimozi{
  font-size: 1.5em;
}

HTML

<span class="ookiimozi">サンプル表示</span>

CSSを「ookiimozi」にしたら、HTMLのほうの「mozisize」も上記のように「ookiimozi」にしないといけません。

{}←このカッコの中の記入の仕方は、決まっているので「font-size: 1.5em;」と必ず記入してください。

font-size説明

今回、文字の大きさを変えるために使ったfont-sizeの説明をします。

文字の大きさを変えるときに使うCSSコードです。

font-sizeの記入方法は、数値で記入する方法と、値で記入する方法の２種類があります。

font-size一覧表

XX-smallx-smallより1つ小さいサイズ。
X-smallsmallより1つ小さいサイズ。
smallmediumより1つ小さいサイズ。
mediumsmallより1つ大きく、largeより1つ小さなサイズ。
largemediumより1つ大きいサイズ。
x-largelargeより1つ大きいサイズ。
xx-largex-largeより1つ大きいサイズ。
larger元の文字より1つ大きいサイズ。
smaller元の文字より1つ小さいサイズ。
数値pxpx（ピクセル）は、解像度により、文字の大きさが変化します。
数値emem（エンファシス）は、文字の高さを1とする単位で変化します。
数値exexは、小文字の「x」の高さを1とする単位で変化します。
数値%%(パーセント)は、元の文字の大きさによってサイズが変化。

font-size記入例

CSS

.mozisize1{
  font-size: xx-small;
}
.mozisize2{
  font-size: x-small;
}
.mozisize3{
  font-size: small;
}
.mozisize4{
  font-size: medium;
}
.mozisize5{
  font-size: large;
}
.mozisize6{
  font-size: x-large;
}
.mozisize7{
  font-size: xx-large;
}
.mozisize8{
  font-size: larger;
}
.mozisize9{
  font-size: smaller;
}
.mozisize10{
  font-size: 10px;
}
.mozisize11{
  font-size: 20px;
}
.mozisize12{
  font-size: 1em;
}
.mozisize13{
  font-size: 2em;
}
.mozisize14{
  font-size: 1ex;
}
.mozisize15{
  font-size: 2ex;
}
.mozisize16{
  font-size: 100%;
}
.mozisize17{
  font-size: 200%;
}

HTML

<span class="mozisize1">フォントサイズxx-small</span>
<span class="mozisize2">フォントサイズx-small</span>
<span class="mozisize3">フォントサイズsmall</span>
<span class="mozisize4">フォントサイズmedium</span>
<span class="mozisize5">フォントサイズlarge</span>
<span class="mozisize6">フォントサイズx-large</span>
<span class="mozisize7">フォントサイズxx-large</span>
<span class="mozisize8">フォントサイズlarger</span>
<span class="mozisize9">フォントサイズsmaller</span>
<span class="mozisize10">フォントサイズ10px</span>
<span class="mozisize11">フォントサイズ20px</span>
<span class="mozisize12">フォントサイズ1em</span>
<span class="mozisize13">フォントサイズ2em</span>
<span class="mozisize14">フォントサイズ1ex</span>
<span class="mozisize15">フォントサイズ2ex</span>
<span class="mozisize16">フォントサイズ100%</span>
<span class="mozisize17">フォントサイズ200%</span>

記事をプレビュー表示したとき

フォントサイズxx-small
フォントサイズx-small
フォントサイズsmall
フォントサイズmedium
フォントサイズlarge
フォントサイズx-large
フォントサイズxx-large
フォントサイズlarger
フォントサイズsmaller
フォントサイズ10px
フォントサイズ20px
フォントサイズ1em
フォントサイズ2em
フォントサイズ1ex
フォントサイズ2ex
フォントサイズ100%
フォントサイズ200%