要素に背景色をつけ角を丸く !! – HTML , CSS

html

 

ボタン風セクション見出し!

See the Pen raKmrZ by Takeshi Yamashita (@tekeshi) on CodePen.

実践

やっていきましょう。 スタイリングの部分だけですので簡単に。

HTML

 

CSS

container  という 箱(div) に入った <h2> と考えて下さい。

解説

1 . containerのサイズおよび左右の余白決めます。

今回はPC画面で広がりすぎても嫌なので 画面幅に対して60% にしておきます max-width : ここまで広がりますよーってやつ。 中央寄せにしたいので margin : 縦0 横auto ;

2 . sectionの中にあるh2のスタイリングです。

上から見ていくと分かりにくいので土台の部分からみていきます! 背景を青にして文字を白に。 こちらも同じくmax-widthで containerを100%としたうちの 60% に。 paddingで内側の余白をつくり、全体を15%押し広げる。 border-radiusで 角を2pxぶん丸く

完成

See the Pen raKmrZ by Takeshi Yamashita (@tekeshi) on CodePen.

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  プロフィール  PR:無料HP  安い 合宿免許  CG 専門学校  18インチタイヤを探す  中古ホイール 沖縄  タイヤ コンパクトカー  声優 専門学校  カー用品 中古  天然石とパワーストーン  増改築  株マイスター  中古タイヤ 札幌  リノベーションセミナー