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

レイアウトを変更する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
下層ページでは、インパクトよりも情報をしっかりと見せていきたいと思います。コンテンツのレイアウトを変更してみましょう。
講師:
04:44

字幕

このレッスンではテンプレートにカラム分けを加えていきます。段組レイアウトとも言って、左を main のエリア、右を sub のエリアとするレイアウトを行っていきたいと思います。それでは begin のフォルダをSublime Text に落としましょう。そして company の中のHTML をダブルクリックで開いてCSS の中の style.css もダブルクリックで開いておきましょう。まずは HTML に必要な箱を加えて置きます。まずはこの div id="content"という所を発見したらここの inner の中で2つに分けたいと思います。それではまず、この section を囲むようにid="main" という箱を作りたいと思いますのでdiv id="main" という箱を作ってsection の後ろで閉じるそして忘れない内にコメントをちゃんと入れておきましょう。そして main の次はid="sub" というのを作りたいと思うのでdiv id="sub"そして、忘れないうちに閉じておきましょう。閉じ div を作ってid="sub" をコメントにしておきましょう。そして sub の中に何が入るかというと企業情報の他のコンテンツへのリンクです。 例えば社長あいさつであったりとか沿革であったりといったコンテンツに横断的に行くローカルナビ的なものを作りたいと思います。そちらにも section を入れたいと思います。section タグを作ってそして、ここに見出し h4 を作って「企業情報」という見出しを作っておきましょう。一度上書き保存をして右クリックからブラウザで見てみましょう。この状態では、今作ったのがmain の箱ここまでの下に「企業情報」という箱があるだけにすぎませんがこの「企業情報」の箱を右に段組していきましょう。それでは Sublime Text に戻りstyle.css を開いて一番下までスクロールをしていきましょう。そうしましたら、footer の下に company のCSS を書いていきたいと思うのでこのコメントをコピーしましょう。footer のコメントをコピーしてここに footer のコメントを作ったらこちらを、コメントをcompany という風にcompany のページで使う CSS はここから始まりますという目印を作っておきます。そうしましたら id="main" を作ったのでid="main" のセレクタを作ってfloat left を作ります。 そして、幅を 940 の内から 700px をmain のエリアとして使いたいと思います。また、わかりやすくしたいと思うので罫線も引いてみたいと思います。border 1px solid そして ddd という薄いグレーの罫線を引きたいと思います。そして background 背景色を白としておきましょう。そして一旦上書き保存をしてブラウザにフォーカスして更新をします。そうしますと、この様に main のエリアが白いエリアで囲まれました。次は Sublime Text に戻ってSub の箱のセレクタを作っていきます。id="sub" の中の方は右に寄せたいのでfloat right を入力して幅の方は 200px としましょう。そして、上書き保存をしてブラウザにフォーカスをして更新をしますとこの様に、ここの 200px がSub のエリアになりました。後はこの中にコンテンツを流し込んでいくということをしていきます。このレッスンでは段組レイアウトを作りました。

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

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

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

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

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

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