プロゲートのボーダーレッスンの解説とよくあるミス

こんにちは、ひつじのジョージです。

大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。

ボーダーレッスンで新しく学ぶことは線を引く方法です。

線を引くにはCSSのborderプロパティを使用します。
borderプロパティの構文は

border: 幅 種類 色

です。
この構文に値を入れると次のようになります。

/* border: 幅  種類  色 */
border: 3px solid green;

↓結果

このレッスンでは文字の下線のみを付けるので、borderプロパティではなく下線のみを装飾するborder-bottomプロパティを使います。

border-bottomプロパティの値のとり方はborderプロパティと同じです。

ボーダーレッスンの答え

このレッスンの答えは以下のとおりです。
コードが長くなってしまうので編集した部分のみを表示します。

index.htmlに以下のようにh3タグにsection-titleクラスを記述します。

<!-- 以下のh3要素に「section-title」というclassをつけてください -->
<h3 class="section-title">学べるレッスン</h3>

stylesheet.cssには以下のように記述します。

section-titleクラスにはこのレッスンで新しく学ぶborder-bottomプロパティを記述します。

...

/* contentsのheightを500pxにしてください */
.contents {
  height: 500px;
}

/* section-titleのborder-bottomを指定してください */
.section-title {
  border-bottom: 2px solid #dee7ec;
}

/* contents-itemのfloatプロパティをleftにしてください */
.contents-item {
  float: left;
}

...

よくあるミス

borderプロパティやborder-bottomプロパティでは

• 線の幅
• 線の種類
• 線の色

を指定する必要があります。

値で3つもスタイルを指定する必要があるため、ここでのミスが多く見られます。

よるあるミス1：線の種類を指定していない

/* 線の種類を指定していない */
border: 3px green;

線の種類のデフォルトの値はnone（線がなし）です。

そのため、線の幅と色を指定しても種類を指定しなければnoneとなりボーダーは表示されません。

よくあるミス2：値をダブルクォーテーション（"）で囲む

/* ボーダーの値は文字列ではないのでダブルクォーテーションで囲まない */
border: "3px solid green";

ボーダーの値は文字列ではないのでダブルクォーテーションで囲む必要はありません。

まとめ：borderプロパティの使い方をマスターしよう

このボーダーレッスンでは線を引く方法を新しく学びました。

線を引くにはCSSのborderプロパティを使用します。
borderプロパティの構文は

border: 幅 種類 色

です。
この構文に値を入れると次のようになります。

/* border: 幅  種類  色 */
border: 3px solid green;

↓結果

このレッスンでは文字の下線のみを付けるので、borderプロパティではなく下線のみを装飾するborder-bottomプロパティを使います。

border-bottomプロパティの値のとり方はborderプロパティと同じです。

borderプロパティやborder-bottomプロパティでは

• 線の幅
• 線の種類
• 線の色

を指定する必要があります。

値で3つもスタイルを指定する必要があるため、ここでの以下のミスが多く見られます。

これらのミスに気をつけてborderプロパティを使いましょう。