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の基礎解説をしていくッピ!

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

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

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

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

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

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

アイカ
アイカ

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

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