はじめてのHTML&CSS入門

CSS、3種の書き方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSをHTMLに適用させるためには3種類の方法があります。それぞれのメリット・デメリットを学びます。
講師:
08:38

字幕

このレッスンでは CSS の3種類の適用方法について学びます。それでは、Chapter03 lesson02 のファイルをSublime Text で開いてみましょう。既に Web サイトのコンテンツが表示されています。このコンテンツを CSS で装飾していくのですがまず1つ目の方法を学びましょう。title タグの後ろで改行を入れstyle タグを一組作ります。予め開始タグと終了タグを打っておきます。そしてこの style タグの内側に書くことができます。このように CSS を記述することを埋め込み型の CSS と呼びます。h1 というセレクタを書いて{ を打ち、予め改行を打つことで見やすくなります。そして color というプロパティで命令を出しますがコロンで値どの色にするのかを決めてあげます。blue という風に打ち込みました。そして上書き保存Command+SWindows では Ctrl+S を押して保存。そしてこれをブラウザで確認したいので右クリックでコンテキストメニューを開き「Open in Browser」 でChrome を立ち上げます。そうしますとhi の部分が青色に変わっていることが確認できました。 それでは、2つ目の CSS の適用方法を学びます。Sublime Text に戻ります。Sublime Text に戻って今度は h2 のタグを見つけます。そして h2 の開始タグの内側にカーソルをおいて半角スペース、そして style と入力して= そしてダブルクォーテーションそしてこの中に color コロン#009900セミコロンと入力します。この記述方法はセレクタを省略できるインライン型というCSS の適用方法です。HTML の中に直接 CSS を指定しています。ただ、このダブルクォーテーションの内側は従来のプロパティと値の指定の記述方法は同じです。ただ、 HTML の style 属性として指定するという記述方法になっています。それでは、上書き保存をしてアプリケーションの切り替えCommand+TabWindows では Alt+Tab でChrome を選びましょう。そしてブラウザの更新のショートカットはCommand+RWindows では Ctrl+R です。一度押すと無事に h2 が色が変化しました。そして三種類目の方法を学びます。Sublime Text に戻ります。 では、最後の CSS の書き方はファイルを新規で作成します。「ファイル」>「New File」をクリックします。そして New File を作成したらSublime Text ではタブで開くようになっていますがではこのファイルを保存しましょう。Command+S もしくは Ctrl+S で保存のダイアログを表示します。そしてこの「Save As」という所がファイル名になりますのでstyle.css つまりスタイルという名前の.css 、CSS ファイルを作ります。ファイルの保存場所はこの Chapter03 の lesson02 のbegin のフォルダになっていることを確認して保存をしましょう。これでスタイルシートを新規ファイルで保存することができました。それでは隣の index.html に戻ります。</style の後ろで新しくlink タグというものを作ってみましょう。<link リンクそして半角スペースでrel = ダブルクォーテーションのstylesheet そして半角スペースhref = ダブルクォーテーションここにファイル名を記述します。style.css そして です。 このタグは外部にあるスタイルシートを読み込むというタグになっていて別の場所にあるファイルをこのようにして読み込むことができます。それでは上書き保存をしておきます。そしてstyle.css の中に記述をしていくのですがまず一行目に文字コードを設定する記述をしておきます。@charset キャラクターセット半角スペース、 ダブルクォーテーションそして utf-8そして行末はセミコロンを打っておきます。この記述をしておくことで文字化けを防ぎそしてファイルの連携がうまくいくようになります。それでは3行目から記述をしていきましょう。h3 そして { }改行そして color コロンそして #ffcc00と入力します。この色のコードについて説明します。このように # (ハッシュ)の後ろにあるこの6桁の数字はそれぞれ2桁ずつ RGBR がレッド、G がグリーン、最後のB がブルーの値の組み合わせになっています。そしてこの数字の一桁は0から F までの16桁16進数になっています。0から9まで、そして A から F までを1桁で扱えます。なので16の6乗、理論上は色を設定することができますがよく2桁ずつで設定していきます。 この場合はレッドの色味がマックスの Fグリーンの色味が、やや強めの Cそして B のブルーの値は0ということで明るい光がレッドとグリーンこれが合わさるとどんな色になるか確認してみましょう。ファイルを Command+SCtrl+S で保存したらこの index.html を「Open in Browser」で見てみましょう。このように h3 の部分がオレンジに近い色になっているのが分かると思います。このように色の指定を # とRGB の16進数で記述するということがよくあります。必ずしもすべてを覚える必要はなく色の見本辞典などから色をコピー&ペーストすることもよくあります。このレッスンでは CSS の三種類の適用方法について学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

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

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

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

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