CSSとは?Web開発に必要なスタイルシートの書き方【初心者向け】

CSSとは?Web開発に必要なスタイルシートの書き方【初心者向け】

CSSとは?Web開発に必要なスタイルシートの書き方【初心者向け】のメインビジュアル画像

この記事ではCSSについて知りたい方向けに作成した記事となります。HTMLは知っているけどCSSはあまり知らないという初心者の方向けに実践も交えながら解説させていただきます。

CSSとは

CSSとはのイメージ

CSSとはCascading Style Sheets(カスケーディングスタイルシート)の略で、主に文章構造指定をしたHTMLファイルにデザインを施したいときに使う言語になります。
Web開発の現場でも基本的に使用されている言語で、Web開発に携わりたい方は覚えておいて損はないので、是非この記事を最後までお読みください。

HTMLとCSSの違いは?

HTMLは「文章構造」を指定するもの、CSSは「装飾」を指定するものと大きく異なります。
HTMLに関して詳しく知りたい方は以下の記事をお読みください。

HTMLでもタグに直接Styleを指定することで文字の色や大きさを変更できたりしますが、非推奨となっています。
何度も言いますが、『HTMLは「文章構造」を指定するもの、CSSは「装飾」を指定するもの』が基本ですのでしっかりと覚えておきましょう。

CSSの設定方法

CSSはHTMLで定義した文章構造の見栄えや装飾をする言語です。
HTML文章の見栄えや装飾を変更するにはHTMLにCSSを適用する必要があります。
その方法ですが複数存在しており現在推奨されているものとそうでないものがある為、しっかりと理解しておきましょう。

【非推奨】HTML内に直接CSSコードを記述する方法

HTMLに直接CSSを記述する方法は現在非推奨となっていますので設定しないようにしましょう。
一応説明はさせていただきますが、使用することは推奨しません。

<head>
<style type=”text/css”>
p { color: #333333; }
</style>
</head>

HTMLファイルの<head>タグ内に<style type=”text/css”></style>と記述し、その中にCSS言語を記述していくことでHTMLにCSSを反映することが可能です。

  • メリット:直接HTMLに記述が可能なため別のCSSファイルを作成する手間が少ない。
  • デメリット:直接HTMLに記述する為ページが重くなる。また通信障害下の環境の人がWebページを閲覧した際HTMLの前にCSSを読み込むため、何も表示されない状態が続きます。

【推奨】HTMLから外部CSSファイルを読み込む方法

現在のWeb業界で推奨されているのが外部CSSファイルを読み込む方法になります。

<head>
<link rel=”stylesheet” href=”CSSファイルのパス” type=”text/css” />
</head>

HTMLファイルの<head>タグ内に<link rel=”stylesheet” href=”CSSファイルのパス” type=”text/css” />と記述しhrefにCSSがあるパスを記述することで、外部のCSSファイルを読み込むことができます。
(例)cssフォルダの中のsample.cssを読み込みたい場合は下記のように記述します。href=”css/sample.css”
このようにHTMLファイルとCSSファイルを分けて、各々記載していきましょう。

CSSの文法と書き方

このセクションではCSSの文法と書き方を解説いたします。

CSSの文法

CSSでHTMLにデザインの指定をするには基本文法に沿ってCSSを記述していきます。

p {
font-size: 15px;
}

  • p:セレクタ
  • font-size:プロパティ
  • 15px:値

基本的にCSSはこのセレクタ・プロパティ・値を指定して記述していきます。
セレクタ:HTMLのどの部分を変化させたいのか。
プロパティ:何を変更させたいのか。
値:どのように変更させるのか。
値はプロパティによって数値以外も存在しますので注意しましょう。

CSSの書き方

先ほどもお話いたしましたが、基本的にHTMLで指定したタグに命令をCSSで指定することで利用する事が出来ます。
簡単な例を交えて説明いたします。
以下のようなHTMLにCSSで指定します。

【HTML】
<p>この記事では<strong>HTMLについてわかりやすく説明</strong>していきます。<br>
もっと知りたい方は<a href=”https://wcl-design.com/programming/html/” target=”_blank”>ここをクリック!</a></p>

【CSS】
p { font-size: 15px; font-weight: normal; }
strong { font-size: 18px; font-weight: bold; }
a { color: blue; text-decoration: underline; font-weight: bold; }

上記のように、HTMLにCSSを指定した場合、表示の結果は以下となります。

point表示の結果
この記事ではHTMLについてわかりやすく説明していきます。
もっと知りたい方はここをクリック!

idとclassについて

「基本的にHTMLで指定したタグに命令をCSSで指定する」といいましたが、
実はHTMLタグに記述するidとclassでの指定も可能です。

【HTML】
<p id=”p_id”>この記事では<strong class=”strong_class”>HTMLについてわかりやすく説明</strong>していきます。<br>
もっと知りたい方は<a href=”https://wcl-design.com/programming/html/” id=”a_id” target=”_blank”>ここをクリック!</a></p>

【CSS】
#p_id { font-size: 15px; font-weight: normal; }
.strong_class { font-size: 18px; font-weight: bold; }
#a_id { color: blue; text-decoration: underline; font-weight: bold; }

上記のように、HTMLにCSSを指定した場合、表示の結果は以下となります。

point表示の結果
この記事ではHTMLについてわかりやすく説明していきます。
もっと知りたい方はここをクリック!

HTMLでidやclassをタグにつけることでCSSで一括で呼び出すことができるので、CSSの幅や効率がぐんと広がります。
idは「#」で取得、classは「.」で取得する事が出来ます。
※HTMLのお話になりますが、同じid名はページ中に1度だけしか使用できません。
※また逆に同じclass名はページ中に何度でも使用することが可能となっています。

コピペで簡単!Webページを作成してみましょう

コピペで簡単!Webページを作成してみましょうのイメージ

それでは簡単にCSSの実践をしてみましょう。
HTMLとは?Web開発に必要なマークアップ言語の書き方【初心者向け】の最後に作成したHTMLファイルを使用して装飾していきます。

pointHTMLのサンプルコード
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>このWebページのタイトル</title>
</head>

<body>

<header>
<h1>2018年 最初に作るWebページ</h1>
<p>それはインターネットを通じて世の人々に自分の意見・サービスを発信できるからだ。<br>
<nav>
<ul class=”cf”>
<li><a href=”*”>ホーム</a></li>
<li><a href=”*”>HTML</a></li>
<li><a href=”*”>CSS</a></li>
</ul>
</nav>
</header>
<div id=”containar” class=”cf”>
<div id=”content”>
<section>
<h2>Webページを作るにはHTMLとCSSが必要だ</h2>
<p>ホームページはHTMLとCSSで構成されている。<br>高度になればPHPやjavascriptなども使用する。</p>
<img src=”http://placehold.it/100×100″>
</section>
</div>
<aside>
<ul>
<li><a href=”*”>HTML5とは</a></li>
<li><a href=”*”>CSS3.0とは</a></li>
<li><a href=”*”>CMSとは</a></li>
</ul>
</aside>
</div>
<footer>
<address>
© Copyright 2018年 最初に作るWebページ. All rights reserved.
</address>
</footer>

</body>

</html>

このHTMLの上に<link rel=”stylesheet” href=”CSSファイルのパス” type=”text/css”> を記述して、外部のCSSファイルを読み込むようにしましょう。
※HTMLファイルを作る方法と同じで、テキストエディタで新規作成と保存をして、保存するファイル名を任意のものに、拡張子を.cssにしましょう。

それでは下記に今回使用するCSSを記述するので、先ほど作成した外部CSSファイルに以下をコピペしてみよう。

pointCSSのサンプルコード
@charset “utf-8”;

* {
padding: 0px;
margin: 0px;
list-style: none;
}
body {
background: #efefef;
}
header {
width: 800px;
margin: 15px auto 0 auto;
border: 1px solid #ccc;
background: #fff;
padding: 20px;
}
p {
color: #333333;
font-size: 13px;
}
nav ul {
margin: 15px 0 0 0;
}
nav ul li {
float: left;
margin: 0 15px 0 0;
}

a {
text-decoration: none;
color: #0000ff;
}
a:hover {
text-decoration: underline;
color: #000099;
}

#containar {
width: 800px;
margin: 15px auto 0 auto;
border: 1px solid #ccc;
background: #fff;
}
#content {
width: 578px;
background: #fff;
float: left;
padding: 20px;
}
aside {
float: right;
background: #efefef;
width: 220px;
padding: 20px;
}

footer {
margin: 15px 0 0 0;
}
footer address {
font-style: normal;
font-size: 13px;
text-align: center;
}

/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: “”; display: table; }
.cf:after { clear: both; }
*{
list-style: none;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.clear {
clear: both;
}
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display:block;
}
/* End hide from IE-mac */

変更が出来ましたら、ブラウザで確認してみましょう。
上手く反映しているでしょうか?
もしできていない場合CSSが読み込めていない可能性が高いので、見直しましょう。

CSSは外部ファイルを読み込むことでHTMLに直接CSSを書き込んでいくよりも効率がよく、修正なども効率よく出来るようになります。
またCSSさえ使いこなせれば高度なデザインを実現できるので、今からホームページを作ってみたい人は是非使ってみましょう。

もし独学に限界を感じたら

もし独学に限界を感じたらのイメージ

Web開発をするうえでCSSは必須といっていいほど基本的な言語になります。
独学で勉強している方や、これから勉強する人でなかなか思うように身にならず、メンターをつけてしっかりと勉強したいという方も多くいると思います。

そんな方は是非以下の記事をお読みください。

ホームページ制作のお悩みがある方はお問い合わせ下さい

以下のようなお悩みがある方やホームページ制作をご検討されている方はWCLにご相談ください!

  • スマホに対応したWebサイトを作りたい。
  • しっかり集客出来るホームページを制作したい。
  • Webに力を入れたいけど知識がないので何もわからない。
  • どこでホームページ制作を依頼したらいいのかわからない。
  • ホームページが古いのでリニューアルしたい。
  • 新しく事業を展開するのでコーポレートサイトが必要
  • 以前制作会社に依頼したが改善が見込めない。