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で背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

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

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

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

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

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

no image

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

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

no image

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

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

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

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

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

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

最新記事

チャーさん

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

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

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