CSSスキル - 第4章 Lesson7

borderプロパティを利用した、見出しを作ってみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ボックスモデルを理解した上で、borderプロパティやpaddingプロパティを利用して、おしゃれな見出しを作成していきましょう。



この動画で学べること

・境界線や余白を使った見出しのスタイリング方法



境界線や余白を使った見出しのスタイリング方法

今まで学んだ境界線や余白を使って、見出しにスタイルをかけてみましょう。
まずは境界線の追加をしていきたいと思います。
<div>タグのid名「design」の<h2>タグに対して境界線を使ったマークを付けましょう。




div#design h2 {
border-left: 5px solid #d86487;
}




ブラウザで見てみると、境界線を使ったアイコンができました。
今度は、文字の下の線とmarginを使った外側の余白、padding使った内側の余白を作っていきます。



div#design h2 {
border-left: 5px solid #d86487;
border-bottom: 1px dashed #ccc;
margin-bottom: 10px;
padding-left: 10px;
}




ではブラウザで見てみましょう。
このように余白や境界線を使って装飾することで、画像を使わなくても見出しのデザインをすることができます。
書いたCSSをコピーして、<div>タグのid名「event」の<h2>にも同じようにかけて行きましょう。