CSS　セレクタとプロパティと値の基本まとめ

CSS

CSSの基本文法

基本は一つだけで。

セレクタ {

プロパティ：値

}

で記述していきます。

セレクタのあとに波括弧を置き。その中にプロパティと値を入れます。

プロパティと値の間にはコロンを入れます。

「セレクタ」はCSSを適用する場所のことで。
例えばセレクタにbodyと指定してあれば<body>タグの中全部を装飾します、という意味ですし。
<body>タグ内にある<span>タグとか。＜P＞タグなどを装飾する場合にはspanとかpなどをセレクタに指定します。
するとそのタグ内が指定された「プロパティ：値」によって装飾されます。

「プロパティ」は「何を」装飾するのかを指定するもので。
値は「どの様に」変えるのかを指定します。
例えば前記事では外部CSS を以下のように指定しました。

body {background-color: red}
span{color:yellow}

body {background-color: red}

これは「bodyタグ」内の「background-color（背景の色）」を「red（赤）」に指定したものです。

「bodyタグ」内ということは表示される全画面ということですので。
それが反映されて表示画面の背景が赤になっているんです。

もう一つCSSで指定した

span{color:yellow}は

「<span>タグ」内の「color(文字の色)」を「yellow(黃色）」に指定したものです。

HTML文書の中で以下のように２箇所<span>タグで囲んでありますので。

<span >私の部屋</span>から隣の部屋に行ってもいいんですが
    <br>
  <span >うんちをする</span>のが困りものですね。

その部分の文字が黄色になっています。

CSSを書き込む場所は３つ

基本としては外部CSSで大体の装飾をして、HTML文書に紐づけするリンクを付けてサイト全体にその影響が及ぶようにし。
ページごとに装飾をしたいときには<head>内に<style> </style>タグを作り。
そのなかにCSSを書き込みます。（内部CSS）

さらに一部デザインを変えたいときには<body>タグ内にあるタグにインラインで直接CSSを書き込む方法があります。

それぞれ個別に見ていきます。

インライン（HTMLに直接書き込み）

タグの中にCSSを書くときは、
<タグ名 style=”CSSのプロパティと値”CSSをここに書く”>
という形になります。

直接書き込むのでセレクタは必要ありません。

例えばインラインでCSSを書き込み以下のようにしたとします。

<body>
  <h1>セキセイインコを飼いました。</h1>
  <p style="border-bottom: solid 2px yellow">かわいいよ😁</p>

 <img  src="インコ３.jpg" alt="" width="400" height="533" />
 <br>

<p style=”border-bottom: solid 2px yellow”>かわいいよ😁</p>

<p>タグで囲んだ部分の下「かわいいよ😁」に2pxの黄色のアンダーラインを引くように指示しました。

すると以下のように表示されます。

インラインで書き込む場合、他に書き込んだCSSに優先しますが。
記述が汚くなるのと。
全体のデザインを変更しようと思った場合一々直していかないといけませんので面倒くさいので、あまり使わない方が無難です。

今回は内部参照と外部参照のCSSを使って詳しくみていきます。

外部CSS

まず

外部CSSとそれを反映させるHTML文書は同一のフォルダに入っている必要があります。
なので外部CSSファイルに名前をつけてそれらをフォルダ内に保存しておきます。

祖違ってフォルダの中身は以下のようになっています。

またこのCSSファイルと紐づけするためにHTML文書<head.>タグ内に外部CSSを呼び出すリンクを記述しておく必要があります。

リンクの記述の仕方は決まっていまして。

<link rel=”stylesheet” type=”text/css” href=”CSSファイルの名前”>

となります。

style要素のtype属性は、スタイリング言語を指定するものです。
CSSの場合にはtype=”text/css”となります。
しかし、指定しない場合はtype=”text/css”がデフォルトで適用されますので省略しても構いません。

例えばいままでのCSSに<p>タグのところだけ中央揃えにするとします。

「文字をどちらに寄せるか」はtext-alignプロパティで指定し、
left：左寄せ center：中央寄せ right：右寄せなどで指定をします。

外部CSSに

p {text-align:center}

を加えます。

すると<p>タグで囲まれた部分に影響を与え、

その部分だけ真ん中にきます。

そして保存をすると以下のような表示になります。

内部CSS

内部CSS の場合は<head.>タグ内にstyleタグを作り
<head.>タグ内にCSSを書き入れます。

例えば土台になるHTML文書の<head.>タグ内にある外部CSSリンクを取り。
インラインを外します。

その上で<head.>タグ内に以下のようにCSSを書き込みます。

<head>
  <meta charset="UTF-8">

  <style type="text/css">
   body {background-color: green} 
   span{color:red}
  </style>

  <title>鳥は可愛い</title>

</head>

スタイルシート内のCSSは

「bodyタグ」内の「background-color（背景の色）」を「green（緑）」に変更
「<span>タグ」内の「color(文字の色)」を「red(赤）」に指定してあります。

すると以下のように表示が変わります。

このように３箇所のどこかにCSSを記述することでデザインを変えることができます。

セレクタの基本

セレクタの書き方はたくさんありますが。
最低限押さえておくべきものについて書いて見ます。

意味を持つタグで指定

タグで指定する場合は、タグ名をそのまま書くだけです。

先程<<body>タグ<p>タグなどを指定してCSSをHTML文書に反映させてみました。

なので例は引きませんが。
表示本体を表す<<body>タグも段落を表す<p>タグも箇条書きである事を表すulやliも
それだけでセレクタにできます。

意味を持たないタグでセレクタを指定

それに対して<div>~</div>や、<span>~</span>は意味を持たないタグです。

ただその２つのタグは挟むとまとまりを意味しますので。
どこかのデザインを変えたいときに使います。

違いはというと。
divはあらゆるものを挟む事ができ。
大きなまとまりを作る場合に使用し。まとまりのあとは改行されます。
「spanは挟めるタグが限定され。
改行されませんので一部の文字の色や太さを変えるなど小さいまとまりを作る場合に使われます。

（もう一つ大きな違いというか根本的な違いがありますが。それは後でやります。）

先程の例だと

<span >私の部屋</span>から隣の部屋に行ってもいいんですが

<br>

<span >うんちをする</span>のが困りものですね。

とし。（<br>は改行を指定するタグ）
CSSでその範囲の色を帰路にすることでそこだけ文字が変えられるという例を示しました。

span{color:yellow}

この様にspanはセンテンスの一部のデザインを変える場合によく使われます。

divタグはセンテンスを複数囲むことができます。
divで囲まれたの部分の背景を変えたいということで

たとえば以下のように２つの文の塊をdivタグで囲み

<h2>セキセイインコって？</h2>
  <div>
  	セキセイインコ（背黄青鸚哥、学名Melopsittacus undulatus） は、
  	<br>
  	オウム目・インコ科・セキセイインコ属に分類される鳥。
    <br>
  	オーストラリア原産の小型のインコで、

  	<br>
  	ペットとして数千円で購入できることから人気が高い。
  	<br>
  	和名語源となったのは、
    <br>背面が黄色と青色の配色になっている理由から、
    <br>
    背黄青鸚哥(せきせいいんこ)と命名された。 
  </div>
  <div>
  	オスとメスはほぼ同じ体色で、
  	<br>
  	雛の時はオス・メスの区別が付かないが、
  	<br>
  	成鳥になるとくちばしの根本の鼻孔を包む蝋膜(ろうまく)という柔らかい皮が、
  	<br>
  	オスは青色、メスは褐色になり、鼻孔の中や周りが白っぽくなるので区別できる。
  	<br>また、若鳥は頭上のしま模様が額まで及ぶが、成鳥になると額のしま模様がなくなる。 
  	</div>

CSSでdiv全体に

div{background-color: white
}

として背景を白とした場合

もともとは赤かったものがそこだけ以下のように変化します。

しかしせっかく２つのまとまりに分けたのに見た目は変わりません。^^;
それぞれのまとまりのデザインを別にしたい場合はclassやidなどの属性を使って区別をしていきます。

divタグやspanタグはclassやidという属性を合わせて使うことによって

細かな設定を行うことができるようになります。

もちろん<p>タグのように意味を持つタグでもclassやidなどの属性を加えることができますが。
divタグやspanタグは意味を持たないがためにどんな部分にも様々なデザインの変更を加えることができ
まとまった塊ごとにレイアウトの変更ができる、という点でCSSを使うときには重要になります。

セレクタをclassで指定

試しに上のdivタグの部分をclass属性でdiv class=”one”とdiv class=”two”という名前をつけて見ます。

<h2>セキセイインコって？</h2>
  <div class="one">
  	セキセイインコ（背黄青鸚哥、学名Melopsittacus undulatus） は、
  	<br>
  	オウム目・インコ科・セキセイインコ属に分類される鳥。
    <br>
  	オーストラリア原産の小型のインコで、

  	<br>
  	ペットとして数千円で購入できることから人気が高い。
  	<br>
  	和名語源となったのは、
    <br>背面が黄色と青色の配色になっている理由から、
    <br>
    背黄青鸚哥(せきせいいんこ)と命名された。 
  </div>
  <div class="two">
  	オスとメスはほぼ同じ体色で、
  	<br>
  	雛の時はオス・メスの区別が付かないが、
  	<br>
  	成鳥になるとくちばしの根本の鼻孔を包む蝋膜(ろうまく)という柔らかい皮が、
  	<br>
  	オスは青色、メスは褐色になり、鼻孔の中や周りが白っぽくなるので区別できる。
  	<br>また、若鳥は頭上のしま模様が額まで及ぶが、成鳥になると額のしま模様がなくなる。 
  </div>

その上でCSSにdiv class=”one”>とdiv class=”two”>の文字の色がオレンジと緑に分けて表示させるように指示をします。

ちなみにcssでclass名をセレクタに指定する場合は

.（ドット）+ class名

と書きます。

}

.one {
  color: orange;
}
.two {
  color: green;
}

すると以下のように表示じされます。

またdivタグを使うことによって縦並びになっている塊を横並びにすることもできます。

divタグとspanタグの違い

divタグやspanタグの大きな違いはブロック要素かインライン要素か、ということです。

divの場合display: blockとなっているためそのままでは横並びにすることはできません。
spanの場合はdisplay: inlineとなっているためそのままで要素を横並びにさせます。

displayは重要なプロパティですが。詳しいことは別記事にします。

CSSで要素を横並びにする方法(floatとdisplay)とdisplayの使い方の基本

とりあえず。CSSのdviセレクトに以下のように付け加えます。

display: inline-block

iv{background-color: white;  	
  display: inline-block
}

そして保存すると以下のようになります。

セレクタをidで指定

HTMLでは<タグ名 id=”id名”>のようにidが指定できるんですが。
同じid名はページ内に1度しか使えません。

このid名をCSSで指定する場合は#id名{}というようにid名の前に#をつけます。

#(シャープ)+id名

仮にHTMLに以下のようにidを付けてみます。

divタグ２つのうち上のdivにだけidタグを付けてみます。

HTML文書の方に

<div id=”try”>と名前をつけて以下のように記述をしてみました。

  <div id="try">
  好奇心旺盛なセキセイインコとの遊びの時間は、おもちゃがあるとより楽しめます。
  <br>ただ、性格によっては、おもちゃを怖がったり、興味を示さない場合もあります。
  <br>少しずつ慣れさせたり、どんなものに興味を示すのか見極めていきましょう。
  </div>
  <br>
  <br>
  <div >
  おもちゃを選ぶ際には、誤飲の恐れのある小さいものや尖っているもの、
  <br>体に絡まってケガの原因となりやすい紐や繊維などは避けましょう。
  </div>その上でCSSに

そしてCSSには

#try {
color: red;background-color: yellow}

}

と追加で記述をし。
文字の色は赤。背景は黄色と指定しました。

下のdivには何も付けていませんので。
先に行ったdivデザインの（つまり白）ままになっているはずです。

変更を保存すると以下のような画面になりました。

子孫セレクタ

セレクタについては他にデザイン適用範囲の絞り込みを行う子孫セレクタというものもあります。

セレクタを半角スペースで区切る（つまりセレクタセレクタ {プロパティ名:値;}）と記述すると
要素の下の階層にある子孫要素に絞ってスタイルが適用されるというものです。

試しに以下のようにHTMLで記述をしました。

<h2>今日の<strong>ぴーちゃん</strong></h2>
<p>
今日は<strong>とても元気😆</strong>です。
<strong>心を癒やしてくれる</strong>日になるでしょう。
</p>
<p>
朝は<strong>６時起き</strong>でした。
<strong>餌の</strong>食いつきもいいですよ。
<p>

<h2><p>タグそれぞれの中に<strong>タグを入れて
比較ができるようにしました。

その上でCSSで以下のように指定してみました。

p strong {background-color:#ff6347 ;color:#fafad2; padding:8px;}
span {font-size:large;}

p strong {background-color:#ff6347 ;color:#fafad2; padding:8px;}

ではpタグの中のstrongタグのみにトマト色の背景を付け、文字の色をlightgoldenrodyellowを指定してあります。
すると<h2>タグの中の<strong >タグには変化がなく。
<p>の中の<strong >タグにのみ変更が加えられていることがわかります。

プロパティと値の基本

プロパティと値は常にセットで書かれていまして。
プロパティによって使える値も決まっていきます。

基本的なものだけを解説をしていきたいと思います。

文字の色を変える

文字の色を変えるときにはcolorプロパティを使い。
値は色名（英語 redなど）またはカラーコードになります。

せレクタ {color: 色名orカラーコード}

例えば以下のように記述してみます。

 <body> 
 	<h2>文字の色を変えてみよう</h2>
 	 <p>様々な色のインコがいるよ</p>
 	 <p>書き方は２種類あるんだね</p>
      <p class="color" >redの色のインコ</p>      
      <p class="color1">#3cb371の色のインコ</p>

色分けするために下の二行を

上の産業classで名前をつけます。

<p class=”color” >redの色のインコ</p>

<p class=”color1″>#3cb371の色のインコ</p>これをCSSで色指定します。

.color {
  color: red;
}
.color1 {
  color: #3cb371;
}

それぞれ保存をすると以下のようになります。

文字の大きさを変える

文字の大きさ（フォントサイズ）を変えるときはfont-sizeプロパティを使います。
値は16pxというように数字+単位で表します。

単位はたくさんありそれぞれ特徴がありますが。
とりあえずPXとemの2つの特徴を押さえておきます。

px（ピクセル）

ピクセルはディスプレイ装置の画面に表示する色情報の最小単のことで環境によって変化しない絶対単位

em（エム）
文字の高さを基準にした単位で1emは1文字分ですが。
MacintoshやWindowsなど使用している環境によって大きさが変化する相対的な単位です。

そしてfont-sizeの指定をしていない場合またはfont-size:100％なら「1em=16px」になります。

記述は

セレクタ {font-size: ◯◯px or ◯◯em}

先程の文字の色を変えたHTML文書に変更を加えてみます。
上３行について

先程はclassで区別しましたので今度はidでセレクタを指定して大きさを変えてみます。

 
 	<h2>文字の色を変えてみよう</h2>
 	 <p id=size>様々な色のインコがいるよ</p>
 	 <p id=size1>>書き方は２種類あるんだね</p>

以下のようにCSSで変更を指定します。
<h2>のセンテンスは変えずにそのままにしてあります。
またsize1は🔟pxに指定してあり標準の文字よりも小さくなります。
size2は3em、つまり標準の３倍の大きさにしました。

#size{
  font-size: 10px;
}
#size1{
font-size:3em;
}

すると以下のように表示されました。

文字を中央や右に寄せてみる

「文字をどちらに寄せるか」はtext-alignプロパティで指定し。 left （左）center（中央） right（右）などの値がよく使われます。

セレクタ {text-align: center や right}

先程の文書にさらにもう一行加えます。その上で以下の部分CSSでさらに変更します。

      <p class="color" >redの色のインコ</p>      
      <p class="color1">#3cb371の色のインコ</p>
      <p class="color2" >#adff2fの色のインコ</p>

このCSS部分を以下のように変更します。

.color {
  color: red;
}
.color1 {
  color: #9932cc;text-align:center
}
.color2{
  color: #adff2f;text-align:right
}

すると以下のように左中央右にわかれて表示されます。

背景色の変更

背景色はbackground-colorプロパティにより変えることができ
値は文字色と同じく色名かはカラーコードを書きます。

セレクタ { background-color: 色名（redなど）かカラーコード }

記事全体の背景を変えたい場合にはボディタグに設定をします。
あとはさきほども触れましたが。
divタグでまとまりを作ってそこに別の背景をつけることもできます。

今回は全体の背景色を変え。
更に一部divタグで囲い込んでその部分の色を変えてみます。

まずHTMLの内下の３行をdivタグで一部囲みclassでセレクタを指定できるようにします。

 <body > 
 	<h2>文字の色を変えてみよう</h2>
 	 <p id=size>様々な色のインコがいるよ</p>
 	 <p id=size1>書き方は２種類あるんだね</p>
 	 <div class="background-color">
 	
         <p class="color" >redの色のインコ</p>      
         <p class="color1">#3cb371の色のインコ</p>
         <p class="color2" >#adff2fの色のインコ</p>
        </div>

</body>

次にCSSにbodyタグとclassへの変更をするために以下のように書き加えます。

bodyタグで指定すると全体に影響を及ぼし。
divタグで囲まれた部分はCSSでした場合そこだけに影響があります。

}
body{background-color: #ff8c00

}
.background-color{background-color:#bdb76b;}

すると以下のように表示されます。

線で囲ってボックスを作る

線で囲ったり線を引く場合にはborderプロパティを使い
線の太さ色種類という３つの値を半角スペースで開けながら必ず同時に付けます。

CSSの記述は以下のようになります。

セレクタ {border:種類 線の太さ色 }

順番は自由です。

線の種類には様々な種類がありますが。
とりあえず以下４つがよく使われるものです。

solid：実践
dotted：点線
dashed：破線
double：二重線

ということでCSSで指定をするため、まずHTMlに目印を付けていきます。

今回はclass.

    <h2>線を引いてみよう</h2>
    　<p class="solid">実線 太さ2px 赤 (red)</p>
　　　<p class="dotted">点線 太さ3px 灰色(gray)</p>
　　　<p class="dashed">破線 1px 緑（green）</p>
　　　<p class="double">二重線 5px 青(blue)</p>

その上でCSSに以下のように記述します。

  border: solid 2px red;
}
.dotted {
  border: dotted 3px gray;
}
.dashed {
  border: dashed 1px green;
}
.double {
  border: double 5px blue;
}

すると以下のように表示されます。

上下左右のどこかだけに線を引く場合

その場合borderだったプロパティ名を以下のように変えます。

上にだけ線を引く：border-top:
下にだけ線を引く：border-bottom:
左にだけ線を引く：border-left:
右にだけ線を引く：border-right:

あとは種類　太さ　色という値はborderのときと同じです。

例えば

セレクタ {border-top:種類 線の太さ色 }

という感じで記述します。

それで。
上と下にだけ色を変えて二重線を引くとか。

下と左だけ色を変えて線を引きたいというような場合。

セレクタに必要な線の分だけプロパティを用意します。

一例としてHTML文書に以下のように記述をした場合。

<h2>線で囲ってみよう</h2>
　　　<p class="topandbottom">上と下にだけ線</p>
　　　<p class="rightandleft">右と左にだけ線</p>

つぎにCSSに以下のように書き込みます。

.rightandleft{
  border-right :solid 4px red;
  border-left: solid 4px blue;
}
.topandbottom{
  border-bottom: double 6px red;
  border-top: double 6px blue;
}

コメントアウト

コメントアウトは、HTMLやCSSの中に自分用のメモ書きをするために使用します。
コメントアウトの部分はウェブページの内容や見た目に一切反映されません。

とはいえ画面右クリックして「ページのソースを表示」をクリックすると
そのメモを見ることができますから。
秘密の情報は書き込まないほうが無難です^^;

コメントアウトの書き方はHTMLとCSSでは違いますので注意が必要です。

HTMLは

<!– コメント–>
CSSは

/* コメント*/

になります。

まとめ

ここまでのことを理解できれば最低限のHTML/CSSの記述ができるようになると思います。

量がたくさんあるわけではありませんので実際に作業をしながらやっていけば短時間でマスターすることができるはずです。

今記事でわからないことが出てきたらさらにもっと基本的なことが書かれている以下の記事もご覧ください。

今回記述したものは２種類
１最初のもの

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="external file.css">
  <title>鳥は可愛い</title>
</head>
 <body> 
  <h1>セキセイインコを飼いました。</h1>
 
  
  <p style="border-bottom: solid 2px yellow">かわいいよ😁</p> 
   <img src="インコ３.jpg" alt="" width="400" height="533" /> <br> <a href="https://maliajoy.com/" target="_blank" rel="noopener">サイトのトップページ</a>
    <h2>インコはどこで飼う</h2>
  <p>
  	 眠る以外は部屋で放し飼いです。
  <br>
    <span >私の部屋</span>から隣の部屋に行ってもいいんですが
    <br>

    <span >うんちをする</span>のが困りものですね。
  </p>
<dl>

 <dt>セキセイインコ</dt>
<dd>かわいいかわいいかわいい</dd>
<dt>オカメインコ</dt>
<dd>とってもかわいい</dd>
<dt>コザクラインコ</dt>
<dd>めちゃくちゃかわいい</dd>
</dl>

<table border="1">
<tbody>
<tr>
<th>インコ</th>
<th>特徴</th>
</tr>
<tr>
<td>セキセイインコ</td>
<td>値段が手頃で声真似が得意</td>
</tr>
<tr>
<td>オカメインコ</td>
<td>性格は温厚であり人懐っこく長生き</td>
</tr>
<tr>
<td>コザクラインコ</td>
<td>ベッタリと甘えてくるよ</td>
</tr>
</tbody>
</table>

<h2>おまけ</h2>

 インコはこんな動画に興味を持ちました。
  <video src="Atoms - 132321.mp4" controls loop autoplay muted width="400px" height="300px"></video>   

<h2>セキセイインコって？</h2>
  <div class="one">
  	セキセイインコ（背黄青鸚哥、学名Melopsittacus undulatus） は、
  	<br>
  	オウム目・インコ科・セキセイインコ属に分類される鳥。
    <br>
  	オーストラリア原産の小型のインコで、

  	<br>
  	ペットとして数千円で購入できることから人気が高い。
  	<br>
  	和名語源となったのは、
    <br>背面が黄色と青色の配色になっている理由から、
    <br>
    背黄青鸚哥(せきせいいんこ)と命名された。 
  </div>
  <div class="two">
  	オスとメスはほぼ同じ体色で、
  	<br>
  	雛の時はオス・メスの区別が付かないが、
  	<br>
  	成鳥になるとくちばしの根本の鼻孔を包む蝋膜(ろうまく)という柔らかい皮が、
  	<br>
  	オスは青色、メスは褐色になり、鼻孔の中や周りが白っぽくなるので区別できる。
  	<br>また、若鳥は頭上のしま模様が額まで及ぶが、成鳥になると額のしま模様がなくなる。
  </div> 
<br>

<br>

  <div id="try">
  好奇心旺盛なセキセイインコとの遊びの時間は、おもちゃがあるとより楽しめます。
  <br>ただ、性格によっては、おもちゃを怖がったり、興味を示さない場合もあります。
  <br>少しずつ慣れさせたり、どんなものに興味を示すのか見極めていきましょう。
  </div>
  <br>
  <br>
  <div >
  おもちゃを選ぶ際には、誤飲の恐れのある小さいものや尖っているもの、<br>体に絡まってケガの原因となりやすい紐や繊維などは避けましょう。</div>
</body>
</html>

CSS

@charset "UTF-8";
body {background-color: red} 
span{color:yellow}
p {text-align:center}
div{background-color: white;  	
  display: inline-block
}

.one {
  color: orange;width : 300px
}
.two {
  color: green;width :300px
}
#try {
	color: red;background-color: yellow}

}

それで以下のような画面になりました。

2セレクタプロパティ値の解説

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="external file1.css">
  <title>鳥は可愛い2</title>
</head>
 <body > 
 	<h2>文字の色を変えてみよう</h2>
 	 <p id=size>様々な色のインコがいるよ</p>
 	 <p id=size1>書き方は２種類あるんだね</p>
 	 <div class="background-color">
 	
      <p class="color" >redの色のインコ</p>      
      <p class="color1">#3cb371の色のインコ</p>
      <p class="color2" >#adff2fの色のインコ</p>
     </div>
    <h2>線で囲ってみよう</h2>
    　<p class="solid">実線 太さ2px 赤 (red)</p>
　　　<p class="dotted">点線 太さ3px 灰色(gray)</p>
　　　<p class="dashed">破線 1px 緑（green）</p>
　　　<p class="double">二重線 5px 青(blue)</p>
　　<h2>線で囲ってみよう</h2>
　　　<p class="topandbottom">上と下にだけ線</p>
　　　<p class="bottomandleft">下と左にだけ線</p>
　　　
</body>

</body>
</html>

CSS

@charset "UTF-8";
.color {
  color: red;
}
.color1 {
  color: #9932cc;text-align:center
}
.color2{
  color: #adff2f;text-align:right
}
#size{font-size:20px
	}
#size1{font-size:3em
}
body{background-color: #ff8c00

}
.background-color{
	background-color:#bdb76b;
}
.solid {
  border: solid 2px red;
}
.dotted {
  border: dotted 3px gray;
}
.dashed {
  border: dashed 1px green;
}
.double {
  border: double 5px blue;
}
.bottomandleft{
  border-bottom:solid 4px red;
  border-left: solid 4px blue;
}
.topandbottom{
  border-bottom: double 6px red;
  border-top: double 6px blue;
}

以下のように表示されました。