コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
アウトラインとは
このレッスンでは outlineというプロパティが どういう働きをするのかということを ご紹介します。 outline というのは border とちょっと似てるんですけれども その違いを知ってください。 今このページに表示されている 文字なんですけれども、 これちょっと欠けてますね。 p要素で3つあって overflowの領域をカットしているので、 こんな表示になっています。 p要素3つはこちらですね。 それぞれにクラスが定めてあります。 そしてスタイルの方なんですが、 幅と高さを決めて、 そして overflow ですね。 この部分、hidden にしてありますので この領域から外れた部分というのは 非表示になっています。 ではまず こちらには border を設定しましょう。 class border になっていますので クラス border で そして文字どおり border を設定します。 1px でいきましょう。 1px の solid、 そしてカラーは green としましょう。 それから 次、クラス outline なので これに outline の設定をします。 outline で 設定する値は border と基本的に一緒です。 ただしプロパティ名が outline ということで 1px の やはり solid で そしてカラー変えましょう。 alpha付けたいので rgba にして (0, 0, 255) で、ブルーですね。 そして半透明 0.5 とします。 少しスクロールしましょう。 border-2 になってますね。 ということなんでこれコピーして ペーストします。 border-2 として ではこちらカラーは変えましょう。 black とします。 これで確かめてみましょう。 ファイルを保存します。 カラーは異なりますけれども 3つとも同じように 1ピクセルの線がついていますね。 この outline の方は alpha をつけたんで かなり薄くなっています。 そして3つ目は黒、 最初がグリーンということですね。 これでは outline と それから border、 違いがないように見えます。 それでは最初の2つのp要素、 border と outline ですね。 この設定を少し変えます。 線の太さです。両方とも 50 とします。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。