HTML / CSS入門文法コース-レッスン4（最終）：CSS構文問題セット
Html Css Getting Started Grammar Course Lesson 4
（Udacity学習プロセスからの抜粋： https://classroom.udacity.com/courses/ud001/lessons/6987421963/concepts/74229205900923 ）。
1.問題セットへようこそ！
この問題セットの目的は、CSS構文に慣れ、さまざまなCSSプロパティの使用を練習することです。各演習を行うときは、前のレッスンで学んだことを思い出してください。行き詰まった場合は、リファレンスや開発者ツールを使用して支援できることを忘れないでください。
問題セットを完了したら、Webページにスタイルを追加するときに自信が持てるようになり、フロントエンドWeb開発プロセスを改善するための新しい手法を学ぶ準備が整います。
CSSリファレンス
2.演習：画像のスタイルを設定する
最初のクイズでは、この子猫の白黒画像を撮って、それにスタイルを追加してほしい。
ああ、かわいいじゃないですか！
画像とHTMLをお渡しします。スタイルを追加するのはあなたの仕事です。ただし、スタイルを追加するだけではありません。代わりに、border、cursor、およびbox-shadowのプロパティを使用する必要があります次の結果が得られます。
ヒント：ボーダーの色はサーモン（＃fa8072）
境界
ワードプロセッサやspreedsheetでテーブルを使用したことがある場合は、境界線に精通している必要があります。 CSSを使用すると、ほぼすべてに境界線を追加できます。スタイル、幅、色などの境界線をカスタマイズするためのさまざまなオプションがたくさんあります！クリック ここに 詳しく知ることができ。
ボーダースタイルCSSで実現できるさまざまな境界線スタイルの例
カーソル
ウェブサイトを表示しているときにカーソルが非常に微妙であるため、カーソルの変化に気づかなかった可能性があります。ただし、カーソルを変更すると、ユーザーに物事を伝えようとするときに非常に役立ちます。たとえば、ユーザーがリンクにカーソルを合わせた場合、カーソルをポインターに変更すると、リンクをクリックできることをユーザーに知らせることができます。
左側に通常のボタン、右側にマウスを置いているときの同じボタン
ほとんどの場合、ブラウザは自動的にカーソルを変更しますが、cursorプロパティを使用してその動作を上書きできます。見る このデモ 動作中のすべての異なるカーソルの！明らかに、このプロパティはマウスを持っているユーザーにのみ適用されます。
ボックス-シャドウ
影を使用して、画像に奥行き感を加えます
box-shadowプロパティは、CSSの世界では比較的新しいものです。これを使用して、要素に影を追加できます。ボックスシャドウを試してみたい場合は、こちらをご覧ください ボックスシャドウジェネレータ CSSmaticから。
このクイズを完了する方法
編集index.html Udacity教室で、ソリューションイメージに見られるのと同じスタイリングを複製します。
子猫の解決策私はすでに書いています セレクタ コードの一部では、スタイルを入力するだけです。
.kitten-image { /* add CSS here */ } 開始する準備ができたら、[クイズにスキップ]をクリックします。
画像クレジット
- 「子猫」 ニコラス・スゾール Flickr、クリエイティブコモンズ経由。
演習：画像のスタイルを設定する
重要な注意点：
このクイズでは、特定のブラウザで「子猫間」の問題が発生しています。当面の間、このクイズから採点は削除されました。演習を完了するために最善を尽くし、解決策を見て答えを確認してください。
-ジェームズ
回答：
これが私が.kitten-imageに追加したものです：
.kitten-image { border: 5px dashed salmon border-radius: 5px cursor: pointer box-shadow: 5px 5px 20px #ccc } プロパティborderおよびborder-radius画像に表示される境界線を作成するために使用されました。ただし、borderプロパティをborder-width、border-style、およびborder-colorに分割することもできます。私の解決策はただ使用しています 速記 代わりにバージョン。
cursorプロパティは、マウスカーソルをデフォルト設定から人差し指に変更するために使用されました。
最後に、プロパティbox-shadowを追加しました画像の背後にドロップシャドウを生成します。
前後は次のとおりです。
3.演習：フォントのスタイルを設定する
このクイズでは、以下の「udacity」テキストを使用してフォントのスタイリングを試してみます。
テキスト画像このテキストはかなり退屈に見えます！
前のクイズと同じように、HTMLを提供し、スタイルを追加するのはあなたの仕事になります。 fontに関連するプロパティを使用する必要がありますおよびtext次の結果が得られます。
テキストソリューション ヒント：フォントの色は紫の色合いです（#8001ff）
フォント
Webでフォントを使用するときは、最初にユーザーが使用できるフォントを検討する必要があります。 Windows、OS X、Linuxを問わず、すべてのオペレーティングシステムには、Webサイトのカスタマイズに使用できる一連のフォントがプリインストールされています。 「ウェブセーフ」フォントの完全なリストについては、これに従ってください リンク 。
それが機能する方法はかなり簡単です。 font-familyを使用する場合プロパティでは、HTMLで使用するフォントを指定します。
font-family: font1, font2, font3, ... 次に、ブラウザは左から右に向かって、指定したフォントを確認し、指定したフォントを使用してテキストをレンダリングできるかどうかを確認します。最初のフォントを使用できない場合、ブラウザは次のフォントに移動します。
複数のフォントを指定する目的は、すべてのフォントがすべてのオペレーティングシステムで使用できるわけではないためです。したがって、複数の類似したフォントを指定すると、使用しているオペレーティングシステムに関係なく、ユーザーは一貫したエクスペリエンスを得ることができます。
arial vshelveticaフォントArialとHelveticaの比較
ソリューションでは、font-family: Helvetica, Arial, sans-serifを指定しました。したがって、ブラウザは最初にフォントHelveticaのレンダリングを試みます。 Macでは、Helveticaがオペレーティングシステムにパッケージされている標準フォントであるため、これは機能します。ただし、WindowsおよびLinuxマシンでは、これらのオペレーティングシステムがデフォルトでHelveticaフォントをサポートしていない可能性があるため、ブラウザーはArialを使用しようとします。 Arialが存在しない場合、ブラウザは利用可能なサンセリフフォントを使用します。
カスタムフォント
Web上でカスタムフォントを使用することも可能です。先に進んで実験を開始したい場合は、チェックアウトできます Google Fonts いくつかのオープンソースWebフォントの動作を確認してください！カスタムWebフォントでは、上記のように複数のフォントを指定することはそれほど重要ではありませんが、カスタムフォントが読み込まれない場合に備えて、少なくとも1つのバックアップフォントを指定することをお勧めします。
このクイズを完了する方法
編集index.html Udacity教室で、ソリューションイメージに見られるのと同じスタイリングを複製します。
テキストソリューション繰り返しますが、私は書くことによってあなたを助けました セレクタ 変更を加えるための空の宣言ブロックを使用します。どういたしまして 。
.udacity-text { /* add CSS here */ } 準備ができたら、[クイズにスキップ]をクリックして開始します。
指示
以下のUdacityテキストに見られるのと同じスタイルを複製します。
ヒント：フォントの色は紫の色合いです（＃8001ff）
回答
これが私の答えです：
.udacity-text { font-family: Helvetica, Arial, sans-serif font-size: 60px text-transform: uppercase text-decoration: underline color: #8001ff } font-familyプロパティは、フォントをHelvetica、Arial、またはオペレーティングシステムにインストールされているデフォルトのsans-serifフォントに変更するために使用されます。
次に、font-sizeプロパティは、フォントのサイズを大きくしてtext-transformを大きくするために使用されます。およびtext-decorationプロパティは、テキストを大文字にして下線を引くために使用されます。
最後に、color下のソリューション画像に表示されている紫の色合いに色を変更するために使用されます。
前後をチェックしてください：
テキストソリューション 指示
以下のUdacityテキストに見られるのと同じスタイルを複製します。
ヒント：フォントの色は紫の色合いです（＃8001ff）
4.Udacityフロントエンドフィードバック拡張機能
まだインストールしていない場合は、UdacityフィードバックChrome拡張機能をインストールします。次のクイズで必要になります。
拡張機能をロードする方法
1.からUdacityフロントエンドフィードバック拡張機能をインストールします Chromeウェブストア （それは無料です）。
2. Chrome拡張機能メニューに移動します（ chrome：// extensions ）そして、ファイルURLに対して実行するための拡張権限を拡張機能に付与します。
「ファイルURLへのアクセスを許可する」というChrome拡張機能メニューのこのチェックボックスをクリックします3.拡張機能を使用するには、編集するWebページを開き、拡張機能アイコンをクリックして、[このドメインでフィードバックを許可する]をオンにします。
拡張機能を開き、[このドメインに関するフィードバックを許可する]をクリックします4.編集が行われると、変更はUdacityフロントエンドフィードバックダイアログボックスに反映されます。
拡張機能についてもっと知りたいですか？ ここをクリック ウォークスルーと詳細については！
5.演習：セレクターの作成
この時点で、CSSステートメントの基本構造に精通している必要があります。すべてのCSSステートメントは セレクタ と 宣言ブロック 。セレクターは、スタイルを設定するHTML要素をブラウザーに指示し、宣言ブロックは、そのHTMLに適用する必要のあるスタイルをブラウザーに指示します。
！[] ad-images.jianshu.io/upload_images/3382609-b7f8cd07ae4a3ccc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240）
CSSステートメントの基本構造
このクイズでは、CSSステートメントのセレクター部分にのみ焦点を当ててください。これを行うために、私はスタイルに欠けているWebページを作成しました。 WebページにはすでにHTMLに追加されたIDとクラスがありますが、スタイルを追加するための適切なセレクターがありません。
Chores
Homework
Party
に注意を払ってほしいタグには両方のtitleがありますおよびunderlineクラス。 HTMLに必要な数のクラスを追加し、それらを再利用できることを忘れないでください。これが、Webサイトにスタイルを追加するときに、IDよりもクラスを使用することが推奨および推奨される理由です。
また、クラスの名前がその目的をどのように反映しているかにも注意してください。 IDとクラスを指定することが非常に重要です 意味のある名前 。そうしないと、特に長期間の後に、あなたや他の人があなたのコードをレビューすることが非常に困難になります。
この後、私の解決策は次のようになりました。
この時点で、やることが残っている（しゃれは意図されていない）唯一のことは、やることリストに残っているタスクのいくつかをマークアウトすることでした。一部のタスクはクラスfinishedを使用してすでにマークアウトされているため、この部分はかなり単純でした。そのため、同じクラスを活用して、「科学プロジェクトのアイデアをブレインストーミングする」、「微積分2の問題を終了する」、「招待状を送信する」というタスクをマークしました。
前後は次のとおりです。
7.演習：Slackカード
スラック 人気のチャットプラットフォームです。
Slackチャネルには通常、名前とそのメッセージのリストが表示されます。誰かの名前をクリックすると、次のようなカードがポップアップ表示されます。
キャメロンのプロフィールカードは見栄えがしますが これです ではない。
このクイズでは、開発者ツールを使用して作成します このウェブサイト Slackプロファイルカードのように見えます。
注：ページの下部にあるボタンにはクラスがあります profile-action 。
あなたがする必要があります いくつか 研究 このクイズのために。あります 少なくとも2つの新しいCSSプロパティ あなたが調べる必要があること。
このクイズを完了する方法
- 開いた このウェブサイト Chromeで。
- オンにします UdacityフィードバックChrome拡張機能 。
- 開発ツールを使用して、すべてのテストに合格します。
- 表示されるコードをコピーして次のページに貼り付けて終了します。
がんばろう！
練習を始める
回答：
このビデオで説明されています：
https://classroom.udacity.com/courses/ud001/lessons/7323812069/concepts/75533070630923
8.演習：Udacityサイトヘッダー
私はあなたにいくつかの練習をしたい Chromeデベロッパーツール ！このクイズを完了するには、DevToolsを使用する必要があります。
Udacityの任意のページ（このようなもの！）を確認することから始めます。
2016年4月現在のUdacityブログ
ページ上部のヘッダーバーに注目してください。
Udacityヘッダーバー2016年4月現在のUdacityヘッダー
DevToolsを使って作ってほしい このウェブサイト Udacityヘッダーのように見えます。
このクイズを完了する方法
- 開いた このウェブサイト Chromeで。
- オンにします UdacityフィードバックChrome拡張機能
- 開発ツールを使用して、すべてのテストに合格します。
- 表示されるコードをコピーして次のページに貼り付けて終了します。
がんばろう！
9.スタイルシートとは何ですか？
次のクイズでは、スタイルシートを使用します。では、スタイルシートとは何ですか？なぜそれが重要なのですか？さて、次の質問を考えてみましょう...
複数のWebページで同じCSSを使用したい場合はどうなりますか？
1つのファイルからすべてのCSSをコピーして別のファイルに貼り付けることもできますが、それは多くの余分な作業のように思われ、あまり拡張性がありません。後で変更を加えることにした場合はどうなりますか？ CSSのすべてのコピーを変更する必要があります！
より良い方法が必要です...
上記のプロセスは機能しますが、お勧めしません。代わりに、スタイルシートと呼ばれるファイルにCSSを記述してから、HTMLでそのファイルにリンクすることをお勧めします。
スタイルシート
スタイルシートは、Webページの要素をどのように表示するかを説明するコードを含むファイルです。
これは、CSSが別のファイルに存在することを除いて、以前と同じです...そしてタグを使用する必要がなくなりました。スタイルシートを作成するには、プロジェクトに新しいファイルを追加し、CSSを記述して、name-of-stylesheet.cssとして保存します。
スタイルシートにリンクする方法
Webページでスタイルシートを使用する前に、スタイルシートにリンクする必要があります。これを行うには、HTMLでスタイルシートにを作成する必要があります。リンクを作成するには、HTMLの中に次のように入力するだけです。
href属性は、リンクされたリソースへのパスを指定し（スタイルシート以外の他のリソースにリンクできます。これについては後で詳しく説明します）、rel属性はリソースとドキュメントの関係に名前を付けます。この場合、関係はスタイルシートです。完了すると、次のようになります...
10.演習：スタイルシートへのリンク
最後のクイズでは、このレッスンの使い慣れたWebページにスタイルシートをリンクします。
このレッスンの最初のビデオからこのWebページを覚えていますか？
ダウンロード可能なセクションでHTMLとCSSをすでに提供しました。ファイルをダウンロードして接続するのはあなたの仕事です スタイルシート ウェブページに。
Link to a Stylesheet Quiz ダウンロードでは、styles.css （スタイルシート）は、cssというフォルダーに便利に収納されています。だから、あなたはあなたの知識を利用する必要があります パス スタイルシートをHTMLに正しくリンクするため。あなたがすべてを正しくやったなら、あなたの リンク 次のようにフォーマットする必要があります...
link-to-a-stylesheet.zipこのクイズを完了する方法
index.htmlというzipファイルをダウンロードします以下のサポート資料または ここに 。stylesheetを編集します欠落しているindex.htmlへのリンクを追加してファイルを作成します。- 表示
stylesheetブラウザで|_+_|
かどうかを確認します適用されました。 - オンにします UdacityフィードバックChrome拡張機能 （まだ行っていない場合）。
- スタイルシートを正常に追加すると、拡張機能にコードが表示されます。次の画面で教室にコードを貼り付けます。
開始する準備ができたら、[クイズにスキップ]をクリックします。
回答：
答えはブラウザで次のように表示されます。
