はじめてのHTML&CSS入門

ボックスモデルを学ぼう!(2)

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
複数のボックスを使って、罫線や余白への理解を深めていきましょう!
講師:
08:31

字幕

このレッスンでは CSS によるボックスモデル罫線と余白の便利な使い方について学びます。それではチャプター3レッスン9のファイルを見てみましょう。今は final のファイルをブラウザーで見ています。begin と見比べるとbegin はただ上から順番に箱が重なっていて、すべて同じ幅です。ですが、final の方は箱ごとが違う余白になっていたりとか見出しに罫線がついていたりしますのでこちらを付ける方法を学びましょう。では Sublime text の方に行きます。ではスタイルシートの方を編集していきましょう。まず余白について設定していきます。現状では header が凄い窮屈な見た目になっていますので内側の余白の padding を足していきましょう。padding: 20pxそして header と main の隙間つまり外側の余白を設定しますのでmargin ここで下だけの余白をコントロールしたい時は-bottom と付けます。bottom と付けると、下側だけの余白をコントロールすることができます。他にも top right left でそれぞれの方向についての余白を設定できます。 こちらに 30px と記入して上書き保存そして、アプリケーションをブラウザーに切り替えて、更新をします。begin のファイルを更新します。そうしますと、header の文字の余白ができてそしてボックスとボックスの間の余白白い空間ができました。引き続き罫線もheader に付けてみましょう。Sublime text に戻ります。それでは、header にボーダーのCSS を記述していきましょう。ここに borderそしてこちらのプロパティは罫線を設定します。そして top や left も規定できます。もしも top bottom などといった方向が設定されていない場合は4辺全部に罫線が付くようになっています。ですが今回は top上の方向だけに罫線が欲しいので-top を付けてあげます。そして solid、実線そして 4px、これが太さそして色味をc00 としておきます。そして上書き保存をしてブラウザーの方で見てみましょう。そして更新です。そうしますと、4px の罫線が上についてそして、少し全体的に下に下がりました。このように罫線もボックスモデルの一部箱の一部ですので罫線が付けばつくほど、箱はそれだけ太っていくということになっています。 では引き続き main の方をSublime text で記述していきましょう。今度は main のセレクターの中にカーソルを入れて幅を入れてみます。幅が 600pxそして padding が30pxこれで横幅が 600そして内側の余白が 30 なので見た目の横幅というのは660 になるはずです。ではブラウザ―で見てみましょう。ブラウザーを更新するとmain の箱が縮みそして内側の余白が設定されています。では Sublime に戻り今度は margin を設定します。margin、少し変わった書き方をしていきましょう。0 (半角スペース) auto(半角スペース) 30px と記入をします。この書き方は最初の 0 が上側の余白真ん中の auto が左右の余白そして最後の3つ目は下の余白です。つまり、margin top や rightleft など、個別に指定できたものを実は一行で設定することができます。4つ指定する時は上から時計回りにtop right bottom left と記入しますが3つの場合は最初の数字が topまん中の数字が left rightそして最後の数字が bottom というようになっています。 ではブラウザ―で確認しましょう。アプリケーションを切り替えて、更新そうしますと、auto という余白がどういう意味を持っているかがわかると思います。左右が auto とは、ブラウザー上で真ん中に持ってくるという意味です。ですので、ブラウザーの横幅を縮めてみてもこの様に真ん中にいることがわかります。非常に便利ですのでmargin の上下は普通の数値左右を auto と設定するとブロックが真ん中に来るというのを覚えておきましょう。では Sublime に戻ります。それでは、この main の箱にも罫線を付けてみましょう。border と入力してsolid、実線ですね。そして 10pxそして色の方を#eee、薄いグレーと指定して上書き保存そしてブラウザー上で更新です。この様に水色の箱の外側に罫線が付きました。これで、このボックスの横幅というのはちょっと計算してみましょう。Sublime の方にもどります。横幅 600左右に padding が 30 ずつそして border も上下左右に10 付いてますので合計は 660 に、更に罫線を10 と 10 足して実は 680 の領域になっています。 この様に計算することを覚えていきましょう。それでは見出しの方もスタイリングしていきます。ID main の中の h3 が見出しになっていますのでその中に borderやはり border-bottom というのを選ぶことができます。border-bottom で下線を設定するんですがここで dash これで solid とは違って破線になります。そして 2px が太さそして色味を369 と入力しておきます。そして padding の bottomこれは下だけの余白 20pxそして、margin も設定します。margin の bottomそして、20pxこれで上書き保存をしてブラウザーで見てみましょう。そして更新です。こうすることで見出しの下に余白が付いて罫線が付いて、余白です。この3つは最初が padding の余白そして border があって次の余白が margin-bottom です。隙間を開けたい所によってプロパティを使い分けるようにしましょう。このレッスンでは余白の便利な使い方をボックスモデルで学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

3時間35分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月26日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。