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

ニュースセクションの調整

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
更新情報や、プレスリリースなど情報を発信するエリアをデザインしてみましょう。
講師:
08:22

字幕

このレッスンではニュースエリアの装飾とレイアウトについて学びます。では final のフォルダーの中にあるHTML をブラウザで開きましょう。そうしてスクロールするとNews & Topics のエリアがこのように装飾が完了しています。では begin の方と見比べてみましょう。begin のフォルダーを Sublime Text にドラッグ&ドロップします。そうしたら、index.html をダブルクリックで開いてスタイルシートもダブルクリックで開いておきましょう。そして HTML をブラウザで確認するにはHTML 上で右クリックのコンテキストメニューからOpen in Browser をクリックします。クリックしてスクロールしてみましょう。このようにニュースの所は begin では全然装飾がまだ完了していません。ではこちらを装飾していきましょう。Sublime Text に戻ってstyle.css を開きnews のエリアをスクロールで捜しましょう。こちらが news のエリアになっています。まず #news というのがすべてを包む大きな括りです。フッターとの隙間を空けるために予め margin-bottom 30px という風に入れておきましょう。 上書き保存をしてブラウザにフォーカスして更新をするとこのようにここに隙間が入ったと思います。Sublime Text に戻って他のセレクタを作っていきましょう。#news の中にはレイアウト用のnews-box というクラスセレクタが既にHTML には書いてあります。ここで内側の余白をとっておきたいのでpadding 30px と入力をして罫線 border を 4px の太さで直線で、そして色は白という指定をして保存。そしてブラウザ上で更新をしてみるとこのように、ここの文字と箱の隙間が30px ずつと罫線が 4px 白で入ったと思います。では続きをやっていきましょう。今度は見出しになります。新しいセレクタnews の中の h4 という見出しというセレクタを作ってまず padding-bottom で余白を設定しておきます。30pxそして色を設定したいのでカラープロパティを作りますがこちらはメインのカラーですね。指定したいのでメインのカラーは CSS の一番上にメモがありました。ここでメインカラーをコピーでとってきてそして news のエリアまで戻ってきてこちらにペーストしておくと。そしてセンターに寄せたいのでtext-align を使います。 text-align の center を指定して中央揃え。そして文字サイズがまだ小さかったのでfont-size を 36px という大きいサイズにして保存をしてブラウザにフォーカスしてこちらがどう変わるか試してみましょう。更新ボタンを押します。このように見出しがスタイリングされました。次はこのニュースのエリアです。では Sublime Text に戻って新しいセレクタを作りましょう。#news dl タグというものでニュース記事はマークアップされているのでまず padding の 30 で更に内側の余白を設定しておきます。そして背景を設定したいと思います。background でまず色が真っ白であるとそして background 画像として鳥のワンポイントの画像を指定したいのでurl イメージ url ですね。こちらを設定したいと思います。それは images フォルダーの中のnews-bg.png という画像で保存されていますのでその名前を書いてあげて一回で繰り返しは要らないのでno-repeatそして右下にいてほしい時はright bottom で右下という意味になります。では上書き保存をしてブラウザの方で更新です。 そうするとこのように白い背景そして白と文字の内側が padding 30そして右下に画像が1枚背景として設定されました。今度はこのニュースが日付・本文という風に横並びに設定していきましょう。Sublime Text に戻って新しいセレクタを作ります。#news の dddd はニュースの本文が入っている方のタグになります。こちらに margin-top を設定します。margin ハイフン topこれをマイナス 1.7em セミコロンとしましょう。これでどうなるかを見てみます。マイナスというのはどうなるでしょうか。上書き保存をしてブラウザを更新してみましょう。このように2つの行が重なってしまいました。これは何故かと言うとスタイルシートに一旦戻っておきます。この margin-top というのでマイナス値にすると上に戻ります。戻るというか上の方に詰まります。そうすると 1.7em というのは1.7 文字分ということで実は行の高さと密接に関係があります。実は body のセレクタで全体の行高line-height は 1.7この 1.7 分戻すと一行分ぴったり重なるという状況になるんですね。 あとはこの dd の左に余白を作ってあげればいいのでここで padding-left を使って今度は 10em という風に指定をして保存をしてブラウザで見てみましょう。更新。そうすると padding-left ここの隙間が 10em ということは1em あたり全角1文字という設定なのでここの文字サイズが例えば変わったとしてもem で指定していれば相対的に広がってくれるという意味になっています。あとはこの文字、1つのニュースと次のニュースとの隙間を空けたいのでSublime Text のスタイルシートに戻ってこちらに margin-bottomこの margin-bottom についてはpx 指定でも em 指定でも構わないので今回は px で 20px と入れてブラウザにフォーカスして更新をしておきましょう。そして折角 30px ずつこのように余白をとったのに最後だけ少し余白が大きいような気がするのはmargin-bottom 20 が加算されてしまっているのでここが空いているように見えてしまっているのでこちらを最後に調整します。#news の dd コロンlast-child そしてそこに margin-bottom 0と入れます。 これは数ある dd の中でも最後の ddlast child の dd だけは上で設定している margin-bottom 20 を0 で上書きしてください、という命令になりますので上書き保存をしてブラウザで更新をしますとこのように最後の余白が解除されました。このようにして News & Topics のエリアのレイアウトと装飾について学びました。

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

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

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

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

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

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