忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[99] [98] [97] [96] [95] [94] [93] [92] [91] [90] [89

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSSにできること―レイアウト基礎の基礎編

CSSにできること第五弾。今回は、幅や高さ、余白といったレイアウトに関する技術の基礎の基礎を書いていきます。
前作:CSSにできること―リスト・テーブル編


1.幅、高さを指定する。

HTMLでは、width属性、heightを使って幅・高さを指定していました。
CSSでは、要素の幅や高さを指定することができます。widthプロパティで幅、heightプロパティで高さをそれぞれ指定できます。

また、
max-width max-height というプロパティでコンテンツの最大幅、最大高さを、
min-width min-height では最小幅、最小高さを指定することができます。
ただし、IE6以下ではこれらのプロパティが使えないので、まだまだ利用は避けた方がいいプロパティです。


2.余白を指定する。

余白には、2つの種類があります。外側につける余白と、内側につける余白です。
外側の余白をmargin(マージン)、内側の余白をpadding(パディング)で指定します。
ちなみに、marginは余白、paddingは荷物の梱包材のような、箱と中身の間を埋めるものを指すようです。

この2つをどう使い分けるか、というところですが・・・。
width(幅)を指定している場合には、paddingを使わないのが今のところ無難です。
(これは、IE6以下のブラウザによるバグを回避するためです)
私が意識しているのはこのくらいです。


3.コンテンツがはみ出たときの対処

要素にwidth(幅)やheight(高さ)を指定していた場合、その中に入る文章や画像などの中のコンテンツの量が収まりきらない場合、overflowというプロパティではみ出たぶんを表示したり、しなかったりすることができます。
overflow: hidden;ではみ出した文を隠し、overflow: scroll;ではインラインフレームのように、スクロールして表示できます。


4.ボーダーをつける

borderというプロパティでは線をつけることが可能です。
上下左右それぞれの指定もできますし、点線や破線、二重線といった線の指定、色、太さの指定も可能です。

ボーダーがwidthで指定した値に含まれるブラウザと含まれないブラウザがあるため、注意が必要です。
基本的に、幅や高さを厳密に指定したい場合はborderプロパティは使わないほうがいいと思います。


以上、レイアウト基礎の基礎編でした。
レイアウトの概念編へ続きます。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
11« 2017/12 »01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
ブログ内検索
忍者ブログ [PR]