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

メッセージセクションの調整

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイトや、サービスの世界観を伝えるためのビジュアルを調整します。
講師:
08:21

字幕

このレッスンではメッセージエリアの装飾について学びます。では final のフォルダーの中からindex.html を Chrome で開きます。Chrome で開きますとこのようにキャッチコピーのエリアの後ろに写真が入っていたり文字サイズが調整されていたりします。では begin のフォルダーも開いておきましょう。フォルダーに戻って begin のフォルダーをSublime Text にドラッグ&ドロップします。そして index.html を開きましょう。ダブルクリック。そして css フォルダの中の style.css もダブルクリックで開いておきましょう。そうしましたら、スクロールしてMESSAGE というコメントがある所までスクロールしましょう。こちらになります。それでは CSS を書いていきましょう。まず #message の中身を調整します。まず background を入力していきましょう。既に background というプロパティが下にありますがbackground-image というプロパティを使って画像を指定したいと思います。こちらの url ( ) の中に入るのは画像の場所です。 名前と場所を入れなければいけません。場所は CSS から見てこちらの image フォルダーの中のmessage-bg.jpg を表示したいと思いますがstyle.css は css というフォルダに入っているので一度 style.css から上の階層に戻ってからimages フォルダに下りてくるという風に場所を指定してあげないといけないのでまず .. / と打って上の階層に戻ってからimages フォルダーを指定してそして message-bg.jpg と入力をします。そしてこのままだと画像がリピートされてしまうのでbackground-repeat というプロパティを探してそして no-repeat という値を入れることで背景画像が一回だけということになります。そして更に background-position というプロパティも指定しましょう。background-position は centerこれは横に対してセンター揃えでただ、縦位置の中央だと困るので上にくっついてもらうためにtop というのを半角スペースを入れて入力しておきます。そして background というプロパティは要らなくなりますのでこちらをカットしておきます。 そして上書き保存をしてindex.html にフォーカスしてから右クリックからOpen in Browser で Google Chrome を開きます。そうするとこのように画像が見えたと思います。ただ、緑色のメインカラーの背景を消してしまったので写真だけになっています。今度はこの文字を真ん中に寄せたいと思うのでSublime Text に戻りましてスタイルシートに text-align center というものを入れておきたいと思います。text − align centerそしてセミコロンです。上書き保存をしてブラウザにフォーカスして更新です。このように中央に寄りました。あとはここが詰まっているので余白を入れてあげたいとか文字サイズをアップしていきたいと思います。では Sublime Text に戻って新しいセレクタを作りましょう。message の中に.message-box というdiv が既に用意されています。この箱の中に高さを入れてあげましょう。height 635pxそして background の色をここで指定してあげます。background-color そして色味はメインカラーを利用しますので上にあるメモ欄から持ってきましょう。 メインカラーの 009b72 をコピーしてmessage の欄にペーストそしてセミコロン。一度これで上書き保存をしてブラウザで確認をします。更新。そうすると高さが 635 にはなったんですが写真が隠れてしまいました。つまり、メッセージという箱の中にもう1つボックスが入っていて2枚背景が用意されているということになります。下にあるのが写真上に載っかっているのがこの緑のべた塗りです。このままではフィニッシュのような透かしの状態になりませんので上に載っている色味をちょっと透明にしてあげたいと思います。Sublime Text を開いてbackground-color に新しい CSS3 を使った指定をしていきましょう。background-color を選びrgba そして ( ) を打ちます。そして 0 カンマ 155 カンマ114 カンマそして 0.7 そして最後はセミコロンです。これはこの 009b72 をRGB に変換した値がこの最初の3つの数字です。レッドの値が 0グリーンの値が 155 のa の値が 114 です。そして透明度が最後に入ります。a というのはアルファなので0.7 とすると70%の薄さになるわけです。 こちらで上書き保存をしたらブラウザにフォーカスして更新をしますとこのように上に載っている色味がちょっと透明になったので後ろの写真が透けて見えるようになりました。それではあとは残りのテキスト部分などをCSS で設定をしていきましょう。message の h2 は margin を指定しましょう。margin-bottom の 40pxそして padding-top の 100px を設定して保存、そしてブラウザ上でこの h2 がどうなるか見ておきましょう。更新。そうするとここの隙間とこの隙間が空きました。ではブラウザに戻りまして今度は #message の p三行の文章ですね。こちらには margin-bottom の 30pxpadding-top の 30pxフォントサイズを上げたいのでfont-size を 20pxそして行間を空けたいのでline-height を 2.5 と広げてあげます。そして上書き保存をしてブラウザで更新です。このように文字が大きくなりました。あとはメッセージとここのコンテンツエリアがぴったりくっついているのでそちらも調整をしておきましょう。Sublime Text に戻り#message という大きな括りのmargin-bottom を設定します。 50px として保存。そして更新をします。そうしますと、このように隙間が空いたと思います。このレッスンではメッセージエリアの装飾とレイアウトについて学びました。

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宛までご連絡ください。