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

クラスを設定しよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
残りのdivタグを設定し、予めクラス属性を指定していましょう。CSSでのコーディングに役立ちます。
講師:
09:25

字幕

このレッスンではクラスを設定しながら装飾で使う予定の div つまり箱のタグも設定していきましょう。それではまず begin のフォルダーをSublime Text で開きましょう。そして index.html をダブルクリックで開いておきます。今回は HTML 上では特に意味を持たないdiv のタグを使ったりCSS で装飾するためのクラスを予め設定しておきます。ですので、 HTML では見た目に変化はないのですがCSS でどういうデザインになる、ということが予め分かっていれば最初に今回みたいにdiv タグなどを使って設定をしておくということが可能になります。これはデザインによってもdiv の数だったりとかクラスの名前は変わってくるので上から順番に今回は私のお勧めの方法でつけていきたいと思います。まずは h1 というところの上にdiv class =そして innerという風にクラスを設定します。そして先にこの div タグの閉じタグを書いておきましょう。こちらは「サイトマップ」と書かれたこの行の下のul の下で閉じの div が入ります。そして div タグを作ったら必ず / で閉じを表しクラスはドットで表しそして inner という風に付けてコメントアウト。 Mac は Command+/Windows は Ctrl+/ でこういう風にメモにしておきましょう。この inner がどういう意味を持つかを実際のサイトの方で見てみたいと思います。フォルダーを表示してsite のフォルダーの中にあるindex.html を Chrome で開きます。このサイトのコンテンツが収まっているエリアが、実は inner でコントロールされています。例えば、この4つの画像が入っている、けれどもこの4つの画像は外にははみ出てはいません。また、News & Topics の白い罫線が分かりやすいのですがこの白い罫線も左側にははみ出してはいません。そしてフッターのナビの左端とコピーライトの右端が揃っているのも実はこれは inner という箱がこの中身を納めているという状態になっています。実際に中身に納める装飾はCSS で記述するのですがHTML 上で予め div タグを作っておかないとこれは可能にはならないということになっていますのでSublime Text に戻り他にも inner を付けられる所があるのでコピー&ペーストで増やしていきたいと思います。では <div class = "inner" をコピーしたら今度は nav タグを見つけましょう。 nav タグの内側にも inner を入れたいのでnav タグで改行そしてペーストをしておきます。そして終了の inner もコピーしておきましょう。そして nav が閉じる手前に改行を打ってそこでペースト。このように inner で nav の内側を包みました。では同様に inner の箱が必要になってくる場所があるのでまた開始タグをコピーです。そして div id =”message" を発見したらmessage の後ろで改行をしてそこに div class="inner" を設定してそして終了タグとコメントをまたコピーでそしてこの div class="inner" の終了がsection が終わった所になりますのでsection の所で Enter を押してペーストをしておきます。そして他にも inner が必要な所があります。また div class の inner をコピーして今度は content の下にペーストをしてそして終了の閉じ div をコピーして今度は content が終了する間際でペーストそしてまた開始の div class inner をコピーして今度は news という section の下でペーストそして section が終わる手前で今度は終了の閉じ div をとってきてペーストをしておきます。 今度はフッターの中身にもinner を入れたいと思いますのでinner の開始タグをとってきてfooter の後ろで改行そして innerそして終了のタグが要りますね。こちらをコピーして今度は footer の真上でペーストこれで inner で大体包むことができました。今度は一番上に戻ってCSS で使う予定のクラスを付けていきましょう。まず h1 見出しには logo というクラスを予め付けておきます。そしてこちらの「お問い合わせ」と「サイトマップ」の ul もレイアウトしたいのでレイアウト用にdiv class =header-info という名前を付けてそしてこちらを終了の div で包んでマークアップをしておきます。そして /.header-info と入力をしてコメントアウトしておきます。そしてスクロールをして今度は message の後ろで改行してdiv class = message-boxという箱を予め作っておいてinner の箱の後ろで閉じておきます。ですのでこちらで改行をして閉じの div 。そして閉じの / でmessage-boxでコメントアウトにしておきます。そして今度は section の方ですがsection にそれぞれ名前を与えてあげましょう。 こちらは section classcompany としておきます。こちらは section class のserviceそしてこちらは section class の irそして採用情報は classrecruitという風に名前を付けてそれぞれのセクション の後ろにやはりコメントを入れておきましょう。companyserviceそして irそして recruitそして news の方に更にもう1つ箱を追加したいと思います。それでは news の inner の下でdiv を追加します。div class news-boxそしてこちらの閉じはinner の手前になりますのでdl のここで改行閉じの divそしてコメントを news-boxそしてコメントアウト。このようにコメントが2つ入っている場合はこのコメントは閉じ div の後ろの筈ですので気づいたら直してあげるようにしましょう。まずは親子関係をしっかり見極める練習をしてみてください。最後に footer の ul にclass = footer-navfooter ハイフン nav と入力します。この CSS が後で装飾の時に大きな効果を発揮します。 それでは CSS の方を楽しみにしていてください。このレッスンでは CSS で装飾するための準備をしました。

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

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

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

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

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

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