CSS

CSS 幅と高さの指定方法 widthとheightプロパティ基本

Sponsored Link

Sponsored Link

前記事で本来ならば縦にしか並ばないブロックレベル要素を横に並べるためのプロパティについて
基本的なことをまとめてみましたが。

それぞれのプロパティによって様々な制約がありました。
何が使えて何が使えないのか、しっかりと理解をしておく必要があります。

CSSで要素を横並びにする方法(floatとdisplay)とdisplayの使い方の基本

今回は幅と高さの指定方法について見ていきたいと思います。

親要素と子要素

特に高さと幅については「親要素」と「子要素」に関する知識が必要になります。

<タグ>タグの中のコンテンツ</タグ>の塊のことを「要素」と呼ぶことは何度も書いてきました。

<p>インコは可愛いね<p>

などはその一例です。

しかし要素はそのようなシンプルなものばかりではなく。
要素の中に要素を組み込んで様々なパフォーマンスを示していきます。

例えば以下のように記述をした場合

 <ul > 
 <li>redの色のインコ</li> 
 <li>#3cb371の色のインコ</li> 
 <li>#adff2fの色のインコ</li> 
 <li>blueの色のインコ</li> 
</ul>

<LI>タグはList Itemの略で、リストの項目を記述する際に使用するもので4つの項目が記されています。

そしてそれら全体が<UL>タグで囲まれています。
<UL>タグはUnordered Listの略で、リスト項目に順序を付けないという目印。
<UL>タグの中にある<LI>タグで囲まれた要素には順番が付けられていないという指定になります。

この場合。
<UL>タグで囲まれた部分を親要素
中身のダグで囲まれた部分を子要素といいます。

つまり。

要素Aの中に要素Bが入っているときAはBの親要素BをAの子要素といいます。

高さと幅を指定する際、この親要素子要素が意味を持ってきます。

widthとheightの指定の仕方

width: 〇〇px; height: 〇〇px;
などと表記します。

なお単位はpxやem,%などを使います。

例えばpタグをボックスにして色を付け破線の枠を付けるとします。

<p>インコと毎日遊んでいます。</p>

上記要素にCSSで

  width: 150px;
  height: 150px;
  background: #adff2f;
  border: dashed 3px green;
}

と記述すると以下のように表示されます。

ただwidth とheightはdispkay:inlineではその指定ができなかったですよね。

CSSに書き込んでも反映されません。

つまりdisplay:inlineが初期値であるタグ、たとえばaタグやの場合は高さと幅を設定することができないということになります。

CSSで要素を横並びにする方法(floatとdisplay)とdisplayの使い方の基本

どちらかを指定をしない場合やwidthをautoにした場合。

高さ(height)だけ指定し、幅(width)の指定をしない場合やwidthをauto(数値を指定しない時の初期値)

にした場合。
画面いっぱいに幅が広がります。

幅(width)を指定し、高さ(height)を指定しない場合には画面いっぱいに広がることはなく。
要素の分だけの高さになります。

親要素と子要素の関係

幅(width)

親要素があるときに

幅(width)の指定をしない場合やwidthをauto(数値を指定しない時の初期値)

にした場合。

親要素の幅指定に従います。

divタグで親要素を作りclassで名前をつけて目印とします。

<div class="width">
 		<p>インコと毎日遊んでいます。</p>
 	</div>>

CSSでクラスのデザイン指定を行います。
幅を50pxにしてみました。

.width{
	width: 50px;
}

すると以下のように表示されます。

要素の量が多いとこの様にはみ出してしまいます。
幅を指定し、高さを指定しない場合

しかしwidthでpxで幅指定した場合、子要素の指定に従います。

p {
   width: 150px;
   height: 150px;
  background: #adff2f;
  border: dashed 3px green;
}
.width{
	width: 50px;
}

CSSこのように記述すると以下のように表示されます。

小要素の幅の指定に従っていることがわかります。

高さ(height)

pxで指定をした場合、幅と同じ様に子要素が優先されます。

CSSを以下のように書き換えたとして。

親がともに50px,子が150pxに指定されたとすると

p {
   width: 150px;
    height: 150px;
  background: #adff2f;
  border: dashed 3px green;
}
.width{
	width: 50px;
	 height: 50px;
}

子要素の指定通りに表示されます。

ただし実際にデザインするときには子要素の値は親要素より持ち飯作するのが原則です。
そうしないとデザインが崩れます。

幅や高さを%で指定した場合

親要素のwidthやheightの値が指定されずautoになっている場合には、%指定をしても効きません。

しかしたとえば以下のように親要素を加えてHTML文書を記述します。

<div class="grandpa">
 <div class="parent">
   <p>インコは可愛いね</p>
  </div>
 </div>

次にCSSで外側のwidth要素を200px
その内側のdiv要素の幅を60%tosi.

更にその子要素であるpタグを30%に指定しました。

そしてそれぞれの色を変えておきます。

.grandpa {
  width:200px;
  background:red;
  
}
.parent {
 width: 60%;
  background: green;
}
.parent p {
  width: 30%;
  background:orange;
}

すると以下のように表示されます。

親の60%が小要素で。

小要素のさらに30%がpタグの孫要素です。

均等に表示するときなど%は便利です。

ちなみに高さを%で指定することは殆どありません。

まとめ

基本的なことは以上です。

高さや幅が指定できるものとできないもの。
親要素と子要素については更にさまざまなことを知る必要がありますが。
それはまた別記事で行くことにします。

 

 

Sponsored Link

Sponsored Link

関連記事

  1. HTML・CSSを実際に記事を作りながら覚えていこう
  2. HTMLで動画や画像を埋め込みする方法を詳説
  3. aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを…
  4. HTML CSS テーブル(表)の作り方とその装飾の仕方 基本
  5. CSS レスポンシブデザインに欠かせないmax-widthとmi…
  6. CSS marginとpadding 余白の指定方法 基礎
  7. CSS positionの使い方
  8. 知っておくと便利なセレクタまとめ

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. WordPressのフォルダ構成とバックアップの仕方
  2. 【Basics of site construction】ドメインの選び方と名前の選定 サブディレクトリとサブドメインの役割について
  3. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明
  4. ソースコードを記事中に表示させるために必要なことは?簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介
  5. サーバって何?どのレンタルサーバーを選べばよいのか?
  6. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  7. WordPress新エディタ「Gutenberg」の使い方
  8. WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
Windows10でブルーライトカットの設定 コントロールパネルの使い方
HTMLで動画や画像を埋め込みする方法を詳説
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク
AviUtil カメラ制御の基本の基本を詳しく解説
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
HTMLとCSS 初歩的な文字装飾 基本まとめ
AviUtlのすべてのエフェクトについての解説④ぼかし・境界ぼかし・モザイク
GIF形式で動画を保存したり動画・画像を編集するのに超便利!無料なのに高機能!EZGIF.COM
AviUtilの各ウインドウの解説 「メインウィンドウ」詳細

ソフト・アプリの使い方

PAGE TOP