コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
スタイルをインラインに書く
このレッスンでは スタイルをインラインに書いてみます。 「CSSのHTMLへの適用の仕方は3つ」と いうことなんですが、 いわゆるCSSをどこに書くかと いうことですね。 この真ん中、「内部スタイルシート」。 これが一番基本的な書き方で head要素の中にstyle要素を置いて、 その中にCSSの規則を書いていくと いうことですね。 そのほかに「インラインスタイル」と 「外部スタイルシート」があるんですが、 そのうち今回は「インラインスタイル」を 試してみたいと思います。 「インラインスタイル」なんですが、 ひとつの要素のstyle属性に書きます。 style要素ではありません。 「h1」とか「p」とか、その要素に対して 属性としてstyleを加えるんですね。 その場合、その要素にのみ 優先して適用されるようになります。 試してみましょう。 body の中のh1要素。 タイトルですね。 これは指定が今 color が blue。 背景が、background-color ですね。 aqua で、そして border が 1px の実線の 黒ということになっています。 これはこのまま置いておいて インラインスタイルで CSSを書いてみましょう。 属性は style です。 そして では color、文字色ですね。 これは red と分かりやすくしましょう。 そして ; で、1スペースを入れて平気です。 今度は background-color、これですね。 それをpinkというふうにしましょう。 pink ですね。 そして ; の、今度は border です。 border は太くします。 4px としておいて、 そして solid ですね。 実線です。 color は magenta と。 というふうにしましょう。 そして比較のため この「インラインスタイル」と 書いてありますけれども h3 には特に指定はないので さっき黒かったんですが、 これを h1 にしてみましょう。 そうするとこちらの h1 が残っていますから これは適用されるはずです。 h1 ということで、保存をして確かめます。 元あったタイトルですね。 それは文字がカラーがレッドになって 背景の塗り色がピンク、 それから枠線はマゼンタ ということになりました。 けれどもhead要素の中の…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。