CSS入門講座|タテとヨコの大きさについて学ぼう

CSS
この記事で学べること
  • タグのヨコの大きさを決めるwidth プロパティ
  • タグのタテの大きさを決めるheightプロパティ

アイカ
アイカ

う~ん・・・

ユウキ
ユウキ

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

アイカ
アイカ

あ、ユウキくん!

実は・・・今ホームページで困ってることがあって・・・

アイカ
アイカ

なんだか左右の高さのバランスがおかしくって

これ、CSSでどうにかできないかなあ・・・?

うさタブ
うさタブ

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

うさタブ
うさタブ

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

CSSで縦幅と横幅を設定しよう

うさタブ
うさタブ

画像がなくても学習できるッピが、

あるともっとわかりやすくなるッピネ!

元になるコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
dl{
  clear: both;
}
dt{
  float: left;
}
dd{
  background: #DDD;
}
</style>
</head>

<body>
<dl>
    <dt><img src="mint.jpg" height="100%" /></dt>
    <dd>ミントは爽やかな香りがするハーブです。<br />
虫除けの効果がある他、かゆいところに湿布すると、かゆみを軽減する効果もあります。</dd>
</dl>
<dl>
    <dt><img src="lavender.jpg" height="100%" /></dt>
    <dd>ラベンダーはハーブの女王とよばれています。<br />
芳醇な香りでリラックス効果があります。枕元に置くと安眠に効果的ですよ!</dd>
</dl>
</body>
</html>
うさタブ
うさタブ

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

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

CSSで高さを設定しよう

うさタブ
うさタブ

アイカちゃんのホームページの現象は、

<dt>タグと<dd>タグ、この2つのタグの高さが違うゆえに起きてしまっているッピ・・・

うさタブ
うさタブ

これを解決するには、

height プロパティを使って高さを揃えると良いッピネ!

うさタブ
うさタブ

<style></style>の間にある dt / dd セレクタに

  height: 250px;

と入力するッピよ~

サンプルコード
<style>
dl{
  clear: both;
}
dt{
  float: left;
  height: 250px;
}
dd{
  background: #DDD;
  height: 250px;
}
</style>

ユウキ
ユウキ

わ! 高さが同じになってる!

うさタブ
うさタブ

ふふふふ、これがプログラミングの魔法ッピヨ~

ブロックの高さを設定するheight

うさタブ
うさタブ

今回つかった height プロパティには、

height: 100px;
height: 70%;

など、【%】と【px】

2つのパターンでサイズを指定することが多いッピ!

うさタブ
うさタブ

最近はモバイルサイト対応やタブレット端末、

PCサイトと様々なウェブサイトの表示パターンがあるッピゆえ、

だれに向けて、どんなページを作りたいかで決めるがッピよ~

CSSで横幅を設定しよう

アイカ
アイカ

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

気になるんだけど、これって 横幅の設定ってできないの?

なんだか、わたしのサイト、ヨコに間延びしている気がして・・・

アイカ
アイカ

この文章の場所だけ、もう少し横幅を狭められないかしら・・・?

うさタブ
うさタブ

もちろんできるッピヨ!

そういうときは width プロパティを使うッピ!

うさタブ
うさタブ

<style></style>の間に

  width: 80%;

と入力するッピよ~

サンプルコード
<style>
dl{
  clear: both;
}
dt{
  float: left;
  height: 250px;
}
dd{
  background: #DDD;
  height: 250px;
  width: 80%;
}
</style>
</head>

<body>
<dl>
    <dt><img src="mint.jpg" height="100%" /></dt>
    <dd>ミントは爽やかな香りがするハーブです。<br />
虫除けの効果がある他、かゆいところに湿布すると、かゆみを軽減する効果もあります。</dd>
</dl>

<dl>
    <dt><img src="lavender.jpg" height="100%" /></dt>
    <dd>ラベンダーはハーブの女王とよばれています。<br />
芳醇な香りでリラックス効果があります。枕元に置くと安眠に効果的ですよ!</dd>
</dl>

ユウキ
ユウキ

お! 短くなってる!

アイカ
アイカ

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

横幅を設定する width

うさタブ
うさタブ

CSSで横幅を設定するには width プロパティを使うッピ!

うさタブ
うさタブ

height と同様

  width: 80%;
  width: 200px;

【px】と【%】の2パターンでサイズを指定することが多いッピ!

全体のコードの確認

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
dl{
  clear: both;
}

dt{
  float: left;
  height: 250px;
}

dd{
  background: #DDD;
  height: 250px;
  width: 80%;
}
</style>
</head>

<body>

<dl>
    <dt><img src="mint.jpg" height="100%" /></dt>
    <dd>ミントは爽やかな香りがするハーブです。<br />
虫除けの効果がある他、かゆいところに湿布すると、かゆみを軽減する効果もあります。</dd>
</dl>

<dl>
    <dt><img src="lavender.jpg" height="100%" /></dt>
    <dd>ラベンダーはハーブの女王とよばれています。<br />
芳醇な香りでリラックス効果があります。枕元に置くと安眠に効果的ですよ!</dd>
</dl>

</body>
</html>
学習のまとめ
  • width: サイズ;ヨコの大きさを設定する
  • height: サイズ;タテの大きさを設定する
  • サイズの指定方法は、px か % のどちらかを選択できる

うさタブ
うさタブ

上手くできたッピか?

これからも色んな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をコピーしました