プログラミング

ホームページを作りたいプログラミング初心者向けに「CSS」について5分で解説!

CSSとは

ホームページを作ろうとしているあなたが最初に出会うのが「HTML」、そして「CSS」ですね。

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

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

こんな疑問を持つプログラミング初心者や、

ホームページを作りたいあなたのために

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

CSS3つの何

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分で解説!プログラミング初心者や、ホームページ作成に取り組んでいこうとしているあなたが まず最初に聞く単語といえば、「HTML」ですよね。 ...
JavaScript初心者
ホームページを作るのに使うプログラミング入門でもある「JavaScript」について5分で解説!ホームページ作成するのに「HTML」を覚えたら「JavaScript」も使う必要が出てきたでしょ? ホームページを作るのにJa...

CSSを覚えるメリット

CSSメリット

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

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

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

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

「CSS」単独の学習はほぼ不可能なので、「HTML」と一緒に学びましょう

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

Webページを作るのに必要

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

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

HTMLを学習しつつ、CSSやJavaScriptも合わせて覚えるのが

これからのあなたに必要な学習手順になります。

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

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

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

CSSのプロパティの種類やセレクタの使い方を説明したサイトがたくさんあるので、

ググってあなたにあったサイトを1つお気に入りに追加しておきましょう。

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

下手にデザインや、マインドを語ってる書籍は、

あなた向けではないので注意してください。

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

CSSを体験しよう

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の指定方法は3つ

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>

width:20% width:30% width:50%
height:150px

学習方法

最後にHTMLを学習するために優良なサイトを紹介

progateのHTML講座

月額1000円ほどで楽しく学習可能。

基礎編だけなら無料で楽しむことも可能です。
https://prog-8.com/languages/html

リファレンスサイト

HTMLクイックリファレンス

とほほのWWW入門

では、この辺でおわります。

ユウキでした。