【プログラミング入門】「CSS」について５分で解説！｜プログラミング未経験からITエンジニアになろう

こんにちは！たわし系エンジニアのユウキといいます。

僕は１７年以上プログラミングで飯食っているITエンジニアです。

Webプログラミングの学習であなたが最初に出会うのが「HTML」、そして次は「CSS」ですね。

ホームページを作るにはHTMLとCSSを一緒に覚える必要があるの？

CSSって結局何？覚えたら何ができるの？

こんな疑問を持つプログラミング初心者や、ホームページを作りたいあなたのために

「CSS」について超簡単に５分で解説します。

CSS３つの何
CSSを覚えるメリット
CSSを体験しよう

CSS３つの何

CSSは何の略？

Cascading Style Sheets

カスケーディング・スタイル・シート

の略で「CSS」です。

ホームページのスタイルを指定するためのプログラミング言語です。

たわしむし

「ホームページ」と「Webページ」広義では同じ意味やし、これ以降は「Webページ」で表現するで。

プログラミング言語というと少し違和感はありますが、Webページを作成するための「HTML」と一緒に使用する言語です。

そのままスタイルシート言語ということもあります。

今あなたが観ているこのページもCSSが使用されています。

ほとんどのWebページがCSSがないと想像以上に無残な見た目になります。

CSSは何で出来てる？

CSSは、セレクタ・プロパティ・値の書式からできています。

こんな感じですね。

/* セレクタ {プロパティ:値;} */
div {font-size:20px;}

セレクタとはスタイルシートを適用する対象のことです。

セレクタは、上記のように、HTMLのタグを指定したり、自由な名称で作成したクラス名やID名で指定することも可能です。

プロパティとは適用するスタイルの種類のことです。

文字サイズや色などをはじめ、覚えきれないほどの様々なプロパティが用意されています。

値には、たとえば文字サイズならそのサイズを指定します。

プロパティによって値の指定が変化します。

CSSで何が出来る？

先述したように、Webページの作成に「CSS」を使用します。

Webページには「HTML」、「CSS」、それと「JavaScript」がほぼ使われています。

Webページをラーメンで例えると

HTMLで器、麺、スープ、チャーシュー、ネギと材料を表現し、

CSSで黒い器、細麺、豚骨スープ、大きなチャーシュー、白髪ネギと材料に装飾を追加し、

JavaScriptで器から湯げが出て、麺は固め、とろとろのスープ、口どけのチェーシュー、シャキシャキのネギと材料に動きを付けます。

【プログラミング入門】「HTML」について５分で解説！初心者向けに、プログラミング入門として「HTML」について5分で読める程度にまとめました。簡単なサンプル付きです。...

【プログラミング入門】「JavaScript」について５分で解説！初心者向けに、プログラミング入門として「JavaScript」について5分で読める程度にまとめました。簡単なサンプル付きです。...

CSSを覚えるメリット

CSSはHTMLといっしょに必然的な学習

Webページを作成したいあなたは「HTML」を学習しますよね。

この「CSS」も必然的に学習することになるはずです。

いっしょに学習することができるのでなんか得した気がします。

「CSS」は「HTML」と一緒に学びましょう。

「HTML」と同じく、PCがあれば特別なツールやソフトが必要なく学習が可能です。

もし「CSS」だけに特化して深く学習する場合は、「HTML」は基本的なことさえ理解できていれば「CSS」だけの学習は可能です。

CSSはWebページを作るのに必要

大事なので繰り返しますが、ほとんどのWebページにCSSが使われています。

これからWebプログラミングを始めようと思っているあなたに必要な知識になります。

HTMLを学習しつつ、CSSやJavaScriptも合わせて覚えるのがこれからのあなたに必要な学習手順になります。

CSSは入門書、ネット上に情報が豊富

CSSは歴史が長く、書籍やインターネット上にCSSについての情報が豊富にあります。

ぶっちゃけ書籍は買わなくてもいいです。

CSSのプロパティの種類やセレクタの使い方を説明したサイトがたくさんあるので、ググってあなたにあったサイトを１つお気に入りに追加しておきましょう。

もし買うならこんなHTMLとCSSについて簡潔に解説しつつ、実習機能がある書籍が失敗しない。

スラスラわかるHTML＆CSSのきほん第2版 [ 狩野祐東 ]

下手にデザインや、マインドを語ってる書籍は、あなた向けではないので注意してください。

リファレンスサイトについては、最後にリンクはってます。

CSSを体験しよう

メモ帳とブラウザがあればOK

Windowsならメモ帳、Macならテキストエディット

拡張子を指定して文章を保存できるテキストエディタであればなんでもいい。

そのテキストエディタでCSSを書いて、ファイル名の拡張子を「.css」にして保存する。

たとえば、「style.css」で作成した場合は、HTMLファイル内で外部ファイルとして読み込みます。

<!DOCTYPE html>
<html>
<head>
<title>こんにちはCSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSSはじめました</h1>
<p>CSSを外部ファイルに読み込みます</p>
</body>
</html>

このHTMLファイル名の拡張子を「.html」にして保存する。

これをダブルクリックするか、ブラウザで開くと作成したHTMLとCSSをすぐに確認できます。

CSSの指定方法は３つ

CSSでHTMLにスタイルシートを適用するには、大きく3つの方法があります。

外部CSSファイルで適用
<sytle>～</style>タグを利用してHTMLに適用
HTML要素にstyle属性で直接適用

外部CSSファイルで適用

先述したのと同じですが、「style.css」でCSSファイルを作成します。

そのファイルを読み込むことでHTMLに適用します。

href=”このなかにHTMLから見える相対パスを指定する“

<!DOCTYPE html>
<html>
<head>
<title>こんにちはCSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSSはじめました</h1>
<p>CSSを外部ファイルに読み込みます</p>
</body>
</html>

<sytle>～</style>タグを利用してHTMLに適用

別ファイルにせず、直接HTML内に定義して適用する方法です。

<!DOCTYPE html>
<html>
<head>
<title>こんにちはCSS</title>
<style type="text/css">
p {font-size: 32px;}
</style>
</head>
<body>
<h1>CSSはじめました</h1>
<p>CSSをHTML内で定義します</p>
</body>
</html>

HTML要素にstyle属性で直接適用

HTMLの要素のstyle属性を利用し、直接スタイルシートを適用する方法です。

<!DOCTYPE html>
<html>
<head>
<title>こんにちはCSS</title>
</head>
<body>
<h1>CSSはじめました</h1>
<p style="font-size: 32px;">CSSを直接指定します</p>
</body>
</html>

よく使う基本的なCSSプロパティ

font-size

p {font-size: 32px;}

文字サイズを指定するプロパティ

値には、数字をそのまま指定したり、％で指定したり、固定ワードで指定可能です。

<p style="font-size: 32px;">font-size: 32px</p>
<p style="font-size: 80%;">font-size: 80%</p>
<p style="font-size: x-large;">font-size: x-large</p>

↓

font-size: 32px

font-size: 80%

font-size: x-large

color

p {color: red;}

文字色を指定するプロパティ

値には、RBGで指定したり、色固定ワードで指定可能です。

RGBの指定方法も色々ありますが、#00ff00のような指定が一般的。

<p style="color: red;">color: red</p>
<p style="color: #00ff00;">color: #00ff00</p>
<p style="color: rgb(0, 0, 255);">color: rgb(0, 0, 255)</p>

↓

color: red

color: #00ff00

color: rgb(0, 0, 255)

background-color

p {background-color: red;}

背景色を指定するプロパティ

値には、colorと同じ指定方法を使います。

<p style="background-color: red;">background-color: red</p>
<p style="background-color: #00ff00;">background-color: #00ff00</p>
<p style="background-color: rgb(0, 0, 255);">background-color: rgb(0, 0, 255)</p>

↓

background-color: red

background-color: #00ff00

background-color: rgb(0, 0, 255)

text-align

p {text-align: center;}

文字の配置位置を左、中央、右で指定するプロパティ

値には、固定ワードで指定可能です。

<p style="text-align: left;">text-align: left</p>
<p style="text-align: center;">text-align: center</p>
<p style="text-align: right;">text-align: right</p>

↓

text-align: left

text-align: center

text-align: right

width、height

td {width:100px; height:150px;}

テーブルの幅や高さ、画像やボタンにも使う。

値には、数字をそのまま指定したり、％で指定します。

<table>
<tr>
<td style="width:20%;">width:20%</td>
<td style="width:30%;">width:30%</td>
<td style="width:50%;">width:50%</td>
</tr>
<tr style="height:150px;">
<td colspan="3">height:150px</td>
</tr>
</table>

↓