はじめてのHTML&CSS入門

段組レイアウト2

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
3段組のレイアウトにも挑戦してみましょう!また、ボックスの余白の調整方法も学びます。
講師:
05:29

字幕

このレッスンでは CSS を使った段組みレイアウトコンテンツ領域を3段組みにするということをやってみましょう。それでは、Chapter04 lesson02 のファイルをブラウザで見てみます。そうしますと、final ではこのようにサービス1、サービス2、サービス3と3つが横並びになっています。begin のファイルではこのように縦並びです。この様なレイアウトになるようにCSS を書いていきましょう。それでは begin のファイルをSublime Text で開いてこの段組みレイアウトを実践してみましょう。それでは、まず HTML がどのような構造か確認をしておきます。この3段組みのレイアウトはsection id main の中のcontainer この箱の中に同じようなボックスが3つ入っているんですね。違うのは1、2、3 とサービス名がついているだけでこの box というのが3個入っています。そしての3個入っているその親がcontainer という構成になっていることを覚えておきましょう。では、CSS を記述します。CSS もスクロールをしていくとmain の中の container 子孫セレクターになっています。 こちらにまず段組みにするためにはfloat を使えますがfloat の特性で高さが出ないという特性がありますのでそれを解除するためのプロパティを予めここに入れておきます。overflow 予測が出たらEnterそして、hiddenこれで中の物がfloat しても高さが出るようになります。それでは、この boxこれは、サービスのひとつひとつが入っている箱です。こちらの幅をまず決めてあげます。main が 700それを3等分してただ余白の部分も考慮してあげたいので幅を今回は220px にしておきます。そして、箱と箱の余白は外側の余白なのでmargin そして右側のマージンを付けたいと思いますのでmargin-right を選んでEnterそして、20px としておきます。この状態で一度保存をしてブラウザで見てみましょう。ブラウザを更新します。そうすると、このように220px の箱が縦に3つ並びました。それでは今度はSublime Text でfloat-left として横並びにしてみましょう。また上書き保存アプリケーションをブラウザに切り替えて更新。そうすると2つまで並んだのですが3つ目が下に落ちてしまいました。 これをカラム落ちといってmain の箱に対してこの3つの箱の全部の合計がmain よりも大きいと1個だけ下に落ちてしまうという状態になってしまいます。さて、Sublime に戻って原因を見てみましょう。原因は box の220 が3つあると 660そして、margin-right の値もその見た目の横幅に加算されますので実際は更にそれに 20x3 なんで720px になってしまいました。ですので、20px をどこかで削らなくてはいけないのです。ここで、フィニッシュを見てみましょう。フィニッシュでは余白はここの真ん中にあるサービス2の両隣にあればいい、そして3つ目の右側には余白はいらない訳ですね。なので、3つ目だけの余白を解除するセレクターを書いてみます。書き方は、新しくセレクターを書いてみましょう。id main の中のbox ここまでは一緒ですがここで、: last-child そして CSS の中身はmargin-right: 0と記入をします。こうすると box の中でも最後の子ども、つまり今回は3つ目だけに特定されるCSS を書くことができます。さて、上書き保存してブラウザに切り替えて更新をしてみます。 そうすると無事に、ここにはサービス2のmargin-right が入っていてここにはサービス1のmargin-right が入っていますが、サービス3にはmargin-right がないのでぴったり横並びする事ができました。このレッスンでは、CSS による段組みレイアウト3段組みを実践してみました。

はじめてのHTML&CSS入門

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

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

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

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

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