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

幅を確認する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webサイトの幅についてご紹介するとともに、主要なセクションの幅を確認しましょう。
講師:
08:59

字幕

このレッスンでは CSS による横幅について学びます。CSS で思うようにレイアウトする為には自分が使っているボックスつまりセクションがどれ位の横幅であるかということをコントロールしなければなりません。このレッスンでそれを学んでいきましょう。ではまず final のフォルダの中にある index.html をChrome で開きます。そうすると各ボックスに仮の背景色を入れてある状態になっています。このように仮の背景色を入れることで自分がこれから作るレイアウトを視覚的に分かりやすくしていくという方法をよくとります。それではフォルダで begin のフォルダをSublime Text で開きましょう。そして CSS フォルダを開いてstyle.css をダブルクリックで開いておきます。この CSS は HTML で既に読み込むということが完了しています。ので、そのまま style.css を書いていきましょう。まず header の色がどうなっているかを確認してみたいと思います。id header ですので#header と記述をして { }そして background を入れたいのでba と打ちますとこのように入力補完が入りますのでbackground が選ばれている状態でそのまま Enter を押してみてください。 そうすると、Sublime が入力補完を行ってくれます。そして色味は仮なのでとりあえず dfe と打ってセミコロンそして上書き保存をしてHTML をダブルクリックで開いておいてこの HTML 上で右クリックから「Open in Browser」でブラウザで確認ができます。そうすると今 body 全体が灰色でheader のエリアにうっすら色が入ったと思います。この調子で他の箱にも色をつけていきましょう。アプリケーションの切り替えでSublime Text に戻りあとは CSS を開いて今度は header の logo という所にも設定をしていきましょう。header の logo 部分はクラスが振ってありますのでこのように backgroundそして # の fda セミコロン改行を入れて今度は幅を入れてみましょう。幅は width を選んで300px と入力をしておきます。そして上書き保存をしてブラウザにフォーカスして更新です。そうするとロゴ のエリアに300 ピクセル分背景色が入りました。では Sublime Text に戻って次の箱です。今度は header の中にあるclass header-infoという箱のセレクタを作ってbackground そして #fdaセミコロン そして幅はwidth を選んで 600pxそして更新をしてブラウザで更新です。 このように2つの箱が 300 ピクセルと 600 ピクセルだという風に視覚的に判断できます。そして Sublime Text に戻って他の箱にも入れていきましょう。今度はナビです。 #navというセレクタを作ってbackground #cefそして上書き保存をしてブラウザを更新します。そうすると先程までヘッダーの薄緑だったのがナビはヘッダーの中に入っているのでヘッダーの中に入っていた色を上書きしてこのようにブルーが入りました。では Sublime Text に戻ります。今度は message という部分を打ち込んでいきましょう。この # は id ですね。#messageそして { } を打って backgroundそして fdfそして上書き保存をしてブラウザを更新です。そうしますとこのようにこのエリアに色がつきました。では Sublime に戻って今度はcontent に色をつけてみましょう。クラス home の中の content という風にcontent という箱は他で使い回す可能性があるのでクラス home の中の #contentというセレクタの書き方をしています。それでは background を入れてbef という風に色を入れて保存。 そしてブラウザを更新です。そうするとここが content というエリアであることが分かります。そして .home の #content にはその子供に1つずつ section という塊で4つのページのナビがありますのでそちらは又、背景色を違う色に設定してみましょう。bfc と。上書き保存をします。そして幅も入れておきましょう。width 205px と入れておいて上書き保存をしてブラウザで更新をします。この4つは完成図では横並びにする予定ですがとりあえずは横幅を 205 として縦に並べた状態にしておきます。今度は news というエリアになります。#news を作ってbackground fde と。上書き保存をしてブラウザで更新。そしてちょっとスクロールするとニュースのエリアはここであるということが分かるようになりました。そして Sublime Text に戻って今度は footer の箱に対して色をつけていきましょう。#footer というセレクタを作ったらbackground のプロパティを選んでdfe という色を指定して上書き保存をしてブラウザで更新をします。そうするとこのようにフッターのエリアにも色が入りました。 今度はこのコンテンツ部分を真ん中に寄せたいと思います。Sublime Text を開いて一番上までスクロールしましょう。inner というセレクタを作ります。inner というセレクタを作ってposition というプロパティをrelative という風に指定しておきます。そして overflow を hidden と指定しておきます。そして margin こちらを 0 と autoという風に指定しておきます。そして一番大切な幅 width を940px と指定をします。これはまず position relative でこの中に入ったものをコントロールするときの基準位置になることを示しています。そして overflow hidden は中に入っている float の要素を解除できるように入れてあります。margin 0 auto はボックスを中央に寄せるためのおまじまいです。そして幅 940 がこのサイトのコンテンツのエリアの全体の横幅ということになります。では上書き保存をしてブラウザを更新します。そうすると、このコンテンツがちゃんと中央にきていることが分かります。ブラウザの枠を縮めても中央に行こうとしてくれるようになっています。 これが inner の箱の効果です。このレッスンでは、まずデザインをする箱の幅を設定したりエリアを確認するレッスンでした。

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

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

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

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

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

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