Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

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

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

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

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

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

no image

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

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

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

最新記事

チャーさん

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

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

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