"HTML&CSSとWebデザイン実践講座"の本にて学習をしております。
初歩的な部分なのですが、なぜこうなるのか理解ができなかったためご教示いただけますと幸いです。
質問したいこと
見出し(タイトル)部分だけのフォントを変更するという部分でした。
本では、 cssにてtimeline-title のクラスにフォント変更を行うのではなく、timeline のクラスにフォント変更を適用させておりました。
timeline のクラスに適用したら全体が適用されると思っていたのですが、なぜ timeline-content にはフォント変更適用されていないのでしょうか?
該当のソースコード
<ol class="timeline"> <li class="timeline-item"> <h3 class="timeline-title">お申込み</h3> <p class="timeline-content icon-file"> 応募フォームより必要事項を記入してお申し込みください。ファイルの添付はできません。 </p> </li> <li class="timeline-item"> <h3 class="timeline-title">スキルテスト</h3> <p class="timeline-content icon-code"> HTML/CSSのコーディングについてスキルテストを行います。(所要時間60分) </p> </li> <li class="timeline-item"> <h3 class="timeline-title">面談</h3> <p class="timeline-content icon-chat"> スキルテストに合格した人はビデオ通話にて30分程度の面談を行います。日程は相談可能です。 </p> </li> <li class="timeline-item"> <h3 class="timeline-title">採用</h3> <p class="timeline-content icon-hands"> 採用となった方は契約完了後、ご希望の勤務地により業務がスタートします。一緒に素敵なWebサイトを作りましょう! </p> </li> </ol>
「フォント変更」とは具体的にどういう変更でしょうか。CSSも開示してください。
ご指摘ありがとうございます。
見出し(title)部分のみ明朝体に変更するという内容でした。下記、本に載っていた回答cssです。
よろしくお願いいたします。
/* Timeline */
.timeline {
list-style: decimal inside;
font-family: 'Sawarabi Mincho', sans-serif;
}
.timeline-item {
margin-bottom: 2rem;
}
.timeline-title {
font-size: 1.375rem;
display: inline-block;
margin-bottom: 1rem;
}
.timeline-content {
font-family: sans-serif;
}
回答2件
あなたの回答
tips
プレビュー