CSS

【初心者必見】CSSとは?3ステップ書き方まで覚えてスキルアップ!

【初心者必見】CSSとは?3ステップ書き方まで覚えてスキルアップ!

プログラミング初心者の方のほとんどが通る道となるHTMLとCSSのうちのCSSの方を今回は紹介していきます。

CSSにはいろんな書き方があり、思っている以上にできることがたくさんありますし奥が深いです。今回はCSSの説明と簡単な書き方から、反映方法までを紹介していきます。

3ステップ

  1. CSS用のファイルを用意
  2. HTMLから読み込む
  3. 書き込む

CSSとは?

CSSとは?

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)は正式名称が長いんですが、省略されてCSSと呼ばれています。

HTMLとCSSはいつもセットで出てきます。なので、HTMLをまだ学習してないんだったら先にHTMLそのあとCSSでいいと思います。

簡単にCSSが何かと説明しますと、色や文字のサイズや要素の位置を変えたりできます。人でいう化粧とか服とか整形でしょうかね。色々と作り変えて見た目を変えることができちゃうんですね!

この文字が赤いのもCSSで書かれているためです。

CSSがあるだけで見た目をキレイに整えたりできちゃうんですね!

CSSを書いてみよう!

手順

  1. CSS用のファイルを用意
  2. HTMLに読み込む
  3. 書き込む

1〜3の手順でCSSを書いていきたいと思います。まず始めにサンプルのHTMLとCSSのファイルを表示させときます。これを参考に、説明していくので最初に目を通しといてください。それとHTMLのファイルは先に作成した前提で話していきます。もしHTMLを知らない方は下の記事を参考に、先にHTMLをしといてください!

【初心者必見】HTMLとは?5ステップ書き方から表示までを覚える

もしテキストエディタを用意したい人は下の記事を参考にしてください!

vscodeを3ステップでインストール&日本語化ですぐ始めれる!

1.CSS用のファイルを用意

上のサンプルのようにindex.htmlのファイルとstyle.cssのファイルを作ります。

CSSのファイル名はなんでもいいですが、最後は『.css』にしてください。

『〇〇〇〇.css』

このファイルをindex.htmlと一緒の場所に保存してくださいね!またはCSSのフォルダを作ってその中にCSSのファイルを入れることも可能です。(こっちの方がよく使う)下を参考にしてください。

同じディレクトリの場合

ファイル名
  index.html
  style.css

別のディレクトリの場合

ファイル名
  index.html
  css
    style.css

とりあえず簡単な方は同じディレクトリの場合なんで簡単な方からやってみましょう!
*cssのフォルダを作った場合はHTMLから読み込むパスが少し変わるので気をつけてください!

2.HTMLからCSSを読み込む

CSSはHTMLから読み込む場合と直接HTMLに書き込むやり方の2つがあるんですが、ファイルを分けたほうがキレイなので、今回は別のファイルに分けるやり方でしますのでHTMLからCSSファイルを読み込む必要があります。

HTMLには<head>のタグ内に呼び込むための記述をしていきます。その書き方は、

同ディレクトリ
<link rel=stylesheet href=./style.css>

別のディレクトリ
<link rel=”stylesheet” href=”./css/style.css”>

この書き方は、どうなってるのって考えなくてもこのまま覚えちゃいましょう!考えてても時間が勿体無いので、数学の公式みたいに覚えちゃって大丈夫です!

読み込む時に重要となるのは、『href=””』この部分でもしCSSが反映されていないときはこの部分が間違っていると覚えてもらって間違いないです。『./フォルダ名/ファイル名』の書き方でフォルダが無い時は『./ファイル名』だけですので注意してください!

3.CSSを書き込む

CSSの書き方は、HTMLの要素の名前やタグを指名してその部分に対して表示などを変えていきます。簡単にいうと、『A君赤色に変わって』と命令してA君を赤色に変えます!

HTML
<div class=”a”>A君</div>

CSS
.a {color: red;}

こんな感じです。書き方は、

名前の指定 {指示: どうするか;}

名前の指定
.a(.はclassの意味)
#a(#はidの意味)
div(タグに直接も可能)

指示は様々
color(文字の色)
background-color(背景の色)
bold(文字の太さ)
border(ボーダーに関すること)

どうするか
red(色の指定)
900(数値で太さの指定)
1px solid #000(太さ 線の種類 色の指定)

CSSは表示の仕方を変えるだけでもものすごい種類があるので全部は紹介しきれないんですが、その都度やりたことに関して検索すれば紹介してくれるとこあるので、つまずくたびにどんどん検索しましょう!

最後にサンプルで書いてたのを表示したのを紹介します。

表示方法はHTMLのファイルをダブルクリックしたら反映されてるはずです!

HTMLCSS表示

まとめ

CSSまとめ

HTMLと同じく簡単に最初は表示をできますが、実際にCSSを使って書いているとあとあと難しくなります。書き方にも色々あって今勉強しただけでは不十分ですが、ここまでやり切ると、次のステップに上がりやすくなるので頑張ってやりきりましょう!

メンターがついてくれるプログラミングスクールはおすすめなのでよかったら下の記事も参考にしてください!

【経験談】おすすめのプログラミングスクールと選び方