演習課題「アウトラインのスタイルと太さ、色を一括指定しよう」
現在、ブラウザでは、アウトラインの練習と書かれたボックスが表示されています。
ここで、outlineプロパティを用いてアウトラインのスタイルと太さ、色を一括で指定してください。
ただし、アウトラインのスタイルは実線で、太さは10px、色は#f5a1b3にしてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「アウトラインのスタイルと太さ、色を個別指定しよう」
現在、ブラウザでは、アウトラインの練習と書かれたボックスが表示されています。
ここで、outline-styleプロパティとoutline-widthプロパティ、outline-colorプロパティを用いてアウトラインのスタイルと太さ、色を個別に指定してください。
ただし、アウトラインのスタイルは二重線で、太さは5px、色は#ffa500にしてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃05:ボックスのアウトラインを変更する(outline)
このチャプターでは、ボックスのアウトラインを学習します。
outlineプロパティを使って、ボックスのボーダーの外側にラインを表示することができます。
このラインをアウトラインと呼びます。
アウトラインは、要素を強調させるためのデザインとして用意されたものであるため、スペースを取らずボックスの大きさやレイアウトに影響を与えません。outlineプロパティに適切な値を指定することで、アウトラインのスタイルと太さ、色を調整できます。
一方で、outlineプロパティは上下左右を個別に指定することはできません。
アウトラインのスタイルと太さ、色は個別に指定することができ、それぞれ
・ スタイルを指定するoutline-style
・ 太さを指定するoutline-width
・ 色を指定するoutline-color
のプロパティがあります。
アウトラインのスタイルは点線や破線などさまざまな種類があり、主なスタイルとしては、
・ 実線を引くsolid
・ 点線を引くdotted
・ 破線を引くdashed
・ 二重線を引くdouble
があります。
@charset "UTF-8";
h1 {
margin: 40px;
background-color: yellow;
border: solid 5px blue;
outline: dotted 5px red;
}
@charset "UTF-8";
h1 {
margin: 40px;
background-color: yellow;
border: solid 5px blue;
outline: dotted 5px red;
outline-color: green;
outline-style: solid;
}