コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
CSSボックスにプロパティを定める
このレッスンでは CSSボックスのプロパティを 設定してみます。 この下にボディの中ですけれどもね、 3つの要素があります。 「ヘッダ」と「メインコンテンツ」と 「フッタ」と。 それぞれの要素は それぞれのCSSボックスを持っています。 まだ基本的に何も設定してありません。 ですからデフォルト状態ですね。 これに対してCSSボックスのプロパティを 設定してみたいと思います。 body に div要素がありまして id に wrapper という名前が 付けてあります。 その中に header と main と footer とあるわけですが、 これらに対しては スタイルがまだ設定されていません。 まずは3つ共通のスタイルを 設定してみたいと思います。 この場合はIDが wrapper ですね。 その子供の要素すべてに対して スタイルを設定したいと思います。 header と main と footer と、 みんな要素は違いますね。 こういう時は全称セレクタ、 いわゆるユニバーサルセレクタを 指定してあげると、 その子供すべて 要素問わずということになるわけですね。 全称セレクタは こういった使い方をします。 そしてこれに対して ではまず padding を 20px というふうにして、 font-size、少し大きめにしましょう。 20px と。 それから今度は border ですね。 border はちょっと太めに 20px。 そして solid、実線ですね。 カラーは rgba で設定しましょう。 ということで、基本はこれ黒ですね。 a が付いていますので alpha を 0.5 とします。 ではこれでどんなふうになったか 確かめてみましょう。 ファイルを保存します。 パディング、余白が20ピクセル、 それからフォントが ちょっと大きめになりました。 これも20ピクセルでしたね。 それからボーダーは太め、 20ピクセルの実線の 黒を基本にして ただし半透明なのでグレーになっています。 マージンは設定していませんので、 くっついてますね。 これを3つ共通の設定としました。 では要素によって 少しバリエーションをつけます。 と言ってもヘッダとフッタは同じにします。 header ですね。それから footer と。 これに対しては…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。