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

コンテンツセクションの調整

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
主要なコンテンツをレイアウトして写真を入れてみましょう。
講師:
07:46

字幕

このレッスンではコンテンツ部分の装飾とレイアウトについて学んでいきましょう。では contents_final のフォルダの中にある index.html をChrome で開きます。開いて ちょっとスクロールするとこの部分がコンテンツの部分です。企業情報やサービスなどの仮想ページへのリンク部分にこういったイメージ画像を配置したり余白の調整などを行っていきます。ではフォルダに戻ってbegin のフォルダをSublime Text で開きましょう。フォルダーごとドラッグ&ドロップします。そして index.html をダブルクリックcss をダブルクリックします。これで2つのタブで開きました。そして index.html を先にブラウザで確認しておきましょう。右クリックからコンテキストメニューを開いてOpen in Browser を押します。そして begin のファイルではまだ写真も無いですし見出しもまだ装飾がされていません。では CSS の方を開いていきたいと思いますのでSublime Text に戻ってCSS を開いて、そしてスクロールしてコンテンツのエリアまでスクロールしていきましょう。 ここがコンテンツのエリアになるのでここに CSS を記述していきます。まず #content の箱をmargin-bottomという風に設定しておきましょう。そしてコロン そして 50px と入れます。そして上書き保存をしてブラウザにフォーカス。begin のファイルになっていることを確認して更新をしましょう。更新。そうするとここが空きました。つまり大きい括りにmargin-bottom を入れてコンテンツとコンテンツの間を調整していくということをしました。では Sublime Text に戻りましょう。今度は section です。section のエリアに CSS を追記します。padding の top を選びましょう。そして 240px と入れます。そして上書き保存をしてブラウザにフォーカスして更新をしましょう。するとここに 240px 分の隙間が空きました。ここにこれから背景を1つずつ入れていきます。では Sublime Text に戻ってCSS の新しいセレクタを作っていきましょう。#content の中の .companyというセレクタを作ったらこちらに background として背景画像を指定していきたいと思います。 url で images フォルダの中のserviceそして- photo1.png という風にしてそしてこの背景画像1回だけしか出てきて欲しくないのでno-repeat を入れておきます。この .company は HTML 上ではここにあたりますね。section に company というクラスがついていてそして見出しと文章があってsection が閉じてそして新しい section が始まっています。ではスタイルシートに戻って他にも画像設定をしていきましょう。こちらを1セットコピーしたら同じようなセレクタなので3つ複製をとってしまいましょう。そしてクラス名だけが違ってきますのでcompany という名前を service に変えたりこちらの company は3つ目なのでir に変えて4つ目は recruit という風にクラス名を設定してそして今のままだと全部同じ画像になってしまうので数字を 1,2,3,4 という風に入れ替えておきます。この画像は images フォルダに既に入っていましてこのように service-photo1,2,3,4 というものがありますのでそちらを背景画像として指定をしています。 そして上書き保存をしてブラウザにフォーカスして更新をしてみましょう。そうしますと、1,2,3,4の画像が順番に入ったかと思います。次は余白や見出しの装飾をしていきましょう。Sublime Text に戻って新しいセレクタを作っていきましょう。まず #content の中の見出し h3 で作られています。そしてセレクタの中身はまずセンターに寄せたいのでtext-align center と入力しておきます。そして太字にしたいです。font-weight bold というのを探して選択をしてfont-weight bold という風に指定してあげました。文字サイズも大きくしたいのでfont-size というプロパティで18px としてあげます。そして見出しと本文の間に余白をとりたいのでmargin-bottom を選んで20px を指定して保存、そしてブラウザにフォーカスして更新をします。そうするとこのように見出しが大きくなってそしてここに余白ができましたがfinal と見比べると英字の方が一行下になっていてしかも小さい文字になっています。こちらを設定していきましょう。Sublime Text に戻ってHTML を一度確認しておきましょう。 この見出しについては h3 なんですがh3 の中にまずリンクを設定するa タグがあってその a タグで small という所で英字が囲まれています。この small タグに対してスタイルシートをかけていきましょう。ではスタイルシートに移動して今度は #content の中の h3 の中にあるsmall タグという風にセレクタを特定してあげてそして行を落とすためにはsmall が block の属性になればいいのでdisplay プロパティで block と指定してあげてそして太字でなくていいということなのでfont-weight を normal にしてあげてそして文字のサイズは小さめでいいので12px という風に指定をしてあげて更新をしてブラウザにフォーカスして更新をしてみましょう。するとこのようにsmall のエリアが下に落ちて太字がノーマルになって文字サイズが小さめになるということで整理ができたかと思います。このレッスンではコンテンツ部分の装飾とレイアウトについて学びました。

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

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

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

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

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

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