自分の手でサイトを作ろうとした場合、HTMLでコードを入力すれば文字列は表示させることができます。
しかし実際にネット上に出回っているような綺麗なサイトを作る場合、必ず必要となってくるのが『CSS』です。
ですが私自身、初めてHTMLを触った時は
『HTMLでコードを打ち込むことができればホームページを作れると思っていた』
ため、CSSの存在を知ったのはしばらく後でした。
サイトのデザインを変えるためにはCSSの知識が必要なことが分かったため、実際にHTMLにCSSを読み込ませてみようとすると
『そもそもHTMLでCSSを読み込む方法が分からん』
となってしまったのです。
なのでここでは、昔の私と同じように
そんな方のために、簡単にできる読み込み方法を簡潔にご紹介させていただきます。
HTMLにCSSを読み込む方法が分からない‥
初めてHTMLやプログラミングコードに触るときは、かなり簡単なことをめちゃめちゃ難しく考えてしまいがちです。
なので重要なポイントとしては
『とりあえず全てのことを簡単に考えてみること』
です。
HTMLにCSSを読み込むやり方おすすめ２パターン
やり方に関してはいくつかあるのですが、その中で私がオススメする方法は２つです。
まず１つ目が『外部ファイルから読み込む』方法
そしてもう一つが『HTML内に直接書く』方法です。
では詳しく見ていきましょう。
外部ファイルから読み込む
まずこちらのやり方は、HTMLとCSSのファイルを別々に分けて読み込む方法になります。
まず最初にHTMLのファイルを作って保存し、そのHTMLに新しく作った別のCSSファイルを読み込ませて表示させることで、コードがすっきりと読みやすくなります。
この先自分でサイトを作り上げる場合に関しては、ほとんどがこの『外部ファイルから読み込む方法』を採用することになりますので、この使い方は覚えておきましょう。
外部ファイルから読み込む手順解説
では解説するだけではつまらないので、実際にコードを打ち込んで実践しながら解説していきます。
まず最初にHTMLの雛形を作っていきましょう。
とりあえずこんな感じのコードを打ち込んでみます。
実際にこのコードを打ち込んでブラウザで開いてみると
このように表示されます。
これはHTMLのコードしか入力していないため、この文章に外部ファイルのCSSを反映させていきたいと思います。
その際に重要になるコードが
これですね。
<link rel = “stylesheet” type = “text/css” href = “style.css” />
実際にこのコードをHTMLのhead内に記述して
こんな感じのコードを作り上げます。
そしてHTMLファイルの他にもう一つ『CSSファイル』を作り、実際にコードを書いていきます。
ここでは『style.css』というファイルを作成し、そこに簡単なコードを書いています。
▼コードの意味
font-size: 50 px; →文字の大きさを５０ピクセルにする
color:#2E9AFE;→文字の色を青にする
そしてこのファイルを実際にHTMLで読み込んでみると
こんな感じでCSSが反映されて、文字が大きくなったり色が変わったりしていますね。
HTML内に直接書く
そしてもう一つのやり方が
『HTMLのヘッドタグ内に直接書く』
方法になります。
こちらもシンプルです。
最初にheadタグ内に<style></style>を書きます。
実際に書いたコードがこちらです。
<style><style>を直接head内に入力し、そこにCSSのコードが書かれていることが分かると思います。
そしてこれをブラウザで表示させてみると
こちらもシンプルなやり方となりますので、実際にエディタにコードを打ち込んでブラウザで表示させてみてください。
CSSに関しては難しく考える必要はない
今までやったことがない新しいことを始めると、人は必ず難しく考えてしまいます。
そんな中で短期間で結果を出す人たちというのは、最初の段階で全体像を把握し、できる限り簡単に考えて物事に取り組み始めます。
結果を出すためには
『いかに簡単に解釈するか』
が大切になってきますので、HTMLやCSSを実践する中でも、とにかく全体像を把握することから始めていきましょう。
CSSの書き方を覚えればおしゃれなサイトが作れる
今あなたがHTML・CSSをどのような目的で学習しているかは分かりませんが、この２つを身につけることによって、今ネット上に出回っているようなおしゃれなサイトを作ることができるようになります。
そうすると、どこで何が使われていて、今自分に何ができないのかが見えてきます。
難しいと思っていたことが、実はシンプルなコードで作れたりするので、とりあえずコードを書いてみると新しい発見があると思いますよ♪
まとめ
もしCSSの読み込みに苦戦していたのであれば、今回の記事でそのやり方が簡単であることが分かったと思います。
ある意味基礎の基礎の段階となりますので、まずはここを最低限理解し、そこから新しいスキルを身につけていってください。
