はじめてのHTML&CSS入門

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSではHTMLの要素を箱(ボックス)と捉えて装飾をしていきます。divタグを使って、横幅と高さ、そして余白の設定を学びましょう!
講師:
06:36

字幕

このレッスンでは、CSS のボックスモデルについて学びます。それでは、チャプター3レッスン8のファイルをブラウザで開いてみます。そうしますと、この final のファイルでは水色のボックスができています。そして、これから編集をしていく begin のファイルはブラウザいっぱいに水色の箱が広がっています。また、意図せぬ余白もできていますのでそちらの方もコントロールしていきましょう。それでは、Sublime text でbegin のファイルを開きます。開きましたら、style.css こちらに記述をしていきます。まず、ブラウザにできてしまう意図せぬ余白については一旦すべてを解除する方法を学びましょう。それは、グローバルセレクタという物です。記号*を打ち込み、そしてその中身に margin 0そして padding 0 を入力します。そして上書き保存Command+S、Ctrl+S をしてアプリケーションをブラウザに切り替えます。そして、ブラウザをCommand+R もしくは、Ctrl+R でリフレッシュしてみましょう。更新をすると、この見出しの上にあった余白や左側にあった余白が無くなってぴったりボックスがブラウザのウインドウにくっついたと思います。 この余白は実はブラウザがデフォルト初期設定で付けてしまう余白でありこの余白があると、なかなか細かい位置調整が難しいのでこのように一度余白を取っておきます。Sublime text に戻ります。他にもグローバルセレクタを使わずにreset.css や normalize.css というものを使ってうまくブラウザをコントロールする方法もあるのですが最初のうちは、このグローバルセレクタで解除をするとやりやすいです。では、begin の main の箱についてスタイルを記述してみましょう。まずは、width を記入します。width はまず400 pixel と記入しておきます。この時必ず単位を忘れないようにしましょう。ピクセルの代わりにもパーセントやem 等、他にも単位がありますがまずは、ピクセルが一番一般的な単位ですのでこちらでやっていきましょう。そして、width を記入して保存をしてブラウザで一度確認してみましょう。ブラウザを開いてそしてリフレッシュそうすると、今までブラウザの横幅いっぱいだったものが400px までで止まるようになりました。つまり、幅を指定しない限りはこの div というのは、横幅いっぱいに広がる性質を持っています。 それでは、Sublime text に戻ります。今度は、高さを記入してみましょう。高さは、hight そして、400 px と入力します。そして上書き保存、アプリケーションをブラウザに切り替えてそして更新をすると高さが400まで広がりました。もしも、この高さがこのコンテンツより狭い場合のケースを試してみます。それでは、Sulime text で高さの方を例えば、40 px と指定するとどうなるでしょうか。上書き保存をして確認をしてみます。更新をすると高さ40の箱にはなっているのでですがコンテンツがはみ出してしまいます。このように、高さについてはコンテンツによって自動的に高さが変わります。なので、CSS で高さを制御する時には気をつけましょう。一般的には指定しない方が無難なことがあります。それでは、アプリケーションSublime に戻ります。では、400に一度戻しておいて次は余白のプロパティ内側の余白 padding を設定してみましょう。padding と入力して30 px と入れます。そして上書き保存アプリケーションを切り替えて更新そうすると高さが400に戻りそして内側の余白この見出しの上、見出しの左そしてこの文章の右側そして実はこの400に上下それぞれに30ずつついていますので実はこの400 px に30 px ずつ余白が追加されて実際の水色の領域は左右が400+左の30、右の30で460高さも同様に460px の見た目になっています。 では、Sublime text に戻ります。今度は margin を指定してみましょう。margin は外側の余白です。同様に30 pxと記入します。そして上書き保存をしてブラウザに戻ります。そして更新そうしますと、水色の領域の外に余白ができました。つまり、水色のはこの領域は460 px のままで変わりません。ただ、外側に余白ができたことで箱の位置は変わりました。このように余白を扱う上でmargin と padding は少しややこしいですがうまく背景をつけたボックス等を利用してコントロールを楽しんでみてください。このレッスンでは CSS によるボックスモデルについて学びました。

はじめてのHTML&CSS入門

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

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

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

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

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