HTMLで枠線の色を指定するには?上下左右の分け方も解説

2024.01.12
HTMLで枠線の色味を指定するには?上下左右の分け方も解説

HTMLを使って枠線の色を変えたいけど、やり方が分からない、なんて悩んではいませんか?

コンテンツに合わせて枠線の色を変更できれば、デザインの幅が広がりますよね。

今回は、HTMLの枠線の色を変えたいが方法が分からない、という初心者の方のために、実際にコードを書いて説明しています。

この記事を読めば、HTMLを使った枠線の色の変更が、簡単にできるようになりますよ。

そもそも、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ページをコーディングする際に、今回の記事が少しでも参考になれば幸いです。

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5