今さら聞けない!CSSとは【初心者向け】現役Webデザイナーが解説

「CSS」とは何なのかを超初心者向けに解説した記事です。今さら知らないなんて言えない・・という方はお読みください。技術的な表現はなるべく使わないようにしているので、プログラミングやWebデザインの事前知識は不要です。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

本記事では、これからプログラミングやWebデザインを勉強したいという方向けに「CSSとは何か」について分かりやすく解説します。

 

「CSSが分からないけど今さら聞けないよな…」
「CSSってなんで必要なんだろう…」
「どうやってCSSを書いたらいいんだろう…」

 

上記のような疑問や悩みを感じている方は、最後まで読んでいただければ「CSSとは何か」を理解できますのでぜひ参考にしてみてください。

目次

 

大石ゆかり

田島メンター!!CSSは何を行うものなんですか~?

田島悠介

CSSの役割はサイトの「見た目」を作ることだよ。

音声による読み上げや印刷時に関する設定もできるけれど、一番多く使われる役割はWebページのデザインやレイアウトなど「見た目」に関する指定だね。

大石ゆかり

見た目というと文字や画像の大きさ、色などですか?

田島悠介

そうだね。

実際のサイトで、CSSが適用されている場合とそうでない場合の違いを見てみよう。

 

CSSとは

CSSとは「Cascading Style Sheets」 の頭文字をとったものであり、スタイルシートとも呼ばれます。

 

HTMLは見出しやヘッダー情報などWebページの文書構造を形作るための言語です。

対してCSS言語は、HTMLで作られた文書構造にデザインを加えて見栄えを整える役割を担っています。

 

WebページはHTMLとCSSが組み合わさって作られているのです。

webページ

 

 

実際に、ブラウザでWebページを表示してみましょう。

(ここでは、例としてキラメックス株式会社のWebサイトを開いています)

トップページ

上記のページはHTMLとCSSとの両方を使って作られています。

画像が入っていたり文字を緑の枠で囲んでいたりと見栄えが良くなるようデザインされていますよね。

 

 

試しに上記のページからCSSを除き、HTMLの文書構造のみを表示させてみましょう。

文書構造

かなり簡素なページになりましたね。

 

たまにWebページの読み込みがうまくいかない場合など、このような画面が表示されたことがある人もいるのではないでしょうか。

 

キレイに整ったデザインのWebページを表示するためには、HTMLにCSSを加える必要があるのが分かりますね。

 

田島悠介

CSSを適用していない場合のサイトを見るとどうかな?

大石ゆかり

見出しと文字がただ順番に書かれただけになって、画像の位置や大きさもなんだか変わっちゃいましたね。

田島悠介

これらのレイアウトやデザインを指定しているのがCSSになるんだ。

今見ているのは、HTMLだけで構成された状態の文書だね。

大石ゆかり

見やすいページを作るのに、CSSはとても大事なんですね。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

CSSファイルの作り方

CSSファイルの作り方の手順をご紹介しましょう。

ファイル名に拡張子の「.css」をつけることで、CSSファイルとしてコンピュータが認識してくれます。

 

拡張子とは

拡張子とは、ファイルの種類を分かりやすく判別するために使われる文字列です。

みなさんも普段使うWordやExcelなども以下のような拡張子で表示されます。

  • Word:.docx
  • Excel:.xlsx
  • 文書:.pdf
  • 画像ファイル:.jpeg

 

CSSファイル作成の手順

CSSファイルの作成は以下の手順で行います。

  1. 新規フォルダを作成
  2. 作成したフォルダ名の最後に「.css」と書く

練習でCSSファイルを作成する場合は「test.css」や「style.css」など、分かりやすい名前を付けてあげましょう。

 

実際に以下の画像のように「.css」のファイルを作成してみます。

保存ダイヤログ画面

上記のように簡単にCSSファイルが作成できますので、実際に手を動かしてみて作成してみましょう。

 

CSSを実際に書く方法

先ほど作成した「style.css」ファイルを使って、実際にCSSを書いてみましょう。

 

まずは、HTMLファイルを用意します。

CSSをHTMLファイルに読み込ませるために、<head></head>で囲まれた部分

<link rel="stylesheet" href="style.css">

といった一文を以下の画像のように入れます。

スクリーンショット 2016-05-30 16.34.11

<link rel="stylesheet" href="style.css">を書くことで、HTMLに「style.css」ファイルがリンクされ、CSSの指定をHTMLでも読み込んでくれるようになります。

 

 

では実際に、以下のような緑色の背景に白色で「TechAcademy」という文字を表示させるCSSの指定を書いてみましょう。

スクリーンショット 2016-05-30 16.54.49

 

編集は以下の手順で行います。

  1. HTMLファイルを編集
  2. CSSファイルを編集

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

 

HTMLファイルの編集

まずはHTMLファイルの編集です。

<body></body>で囲まれた部分に表示させたい文章を書いていきましょう。

 

コードを書く際、CSSを適用させる場所を分かりやすくするため、緑色の背景を表示させるための「main」という枠と、文字を表示させる「text」という枠を用意します

完成されたページで見ると、以下のように分けています。

スクリーンショット 2016-05-30 16.54.49

 

用意した枠にそれぞれ「クラス名」を設定してあげます。

クラス名とは「class=”○○”」というように表記されたCSSを適用させるためのタグのことです。

 

 

今回はbodyタグ内に、「main」と「text」のクラス名をそれぞれ以下のように記述します。

HTMLの記述に自信がない方はHTMLとは」という記事も合わせてお読みください。)

スクリーンショット 2016-05-30 16.55.34

以上でHTMLの編集は終了です。

 

CSSファイルの編集

続いて、CSSファイルの編集です。

 

HTMLの編集で全体を囲む「main」クラスと、文字を表示させる「text」クラスを用意しましたね。

それぞれのクラスに幅や配色などのデザインを「style.css」に指定していきましょう。

 

今回は背景と文字のデザインを以下のように指定しましょう。

  • 背景色:緑
  • 高さ:200px
  • 幅:100%
  • テキストの位置:センター
  • フォントサイズ:36px
  • テキストの色:白

上記の内容を「style.css」に以下のように記述していきます。

スクリーンショット 2016-05-30 16.55.08

CSSファイル内では、クラス名の名前の前に「.」を付けて表現するのが決まりですので覚えておきましょう。

 

 

上記のようにCSSを指定すると以下のようなページが表示されます。

スクリーンショット 2016-05-30 16.54.49

 

はじめはCSSの記述と完成イメージがうまく結びつかず、思うようにレイアウトやデザインが出来ない場合も多々あるでしょう。

しかし、繰り返し練習していくと慣れていきますので何度も試しながら学習していきましょう。

 

執筆してくれたメンター

ノマ リカ

印刷会社の校閲部門に半年、DTPオペレータとして4年間経験を積んだ後、Web制作会社にて8年間デザイナーとして従事。

現在は住宅メーカーに勤務しながら社内のSE及びWeb担当として従事しています。

 

田島悠介

CSSに関する基本的な構造だよ。

大石ゆかり

「main」の部分、「text」の部分それぞれに色や大きさの指定をしているんですね。

田島悠介

この「.main」「.text」のようなスタイルを適用させる範囲の指定を「セレクタ」というんだ。

まずはこれを覚えておこう。

大石ゆかり

頭に入れておきます。

ありがとうございました!

 

CSSを実際に書いてみたい場合は、CSSの書き方の記事も合わせてお読みください。

またHTMLとは」という記事も読んでおくと、よりHTMLの理解も深まりますのでおすすめですよ。

 

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!