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

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

実践

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

HTML

<div class="container">
 <section id="About">
 <h2>About</h2>
 </section>
 <section id="News">
 <h2>News</h2>
 </section>
 <section id="Contact Us">
 <h2>Contact Us</h2>
 </section>
</div>

<h2>About</h2>

</section>

</section>

<h2>Contact Us</h2>

</section>

</div>

CSS

.container{
    max-width:60%;
    margin:0 auto;
}

section h2{
    font-size:1.5em;
    text-align: center;
    color:white;
    padding:15px;
    max-width:50%;
    margin:10px auto 0;
    border-radius:2px;
    position:relative;
    background:blue;
}

.container{

max-width:60%;

margin:0 auto;

}

section h2{

font-size:1.5em;

text-align: center;

color:white;

padding:15px;

max-width:50%;

margin:10px auto 0;

border-radius:2px;

position:relative;

background:blue;

}

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.

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

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

実践

HTML

CSS

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

解説

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

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

完成

Leave a Comment コメントをキャンセル

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

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

実践

HTML

CSS

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

解説

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

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

完成

Leave a Comment コメントをキャンセル

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