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でドロップダウンメニューを作る方法

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

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

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

どうも、チャーさんです。 あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので …

no image

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

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

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

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

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

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

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

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

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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