講座1

記事の文字にHTMLとCSSを使ってマーカーを引く方法

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

次は、記事の文字にHTMLとCSSを使ってマーカーを引く方法をします。

記事の文字にHTMLとCSSを使ってマーカーを引く方法

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

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

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

左上の「タイトルを追加」に「記事の文字にHTMLとCSSを使ってマーカーを引く方法」と入力します。

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

テキストのところにコードを貼り付けます。

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

記事の文字に<span class="m-pink">HTMLとCSSを使ってマーカーを引く方法</span>

貼り付けました。

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

「OK」を押します。

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

「HTMLとCSSを使ってマーカーを引く方法」の文字にピンク色のマーカーが引かれていることを確認します。

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

HTMLとCSSの説明

CSS

.m-pink{
  background: linear-gradient(transparent 0%, pink 0%);
}

HTML

<span class="m-pink">サンプル表示</span>

「linear-gradient」は、グラデーションをかけるためのCSSコードです。

「tansparent 0%」の数字は大きくなるほど、マーカーの線が細くなります。

「pink」のところは、「色名」もしくは「色コード」が入ります。

最後の「0%」の数字を大きくすると、マーカーにグラデーションがかかります。

linear-gradient普通のマーカー記入例

CSS

.m-pink1{
  background: linear-gradient(transparent 0%, pink 0%);
}
.m-ki1{
  background: linear-gradient(transparent 0%, yellow 0%);
}
.m-kimidori1{
  background: linear-gradient(transparent 0%, greenyellow 0%);
}
.m-mizu1{
  background: linear-gradient(transparent 0%, aqua 0%);
}

HTML

<span class="m-pink1">サンプル表示ピンク色</span>
<span class="m-ki1">サンプル表示黄色</span>
<span class="m-kimidori1">サンプル表示黄緑色</span>
<span class="m-mizu1">サンプル表示水色</span>

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

サンプル表示ピンク色
サンプル表示黄色
サンプル表示黄緑色
サンプル表示水色

linear-gradient半分のマーカー記入例

CSS

.m-pink2{
  background: linear-gradient(transparent 50%, pink 0%);
}
.m-ki2{
  background: linear-gradient(transparent 50%, yellow 0%);
}
.m-kimidori2{
  background: linear-gradient(transparent 50%, greenyellow 0%);
}
.m-mizu2{
  background: linear-gradient(transparent 50%, aqua 0%);
}

HTML

<span class="m-pink2">サンプル表示ピンク色</span>
<span class="m-ki2">サンプル表示黄色</span>
<span class="m-kimidori2">サンプル表示黄緑色</span>
<span class="m-mizu2">サンプル表示水色</span>

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

サンプル表示ピンク色
サンプル表示黄色
サンプル表示黄緑色
サンプル表示水色

linear-gradient線のマーカー記入例

CSS

.m-pink3{
  background: linear-gradient(transparent 90%, pink 0%);
}
.m-ki3{
  background: linear-gradient(transparent 90%, yellow 0%);
}
.m-kimidori3{
  background: linear-gradient(transparent 90%, greenyellow 0%);
}
.m-mizu3{
  background: linear-gradient(transparent 90%, aqua 0%);
}

HTML

<span class="m-pink3">サンプル表示ピンク色</span>
<span class="m-ki3">サンプル表示黄色</span>
<span class="m-kimidori3">サンプル表示黄緑色</span>
<span class="m-mizu3">サンプル表示水色</span>

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

サンプル表示ピンク色
サンプル表示黄色
サンプル表示黄緑色
サンプル表示水色

linear-gradientグラデーションマーカー記入例

CSS

.m-pink4{
  background: linear-gradient(transparent 0%, pink 100%);
}
.m-ki4{
  background: linear-gradient(transparent 0%, yellow 100%);
}
.m-kimidori4{
  background: linear-gradient(transparent 0%, greenyellow 100%);
}
.m-mizu4{
  background: linear-gradient(transparent 0%, aqua 100%);
}

HTML

<span class="m-pink4">サンプル表示ピンク色</span>
<span class="m-ki4">サンプル表示黄色</span>
<span class="m-kimidori4">サンプル表示黄緑色</span>
<span class="m-mizu4">サンプル表示水色</span>

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

サンプル表示ピンク色
サンプル表示黄色
サンプル表示黄緑色
サンプル表示水色