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の書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

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

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

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

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

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

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

最新記事

チャーさん

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

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

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