HTMLで枠線の色を指定するには？上下左右の分け方も解説
HTMLを使って枠線の色を変えたいけど、やり方が分からない、なんて悩んではいませんか？
コンテンツに合わせて枠線の色を変更できれば、デザインの幅が広がりますよね。
今回は、HTMLの枠線の色を変えたいが方法が分からない、という初心者の方のために、実際にコードを書いて説明しています。
この記事を読めば、HTMLを使った枠線の色の変更が、簡単にできるようになりますよ。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
そもそも、HTMLの枠線ってどうやって作るの？
HTML文書は、「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」のことで、Webサイトの構成に必要なマークアップ言語です。
<div>要素の中身</div>のように、要素タグで作られた要素を組み合わせて構成されています。
これら要素にCSSを適用することで、Webサイトをデザインすることができます。
早速この要素に枠線を追加してみましょう。
div {
border-style: solid;
border-color: #000;
}上記のコードでは、要素は黒い実線の枠で囲まれます。
色は、border-colorプロパティで指定しますが、色の指定だけでは枠線は表示されません。
初期値で「border-style: none;」となっているので、まずは枠線の種類を指定する必要があります。
HTMLの枠線の色の変更の仕方
それでは、具体的な色の指定の仕方を説明します。
前述したように、枠線の色の指定は、border-colorプロパティで行います。
プロパティの値は、スペースを空けて複数指定することができます。
値をいくつ指定するかで、適用場所が異なるので、きちんと覚えておきましょう。
- 値を1つ指定 「全ての線」
- 値を2つ指定 「上下 左右」
- 値を3つ指定 「上 左右 下」
- 値を4つ指定 「上 右 下 左」
続いて、色指定は以下の4つです。
- カラーネーム 「redなど」
- カラーコード 「#ffffffなど」
- RGB 「rgb(255,255,255)など」
- RGBA 「rgb(255,255,255,0.5)など」
この他に、透明にする「transparent」を指定することもできます。
具体的にHTMLとCSSで書くと、以下のようになります。要素の中の文章は、作られる枠線の説明です。
<body>
<p class="box1">赤い枠線</p>
<p class="box2">赤と緑の枠線</p>
<p class="box3">上下が異なり、左右は同じ色</p>
<p class="box4">上下左右に異なる色</p>
<p class="box5">左右が透明な枠線</p>
</body>CSSファイルでは、以下のように記述します。
.box1 {border-style: solid; border-color: red;}
.box2 {border-style: solid; border-color: red green;}
.box3 {border-style: solid; border-color: red green blue;}
.box4 {border-style: solid; border-color: red green blue yellow;}
.box5 {border-style: solid; border-color: green transparent;}実際に手を使って、コードを書いてみてください。
borderプロパティでまとめて記述
CSSのborderプロパティを使用すると、「border-style」、「border-width」、「border-color」をまとめて記述することができます。
div{
border-style: solid;
border-width: 1px;
border-color: red;
}
/* 上の記述をまとめたものです */
div{
border: solid 1px red;
}borderは、枠線の「スタイル」「太さ」「色」を指定できます。
まとめ：枠線の色は上下左右で自由に変えられる
今回は、HTMLを使った枠の色を指定する方法について紹介しました。
上下左右で枠の色を変えたい場合は、値を複数書けばよいことが分かりましたね。
border-color単体では枠線は作れないので、border-styleを同時に指定する必要がありました。
Webページをコーディングする際に、今回の記事が少しでも参考になれば幸いです。
