Challenge solutions
このページは、 CSS Getting Started チュートリアルにあるチャレンジの解答例です。これ以外の解答も考えられます。以下の章名はチュートリアルページのタイトルと一致します。
CSS をなぜ用いるか
Colors
- Challenge
-
Without looking up a reference, find five more color names that work in your stylesheet.
- Solution
-
CSS supports common color names like
orange
,yellow
,blue
,green
, orblack
. It also supports some more exotic color names likechartreuse
,fuschia
, orburlywood
. See CSS Color value for a complete list as well as other ways of specifying colors.
どのように CSS は動作するのか
DOM inspector
- Challenge
-
In DOMi, click on a STRONG node. Use DOMi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text.
- Solution
-
In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as
bolder
; your stylesheet defines the color property asred
.
接続と継承
Inherited styles
- Challenge
-
Change your stylesheet so that only the red letters are underlined.
- Solution
-
Move the declaration for underlining from the rule for
<p>
to the one for<strong>
. The resulting file looks like this:cssp { color: blue; } strong { color: orange; text-decoration: underline; }
Later sections of this tutorial describe style rules and declarations in greater detail.
セレクター
Second paragraph blue
- Challenge
-
Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters the same color as they are now, but makes all the other text in the second paragraph blue.
- Solution
-
Add a rule with an ID selector of
#second
and a declarationcolor: blue;
, as shown below:css#second { color: blue; }
A more specific selector,
p#second
also works.
Both paragraphs blue
- Challenge
-
Now change the rule you have just added (without changing anything else), to make the first paragraph blue too.
- Solution
-
Change the selector of the new rule to be a tag selector using
p
:cssp { color: blue; }
The rules for the other colors all have more specific selectors, so they override the blue of the paragraph.
読みやすい CSS
Commenting out a rule
文章のスタイル
Big initial letters
- Challenge
-
Without changing anything else, make all six initial letters twice the size in the browser's default serif font.
- Solution
-
Add the following style declaration to the
strong
rule:cssfont: 200% serif;
If you use separate declarations for
font-size
andfont-family
, then thefont-style
setting on the first paragraph is not overridden.
色
Three-digit color codes
- Challenge
-
In your CSS file, change all the color names to 3-digit color codes without affecting the result.
- Solution
-
The following values are reasonable approximations of the named colors:
cssstrong { color: #f00; /* red */ background-color: #ddf; /* pale blue */ font: 200% serif; } .carrot { color: #fa0; /* orange */ } .spinach { color: #080; /* dark green */ } p { color: #00f; /* blue */ }
コンテンツ
画像の追加
リスト
小文字のローマ数字
大文字
ボックス
海の境界線
レイアウト
デフォルトの画像位置
画像位置の固定化
表
Borders on data cells only
メディア
Separate print style file
- Challenge
-
Move the print-specific style rules to a separate CSS file and import them into your
style4.css
stylesheet. - Solution
-
Cut and paste the lines between
/* print only */
and/* end print only */
into a file namedstyle4_print.css
. In style4.css, add the following line at the beginning of the file:@import url("style4_print.css") print;
Heading hover color
JavaScript
Move box to the right
- Challenge
-
Change the script so that the square jumps to the right by 20 em when its color changes, and jumps back afterwards.
- Solution
-
Add lines to modify the
margin-left
property. Be sure to specify it asmarginLeft
in JavaScript. The following script achieves the desired result:css// JavaScript demonstration function doDemo (button) { var square = document.getElementById("square"); square.style.backgroundColor = "#fa4"; square.style.marginLeft = "20em"; button.setAttribute("disabled", "true"); setTimeout(clearDemo, 2000, button); } function clearDemo (button) { var square = document.getElementById("square"); square.style.backgroundColor = "transparent"; square.style.marginLeft = "0em"; button.removeAttribute("disabled"); }