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

ヘッダーの調整

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ヘッダーはWebサイト全体で共通となることが多い重要なセクションです。全体のバランスを見ながら、余白や色味を調整してみましょう。
講師:
04:04

字幕

このレッスンでは CSS によるヘッダーの装飾を学びましょう。それでは final のフォルダに入っているindex.html を Chrome で確認してみましょう。開きますとヘッダーはこちらのエリアですね。そして「お問い合わせ」と「サイトマップ」が横並びになっていてそして上と下に余白ができています。こういった様なスタイリングの方法を学んでいきましょう。それではフォルダに戻りbegin のフォルダをSublime Text に落とします。そして index.html をダブルクリックCSS の中の style.css をダブルクリックして開いておきましょう。そして CSS をスクロールしてheader のコメントがある所を見つけます。それでは、まず上下の余白について設定をしていきましょう。header の logo というクラスがあると思います。こちらに padding を追加してみましょう。pad とすると sublime で補完候補が選ばれると思いますのでそのまま Enter を押して24px そして 0そしてセミコロン、と打ちます。そして上書き保存をしてHTML にフォーカスをしたら右クリックからOpen in Browserを選びましょう。 これで Chrome で確認することができます。そうしましたら、この様に上下に 24px ずつの隙間がとれた、という状態になっています。後は final と見比べてこちらのヘッダーインフォのナビの方を整理していきましょう。Sublime Text に戻ります。そうしましたら、まず style.css のheader-info というクラスに上の余白として padding-top を33px 付けておきましょう。そして新しくセレクタを作ります。id header の中の.header-info までは一緒ですがその中の ul というセレクタを作っておきます。そして、このナビゲーションを右に寄せたいのでfloat の right という値を設定します。そして、これから ul の中のli を float します。li を float するということは親の ul で高さを算出しないといけないのでoverflow hidden を必ず入れておきます。もしくは共通で設定してあるclear fix を使うことでも可能ですが今回は overflow hidden で問題ないのでこちらを使いたいと思います。 そして、header の header-info更にその子供の li というセレクトを作りましてfloat が leftもう1つが float した子要素の隙間をコントロールしたいのでmargin-right を30px 入れておきます。そして上書き保存をしてブラウザにフォーカスbegin になってることを確認してブラウザを一度更新します。更新すると、まずこちらにあったものが右に揃ったのはfloat-right のおかげです。そして float-right の中で2つが横並びになってるのはli にかけた float-left のおかげです。そして上の余白はpadding-topナビとナビの、この隙間がmargin-right ということになっています。このレッスンでは header を CSS で装飾、調整するということを学びました。

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

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

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

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

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

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