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はまとめて書いて楽をしましょう。

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

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

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

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

no image

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

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

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

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

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

no image

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

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

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

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

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

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

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

no image

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

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

no image

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

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

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

最新記事

チャーさん

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

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

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