見出し画像

見出しデザインサンプル_01【動画解説】

ホームページ制作初心者のために『HTML,CSSのみ』で作れる見出しのデザインの作り方を動画でレクチャーさせていただきます。

サンプルデータも公開していますので、ぜひダウンロードしてお使いください。

今回の「見出しサンプル_01」は一般的なよくある見出しデザインの作り方から解説させていただきます。

解説動画はこちら↓

完成図

スクリーンショット 2020-03-26 17.22.28

サンプルデータダウンロードはこちら↓

HTMLの部分

<body>
   
   <h1>見出し</h1>
   
</body>

CSSの部分

h1{
   margin: 1em;
   padding: .3em .5em;
   font-size: 2em;
   font-weight: bold;
   color: #434b50 ;
   background: #e9edee ;
   border-left: .3em solid #407dc7 ;
}

HTML,CSS初期設定の方法

HTML,CSS初期設定の方法はこちら

この記事が参加している募集

はじめてのインターネット

この記事が気に入ったらサポートをしてみませんか?