どうも、チャーさん(@chaa___san)です。
あなたはcssの読み込み方法がわからず、
困っていますか？
この記事ではcssの読み込み方法を３つ紹介してます。
なので、あなたがこの記事を読めば今すぐにcssの
読み込みができるようになるでしょう。
*この記事の信憑性
この記事を書いてる僕はプログラミング歴１年です。
開発もしてます。
で、早速結論に入ります。
cssを読み込むには３つほど方法があります。
それは以下です。
スポンサードサーチ
目次
cssの読み込みができる方法３つ
１、htmlファイル内に直接かく
２、外部ファイルを読み込む
３、直接タグにcssを書いて読み込む
上記のどれでもcssの読み込みができます。
ですが文章だけじゃわかりにくいと思うので、
それぞれ具体例を見せます。
cssの読み込み法１：htmlファイル内に直接かく
これは<head>タグの間に、
<style></style>で囲ってやると、
<style>タグの間に書いたcssを読み込んでくれます。
こんな風にpタグのこの部分にcssを適用します、
の部分にcssが読み込まれて、背景色が青になってますよね。
こんな風に<style></style>タグを<head>タグの間に、
書いてcss書いてやることで読み込むことができます。
利点としては、外部ファイルを用意せずとも
すぐにcssをかけるのでcss読み込みに便利です。
ですがcssが長くなるとコードが長くなるのと、
htmlファイルが増えると何回もこれを書かないと
いけないので、面倒なのが特徴です。
cssの読み込み法２：外部ファイルを読み込む
この場合は、以下の記述を<head>タグの間に入れます。
<head>
<link rel=”stylesheet” type=”text/css” href=”ファイル名.css”>
</head>
ファイル名のところは、
あなたがつけたファイル名を書くとOKです。
例ファイル名→sample.css なら、
href=”sample.css”>でOKです。
とゆことで、実際例を見ていきましょう。
こんな風に<head>タグ内に先ほど説明した、
<link rel=”stylesheet” type=”text/css” href=”ファイル名.css”>
を書くことで、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を書きましょう。
２の場合は、
<link rel=”stylesheet” type=”text/css” href=”ファイル名.css”>
をheadタグの間に書きましょう。
３の場合は、直接タグごとに書きましょう。
書き方は、タグの後ろに半角スペースを１つ入れて、
その後ろにstyle=と書きましょう。
style=の後ろにはダブルクオーテーションを書いて、
その間にcssを書き、忘れずにセミコロンを書きましょう。
これがないと動かないので注意です。
例<p style=”font-size:40px;”>ここにcssが読み込まれます</p>
のように書きましょう。
スポンサードサーチ
まとめ
cssを読み込みたい場合は、
以下の３つを使いましょう。
１、htmlファイル内に直接かく
２、外部ファイルを読み込む
３、３直接タグにcssを書いて読み込む
この３つの方法でcssを読み込むことができ、
デザインを施せますので。
それでは早速、上の方法のどれかで
cssの読み込みをしてみてください。
そうすればあなたのプログラミングスキルは
上達しますよ！
それでは読んでもらってありがとうございました。
チャーさん(@chaa___san)
