cssの読み込み方法を３つ紹介「どれも簡単です」

投稿日：2019年1月15日更新日：2019年2月20日

Pocket

どうも、チャーさん(@chaa___san)です。

あなたはcssの読み込み方法がわからず、

困っていますか？

この記事ではcssの読み込み方法を３つ紹介してます。

なので、あなたがこの記事を読めば今すぐにcssの

読み込みができるようになるでしょう。

*この記事の信憑性

この記事を書いてる僕はプログラミング歴１年です。

開発もしてます。

で、早速結論に入ります。

cssを読み込むには３つほど方法があります。

それは以下です。

スポンサードサーチ

1 cssの読み込みができる方法３つ
2 cssの読み込み補足：初心者向け
3 まとめ

cssの読み込みができる方法３つ

１、htmlファイル内に直接かく

２、外部ファイルを読み込む

３、直接タグにcssを書いて読み込む

上記のどれでもcssの読み込みができます。

ですが文章だけじゃわかりにくいと思うので、

それぞれ具体例を見せます。

cssの読み込み法１：htmlファイル内に直接かく

これは<head>タグの間に、

こんな風にpタグのこの部分にcssを適用します、

の部分にcssが読み込まれて、背景色が青になってますよね。

こんな風に<style></style>タグを<head>タグの間に、

書いてcss書いてやることで読み込むことができます。

利点としては、外部ファイルを用意せずとも

すぐにcssをかけるのでcss読み込みに便利です。

ですがcssが長くなるとコードが長くなるのと、

htmlファイルが増えると何回もこれを書かないと

いけないので、面倒なのが特徴です。

cssの読み込み法２：外部ファイルを読み込む

この場合は、以下の記述を<head>タグの間に入れます。

<head>

</head>

ファイル名のところは、

あなたがつけたファイル名を書くとOKです。

例ファイル名→sample.css なら、

href=”sample.css”>でOKです。

とゆことで、実際例を見ていきましょう。

こんな風に<head>タグ内に先ほど説明した、

を書くことで、cssが適用されてますね。

ちなみにcssの内容は同じです。

背景色を青に、それから文字色を白にです。

そしてこの方法の特徴としては、

ファイルがスッキリします。

またファイルが多い時、

元のcssファイルの内容を変更すれば、

全部のファイルのcssが変わるので、楽です。

そして不便な点としては、あまりないので、

迷ったらこれ使えばいいと思いますね。

cssの読み込み法３：直接タグにcssを書く

これはどういうことかというと、

<p style=”font-size:40px;”>この部分にcssを適用!</p>

というように直接タグに書き込みます。

で、こうやって書くとどうなるか？

もちろん動きます。

(cssで文字サイズを大きくしました。)

これを見ていただいてわかるように、

pタグに直接cssを書いて読み込んでます。

なので、タグに直接css書いても読み込めます。

またこのやり方の特徴は、

タグ１つ１つにかけるということです。

なので、それぞれにcssを読み込ませたい、

もしくはcssかけたい部分の量が少ない時は、

いいでしょう。

ですが量が多いと単純に面倒です。

なのでデザインの部分が増えるならば、

外部ファイルなどで読み込むのがいいですね。

スポンサードサーチ

cssの読み込み補足：初心者向け

さてここからはやり方をプログラム初心者向けに

説明します。

１、まずはエディターを開いてHTMLファイルを用意しましょう。

これがないとcssもどうにもできません。

なのでまずはこのステップをやりましょう。

２、どの方法でcssを読み込むか決めましょう。

１、htmlファイル内に直接かく

２、外部ファイルを読み込む

３、３直接タグにcssを書いて読み込む

１の場合は、headタグの間に<style></style>タグを、

書いて、その中にcssを書きましょう。

２の場合は、

をheadタグの間に書きましょう。

３の場合は、直接タグごとに書きましょう。

書き方は、タグの後ろに半角スペースを１つ入れて、

その後ろにstyle=と書きましょう。

style=の後ろにはダブルクオーテーションを書いて、

その間にcssを書き、忘れずにセミコロンを書きましょう。

これがないと動かないので注意です。

例<p style=”font-size:40px;”>ここにcssが読み込まれます</p>

のように書きましょう。

スポンサードサーチ

まとめ

cssを読み込みたい場合は、

以下の３つを使いましょう。

１、htmlファイル内に直接かく

２、外部ファイルを読み込む

３、３直接タグにcssを書いて読み込む

この３つの方法でcssを読み込むことができ、

デザインを施せますので。

それでは早速、上の方法のどれかで

cssの読み込みをしてみてください。

そうすればあなたのプログラミングスキルは

上達しますよ！

それでは読んでもらってありがとうございました。

チャーさん(@chaa___san)