【初心者向け】CSS入門者のために書き方を分かりやすく解説！

【初心者向け】CSS入門者のために書き方を分かりやすく解説！

ホームページやブログなどのWebサービスをはじめる際に、HTML言語とセットで登場してくるCSS。 あそこの幅を縮めて、画像を中央に寄せて、とペーパーベースではすぐにできることもWebの世界では思うようにいかないことも多いはず。

そこで今回は、プログラミング初心者の方でもCSSを操れるように、レイアウトやデザインのカスタマイズ手順をまとめました。 文末には無料ブログサイトのCSSを編集して、自分好みのデザインに変更する内容もご紹介していますので、お楽しみ下さい！

目次
  1. CSSとは？
  2. CSSの書き方
  3. CSSをはじめる前に
  4. CSSの見方
  5. CSSはどこに書くの？
  6. CSSセレクタとは？
  7. セレクタとは
  8. CSSセレクタの種類① HTMLタグ
  9. CSSセレクタの種類② class
  10. CSSセレクタの種類③ id
  11. CSSのプロパティと値
  12. 実際にプロパティや値を操作してみる
  13. CSSの編集コード
  14. CSSのコメントアウトについて
  15. CSSを学習できるサイト
  16. CSSのオススメ本
  17. まとめ

CSSとは？

image まずはじめにCSSについて簡単にご紹介します。

CSSは、ホームページやブログサイトなどで使われているプログラミング言語の一種で、スタイルシート言語という種類に分類されます。 主な用途としては、HTMLで定めた文字の大きさや色を変えたり、画像表示位置を調整したり、それからホームページ全体のレイアウトやスマホサイトのレイアウトを作るために使われているんですね。

このようなことからCSSは、ホームページの見た目に直結してきますので、これから何かWebサービスをはじめようと考えている方にとっては必須の知識といえるでしょう。 尚、現在のところCSSに変わる言語はなく、今後もCSSはWebサイトの装飾を担っていくと考えられています。

CSSの書き方

image CSSをいじってみたい！ と思っても、最初のうちは何から始めればいいか分かりませんよね。 こちらでは順を追ってCSSの書き方をご紹介し、最終的にはライブドア・ブログのテンプレートを自分スタイルにカスタマイズする方法をご紹介します。 飛ばし読みすると分からなくなるので、お時間のある時にご参考下さい。

CSSをはじめる前に

CSSを始める前に必要な道具（ソフト）を整理します。

①テキスト・エディタ
HTMLを既に学習されている方はお手元のエディタをご利用下さい。テキスト・エディタをまだお持ちでない方は、Microsoft社提供のVisual Studio CodeやCotEditor for Mac、Atomなどお好みのソフトをご用意下さい。

②ブラウザ
利用するブラウザによってCSSのはかどり具合は違ってきます。CSSプログラマがよく利用するブラウザの Google Chromeをオススメします。まだの方はchromeをダウンロードして、インストールして下さい。 尚、SafariはCSSを検証する機能が標準で利用できませんのでオススメしません。

CSSの見方

今はCSSのことがさっぱり分からなくても、CSSの記述例を見てみるとCSSのことや書き方がイメージできると思います。まずは今見ているホームページの何がCSSで、どうやって確認するのか、方法を知っておきましょう。

■CSSの確認方法、見方■

  1. 気になるホームページの画面上で右クリック
  2. ページのソースを表示を左クリック

Yahoo!Japan さんの場合 image

上から14行目付近に <style type="text/css"> とCSSに関する記述があることが分かりますね。こちらの場合は、 <style type="text/css"> 以降、 </style> までの15行目にどっさりCSSが記述されていることが分かります。

Tech2GOの場合

image

先ほどのYahoo!Japanさんと違って、Tech2GOのHTMLコードを確認してもCSSらしき記述は見当たりません。こちらの場合は、トップページにCSSを直接書いているのではなく、専用のCSSファイルを読み込んでCSSコードを実行しています。16行目に <link rel="stylesheet" med・・・・・・　a6662e0.css　と書かれていることが確認できると思います。CSSのファイル名をクリックするとCSSファイルの中身を確認できますので、試しに覗いてみて下さい。

このように実は普段利用しているWebページのCSSは、だれでも確認することができます。ちょっと気になるデザインやレイアウトがあったら右クリック、してみたいですね。

CSSはどこに書くの？

先ほどの Yahoo!JapanさんとTech2GOではCSSの書き方やコードの読み込み方が違いましたね。 こちらではCSSの基本的な記述方式を確認してみたいと思います。

■HTMLファイル内に書く方法（style要素）■
image こちらはYahoo!Japan さんの方式で、HTMLのヘッダー内に <style> 要素を準備して、CSSを書きます。

この書き方のメリットは、記述するCSSがどのHTML要素に働きかけるのか分かりやすく、プログラミング初心者でもCSSを管理・編集しやすいです。しかし、商品紹介やブログサイトのような同じようなデザインのページが複数に及ぶ場合、CSSをちょっと変えようにも全てのページのCSSコードを編集する必要がでてきて、大変なんですよね。

この非効率な作業は、次の「CSSファイル内に書く方法」によって解決されます。

■CSSファイル内に書く方法（link要素）■
image Tech2GOをはじめ、多くのホームページ、ブログサイトがこの方式を用いてCSSを管理・運営されています。 HTMLファイルとは切り離してCSSを管理していますので、最初の内は分かりにくいですが、一度実際にCSSファイルを作って、HTMLで読み込むようにコードを書いてみると、一気に理解が進みます。 よろしければ以下の手順に沿って、HTMLファイルを作ってみて下さい。

作業目安時間　5分

① 今回テストする専用フォルダを用意する。例えば、デスクトップに「CSSテスト」など
② テキストエディタの起動
③ こちらのHTMLコードをコピペ

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="linear-wipe">YES!CSS</h1>
</body>
</html>

④「名前を付けて保存」で、ファイル名を例えばcss-test.htmlにして、①で作ったフォルダ内に保存する
⑤ テキストエディタから新規作成で白紙ページを用意
⑥ こちらのCSSコードをコピペ

html {
  height: 100%;
}
body {
  background: #333;
  text-align: center;
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
h1 {
  font-size: 20vw;
}
.linear-wipe {
  text-align: center;
  background: -webkit-linear-gradient(left, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);
  background: linear-gradient(to right, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);
  background-size: 200% auto;
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: shine 1s linear infinite;
          animation: shine 1s linear infinite;
}
@-webkit-keyframes shine {
  to {
    background-position: 200% center;
  }
}
@keyframes shine {
  to {
    background-position: 200% center;
  }
}
/*参考：http://codepen.io/shshaw/pen/YpERQQ*/

⑦「名前を付けて保存」で、例えば style.css として、①で作ったフォルダ内に保存する
⑧ css-test.htmlファイルをブラウザで開く（HTMLファイルをブラウザにドラッグ＆ドロップしても可）
⑨ 右クリックで「ページのソースを表示」してみる

【①から⑨までの手順を動画でご紹介】

■HTMLタグ内に書く方法（style属性）■
こちらは部分的にスタイルを編集したい場合に用いる手法です。HTMLタグにstyle要素を直接加えます。 参考程度に知っておきましょう。 image

【サンプルコード】ファイル名： css-style-zokusei.html

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 style="background-color:blue;color:white;">YES!CSS</h1>
<div style="background-color:green;color:white;">YES!CSS</div>
<a style="background-color:red;color:white;" href="https://codecamp.jp" target="_blank">YES!CSS</a>
</body>
</html>

結果


YES!CSS

YES!CSS
YES!CSS

　


はい、CSSを少し体験したところで、中身についてもう少し詳しく見ていきたいと思います。 まずはCSSがどのHTMLの要素に働きかけるか、という命令指定（セレクタ）について触れていきますね。

CSSセレクタとは？

セレクタとは

CSSのセレクタ（CSS Selectors）は、スタイルを設定する要素を決めるための作業になります。 例えば、見出しの <h2> タグやボタンの <button> タグなどです。 CSSセレクタの種類は全部で50種類以上ありますが、今回は最低限知っておきたい3つのセレクタについてご紹介します。

CSSセレクタの種類① HTMLタグ

HTMLタグのセレクタは、最も基本的な形で、よく使います。HTML要素の <h1> や <h2> 、<div> や <a> 、 <img> 、 <p> といった一応のタグを指定して、スタイルを編集することが可能です。

■CSSセレクタ　HTMLタグの例■
① 今回お試しするための専用フォルダを作成します。
② 下のHTMLコードをエディタにコピペして、①で作成したフォルダ内に名前を付けて保存します。（ファイル名　css-select-demo.html）

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>ようこそCSSの世界へ</h2>
<strong>がんばらないと・・・</strong>
</body>
</html>

③ 下のCSSコードをエディタにコピペして、①で作成したフォルダ内に名前を付けて保存します。（ファイル名　style.css）

h2{
    background-color:black;
    color:white;
}
strong{
    font-size:2em;
}

④ ②で作成した css-select-demo.htmlをブラウザで起動します。 image

このHTMLタグを利用したセレクタを少し使っていると気付くのですが、１つのページ内に <h3> タグが6つあり、それぞれのスタイルを指定したい場合、このやり方では個別スタイル指定が実現できません。 そこで登場してくるのが classセレクタによるスタイル指定です。

CSSセレクタの種類② class

classセレクタによるスタイルの実行は、以下のような記述で実行できます。先ほどと同じ要領で、専用フォルダを作って、HTMLファイルとCSSファイルを保存して見て下さい。

CSSコード

h3.top{color:red;}
h3.second{color:blue;}
h3.third{color:green;}

HTMLコード

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3 class=”top”>ようこそCSSの世界へ</h3>
<h3 class=”second”>ようこそCSSの世界へ</h3>
<h3 class=”third”>ようこそCSSの世界へ</h3>
<h3 class=”top”>ようこそCSSの世界へ</h3>
<h3 class=”second”>ようこそCSSの世界へ</h3>
<h3 class=”third”>ようこそCSSの世界へ</h3>
</body>
</html>

結果

image

CSSセレクタの種類③ id

こちらは参考までに知っておきたいセレクタで、特定の要素のみをスポット的にレイアウトするときに用います。 他サイトのCSSをチェックする際にidセレクタが登場するときもありますので、参考までに知っておきましょう。 尚、idセレクタはclassセレクタと違って、HTMLファイル内に1回しか使うことができません。

<!DOCTYPE html>
<html>
<head>
<style>
/*idコード*/
div#a {color: red;
}
/*classコード*/
.b {color: blue;
}
</style>
</head>
<body>
<div id="a">こんにちは</div>
<div id="a">こんにちは</div>
<div class="b">こんにちは</div>
<div class="b">こんにちは</div>
</body>
</html>

こちらのHTMLコードを実行するとidセレクタの文も全て表示されますが、構文的にはエラーが発生します。 またちょっとレベルが上がって、JavaScriptやjQueryでスタイルを編集するようになると、idセレクタが原因で致命的なエラーを発生するようになるので、注意が必要です。

以下にidセレクタとclassセレクタ部分を消すJavaScriptを実行して、比較検証してみます。

■CSSセレクタ■ class or id、which is better?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h2>CSSセレクタのclassとidの違い</h2>
<p>JavaScriptでスタイルの指定を行うと・・・</p>
<script>
$(document).ready(function(){
 $('#testID').fadeOut();
});
</script>
//id セレクタの場合、最初の文だけ消えます
<div id ='testID'>文1</div>
<div id ='testID'>文2</div>
<script>
$(document).ready(function(){
 $('.testCLASS').fadeOut();
});
</script>
//class セレクタの場合、全部が消えます
<div class='testCLASS'>文3</div>
<div class='testCLASS'>文4</div>
<p>つまりclassの方が、エラーが生じにくいです</p>
</body>
</html>

結果

image

いかがでしょうか？CSSのセレクタ、ご理解いただけましたでしょうか？

今回は文量的に紹介は控えますが、実際の開発現場ではclass名の名前の付け方や無駄遣いしないための作法などが必要になってきます。

CSSのプロパティと値

image

プロパティと値は、先ほどのセレクタの説明に続く形です。 セレクタでスタイルの場所を指定し、プロパティで指定した要素の何を変えたいかを指定し、値でどんな風にするか、を決めます。（上図参照）

実際にプロパティや値を操作してみる

ここではCSSに慣れてもらうために、代表的なプロパティを紹介していきましょう。 実際のモデルを使うと分かりやすいと思いますので、今回はライブドア・ブログを使ってブログのスタイルをカスタマイズしてみます。

今回実践するプロパティ・リスト

  • padding（余白）
  • margin（余白）
  • text-align（文字の表示位置）
  • background-color（背景色）
  • font-size（文字の大きさ）
  • border-bottom（線）
  • display（表示）
  • color（文字の色） などなど

事前に設定しているテンプレート
コントラスト*（ライブドア・ブログ）

最初の状態

image

操作ガイド

chromeブラウザの「検証」機能を使って、変更したいデザインのプロパティと値を検索していきます。
■検証機能の起動方法■
①chromeのブラウザ上で右クリック
②表示されるメニューの最下段「検証」をクリック
③あとは編集したい文字や余白の上で、右クリック→検証 としてみて下さい
image

編集するCSSコードの表示・保存は、『ライブドアブログのマイページ → ブログ設定 → デザイン/ブログパーツ設定のPC → カスタマイズ』 より操作が可能です。

それでは気になるデザインを一つずつ編集していきながら、CSSのプロパティと値を操作、ご紹介します。

CSSの編集コード

①タイトル部分の編集（その1）
タイトル部分の余白が大きく、ぼんやりとした印象になっているので、余白を狭くしてキュッと引き締まった印象に変更します。
編集するプロパティ／paddingとmargin

padding（パッディング）　ボーダーを堺にした内側の余白

margin（マージン）　ボーダーを堺にした外側の余白

#blog-title のパッディング値を54→27に変更します。
#blog-header #blog-header-image のマージン値( margin-top)を53→27に変更します。

②タイトル部分の編集 その2
タイトルを左寄りに変更します。
編集するプロパティ／text-align

text-align　文字の表示位置を指定

h1#blog-title のtext-align:centerを消します。

③ブログ・タイトルの編集
投稿記事のタイトルが分かりにくいので、カラーリングして目立たせます。
編集するプロパティ／background-color

background-color　背景色の設定

.article-title に background-color:#CCE5CC; を追加します。
文字位置が悪いので、 h1.article-title に padding-bottom: 5px; padding-top: 5px; padding-left: 5px; も追記します。

④文字サイズの編集
投稿記事文末の「コメント」の文字が小さいので大きくします。
編集するプロパティ／font-size

font-size　文字サイズを設定、単位にはpxをはじめ、emや % がよく使われる。

.article-sosial-btn にfont-size:16px; を追加します。

⑤枠線の編集
投稿の区切りを意味する枠線が分かりにくいので、枠線の色と太さを変えてみます。
編集するプロパティ／border-bottom

border-bottom　枠の下部分の設定

.article の border-bottom部分の 1pxを5pxに、#E4E4E4 を pink に変更します。

⑥画像位置の編集
画像を中央表示に変更します。
編集するプロパティ／display と margin

display　画像の横並びとか縦並びの指定など

新たに img { display: block; margin: 0 auto;} を追記します。

⑦購入ボタンの配置
ガリガリ君の購入を促す「ブルブルボタン」をCSSで実装します。
画像ベースのボタンに比べると、CSSの場合は文字の編集性に優れ、サイズや色なども柔軟に変更できる特徴があります。
編集するプロパティ／たくさん
新たに 下記CSSコードを追記して、HTML編集モードでガリガリ君コードを追加します。

CSS

.btn {
  display: block;
  width: 180px;
  height: 50px;
  font-size: 16px;
  color: #fff;
  background-color: #69A551;
  border-radius: 5px;
  box-shadow: 0px 3px 0px #3D8C72;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
  margin: 50px auto 0;
  font-weight: bold;
  -webkit-animation: btnWiggle 1s infinite;
  -moz-animation: btnWiggle 1s infinite;
  -o-animation: btnWiggle 1s infinite;
  animation: btnWiggle 1s infinite;
}

/* アニメーション */
@-webkit-keyframes btnWiggle {
    0% {-webkit-transform: rotate(0deg);}
    2% {-webkit-transform: rotate(-3deg);}
    3.5% {-webkit-transform: rotate(3deg);}
    5% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(0deg);}
}
@-o-keyframes btnWiggle {
    0% {-webkit-transform: rotate(0deg);}
    2% {-webkit-transform: rotate(-3deg);}
    3.5% {-webkit-transform: rotate(3deg);}
    5% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(0deg);}
}
@keyframes btnWiggle {
    0% {-webkit-transform: rotate(0deg);}
    2% {-webkit-transform: rotate(-3deg);}
    3.5% {-webkit-transform: rotate(3deg);}
    5% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(0deg);}
}
/*参考：http://codepen.io/scottmagdalein/pen/nJivc*/

HTML

<a class="btn" href="http://www.akagi.com/brand/garigarikun/index.html" target="_blank">ガリガリ君を買う</a>

後は、ボタンのリンク文字の色を調整するために、a:visited をコメントアウトし、無効にします。

/* 
a:visited {
    color: #999;
}
*/

【ここまで編集した時の状態】 image

いかがでしょうか、最初に比べると印象が変わったと思います。（実際のライブドアブログ）

CSSのコメントアウトについて

編集記録やスタイルの意味などをCSSコードに記述しておくと、後で編集が生じた際にスムーズに改修できます。こちらにコメントの書き方をご紹介しますね。

/* CSS書き換えたよ*/
h2{color:red;}

/* 複数行でも
一行でも
コメント記号は一緒です*/

CSSを学習できるサイト

今回CSSの基本的な書き方をご紹介させて頂きました。もっと詳しくCSSについて知りたくなった方へ、CSSの学習サイトをご紹介しますね。

＜／＞Markup

image

画像出典：</>Markup

CSSの学習に特化したサイトで、実際にCSSコードを入力しながら学習することができます。 jQueryとCSSとの連携は紹介されていますが、レスポンシブに関するチュートリアルはありません。

Pogate

image

画像出典：Progate

人気のプログラミング学習サイトでもCSSを学習することができます。実際のWebページを一から作るレクチャーで、基礎力が養われます。レスポンシブに関する記述もありますので、ページレイアウト全般を学べます。

CSS Diner

image

画像出典：CSS Diner

CSSのセレクタなど、CSSの基礎をテスト（学習）できるサイトになります。ブルブル動いているモノが何に乗っているか、というのをセレクタで表現します。レベル26までの答えはこちらにありますのでご参考下さい。

【詳しくはこちら】レベル別！無料でCSS が学習できるサイト9選

CSSのオススメ本

体系的にCSSを学習したい方、オフラインでCSSを学習したい方へ、オススメのCSS本を3冊ご紹介します。

いちばんよくわかるHTML5＆CSS3デザインきちんと入門

HTMLとCSSの基礎を丁寧に紹介し、プログラミング初学者でも迷わないように学習を進めていくことができます。レスポンシブ・デザインにも触れていますので、今風なCSSデザインの学習ができます。

HTML5 & CSS3 デザインレシピ集

こちらはCSSの基礎学習が終えた方にオススメしたい本で、「こんなことをしたい」という欲望に答えてくれる一冊になります。 ナビゲーションを上部で固定したいとか、画像の上に文字を重ねたいなど、CSS学習者として見過ごせないテクニックが多数紹介されています。

CSSシークレット 47のテクニックでCSSを自在に操る

こちらはCSS本の中では珍しい上級者向けの本になります。本著の視点は、「デザイン」ではなく「ソリューション」の方で、CSSで解決できる表現の方法が紹介されています。読者レビューを拝見すると「CSSでこんなこともできるんだ」と喜びの声が上がっています。

【詳しくはこちら】効果的な勉強方法とは？CSS初心者におすすめの書籍全9冊

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら

まとめ

今回CSSを知って、実際に体験してもらえるようにご紹介させて頂きました。 なんとか分かりやすい様に表現や画像を工夫しましたが、うまくいかなかった方もいらっしゃるかもしれません。

ネットで調べたり、一人で考えたりするのもいいですが、一度『先生に聞いてみる』 という効率的な方法もアリではないでしょうか。

CodeCampでは無料体験の中で、先生と一緒にHTMLとCSSに触れて、プログラミングを正しく体験することができます。「HTMLやCSSどうしようかな、分からないな」と悩む前に、自分で試したり、無料体験に申し込んだり、実践してみることをオススメします。

thumbnail:tomorca

関連記事

オシママサラ
この記事を書いた人
オシママサラ

人気記事

  1. 【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    プログラミング学習
    プログラミングスクール・サービス
  2. 塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    受講生インタビュー
  3. 様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    講師インタビュー
  4. 【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    Python
    プログラミング書籍・参考書
  5. 【PHP入門徹底ガイド】初心者のための学習ロードマップ
    【PHP入門徹底ガイド】初心者のための学習ロードマップ
    PHP
    プログラミング入門
  6. コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    Python
    HTML
    CSS
    お役立ち情報
    アプリ学習入門
  7. 【Twitter×Python】自分専用のエゴサーチボットを作る方法
    【Twitter×Python】自分専用のエゴサーチボットを作る方法
    Python
  8. Webデザインから見たSEO
    Webデザインから見たSEO
    Webデザイン入門
    Webデザインお役立ち情報
  9. 未経験からのWebデザイナー転職を有利にする資格４選
    未経験からのWebデザイナー転職を有利にする資格４選
    Webデザインお役立ち情報
    転職
まずは7日間お試し！人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp
プログラミング講座を無料で試す