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

文字と色を設定する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
配色と文字はサイト全体に関わる重要なデザイン要素です。最初にしっかりとルールを決めておきましょう。
講師:
08:58

字幕

このレッスンではベースとなるカラーと文字について設定をしていきましょう。色や文字、つまりフォントについてはサイト内で統一を図らないと少しチープな印象になってしまったりブランディングの観点からもよくありません。ですのでスタイルシートで最初にきっちりとガイドを作っておきましょう。それでは final のファイルをまず見ておきましょう。final の中の index.html をChrome で開きます。Chrome で開くとこのメインカラーつまりロゴと一緒の色が背景に使われていたりそして文字の色も 真っ黒よりは少し茶色よりの色にしています。また、背景に少しテクスチャの画像をひくことで落ち着きのあるテイストを作り出そうとしています。それでは、この設定をしていきましょう。また、フォルダに戻りましてbegin のフォルダをSublime Text に落とします。そして index.html を開きます。また CSS のファイルの style.css もダブルクリックで開いておきます。そして index.html にフォーカスして右クリックから Open in Browser でChrome で確認をしておきましょう。 現状はレイアウトをしやすくするために仮の背景色を入れていました。こちらはレイアウトがある程度できてきたら背景色を抜く、ということをして代わりにブランドの色などを入れていきたいと思います。それでは Sublime Text のCSS を開いてこちらのコメントを確認しておきましょう。「メインカラー」の「緑」はこちらの #009b72 ですとそして「明るい緑」の方は02b582 ですとそして「テキストカラー」の「茶色」は48230a ですとこの様に厳密に決まっている場合があれば必ずこちらを使うようにしていくという風にします。それではまず仮で入れている背景色を一旦外してしまいましょう。例えば body の薄いグレーだったeee であるとかheader の背景色header logo の背景色haeder info の背景色そして navigation の背景色そして message の背景色であったりcontent の背景色こういった仮のバックグラウンドのプロパティをどんどん外していきます。news と、そして footer のバックグラウンドまで外したら一度上書き保存をして、ブラウザにフォーカスして更新をしてみましょう。 更新をすると一旦真っ白な状態に戻ったかと思います。それでは Sublime Text に戻りメインカラーの背景色で入れるべきところをまずは入れていきたいと思います。final のファイルを見てみるとnavigation の背景とmessage のエリアの背景そして footer のエリアの背景それぞれがメインカラーの緑で文字カラーは白になっています。この設定をしていきましょう。では begin のファイルを見ていきます。それではまず nav に背景色を指定するのですがまず「メインカラー」の「緑」を予めこの様にコピーをとっておきましょう。# から、この 2 までをコピーとっておきましてid nav の位置に来たらbackground プロパティを入力してペーストを使って挿入します。そして上書き保存をしてブラウザにフォーカスして更新です。この様に背景色、緑が入りました。では Sublime Text に戻り今度は message のエリアを見つけてmessage にも background そしてペーストを使いましょう。そして背景が緑で且つ文字の色は白にしたいのでcolor を選んでfff と、真っ白に指定してあげます。 では上書き保存をしてブラウザで更新をします。この様に背景色が入り画像が白なので、クッキリ見えます。文字も白にしてみました。今度は footer です。Sublime Text に戻りまして一番下までスクロールそして id footer を見つけてbackground のそしてペーストをしていきます。そして上書き保存をして更新そうすると footer の方にも背景色が入りました。そして Sublime Text に戻ってコピーライトの色がまだ黒かったのでcolor プロパティで fff とそして保存をしてブラウザを更新します。そうするとコピーライトの表記が白くなりました。リンクの色についてはまたリンクの方でコントロールをします。次はメインの文字の色がまだ真っ黒のままですのでSublime Text の body のエリアを編集していきましょう。既に body にあるこのフォントについてですがfont-family は書体のことです。そして、この書体は Web ページを見るパソコンによってインストールされているフォントは違います。Mac でも違いますしWindows でも違います。なので、それぞれにあったフォントを指定してあげることでできるだけ表記の揺れを少なくしていくという風にしたいと思います。 なので、この様に多くのフォントを予め指定していくことをお薦めします。ただ、正確に入力をしないとそのフォントが認識されません。例えば、この MS は全角だったりとか半角スペースがないといけなかったりとかしますのでできるだけコピー&ペーストでうまく処理をしていきましょう。では文字色は、この後ろに入れたいと思います。color プロパティの# なんですがそこはテキストカラーからちゃんとコピーをして持ってきましょう。そしてセミコロンで閉じます。そして上書き保存をしてブラウザにフォーカス、そして更新です。ほんのちょっと茶色になりました。これくらいの色味を使うことでできるだけナチュラルな雰囲気を出すことができます。そしてフォントサイズも少し小さくしておきたいと思いますのでfont-size 標準が 16 ぐらいですので 15 とそして行間も広げておきたいと思います。Line-height 1.7 倍ぐらいにしておきます。そして background に画像を使いたいと思いますので画像は URL で指定するんでした。そして、指定する画像の場所はimages フォルダの中に入っているbody-bg.jpg になりますのでこちらを入力していきます。 ただ、CSS から画像を見るためには一度、この style.css の外にでなくてはいけません。ですので、.. / で一度上の階層に戻ってからimages フォルダを指定した後にbody-bg.jpg と指定をしてあげます。そして上書き保存をしてブラウザを更新しましょう。そうしますと、うっすら紙のテクスチャが入ったのがわかるかと思います。この様に、まず最初の色のテイストを決めていく、というのは非常に大切です。このレッスンでは文字と色味の調整の方法を学びました。

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

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

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

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

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

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