コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
背景クリップを使う
このレッスンでは バックグラウンドの設定に background-clipプロパティを 使ってみたいと思います。 今この開いているページなんですけれども div要素が3つあります。 そして幅･高さを指定してあって ボーダーですね、枠線があるんですが、 グレーに見えますけれども これは黒の 半透明ということになっています。 そしてパディングを設定して コンテンツボックスは少し 小さめになってるんですけれども、 そこにテキストが配置してあります。 ここに背景のイメージを 設定したいと思います。 HTMLドキュメントを開きました。 この3つがdiv要素なんですけれども それぞれクラス名が付いていますが、 とりあえずは同じイメージを 設定したいと思います。 div要素の設定はこちらですね。 幅と高さが制限してあって 60px ずつですね。 border があって先ほど言いましたとおり、 alpha を設定してあるので 黒の不透明度50％ということになります。 それから padding があって margin もあります。 さてここに 背景のイメージを 読み込みたいと思うんですけれども その場合には background-image ということで 画像のURLを指定します。 「参照」ということで この sample.html が このドキュメントなので 同じ階層にある image.png、 このペンギンのぬいぐるみなんですけれども これを開きます。 まずこれで確認してみましょうか。 ファイルを保存します。 画像が大きくて 納まりきりませんけれども、 そのCSSボックスの外側はもちろん 表示がされていません。 このサイズ、変えましょうね。 サイズはここに続けて background-size ということで ピクセルで 140 とします。 それから位置ですね。 位置揃えということになるんですけれども、 また background の position ということで 選択肢がありますが、 もちろん center が良さそうですので 真ん中揃えということにします。 ではこれで確認してみましょう。 ファイルを保存します。 背景画像が 枠内に納まりました。 ボックスの中にきちんと入ってますね。 そしてボーダーは半透明にしましたので うっすらと画像が透けて見えてます。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。