こんにちは。ドルフィンです
ここではCSSの入門として、HTMLにCSSファイルを追加するやり方を説明します。
style.cssについての話と、実際にそれを作って、HTMLに読み込みをさせるという所を学んでいきたいと思います。
CSS入門 style.cssの解説と使い方
ここではstyle.cssについて解説していきたいと思います。
style.cssとは、簡単に説明するとCSSだけを書き込んだファイルのことです。
HTMLファイルはHTMLだけ、CSSファイルはCSSだけを書き込むようにするのが一般的です。
前回の記事ではHTMLファイル内にstyleタグを書いて、その中でCSSを書いたのですが
今回はより実践的に、style.cssというファイルにCSSを書き込んで
HTMLファイルとCSSファイルを連動させるという事をやっていきたいと思います。
まずはhtmlファイルを作ります。
こちらをindex.htmlとして保存してください
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <div class="box_A"> こんにちは！ </div> </body> </html>
CSSを追加するにあたって、headタグの中にこれを追加しています。
これがCSSを読み込みさせるためのlinkタグと呼ばれる部分です。
<link rel="stylesheet" href="style.css">
そして今回はCSS専用のファイルを新しく作成します。
そこにstyle.cssと名前を付けて保存してください。
このファイルを、HTMLで呼び出したいと思います。
CSSファイルの作り方
まずは新しいファイルを作ります。SublimeTextでいうと、NewFileです。
そこから以下を書いていきます
.box_A{
background:#c0c0c0;
}
これをstyle.cssという名前で保存します。htmlファイルと同じフォルダに置いてください
style.cssとして保存
htmlファイルと同じフォルダにファイルを入れてあげる
これでCSSを読み込むことができます！
index.htmlをブラウザで開いてみてください。box_AにCSSが適用されていると思います
このようにCSSとHTMLをファイル分けするのが基本となっております。
是非覚えて頂ければと思います！
ちなみに、JavaScriptではCSSファイルとは別にJSファイルというものが用いられます。
こちらも紹介のタイミングがあれば記事にしていきたいと思っています。
最後までご覧頂きありがとうございました。
コメント