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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ
テレビ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をコピーしました