演習課題「contentプロパティの値に引用符を適用しよう」
現在、ブラウザでは、それぞれのp要素のコンテンツの先頭に・が付いています。
ここで、before擬似要素のcontentプロパティに引用符の開始記号を、after擬似要素のcontentプロパティに引用符の終了記号を記述することで、 p要素のコンテンツを引用符で囲んでください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「p要素の先頭でナンバリングしよう」
現在、ブラウザでは、それぞれのp要素のコンテンツの先頭に0が付いています。
ここで、p要素のbefore擬似要素において、カウンター名がstudentであるカウンターのカウントを増やし、p要素の先頭でナンバリングしてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃02:仮想的なボックスのコンテンツ(content)
このチャプターでは、仮想ボックスのコンテンツを学習します。
文字列や画像以外のcontentプロパティの主な値としては以下のものが存在します。
・ 引用符の開始記号を表すopen-quote
・ 引用符の終了記号を表すclose-quote
・ 「()(括弧)」に任意の名前をつけたカウンター名を入れてカウンターを表すcounter()
また、名前をつけたカウンターの作成には以下のプロパティが使われます。なお、それぞれのプロパティの値には、counter()で指定したカウンター名を使います。
・ 主に親要素で指定して、カウンターの作成・リセットを行うcounter-reset
・ 主に子要素で指定して、カウンターのカウントを増やすcounter-increment
@charset "UTF-8";
p::before {content: open-quote;}
p::after {content: close-quote;}
@charset "UTF-8";
div {counter-reset: job;}
p::before {
content: counter(job);
counter-increment: job;
}