Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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でボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

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

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

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

最新記事

チャーさん

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

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

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