今さら聞けない！CSSとは【初心者向け】現役Webデザイナーが解説
「CSS」とは何なのかを超初心者向けに解説した記事です。今さら知らないなんて言えない・・という方はお読みください。技術的な表現はなるべく使わないようにしているので、プログラミングやWebデザインの事前知識は不要です。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSとは何かについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
「CSSが分からないけど今さら聞けないよな…」
「CSSってなんで必要なんだろう…」
「どうやってCSSを書いたらいいんだろう…」
上記のような疑問や悩みを感じている方は、最後まで読んでいただければ「CSSとは何か」を理解できますのでぜひ参考にしてみてください。
目次
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
田島メンター！！CSSは何を行うものなんですか～？
CSSの役割はサイトの「見た目」を作ることだよ。
音声による読み上げや印刷時に関する設定もできるけれど、一番多く使われる役割はWebページのデザインやレイアウトなど「見た目」に関する指定だね。
見た目というと文字や画像の大きさ、色などですか？
そうだね。
実際のサイトで、CSSが適用されている場合とそうでない場合の違いを見てみよう。
CSSとは
CSSとは「Cascading Style Sheets」 の頭文字をとったものであり、スタイルシートとも呼ばれます。
HTMLは見出しやヘッダー情報などWebページの文書構造を形作るための言語です。
対してCSS言語は、HTMLで作られた文書構造にデザインを加えて見栄えを整える役割を担っています。
WebページはHTMLとCSSが組み合わさって作られているのです。
実際に、ブラウザでWebページを表示してみましょう。
（ここでは、例としてテックアカデミーのWebサイトを開いています）
上記のページはHTMLとCSSとの両方を使って作られています。
画像が入っていたりリンク部分をボタンのように装飾したり、見栄えが良くなるようデザインされていますよね。
試しに上記のページからCSSを除き、HTMLの文書構造のみを表示させてみましょう。
かなり簡素なページになりましたね。
たまにWebページの読み込みがうまくいかない場合など、このような画面が表示されたことがある人もいるのではないでしょうか。
キレイに整ったデザインのWebページを表示するためには、HTMLにCSSを加える必要があるのが分かりますね。
CSSを適用していない場合のサイトを見るとどうかな？
見出しと文字がただ順番に書かれただけになって、画像の位置や大きさもなんだか変わっちゃいましたね。
これらのレイアウトやデザインを指定しているのがCSSになるんだ。
今見ているのは、HTMLだけで構成された状態の文書だね。
見やすいページを作るのに、CSSはとても大事なんですね。
CSSファイルの作り方
CSSファイルの作り方の手順をご紹介しましょう。
ファイル名に拡張子の「.css」をつけることで、CSSファイルとしてコンピュータが認識してくれます。
拡張子とは
拡張子とは、ファイルの種類を分かりやすく判別するために使われる文字列です。
みなさんも普段使うWordやExcelなども以下のような拡張子で表示されます。
- Word：.docx
- Excel：.xlsx
- 文書：.pdf
- 画像ファイル：.jpeg
CSSファイル作成の手順
CSSファイルの作成は以下の手順で行います。
- 新規フォルダを作成
- 作成したフォルダ名の最後に「.css」と書く
練習でCSSファイルを作成する場合は「test.css」や「style.css」など、分かりやすい名前を付けてあげましょう。
実際に以下の画像のように「.css」のファイルを作成してみます。
上記のように簡単にCSSファイルが作成できますので、実際に手を動かしてみて作成してみましょう。
CSSを実際に書く方法
先ほど作成した「style.css」ファイルを使って、実際にCSSを書いてみましょう。
まずは、HTMLファイルを用意します。
CSSをHTMLファイルに読み込ませるために、<head>と</head>で囲まれた部分に
<link rel="stylesheet" href="style.css">
といった一文を以下の画像のように入れます。
<link rel="stylesheet" href="style.css">を書くことで、HTMLに「style.css」ファイルがリンクされ、CSSの指定をHTMLでも読み込んでくれるようになります。
では実際に、以下のような緑色の背景に白色で「TechAcademy」という文字を表示させるCSSの指定を書いてみましょう。
編集は以下の手順で行います。
- HTMLファイルを編集
- CSSファイルを編集
では、順番に見ていきましょう。
HTMLファイルの編集
まずはHTMLファイルの編集です。
<body>と</body>で囲まれた部分に表示させたい文章を書いていきましょう。
コードを書く際、CSSを適用させる場所を分かりやすくするため、緑色の背景を表示させるための「main」という枠と、文字を表示させる「text」という枠を用意します。
完成されたページで見ると、以下のように分けています。
用意した枠にそれぞれ「クラス名」を設定してあげます。
クラス名とは「class=”○○”」というように表記されたCSSを適用させるためのタグのことです。
今回はbodyタグ内に、「main」と「text」のクラス名をそれぞれ以下のように記述します。
（HTMLの記述に自信がない方は「HTMLとは」という記事も合わせてお読みください。）
以上でHTMLの編集は終了です。
CSSファイルの編集
続いて、CSSファイルの編集です。
HTMLの編集で全体を囲む「main」クラスと、文字を表示させる「text」クラスを用意しましたね。
それぞれのクラスに幅や配色などのデザインを「style.css」に指定していきましょう。
今回は背景と文字のデザインを以下のように指定しましょう。
- 背景色：緑
- 高さ：200px
- 幅：100％
- テキストの位置：センター
- フォントサイズ：36px
- テキストの色：白
上記の内容を「style.css」に以下のように記述していきます。
CSSファイル内では、クラス名の名前の前に「.」を付けて表現するのが決まりですので覚えておきましょう。
上記のようにCSSを指定すると以下のようなページが表示されます。
はじめはCSSの記述と完成イメージがうまく結びつかず、思うようにレイアウトやデザインが出来ない場合も多々あるでしょう。
しかし、繰り返し練習していくと慣れていきますので何度も試しながら学習していきましょう。
執筆してくれたメンター
| ノマ リカ
印刷会社の校閲部門に半年、DTPオペレータとして4年間経験を積んだ後、Web制作会社にて8年間デザイナーとして従事。 現在は住宅メーカーに勤務しながら社内のSE及びWeb担当として従事しています。 |
CSSに関する基本的な構造だよ。
「main」の部分、「text」の部分それぞれに色や大きさの指定をしているんですね。
この「.main」「.text」のようなスタイルを適用させる範囲の指定を「セレクタ」というんだ。
まずはこれを覚えておこう。
頭に入れておきます。
ありがとうございました！
CSSを実際に書いてみたい場合は、CSSの書き方の記事も合わせてお読みください。
また「HTMLとは」という記事も読んでおくと、よりHTMLの理解も深まりますのでおすすめですよ。
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
