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

ブラウザによる装飾をリセットする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザは、独自のCSSを持っていて、自動的に余白などを指定してくれます。自由にデザインするために、一度リセットをしてみましょう。
講師:
06:07

字幕

このレッスンでは CSS をコントロールしやすくするためのリセットについて学びたいと思います。まず、begin のフォルダをSublime text で開きます。そして、index.html を開いてそしてcss もダブルクリックで開いておきます。今回は、この*そして margin padding 0 というところを置き換えるテクニックについてご紹介します。このグローバルセレクタという*はすべての要素に対して余白を0にするという意味を持っていますがもともと余白の無い要素にまでこちらの css が効いてしますのでレスポンスの低下を招くといったような懸念がありました。なので、もっと最低限の書き方でできるだけブラウザに負荷をかけないでcss を一旦まっさらにすると言う手法がリセットです。なので、今回はこの記述を使わないようにしていきたいと思うのでこのスタイルシートのこの部分は消してしまいます。そして上書き保存をしてそしてブラウザの方で見てみたいのでindex.html 上で右クリックからOpen in Brower ブラウザで確認をします。そうしますと、横並びしてくれるはずだったものがこのように下に1つだけ落ちてしまったのは余白のせいです。 もともとブラウザが付ける余白のせいで幅が広がってしまったりするのでこのようにレイアウトがしずらいとなので、これをリセットする方法を学びたいと思います。では、検索をしてみましょう。検索で「reset」そして「CSS」そしてエリックさんと言う方が開発したので「Eric」というように入れます。そうしますと、一番上におそらくはCSS の Meyerweb というところでreset.css という表示があると思うのでこちらをクリックします。そしてスクロールをしますとこのように CSS の表記があります。こちらが css の各要素に対してマージンを持っているものはマージン0にしたり行間をコントロールしたりそして勝手に斜体にしてしまうものを斜体にしないで表示できるようにしたりそういったようなコントロールをしてくれるソースがありますのでこの css のソースをこのコメントアウトの部分から持ってきたいと思います。そしてこのテーブルタグの閉じの括弧までをコピーします。コピーしましたらSublime text を開きましょう。慣れてきますと、この style.css の一番上にペーストしたりもするのですが今回はコントロールしやすくするために別のファイルとして保存したいと思います。 それでは、ファイルから「新規」>「New File 」を選んでクリックします。そして、こちらにペーストをしましょう。ペーストをしましたら、こちらを保存します。ファイルからセーブを選びます。そうしましたら、スタイルシートの名前をreset.css といように名前を打ちましてcss を保存するフォルダを確認しておきましょう。今回は reset の begin というフォルダが選ばれていることを確認してください。そして、その中の css フォルダを開きます。そしてこちらに保存をしましょう。保存をするとcss のカラーリングになるはずです。基本的にはこの reset.css の中身はいじりません。こちらのコメントは一応ライセンス表記になっていますがpublic domain というのは著作権は皆のものというような表現なのでこのコメントは消しても大丈夫です。ただもう一回ダウンロードしたいということであればここに URL 等ものっているので残しておいてもいいと思います。それでは、このスタイルシートを読み込むにはindex.html のヘッドに記述を加えます。この6行目にカーソルをあわせてコピーをしましょう。 Mac は Command+C、Windows は Ctrl+C でコピーを取ったらMac は Command+V、Windows は Ctrl+V でペーストをしましょう。後はスタイルシートのスタイルの名前を変えてあげればいいわけですね。CSS フォルダのスタイルシートではなくてCSS フォルダの reset のほうも css ですね。このように書いたら上書き保存をしてブラウザにフォーカスして先ほどの begin のファイルを見ましょう。こちらが begin になっていることを確認しましょう。そして更新をしてみます。更新をすると、いろんな余白が解除されて詰まった印象にはなりますが余計な余白が付いてないということは好きなようにこれから1 px 単位でコントロールができるということになります。このレッスンでは reset css の使い方について学びました。

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

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

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

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

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

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