ボックスの大きさ生涯の学習ノート人生は学びの旅。旅の記録を残しましょう。その2」でボックスモデルの説明をしました。今回は、ブラウザ上に配置されたHTML各要素のボックスに対し、スタイルシートでの大きさに関してまとめてみたいと思います。ボックスの大きさ指定HTML要素のボックスには大きさがあり、外余白エリア、境界線エリア、内余白エリア、コンテンツ(内容)の格納エリアがあります。この4つのエリアは、スタイルシートでそれぞれ大きさを指定することができます。記述例を使って、スタイルシートによるボックスの大きさの設定について説明します。スタイルシートの詳細な仕様は「HTMLクイック・リファレンス」などのサイトを参照してください。この記述例では、次のように3つの要素を使います。1つのarticle要素の中に、2つのdiv要素があります。1つのボックスの中に2つのボックスが含まれる形です。HTMLは次のような内容です。href="style.css"><title>width</title></head><body><ariticl><div>吾輩わがはいは猫である。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。あとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。その当時は何という考もなかったから別段恐しいとも思わなかった。彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div><div>この書生の掌の裏うちでしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗むやみに眼が廻る。助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。</div></ariticl></body></html>幅(width)の設定まずはdivのボックスの幅を700ピクセルにしてみましょう。CSSは次のような内容です。セレクタを記述しています。上記HTMLとCSSのボックスのイメージとブラウザの表示イメージです。ブラウザの画面には700ピクセルの幅のdivボックスの中に文章が配置されています。CSSではボックスの高さ(height)を指定していませんので、ブラウザはボックスの中に文章を配置するために必要な高さを自動的に確保します。高さ(height)の設定divボックスの高さを200ピクセルにしてみます。CSSにheightの記述を追加します。セレクタを記述しています。ブラウザには次のように表示されます。divのボックスは高さ200ピクセルが確保され、ボックスの中に入る文章に必要な高さより大きくなりました。そのため、文章の下に見た目上の空白エリアが発生します。次にdivボックスの周りに内余白を設定してみましょう。内余白(上下左右)の大きさを10ピクセルにします。CSSにpaddingの記述を追加します。10px;}ブラウザには次のように表示されます。周囲に内余白として10ピクセルが確保されました。内余白は次に説明する罫線の内側に余白を取りたい場合に使用します。境界線(border)の設定ボックスの周りに境界線(罫線)を表示してみましょう。線の幅を2ピクセル、線の種類を実線にします。CSSにborderの記述を追加します。solid;}ブラウザには次のように表示されます。内余白の外側に2ピクセルの境界線(罫線)が引かれました。境界線の外側(上下左右)に20ピクセルの外余白を設定してみましょう。20px;}ブラウザには次のように表示されます。境界線(罫線)の外側に20ピクセルの外余白が設けられました。ここで注意が必要です。隣接するボックスの上下の外余白は重ねられるということです。上の図でもわかるように、上のボックスの外余白下部と下のボックスの外余白上部が重なって表示されています。大きさについてまとめてみました。その2」を参照してください。ボックスモデルの概要を説明しました。HSV(HSB)とRGBコンピュータは、色(カラー)を表現する数値化されたデータを処理することで、ディスプレイ表示や印刷を行います。私たち人間がディスプレイ...記事を読む【初心者ノート】articleを罫線で囲む前回記事「各要素の配置を調整する」では、HTML要素のボックスの大きさと配置を調整しました。その1HTML/CSSでは、ボックスモデルという考え方でWEBページを作ります。入門者、初心者はこのボックスモデルの考え方をしっかりおさえ...記事を読む【初心者ノート】HTMLのマークアップ、artcle、header、footer前回記事「HTMLのマークアップを学ぶ」では、見出し(タイトル)と段落をマークアップしました。artcle、header、foo...記事を読む【初心者ノート】HTMLのマークアップを学ぶ前回の記事で基本的なHTMLファイルを作成し、コンテンツの文章を入力してブラウザでWEBページを表示してみました。関係WEBページを作る(WEBデザイン)ためには、HTML、CSS、php、JavaScriptの知識が必要です。ボックスの回り込み前回までの記事で、HTMLとCSSのボックスモデルについて説明しました。ブラウザはコンテンツを表示するとき、HTMLの各要素(bod...記事を読む【初心者ノート】スタイルシートでページの背景に色をつける前回の記事「HTMLのマークアップ、artcle、header、footer」まででページのヘッダーと記事、フッターをマークアップしました。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。-一人での実車運転開始-お疲れ様です。私は第二段階4時間終了したところです。奈良交通に内定を頂きそのまま入社の予定です。今すごく迷っています。-一人での実車運転開始-お疲れ様です。休日出勤は希望では無いのですね。-一人での実車運転開始-お疲れ様です。-一人での実車運転開始-アドバイス頂きありがとうございます。子供がまだ小さいのですが転職を決意。最初は何とか出来るだろうという感じでしたが、いざ実車教習が始まると教官に怒られて一気に不安が襲ってきました。-一人での実車運転開始-はじめまして。大型2種免許の記事を拝見させて頂きました。私も同じ道を歩もうとしているところです。今のところ実車教習4時間終わっただけなのですが、一人前になれるかとても不安です。