HTML&CSSでWebサイトを作ってみよう!

段組レイアウト(2) コンテンツ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ヘッダー、コンテンツをレイアウトしましょう。また、横幅を計算する方法を学びましょう。
講師:
06:59

字幕

このレッスンでは、float を使ったレイアウトを学びます。それでは、まず final のフィイルのindex.hrml をブラウザで開いてみましょう。ブラウザで開くとまだ仮の背景色の状態ですがこのナビゲーションとヘッダーの info という箱が横並びになっていたりこちらの仮想ページへのリンクが貼ってあるコンテンツのエリアが横並びになっています。では、begin のファイルの方を見ておきましょう。Finder からフォルダを開いてbegin のフォルダをまずSublime text で開いておきます。フォルダごと,ドラッグ&ドロップします。そして、index.html をダブルクリックしてCSS フォルダの中の style.css をダブルクリックで開いておきます。そうしましたら、index.html に包括をして右クリックして Open in Brower でbegin のファイルを確認してみましょう。そうしますと、まだ横並びになっていないので縦積みなっています。また、こちらの企業情報やサービスなどの箱も縦の4つ積まれていますね。それでは、CSS に記述してレイアウトをしておきましょう。 Sublime text の style.css を選びます。そうしましたら、まず、ヘッドーの横並びにしたいのでヘッダーのコメントの場所を探します。そうしましたら、header.logo というのがこちらのロゴです。そして info というのがこちらのお問い合わせが入っているエリアになります。それでは、もう幅が設定されているのでfloat を掛けてやれば、横に並ぶはずです。float の left ロゴには、float の left を掛けてヘッダー info には float の right を掛けておきます。そして上書き保存してブラウザを更新してみます。そうしますと、このように左と右で横並びになりました。そして、Sublime text に戻ります。ちなみに float をしたものには必ず解除をしてあげないとレイアウトが崩れるという現象が起きますが今回このヘッダーのロゴとヘッダーインホはhtml 上ではこの13行目にありましてinner という箱で実は包まれています。この inner という親がスタイルシートではこの17行目にあるクラス inner でスタイリングされていましてそこに overflow hidden があるためにちゃんとそこで float が一旦落ち着いた状態になってくるというふうになっています。 それでは、今度はコンテンツの方も横並びにしておきたいと思います。content というコメントを探してそしてこの content の全体の箱ではなくてcontent の中のセクションがそれぞれの箱になっていますので既に幅が205とあるとおりここの後ろに floatそして leftこの状態で上書き保存してブラウザで見てみましょう。更新をします。そうしますと、このように横並びになってくれました。ただこの箱と箱の間に余白を設けたいと思いますのでSublime text に戻って CSS を記述したいと思います。それでは、margin right というものを記述してみたいと思います。margin right つまり、箱に右の余白を付ける幅は40pxとしてみたいと思います。それでは、上書き保存をしてブラウザに包括して更新をしますとこのような状態になってしまいました。なんとか箱は205 px で並んでいてこの隙間が40 px ということになっています。ここで計算をしてみましょう。205*4が、まず、820です。そして inner の箱は940です。その差が、120 が余白として使えるエリアになっています。 ただ今回はこの青いエリア今隙間になっていますがここが40で、ここも40ですね、そしてこの緑の箱の右側にやはり40があってこの採用情報の右側にも40が付いてしまっています。なので、40が4つで160 px が820に足されてしまうのでこのエリアというのは980必要なんですね横に並ぶために。ただここの最後の箱の右の余白は要らないと思うわけです。この1個、ここの1個この1カ所で、3カ所余白があれば、充分離れているように見ることができるので最後の箱の右の余白を取りたいと思います。それでは、Sublime text に行って新しいセレクタを作りましょう。HOME の中の ID content の中のセクションまでは上と一緒です。ただ、:lastーchild と書いて{そして、margin right を0と書きましょう。この意味は content の子供としてセクションが4つ要るのですがそのラスト、4つ目のセクションだけに優先して効くセレクタを書きました。なので、これを設定しないと他の3つの margin right 40でラストだけが margin right 0になるというふうになりますので上書き保存をしてブラウザで更新をします。 そうしますと、無事にこのように4つ並んだかと思います。縦幅については、コンテンツによって上下するものなのでこのままで大丈夫です。このレッスンでは、コンテンツの横並びについて学びました。

HTML&CSSでWebサイトを作ってみよう!

HTMLとCSSについての断片的な知識だけではウェブサイトを構築することはなかなか難しいでしょう。そこでこのコースでは、架空のサイトを実際に構築しながら、シチュエーションに合わせたHTMLとCSSの使い方について学んでいきます。実際のWeb制作の現場でどのようにHTMLとCSSが使われているかを確認しながら、実践的なスキルを習得しましょう。

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

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

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

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