実践コーディングスキル - 第6章 Lesson6

第6回:注意文のデザインを調整しよう

   

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

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

注意文のデザインを調整する方法を解説しています。
ここでは、背景の色と内側の余白の調整を行います。



この動画で学べること

・アラート文章にスタイルをかける方法



アラート文章にスタイルをかける方法

前回マークアップしたアラート文章にスタイルをかけていきましょう。
スタイルの記述に入る前に、CSSにご予約・お問い合せページのスタイルがどこからかを示すため、コメントアウトをしてわかりやすくしておきましょう。
CSSの準備ができたら、アラート文章の<p>タグにスタイルをかけていきます。
文字の大きさ、色、行間を指定し、背景には薄い赤色を記述します。



p#contact_text {
color: #927e7a;
font-size: 12px;
line-height: 18px;
background-color: #ffefea;
}



保存してブラウザで見てみましょう。
文字と背景のスタイルが適応されました。
では最後に、marginとpaddingで余白の調整をして見本と同じようにしていきたいと思います。



p#contact_text {
color: #927e7a;
font-size: 12px;
line-height: 18px;
background-color: #ffefea;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}