Our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties: In brief, .box establishes the size of...

We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one. The .wrapper class is used to assign styles to th...

/*footer-logoのfont-sizeとfloatを指定*/ 1〜4 /*footer-listのfloatを指定*/ 6〜8 /*footer-listの中のli要素のpadding-bottomを指定*/ 10〜12

float: rightを用いると、指定した要素を右から順に横並びにすることができます。 index.html <ul> <li>HTML</li> <li>PHP</li> <li>R...

指定したい値が方向ごとに異なる場合、個別で指定する方法もありますが、まとめて書くことも可能です。 値を４つスペース区切りで指定した場合、上下左右の順で適用されます。 値２つ...

要素に余白を作りたい場合は、paddingを用います。 「padding: 値;」とすると、上下左右全ての方向にその大きさの余白が追加されます。 html <div class="logo1"> p...

floatプロパティを用いることで、指定した要素を横並びにすることができます。 html <ul> <li>HTML</li> <li>PHP</li> <li>Ruby</l...

/*header-logoの文字の大きさを、36px、floatプロパティをleftにする。

注意点 親要素に display:table; を指定（実はなくてもOK。） 子要素に display:table-cell; を指定

「display: inline-block」は幅や高さなどを指定できるインライン要素です。 注意点 親要素に font-size: 0; を指定してブロック間の隙間をなくす 子要素に font-size: 12pt; を指定し...

注意点 親要素 :after に 「content」「display」「clear」要素を追加する。 または親要素に clearfix を指定する。