[音楽再生] 

DOUG LLOYD：それでは、もう一つを見てみましょう ビデオはもう一つの言語について話をします。 今回は、CSSについて話しましょう​​。 略ですだから、CSS、 カスケードスタイルシート、 我々が使用する別の言語です ウェブサイトを構築するとき。 このようにそれについて考えてみよう。 HTMLは、我々は整理するために使用するものである場合 私たちは私たちのページに配置するコンテンツ、 CSSは、私たちが一般的に使用するツールです 当社のウェブサイトがどのように見えるかをカスタマイズするには、 どのようにユーザーエクスペリエンス本当に 当社のウェブサイトとの相互作用、です。 

HTML、CSSに似ています ないプログラミング言語。 これは、ロジックを持っていません。 これは、変数を持っていません。 それは、その任意の並べ替えを持っていません Cが行うフロー関連のもの。 これは、スタイリングの言語です。 そして、その構文はかなりあります シンプルな、とだけ説明 どのように私たちの要素 ページには、特定のHTMLを持っています 要素を変更する必要があります。 そのために、あなたがいない場合 まだ、HTML上の私たちのビデオを見 またはに慣れていません 一般的に、HTML、あなたは そのを見てすることができます まず、CSSのこの議論のため 依存しようとしています HTMLの知識。 

だからここは本当にです シンプルなCSSスタイルシート。 あなたは決してきない場合でも 前のCSSを使ってプログラム、 私はあなたが把握することができますかなり確信しています まさにこのスタイルシートはありません。 それは何をするのか？ さて、私たちのウェブの身体に適用されます ページ、bodyタグの間のすべてのもの 私たちのHTML上で、それが設定されます 青にそのページの背景色。 まあ、それは非常に単純なスタイルシートです。 それは実際には非常に人間です フレンドリーな言語、CSS。 だから、それを前に使ったことがない場合であっても、 あなたは、おそらくそれが何をしたかを推測できました。 実際には、我々はページをロードした場合、どこで このスタイルシートは、何らかの形で埋め込まれていました ページの背景色だろう 青、標準白色でないこと。 

どのようにしてスタイルシートを構築するのですか？ まあ最初、私たちがする必要はあり セレクタを識別します。 最後の例では、 そのセレクタは体でした。 その後、我々はオープンを持っています 中かっこ、私たちはしています 定義を開始する予定 そのセレクタのスタイルシート。 中括弧の間には、我々 ただキーと値のペアのリストを持っています。 前回値のペアでした 背景色、青、セミコロン、 しかし、我々はこれらのより多くを行うことができます。 あなたは適用する複数のものを持つことができます そのタグに、そのセレクタ本体。 それらのそれぞれがで区切られ セミコロンは、と私たちはそれらの一つ一つを呼び出します 宣言は、CSS宣言。 我々はすべてのスタイリングたちで行われているとき その特定のタグに適用したいです、 私たちは閉じカーリーを持っています スタイルシートを終了するブレース、 私たちは、スタイルシートを定義し終わっ その特定のセレクタの。 

いくつかの一般的なCSSプロパティとは何ですか？ まあ、多分あなたは入れたいです 何かの周りに境界線。 あなたが言うことができるように、境界線、 それはあなたの鍵になります、 して、自分の価値観は次のようになり、 どのようなスタイル、色、および幅 あなたはそれになりたいです。 だから、スタイルは固体である可能性があり 行、点線、破線、 波線になる稜線、。 たぶん、あなたはそれを持ってしたいです 青または黒または緑です。 たぶん、あなたはそれになりたいです 1または2または10ピクセルの幅。 あなたはそれらのもののすべてを指定することができます。 たぶん、あなたは背景を設定したいです 特定の方法であなたのページの色。 我々はすでに設定して、それを見ました 体の背景が青色にします。 

次に、キーワードを使用することができ、 そうCSSは特定の色を持っています それは、その中に、緑、青内蔵されています 黒、私たちが知っている非常に単純な色。 しかし、あなたはまた、任意に指定することができます あなたが好きな六角色。 色を識別できることを思い出してください 3 16進数のセットで 0から255まで、RG及びB、 赤、緑、および青のコンポーネント。 そして、私たちは指定することができます 私たちがすることによって好きな色、 代わりに、青色または緑色または黒色の使用、 六角の6桁は、その後ポンドを使用して、 それが私たちを与えるだろう 6桁の色。 だから、背景色です。 

また、前景を持っています 通常、色、 あなたのページのテキストになるだろう。 そして、あなたは同様にそれを行うことができ キーワードおよびまたは6桁のHexと。 だから、任意の色を指定することができます あなたのページのテキストにしたいです 特定のに対して 上記アップ背景色、。 また、変更および対処することができます フォント、および双方向テキストで ページにレンダリングされます。 

つまり、あなたのフォントサイズを変更することができます。 あなたは、余分ななどの重要な単語を、使用することができます 余分な小さな、または小さなXX、または中、 大規模な、というように。 あなたは、固定されたポイントを使用することができ、10 点、12点、というように。 あなたは、パーセント、80％、20％を使用することができます 100％がデフォルトのフォントです 通常に起こっているサイズ、 11または12ポイントのようなものです。 または、あなたもそれをベースにすることができます 最新のフォントサイズ。 あなただけの何かを書いて、あなたが知っている場合 それが小さくなるために何をしたいことはあります、 しかし、あなたは、あなたのサイズを正確にわかりません それになりたい、よく、あなたは、単に言うことができます フォントサイズを小さく。 そしてそれは、の的外れます ちょうど上記の、それはフォントサイズです。 そして、あなたは小さいまたは大きい得ることができます。 だから、別の多くのがあります フォントサイズを指定する方法。 

また、何を指定することができます あなたがするフォントファミリ。 あなたは、特定のを持っている場合 名前は、中に方法がありますCSS-- 我々はそれについて話をするつもりはありません 非常に特定のフォントを定義するためのhere-- あなたのページにそれを埋め込みます。 また、一般的な名前を使用することができます。 ウェブセーフフォントがたくさんあり​​ます そのCSSで事前に定義されています。 そして、あなたは、Microsoftのユーザーの場合 過去20年間で事務所、 おそらく精通しています これらのWebセーフフォントの多く すでに、のTimes New Roman、Arialの、 新しい、グルジア、Tahomaの、MS Pゴシックを、宅配便 等々。 これらは、すべてのWebセーフフォントと考えられています。 そして実際に、一部の 彼らがされる​​ようになった理由 すべてのページをweb--作るために使用されるようになりました フォントのこのデフォルトのセットへのアクセスを持っていました 様々なセリフ、そしてこのすべてで 我々はに得ることはありませんフォントもの、 これらは通常、 あなたのCSSのアクセス、 あなたがいない場合でも、 それ以外のフォントを定義します。 最後に、あなたはあなたのテキストを揃えることができ、 代わりに、それは、デフォルトでは、整列されているの 左に、あなたは可能性 右に位置を合わせ、 またはあなたはそれが中心に揃える、または可能性があり それは両方のマージンを打つように正当化。 だから、それらを使用すると、使用できるすべてのオプションです あなたのテキストがどのように見えるかを変更するには、 そしてどのようにそれはあなたのページに表示されています。 

あなたのセレクタにはありません タグのみでなければなりません。 我々は以前bodyタグを見て セレクタ、タグセレクタ ちょうどそのように見えるん。 あなたは、タグに名前を付け、その後 そのタグ用のスタイルシートを定義します。 しかし、あなたはまた、何かを行うことができます IDセレクタと呼ばれます。 IDセレクタはかなり似ています。 しかし、今、私が使用していないだと、気づきます HTMLタグは、私は、この場合には、使用してい #unique、または固有のハッシュ。 あなたは私たちからリコールした場合 HTML上のビデオ、私たちは話しました タグは属性を持つことができます方法について。 

適用され、一つの属性 ほとんどすべてのHTMLタグに、 しかし、我々はそれについて話をしませんでした、 IDタグと呼ばれるものです。 したがって、この特定のCSSが希望 唯一持っているHTMLタグに適用されます あなたが名前のしたことは非常に特定のID。 あなたがどこかにあるのであれば あなたのコードで、どこか HTMLファイル、タグとあなたの中に そのタグの属性として指定し、 IDは、このユニークな等しいです 特定のスタイルシート ここでの唯一の間に適用されます ユニークのIDを持つそのタグ。 

また、何かを行うことができます クラスセレクタと呼ばれます。 有することに加えてそう IDもすることができます、属性 HTMLタグにclass属性を追加します。 そして、あなたはクラス属性を使用する場合、 それは、複数のタグを適用することができます。 だから、いくつかのものを持っている場合に 多分あなたは言いたい、似ています、 オープンタグ何とか、何とか、何とか、 何とか、このクラスは、学生に等しいです。 そして、この特定 スタイルシートが適用されます そのクラスのすべてのタグに学生です。 ここでは、設定したいです 黄色の背景色、 私たちは、不透明度を設定したいです 私たちが話をしなかったタグがあり、 しかし、どれだけ透明を扱います 何かがこの場合には、70％です。 

2つのオプションがあります スタイルシートを書きます。 あなたはそれらを書くことができます 直接HTMLに スタイルシートを配置することにより、 スタイルタグの間インチ そして、それらのスタイルタグが内部に行きます あなたのWeb​​ページのheadタグ。 行うには、おそらくより好ましい方法 それは、別の.cssファイルを作成することです、 して、あなたにリンク リンクタグを使用してドキュメント。 リンクタグは、再び、あります ハイパーリンクとは異なり、 あなたは私達のビデオからHTMLを思い出します。 リンクタグがどのように我々です 別のファイルに引き出します。 この種の同等のような Webプログラミングのための#include。 

それでは、table.HTMLを見てみましょう。 あなたは私たちからリコールした場合 私が示したHTML形式のビデオ、 非常の例 単純な乗算 かなり見えたテーブル 醜い、多分あります とのより良い、それを作るための方法 CSSは、それが実際に見えるようにします 乗算のようなより テーブル、または何か それはただ一緒に固定されていません 実際の部門と 行と列の間。 それでは、に向かうましょう CS50 IDEは、と見てみます CSSは、一種の、微調整することができますどのように 私たちは前に開始しました、 その多くの良いものにします。 

だから我々は、CS50のIDEにしています 今、および不慣れな場合は、 我々はこの中でプルアップします テーブルHTMLページこと。 基本的にTable.HTML ただ内容を定義します それがあることになっていたmultiple--の 4九九によって4。 それはかなり簡単です。 そして、私たちはそれはと思うだろう かなりよく組織見えます​​。 しかし、実際には、私たちはこのページをプレビューすると、 我々は正しい、それは一種の醜いことを参照してください？ 明らかに、我々はここで行と列を持っています。 そこ分離のいくつかの並べ替え。 しかし、それは意味の分離はありません。 私たちは、実際に取得していません ここであまりにも多くの情報。 そして、の間には分離はありません 用語の行と列 水平または垂直のルール。 我々は、おそらくこれを作ることができます 少し良く見えます。 それでは、試してみましょう。 だから私はここまでこのタブを閉じるつもりです。 そして私は、私のtable.HTMLを閉じるつもりです そして、私はここで別のバージョンを持っています table2.HTMLと呼ばれます。 我々はそれを開くでしょう。 ページの本文です ほとんど同じ、 私は変更しました 上部に少し。 そして、私はここまでスクロールします。 この時間は、私はいることに注意してください 埋め込まれたスタイルタグを使用して。 私はスタイルタグを開いた、と私は今です すぐ内側のCSSスタイルシートを定義します それの。 私は、テーブルを言うスタイルシートを持っています。 それは私のタグセレクタです。 私は、ドットやハッシュを使用していませんよ、 これは私ならば、私はやっているだろう IDやクラスセレクタを使用していました。 私は、タグセレクタhere--テーブルがあります。 このスタイルはに起こっています すべてのテーブルタグに適用されます。 どうやら私は1つを配置します ピクセル幅、固体青い枠線、 私のテーブルの内部。 それはおそらくだろうようにそれが聞こえます 右、状況を助けますか？ 我々は、必要があるとしています 物事はかなり良く見えます。 だから、これは大丈夫です。 文体、私はしました ここで私のスタイルシートを埋め込み。 それは確かです それを行うための許容可能な方法。 それでは、これはどのようなものか見てみましょう。 だから私はダウンしてここに戻って行くよ、と 私は私のtable2.HTMLをプレビューしますよ。 まあ、それは私が欲しかったかなり何ではありません、 しかし、それは我々がを求めたまさにです。 私たちは、このスタイルであることを言いました 私たちのテーブルに適用する予定。 私たちのテーブルには、1つのピクセルを持っています その周りに広い、固体ブルーのボーダー。 私たちは、実際に取得していません 表のセルで。 私達はちょうどテーブルで取得しています。 だから、CSSが働きました。 それが適用されました 私たちのテーブルにスタイルシート。 しかし、全くしませんでした 私たちはそれをやってみたかったです。 どのように私たちが行うのですか 我々はそれが何をしたいのか？ 

さて、もう一つを見てみましょう table3.HTMLでこのバージョンの。 だから、僕は、これらのタブを閉じますつもりです。 私は自分にこっち戻って行くつもりです ツリーをファイル、およびtable3.HTMLを開きます。 繰り返しますが、それはかなり見に起こっています ここで先頭に似ています。 しかし、この時に気づく、代わりに使用して すぐそこに埋め込まれたスタイルシート、 私はにリンクするつもりです リンクタグを使用して、スタイルシート。 だから私は、明らかにリンクしてい tables.CSSと呼ばれるスタイルシート、 この井戸は等しいです スタイルシートは、単に、よくmeans-- このファイルには、何を基準にするものです 私は、私はスタイルシートですdoing--よ 私のページのために使用しました。 だから私は本当に何を参照したい場合は 私は、ここにCSSでやっています 私はオープン行く必要があります table.CSSも同様にファイル。 だから私たちはこっち戻って行きますよ 再び我々のファイルツリーへ。 table.CSSがあります。 我々はそれを開いてポップします。 今、私たちは、CSSのほとんどを見ています。 どうやら、私はいくつかあります 物事のここで起こって。 私は明らかに5を入れたいです ピクセル幅、赤色の固体境界線、 私のテーブルの周りに。 我々はすでにそれが起こっていることを知っています ただ周辺部に行きます。 我々はtable2.HTMLでそれを見ました。 各行では、私 明らかに指定したいです 行の高さが50ピクセル高いという。 だから、すべての行のために、覚えています それは、TRタグが何をするかです 私はそれが50ピクセルの高作ってるんです。 

最後に、私はこのコメントを持っています。 そして、これは私たちがCSSにコメントをする方法です。 これは、ブロックをつかむことは非常に似ています コメント構文スラッシュスター。 あなたがしたいすべてのテキスト。 スラッシュスラッシュは、CSSにかかわらず、ありません。 短いインラインコメントについては、我々は持っています ここでこの特定の形式を使用しています。 私がやっているように見えます 私のtdタグにたくさんのこと。 TDタグ、またはテーブルを覚えておいてください 本当にただのあるデータ、 の内側の列 どうやら私たちの行、および データごとに 私のテーブルに、私が欲しいです に背景色を設定します 黒、色は、白で 色は前景色です。 だから、これはあることを行っています 私のページのテキスト。 私は大きなフォント、22をしたいです フォントをポイントして、私がしたいです それはフォントファミリ、ジョージア州のものであると。 だから私はするつもりはありません デフォルトのフォントを持っています。 私は、ジョージア州を指定しようとしているんです それらのWebセーフフォントのいずれかであります 我々は前に見たこと。 私は私のテキストを整列させることにしたいです 中央に、ボックスの中央で、 私はそれを左にしたくありません 整列または右に整列されます。 そして、私は私の列の幅をしたいです 同様に50ピクセル広くします。 のは、見てみましょう これはどのようなものか、 これは多分改善されてかどうかを確認します。 だから私はtable3.HTML、に行くつもりだこれ リコールは、リンクとしてtable.CSSを含み、 そして我々はそれをプレビューします。 そう、多くの方が良いでしょうか？ これは実際に見て始めています より多くの九九のようにたくさん。 私は、赤い枠を持っています 私のテーブルの周りに今 私はまたことを指定しました 各行は、幅50ピクセルであります またはそれは言い訳をtall-- 50ピクセルです me--各列は、50ピクセルの幅です。 各列のデータ、およびのみ データは、黒のバックグラウンドを持っています。 だから、なぜそれらのです 白線があります。 空間であるため それらの細胞のすべての間で、 それはに国境はありません それ自体は、それだけです 私は中に充填してい 細胞、実際に テーブルの枠線を作り、これ 明らかに、すべてに沿って、それを存在しませんでした ただ細い白線ました。 今、彼らは見えています。 今、彼らは画面上にオフにポップ。 そして、これは非常に簡単です 私が適用したスタイルシート、 そして今、私のテーブルには、より多くのように見えます 4×4の乗算テーブル、 だけではなく、ごちゃ混ぜ混乱の すべてが明らかに行と列で、 ではないが、超よく組織。 私たちは本当にちょうど表面を傷つけています あなたがここにCSSで何ができるかの。 幸いなことに、CSSのドキュメント 非常に簡単です。 あなたは、そのいくつかのを使用します かなり頻繁に、属性。 我々が話をしたものについて 以前このビデオインチ あなたそのいくつかあります。 おそらく、すべてを使用することはありません。 そして、それはあまりにも、大丈夫です。 しかし、単にがあることを、知っています そこにドキュメントがたくさん。 だから私たちはすべてをカバーしていない場合であっても、 あなたは確かにあなた自身の上に残っていません。 しかし、CSSのは本当に楽しいです を試します。 そして、私は強くあなたを励まします あなたのWeb​​ページをいじって、 そしてあなたがそれらを作ることができる方法を参照してください。 ユーザーを向上させるために見て、感じて あなたのページを訪問した経験。 私はダグロイドです。 これはCS50です。