css

cssのborderを初学者でもわかりやすいよう説明します

投稿日:

Pocket

うも、チャーさん(@chaa___san)です。

 

あなたはcssのborderとは何か?

と疑問に思っていませんか?

 

この記事ではcssのborderについて、

初学者でもわかりやすいように説明しています。

 

 

なのであなたがcssのborderを習得したい、

プログラミング初学者だ、という場合は、

このまま下にスクロールして読んでみてください。

 

スポンサードサーチ

cssのborderとは?

 

で、早速結論からいくのですが、

 

cssのborderとは何か?

ですが、これを使うと要素の周りに、

枠線をつけることができます。

 

以下の画像のようにです。

 

 

この周りに枠線、

という文章の周りに枠線がつきましたね。

 

これがborderの機能になります。

 

スポンサードサーチ

cssのborderは枠線の表示位置を選べる

 

またborderには、

枠線の表示位置にも種類があります。

 

具体的には左側だけ、上だけ、下だけ、右だけ

のように表示位置を指定できます。

 

例えば、この画像のように、

 

 

上だけに線をつけたり、

 

こちらの画像のように下だけに線を引いたり、

枠線の表示位置を変えることができます。

 

またこのように表示の位置を操るための、

記述の仕方は以下になります。

 

border-top 上だけ線をひく

border-left 左だけ線をひく

border-right 右だけ線をひく

border-bottom 下だけ線をひく

 

borderの後ろに-ハイフンをつけて、

上下左右を表す単語を足すだけで表示を、

操れます。

 

スポンサードサーチ

cssのborderでは枠線の色、種類、太さが選べる

 

枠線には3つの情報をつけれます。

それが線の色、種類、太さです。

 

cssのborderの色

 

borderの線には以下の画像のように、

色をつけることが可能です。

 

 

色をつけるには、

border:のコロンの後ろにblueやredなど、

色を表す単語を書けば色をつけれます。

 

また16進数(#fffのような色表記の仕方)でも、

色をつけることができます。

 

cssのborderでは線の種類を選べる

 

そして、borderでは色だけでなく、

線の種類も変えれます。

 

今まで画像でお見せしてきたものは、

実線で定規でシャーっとひく線のような、

普通の線でした。

 

しかし、

 

このようにドット状にすることも可能です。

 

線の種類を変えるには、

border:のコロンの後ろに線の種類を表す、

コードを書きましょう。

 

実線はsolid

ドットならdotted

破線ならdashed

 

と書けばそのように表示されます。

 

cssのborderでは線の太さも選べる

 

またborderの枠線では太さも変更できます。

 

 

このように細い線も表示できれば、

 

このようにド太い枠線も表示できます。

 

この線の太さを操るには、

border:の後ろにpxで数字を書きましょう。

 

例えば、border:1px solid red;

と太さを1pxにすると、

先ほどの細い線の画像の太さになります。

 

 

またこれを10pxにすると、

さっきのド太い枠線になります。

 

なのでpxの数字を変えれば線の太さが、

変わります。

 

ではここまででborderの仕組みや、

諸々の機能が伝わったと思います。

 

なので実際に書くときはどうすればいいか?

次はそれを説明していきます。

 

 

スポンサードサーチ

cssのborderを表示させる書き方と手順

 

手順は4つありまして、

それぞれ説明していきます。

 

1要素を選ぼう

 

まずborderをつける要素を選びましょう。

(この記事の例ではpタグにborderをつけています。)

 

これをしないとborderは表示されないので、

注意しましょう。

 

2cssのborderと書く

 

そして次に、

cssの書き方に沿いborderと書きましょう。

 

cssでの書き方は、

 

セレクタ{

ここにcssを記述

}

となってます。

 

 

なのでborderを書こうと思えば、

セレクタ{

border:

}

 

という風に書きましょう。

セレクタにはborderをつけたい要素の名前を、

書きましょう。

 

参考までに、この記事ではpタグにつけてるので

p {

border:

}

と書いています。

 

3borderの3要素を指定しよう

 

でborderを書いたら、

次は線の太さ、種類、色を指定しましょう。

 

(これは順番はどんな順番で書いてもokです)

(例えば色、種類、太さの順でもokです。)

 

 

なぜならこれらを指定してやらないと、

border:と書くだけでは枠線はつかないので。

 

ということで、この3つを指定してやりましょう。

あなたが好きな色、線の太さ・種類をイメージして、

記入してください。

 

4実際に実行してみてみよう

 

そしてそれができたら、

あなたが書いたコードを実際にブラウザに表示して、

出来栄えを見てみましょう。

 

そしてそれでOKだと思ったら、

そのままでダメならまた色々3つの要素を

手直しして、また見直してみましょう。

 

スポンサードサーチ

まとめ

 

cssのborderとは何か?ですが、

要素の周りに枠線をつけることができる機能です。

 

枠線には太さや色、種類があり、

その枠線の表示位置も変更できます。

 

 

borderはサイトの制作や、

何かのページや画面を作りたいときに、

とてもよく使えます。

 

なので、覚えておくととても便利ですよ。

 

 

ということで、早速この記事をみながら、

あなた自身でエディターにborderを記述して、

練習してみてください。

 

そうすればあなたのプログラミング力は、

レベルアップしますし、色々できるようになり、

楽しくなりますよ。

 

それでは読んでもらってありがとうございました。

 

チャーさん(@chaa___san)

-css


スポンサードサーチ

関連記事

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。