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

CSSを調整する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
見やすい表組の仕方、tableタグをCSSで装飾する方法を学びます。
講師:
09:08

字幕

このレッスンでは仮想ページのコンテンツをスタイルシートで装飾レイアウトをしていきましょう。それでは final のフォルダを開いてindex.html を Chrome で開きます。開きますとトップページが見えると思いますがそこから「企業情報」をクリックしてみましょう。クリックしますと、この様に見出しが入ってそして次の見出しで「会社概要」であることを示してテーブルによる原稿がありそしてローカルナビがこの様な状態になっているかと思います。それでは begin のフォルダを開きましょう。begin のフォルダを Sublime Text にドラッグ&ドロップします。そうしましたら company のindex.html をダブルクリックで開きstyle の CSS をダブルクリックで開きます。そして一番下の方にcompany に関する CSS が入っているのでそこまでスクロールをしていきましょう。こちらの company のエリアに記述をしていきましょう。まず、id="sub" から装飾を進めていきたいと思います。#sub の見出しを整えてみましょう。#sub には h4 という見出しが入っていますので見出しを整えます。 padding の 20px で 0 という書き方は最初の数字が上下の余白次の数字が左右の余白です。引き続いて border を入れていきます。border-top: 4px solidそして色の方はメインカラーですね。メインカラー、わからなくなったら上の方にメモがありますのでここから拾ってきましょう。コピーをして、また戻ってきます。そしてペーストをしてセミコロンそして同様に border-bottom も作っておきましょう。上線と下線を入れておきます。1px solid、そして上と同様にメインカラーを使っていきます。そして右寄せにしておきたいのでtext-align: left 入れておきましょうか。では上書き保存をしてindex.html をフォーカスして右クリックから「Open in Browser」を押しましょう。Open in Browser でブラウザで開きましてここのエリアのことになります。それでは Sublime Text に戻ってスタイルシートを記述していきましょう。今度はナビの方ですね。sub の li の中の a ということでローカルナビのリンクに関するスタイルシートまずリンクのエリアを広げるためのdisplay block余白の調整のためにmargin-bottom 10px内側の余白としてpadding-bottom を 10px下線を引きたいのでborder-bottom で 1pxそして破線を使ってみましょう。dashed と入れてそして後はメインのカラーを引っ張ってきてペーストをして整えました。 そして上書き保存をしたらブラウザの方で更新を押すとこの様な見た目になったかと思います。次は table タグや見出しについてスタイリングしていきましょう。今度は .company の中の#title という部分に対してmargin-bottom で下の余白を入れていきましょう。40px と入れておきます。そして背景画像を入れましょう。背景画像は images フォルダの中に入っています。title-bg という画像名が正しいですので、この様に入れてそして繰り返しをさせないのでno-repeat で中央に来てもらって、上に揃えるということで center top を入れましょう。上書き保存をしてブラウザを更新します。そうすると、今 背景画像が入ったかと思いますが今度はこの見出しをスタイリングしましょう。今度は Sublime Text に行って.company の中の#title の中の h2 とします。そして padding を入れましょう。上と下に 30px左右は 0 という padding の情報を入れて色味は白とします。そしてフォントサイズを大きくしておきましょう。font-size を 24pxそして保存をしてブラウザを更新しましょう。 この様に文字が大きくなったかと思います。次はこの small で囲まれた英字を調整しましょう。今度は company の中の #title の中のh2 の中の small と書いてあげてdisplay block というものを入れます。これで、まず行が分かれます。そして文字サイズ小さくしておきましょう。16px と入力をして保存そしてブラウザを更新するとこの様に small タグがおりてきました。今度は見出しの方を調整します。company の中の#main そして h3 と作ったらmargin-bottom 10pxそして改行をして、余白padding を 10pxそして罫線を引きたいのでborder 1px で直線 solidそして色味の方はメインカラーなのでメインカラーをコピーとペーストで使いましょう。そして文字の色 color ですね。color の方も main の color と一緒です。そして文字の weight つまり文字の太さをbold として太文字にしておきましょう。そして文字のサイズもアップします。18px にしましょう。そして今 center になってしまっているのでtext-align に left を入れて左揃えにしておきます。 上書き保存をしてブラウザを更新してチェックをしましょう。この様な状態になりました。それでは Sublime Text に戻ります。今度は company の mainそしてsection に対して余白を設けたいと思いますのでこちらは padding の 30px だけを入れてみましょう。そして上書き保存をしてブラウザで更新するとここに余白が入りました。では最後にテーブルの方を整形しましょう。まずテーブルを左右いっぱいに拡げたいのでcompany の中の table は幅が 100% ですという風に入力をしてあげてそして company の table の中のth と td という書き方でセレクタを作ったら余白がつまってるようなのでpadding を 20pxそして 0 としましょう。そして border の bottom で罫線を 1px 下に引きたいと思います。色は薄いグレーにしましょう。そして th は放っておくと中央揃えになってしまうのでleft としておきます。そして上書き保存をしてブラウザの方で更新をします。そうしますと、この様に 少しゆとりのある感じになったかと思います。ただ、今までやってきたCSS による装飾は必ずしも正解というわけではありません。 サイトのテイストによってもまたみなさんの好みによってもpadding や margin の数値は変わってきますので必ず試行錯誤をしながら、余白などをコントロールして決めていきましょう。このレッスンでは CSS によるコンテンツの装飾について学びました。

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

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

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

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

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

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