要素に背景色をつけ角を丸く !! – 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  ふくやま自動車学校  社会人 専門学校  アールエスアール  中古ホイール 千葉  タイヤ 軽カー  プログラミング 専門学校  ヘルメット バイク用品  パワーストーン初購入♪  認定心理士  投資顧問ベストプランナー 詐欺  セリカ 202 ターボ  名簿屋