マーカーで引いたような線をつける

できあがりイメージ

つくりかた

Step2 マーカー線をつける要素をタグで囲む

spanタグでh3の文字を囲いましょう。
span は文章の中の一部分に目印をつけることができるタグです。
クラス名をつけておくと後で css の指定がやりやすくなります。
サンプルでは"marker"というクラス名をつけています。

Step3 要素にCSSを指定する

marker クラスにプロパティを追加していきます。
クラスセレクタの書き方は、.maker { } です。
{ } 波カッコの中にプロパティを書いていきます。

Step4 背景色を2色指定する

background-image に linear-gradient を追加して、背景色を指定します。
linear-gradient を使うと1つの要素に2色以上の色を指定できます。
カッコの中に、色とその色が表示される範囲(-％)を指定します。0%は一番上、100%は一番下になります。
値と値は , (カンマ) で区切るように注意しましょう。
サンプルでは transparent(色を表示させない) と#ffcc11(オレンジ) を指定しています。
上から50%の位置まではtransparent(色を表示させない) なので、真ん中から下の部分に #ffcc11(オレンジ) が表示されます。

Step5 コードを書くかコピー＆ペーストする

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step6 実際の見え方を確認する

文章にマーカーで引いたような線がついていたら完成です。