コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
スタイルシートを外部ファイルで定める
このレッスンでは スタイルシートを外部ファイルで 定めてみます。 CSSのHTMLの適用の仕方というのは 3つあるんですけれども 「内部スタイルシート」というのは 一番基本的な形ですね。 head要素にstyle要素を定め、 その中にCSS規則を書いていく。 その要素だけに優先的に 適用したいという場合には 「インラインスタイル」ですね。 これは要素に直接style属性で CSSを書き込んでいくと。 そして3つ目、これが今回試す 「外部スタイルシート」です。 「外部スタイルシート」というのは HTMLドキュメントとは別のファイルで CSSのスタイルシートを定めます。 その場合、ファイルの拡張子は 「.css」ということになります。 そしてその外部ファイルを どういうふうにHTMLドキュメントに 読み込んでくるかというと HTMLドキュメントには link要素で参照します。 link要素には属性は2つ。 rel属性というものに stylesheetと定めます。 それからhref属性。 これは参照パスを与えると いうことになります。 今ブラウザで見ていた HTMLドキュメントがこちらです。 今は内部スタイルシートに定めてあります。 ではこれは選んでカットしてしまいます。 そしてstyle属性もなくなります。 Deleteで削除ですね。 そうしたら外部のCSSファイルを作ります。 「ファイル」から「新規」ということで 「CSS」。 これはDreamweaverの場合ですけれどもね。 「CSS」を選んで「作成」ということで とりあえずテンポラリーな ファイルが出来上がりますけれども @charset。 これは有効な指定ですので 取っておきます。 この /* */ の部分は無視されますので 書き潰してしまって平気です。 「ペースト」ということで。 そしてここではインデント 意味がありませんので1個下げましょう。 これでいいですね。 そしてまだ一時的な名前になっていますので ファイルを保存します。 これが今のHTMLドキュメントですね。 「sample.html」。 の横に「style」と。 そして拡張子は「css」です。 同階層に保存しました。 「保存」ということで 今style要素を取ってしまいましたね。 このまま保存して、まず確認しましょう。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。