css

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

投稿日:2019年1月15日 更新日:

Pocket

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

 

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

困っていますか?

 

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

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

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

 

 

*この記事の信憑性

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

開発もしてます。

 

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

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

それは以下です。

 

スポンサードサーチ

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

 

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

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

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

 

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

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

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

 

 

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

 

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

<style></style>で囲ってやると、

<style>タグの間に書いたcssを読み込んでくれます。

 

 

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

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

 

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

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

 

 

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

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

 

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

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

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

 

 

 

cssの読み込み法2:外部ファイルを読み込む

 

 

この場合は、以下の記述を<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の読み込み法3:直接タグにcssを書く

 

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

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

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

 

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

 

 

もちろん動きます。

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

 

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

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

 

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

 

 

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

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

 

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

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

いいでしょう。

 

 

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

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

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

 

 

スポンサードサーチ

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

 

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

説明します。

 

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

 

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

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

 

 

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

 

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

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

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

 

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

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

 

 

2の場合は、

<link rel=”stylesheet” type=”text/css” href=”ファイル名.css”>

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

 

 

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

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

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

 

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

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

 

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

 

 

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

のように書きましょう。

 

 

スポンサードサーチ

まとめ

 

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

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

 

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

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

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

 

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

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

 

 

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

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

 

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

上達しますよ!

 

 

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

 

チャーさん(@chaa___san)

 

-css


スポンサードサーチ

関連記事

no image

cssで見出しに画像を表示させる方法「簡単にできる」

どうも、チャーさんです。 あなたはcssで見出しに画像を表示させたい。 そう思っていませんか?   この記事では、cssで見出しに画像を 表示させる方法を書いてます。   なのであ …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。