2. CSS
  3. CSSコーディングの書き方！基礎知識を10分で手に入れよう
CSSコーディングの書き方！基礎知識を10分で手に入れよう
css

CSSコーディングの書き方！基礎知識を10分で手に入れよう

どうも、Tommy(@SitommyBlog)です。

今回は、CSSについて記事を書いていこうと思います。 HTMLを学んだ方、学び中の方は是非見てください。

実際、HTMLとCSSはニコイチで、片方のみ習得して終わりというものではないです。

HTMLがWebサイトの骨格を作るとして、CSSは塗装をする。それぞれ役割があり、どちらかがかけると綺麗なWebサイトが作れませんのでWebサイトを作成するには必要不可欠なものになってきます。

では、見ていきましょう。

CSSとは？！

CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、「スタイルシート言語」のことです。

簡単に説明すると、テキストの文字サイズを任意のサイズに変更したり、色を変更したりして、HTMLに色や大きさなどを加えて見栄えを良くしていきます。

CSSを設定するには？！

CSSで色・サイズの変更をするためには、HTMLと結び付ける必要があります。その結び付ける方法が2つあり、「内部リンク」と「外部リンク」があります。

内部リンクの設定

まず、内部リンクの設定は『headタグ』に『styleタグ』を記述してスタイルを当てる方法と、タグに直接記述する方法の2つがあります。

例えば、

<head>
<style type="text/css">
h1{
 color: #f00;
 font-size: 16px;
}
</style>
</head>

という風に、記述すると『h1タグ』に対してフォントサイズを設定しています。

もう1つ目は、タグに直接書く方法です。例えば、

<h1 style="color: #f00; font-size:16px;">【初心者向け】誰でもわかるCSS！</h1>

という風に、記述します。

ただ、この２点の記述方法はオススメしません。なぜなら、HTMLはマークアップの役割があり、CSSがスタイルの役割のため分けて管理しましょう。

外部リンクの設定

先ほど述べた分けて管理するために、CSSを外部に設置させる方法です。こちらが主流です。

まず、『headタグ』内に『linkタグ』で設置します。

<head>
<link type="text/css" rel="stylesheet" href="（パスがあれば）〇〇.css">
</head>

と、記述しましょう。

外部リンクをするためには、ディレクトリーにCSSファイルを作る必要があります。
（※ディレクトリー構造がわからなければこちらの記事をどうぞ。）

第一階層にCSSファイルを作成しても良いですが、できればフォルダーを作成しその中にファイルを作成しましょう。

<head>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>

と、なります。CSS名は任意で決めてください。ここでは例として書いてます。

CSSの書き方

先ほど、作成した『style.css』にスタイルを書いて行きましょう。

まず、はじめに記述ルールがありますので説明します。

@charset "UTF-8";

一番初めの1行目に『@charset “UTF-8”;』を記述します。これは、エンコードをUTF-8として記述するという意味にまります。おまじないと思って書いておきましょう。では、スタイルを書いて行きます。

図のように、CSSを適応したいタグ（上図ではh1）のことを「セレクタ」、変更したい項目を「プロパティ」、そのプロパティを決めるものを「値」と呼びます。

プロパティの数はたくさんあります。全て覚えられないと思っている方も多いと思いますが、全て覚える必要はないです。

手を動かしてどんどん数をこなしていくと、覚えてしまうプロパティが出てくると思いますし、こういう風にしたいけど、どうだったけ？と、なった場合はそれを検索しましょう。

必ずと言っていいほど答えが帰ってきます。その繰り返しで、プロパティも覚えられるでしょう。

@charset "UTF-8";

h1{
  color: #f00;
  fonts-size: 16px;
}

上記のコードは、h1のテキストに対して『色を赤』・『文字サイズを16px』に指定している事になります。

プログラミング全てに置いて言える事ですが、コードを書いていると「ここのコードどういう風に表示されるか。」などメモ書きをしておくと、あとで振り返った時わかりやすいことと、「コメントアウトをしておこう」となる機会が多々あります。

コメントアウトというのは、書いてあるコードは不要ではあるが消したくない・あとで使用するなどの場合に使う記述方法があります。

@charset "UTF-8";

h1{
  color: #f00;
  /*fonts-size: 16px;*/
}

上記のコードのように、『/**/』で不要なものを挟みます。
すると、コード内には残りますが、ブラウザには表示・反映されません。コメントを残す場合も、

@charset "UTF-8";
h1{
  color: #f00;/*これは赤色です。*/
  fonts-size: 16px;
}

という風に、途中に入れても問題ありません。
また、複数行コメントアウトしたい場合も、

@charset "UTF-8";
/*
h1{
  color: #f00;
  fonts-size: 16px;
}
*/

という風に、挟めばOKです。

このコメントアウト記述方法は言語によって多少違いますので、お気をつけください。

まとめ

CSSを習得すれば、思い通りのデザインをWeb上に表現できるようになります。

初めは、レイアウトするにも一苦労すると思います。

諦めず手を動かしていけば、必ず習得出来ます。動画サイトなり、参考書なり使ってどんどんコードを書いて行きましょう。

css

Related

Ranking

目次