Pocket

自分の手でサイトを作ろうとした場合、HTMLでコードを入力すれば文字列は表示させることができます。

しかし実際にネット上に出回っているような綺麗なサイトを作る場合、必ず必要となってくるのが『CSS』です。

このCSSのコードを書くことによって、整った理想的なデザインを作り上げることができます。

ですが私自身、初めてHTMLを触った時は

『HTMLでコードを打ち込むことができればホームページを作れると思っていた』

ため、CSSの存在を知ったのはしばらく後でした。

サイトのデザインを変えるためにはCSSの知識が必要なことが分かったため、実際にHTMLにCSSを読み込ませてみようとすると

『そもそもHTMLでCSSを読み込む方法が分からん』

となってしまったのです。

なのでここでは、昔の私と同じように

『HTMLでCSSを読み込む乗ってどうやんの?』

そんな方のために、簡単にできる読み込み方法を簡潔にご紹介させていただきます。

HTMLにCSSを読み込む方法が分からない‥

初めてHTMLやプログラミングコードに触るときは、かなり簡単なことをめちゃめちゃ難しく考えてしまいがちです。

なので重要なポイントとしては

『とりあえず全てのことを簡単に考えてみること』

です。

実際HTMLにCSSを読み込むのは一瞬でできるくらい簡単です。

HTMLにCSSを読み込むやり方おすすめ2パターン

やり方に関してはいくつかあるのですが、その中で私がオススメする方法は2つです。

まず1つ目が『外部ファイルから読み込む』方法

そしてもう一つが『HTML内に直接書く』方法です。

では詳しく見ていきましょう。

外部ファイルから読み込む

まずこちらのやり方は、HTMLとCSSのファイルを別々に分けて読み込む方法になります。

まず最初にHTMLのファイルを作って保存し、そのHTMLに新しく作った別のCSSファイルを読み込ませて表示させることで、コードがすっきりと読みやすくなります。

この先自分でサイトを作り上げる場合に関しては、ほとんどがこの『外部ファイルから読み込む方法』を採用することになりますので、この使い方は覚えておきましょう。

外部ファイルから読み込む手順解説

では解説するだけではつまらないので、実際にコードを打ち込んで実践しながら解説していきます。

まず最初にHTMLの雛形を作っていきましょう。

とりあえずこんな感じのコードを打ち込んでみます。

実際にこのコードを打ち込んでブラウザで開いてみると

このように表示されます。

これはHTMLのコードしか入力していないため、この文章に外部ファイルのCSSを反映させていきたいと思います。

その際に重要になるコードが

これですね。

ひろ
深く理解する必要はありませんが、rel属性・type属性・href属性それぞれのCSSの要素を指定することで読み込むことができます。

<link rel = “stylesheet” type = “text/css” href = “style.css” />

ひろ
これはHTMLのhead内に毎回書く定型文のようなものなので、とりあえず覚えておきましょう。

実際にこのコードをHTMLのhead内に記述して

こんな感じのコードを作り上げます。

そしてHTMLファイルの他にもう一つ『CSSファイル』を作り、実際にコードを書いていきます。

ここでは『style.css』というファイルを作成し、そこに簡単なコードを書いています。

▼コードの意味

font-size: 50 px; →文字の大きさを50ピクセルにする

color:#2E9AFE;→文字の色を青にする

そしてこのファイルを実際にHTMLで読み込んでみると

こんな感じでCSSが反映されて、文字が大きくなったり色が変わったりしていますね。

これが『外部ファイルからCSSを読み込む方法』になります。

HTML内に直接書く

そしてもう一つのやり方が

『HTMLのヘッドタグ内に直接書く』

方法になります。

こちらもシンプルです。

最初にheadタグ内に<style></style>を書きます。

そしてこの中に直接CSSコードを入力することで適応されることになります。

実際に書いたコードがこちらです。

<style><style>を直接head内に入力し、そこにCSSのコードが書かれていることが分かると思います。

そしてこれをブラウザで表示させてみると

ひろ
先ほどと同じように文字が大きくなり、文字の色を変えることができます。

こちらもシンプルなやり方となりますので、実際にエディタにコードを打ち込んでブラウザで表示させてみてください。

CSSに関しては難しく考える必要はない

今までやったことがない新しいことを始めると、人は必ず難しく考えてしまいます。

そんな中で短期間で結果を出す人たちというのは、最初の段階で全体像を把握し、できる限り簡単に考えて物事に取り組み始めます。

結果を出すためには

『いかに簡単に解釈するか』

が大切になってきますので、HTMLやCSSを実践する中でも、とにかく全体像を把握することから始めていきましょう。

物事を点で考えてしまうと、ちょっとしたことが意味わからんくらい難しく感じてしまうので注意が必要です。

CSSの書き方を覚えればおしゃれなサイトが作れる

今あなたがHTML・CSSをどのような目的で学習しているかは分かりませんが、この2つを身につけることによって、今ネット上に出回っているようなおしゃれなサイトを作ることができるようになります。

動的な動きを入れるためにはプログラミング言語の習得が必要ですが、最低限この2つを覚えておけば、コードの意味を理解することは可能です。

ある程度コードが読めるようになってきたら、試しにネット上に存在するサイトのコードを模写してみてください。

そうすると、どこで何が使われていて、今自分に何ができないのかが見えてきます。

難しいと思っていたことが、実はシンプルなコードで作れたりするので、とりあえずコードを書いてみると新しい発見があると思いますよ♪

まとめ

もしCSSの読み込みに苦戦していたのであれば、今回の記事でそのやり方が簡単であることが分かったと思います。

今回は2つのやり方をご紹介しましたが、どちらのやり方も使えるようになっておくと記述の幅が広がるでしょう。

WEB系のプログラミングに関しては、最初に必ずHTML・CSSのスキルが必要となってきます。

ある意味基礎の基礎の段階となりますので、まずはここを最低限理解し、そこから新しいスキルを身につけていってください。

Pocket