CSS入門講座|ボーダーラインついて学ぼう

CSS
この記事で学べること
  • 線について学ぼう
  • 線の種類・太さ・色について学ぼう
  • 線を消してみよう
  • 好きな場所に線を引いてみよう

アイカ
アイカ

う~ん・・・

ユウキ
ユウキ

どうしたのアイカちゃん?

アイカ
アイカ

あ、ユウキくん!

実は・・・このサイトなんだけどね

アイカ
アイカ

もっとタイトルをわかりやすくして、

文章の部分はやさしい感じで『ノート風』にしたいの!

CSSでできるかなぁ?

うさタブ
うさタブ

その願い、叶えてしんぜようッピ・・・!

うさタブ
うさタブ

うさタブに任せるッピ! 3分で片付けるッピよ~!

CSSのボーダーについて学習しよう

元になるコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
main {
 width: 60%;
 margin: auto;
 background: #f5deb3;
 padding: 1%;
 border: 1px solid  #8b4513;
}
h1 {
  color: #8b4513;
  padding: 0.3em;
}
p {
  color: #8B4513;
  line-height: 2em;
}
</style>
</head>

<body>
<main>
<h1>ハーブの効能</h1>
<p>
メディカルハーブと呼ばれるものは、昔から西洋の人たちに薬のように使われてきました。<br />
丈夫で育てやすい品種も多く、匂いも甘いものから爽やかなもの、スパイシーなものまで様々。<br />
その時の体調や気分によって使い分けて下さい。
</p>
</main>
</body>
</html>
うさタブ
うさタブ

上のコードを元に学習していくッピ!

メモ帳】にコピーして用意するッピネ!

線の種類・色・太さについて学ぼう

うさタブ
うさタブ

ではさっそくラインを引いてみるッピ!

うさタブ
うさタブ

<style></style>の『h1』セレクタに

  border-style: dotted;
  border-width: 1px;
  border-color: #996600;

と入力するッピよ~

サンプルコード
h1 {
  color: #8b4513;
  padding: 0.3em;
  border-style: dotted;
  border-width: 3px;
  border-color: #996600;
}

アイカ
アイカ

見出しが線で囲まれてるわ!

うさタブ
うさタブ

ふふふふ、これがCSSの魔法ッピヨ!

線の種類を設定する border-style

うさタブ
うさタブ

今回使った border-style を説明するッピ!

うさタブ
うさタブ

他にも

普通の1本線の【 solid 】

このような点線【 dotted 】

のようなラインを引くことができるッピネ~!

線の太さを決める border-width

うさタブ
うさタブ

border-widthは、線の太さを設定するプロパティッピ!

border-width: サイズpx;

で利用されることが多いッピネ!

線の色を決める border-color

うさタブ
うさタブ

border-color は線の色を決めるプロパティッピ!

線の色はカラーコード(#xxxxxx)のような形で指定できるッピヨ~! どんな色があるかは、参考サイトを利用すると良いッピ!

カラーコード見本サイト
HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
HTML,CSS 500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表

線を消してみよう

アイカ
アイカ

あのね、ウサタブさん・・・

この枠線の部分、四方じゃなくて、下だけにラインを引くってできないかしら?

うさタブ
うさタブ

もちろんできるッピよ!

最初から下線だけを引く方法もッピが

まずは他の線の消し方を勉強してみるッピネ!

うさタブ
うさタブ

h1 セレクタの中に

  border-top: none;
  border-left: none;
  border-right: none;

と入力するッピよ~

サンプルコード
h1 {
  color: #8b4513;
  padding: 0.3em;
  border-style: dotted;
  border-width: 3px;
  border-color: #996600;
  border-top: none;
  border-left: none;
  border-right: none;
}

CSSでの枠線の設定
ユウキ
ユウキ

すげえええ! 下線だけできてる!

アイカ
アイカ

すごいわ、ウサタブさん!

線を消す値 none

うさタブ
うさタブ

【border】 プロパティに、『none』という値を入力すると、線を消すことができるッピよ~!

border: none;

という感じッピネ!

うさタブ
うさタブ

今回は下の線だけを残したかったので、【 bottom下部 】以外の

  border-top: none;
  border-left: none;
  border-right: none;

という感じ設定したッピネ!

うさタブ
うさタブ

border-top での線を

border-bottom での線を

border-left での線を

border-right での線を

がそれぞれ設定できるッピ!

線を好きな場所に引いてみよう

うさタブ
うさタブ

上のプロパティを利用して、

今度は上下左右、好きな場所にラインを引いてみるッピ!

うさタブ
うさタブ

たとえば先程のコードを短くして

  border-bottom: dotted 3px #996600;

と省略して、下に線を引くこともできるッピよ~

サンプルコード
h1 {
  color: #8b4513;
  padding: 0.3em;
  border-bottom: dotted 3px #996600;
}

CSSでの枠線の設定
ユウキ
ユウキ

すげええええ!

さっきと同じなのに、コードが短くなってる!

アイカ
アイカ

すごいわ!

ノートのような線を引いてみよう

アイカ
アイカ

あのね、ウサタブさん

これなんだけど・・・

アイカ
アイカ

自分でがんばって挑戦してみたんだけど、なんだか上手くいかなくって・・・

アイカ
アイカ

これをどうにかノートの線みたいにできないかしら?

p {
  color: #8B4513;
  border-top: solid 1px #996600;
  border-bottom: solid 1px #996600;
  line-height: 2em;
}
うさタブ
うさタブ

任せるッピ!

これは新しいCSSの技術でできるッピネ~

ちょっと難しくなるッピが、挑戦してみるがッピ!

うさタブ
うさタブ
  background-image: linear-gradient(#996600, transparent 1px);
  background-size: 100% 2em;
  line-height: 2em;

CSSに入力して見るッピよ~

サンプルコード
p {
  color: #8B4513;
  background-image: linear-gradient(#996600, transparent 1px);
  background-size: 100% 2em;
  line-height: 2em;
}

ユウキ
ユウキ

すげえええええ! ノートみたいになった!!

アイカ
アイカ

まるで魔法みたい! すごいわウサタブさんっ

うさタブ
うさタブ

ふふふふ、これがCSSの魔法ッピよ!

全体のコードの確認

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
main {
 width: 60%;
 margin: auto;
 background: #f5deb3;
 padding: 1%;
 border: 1px solid  #8b4513;
}

h1 {
  color: #8b4513;
  padding: 0.3em;
  border-bottom: 3px dotted #996600;
}

p {
  color: #8B4513;
  background-image: linear-gradient(#996600, transparent 1px);
  background-size: 100% 2em;
  line-height: 2em;
}
</style>
</head>

<body>
<main>
<h1>ハーブの効能</h1>
<p>
メディカルハーブと呼ばれるものは、昔から西洋の人たちに薬のように使われてきました。<br />
丈夫で育てやすい品種も多く、匂いも甘いものから爽やかなもの、スパイシーなものまで様々。<br />
その時の体調や気分によって使い分けて下さい。
</p>
</main>
</body>
</html>
学習のまとめ
  • border-style で線の種類を決める
  • border-color で線の色を決める
  • border-width で線の太さを決める
  • border-top/bottom/left/right で上下左右の線を設定する
  • ノートのような線は、background-image: linear-gradient(線の色, transparent 線の太さ); で設定する

うさタブ
うさタブ

上手くできたッピか?

これからも色んなCSSの基礎解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんな、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんなは、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

CSSCSS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました