【超初心者向け・後半】CSSについて簡単に解説!HTMLとCSSとは何かを見てみよう!

【超初心者向け・後半】CSSについて簡単に解説!HTMLとCSSとは何かを見てみよう!

最近ではホームページやブログを誰でも簡単に作れるツールも発達してきて、自作している人も随分と増えてきましたよね。
難しい知識が無くても作れて、自分の情報を発信していけるので、とても便利ですよね。

ただ、自作をし始めると、もう少し自分の好みの設定にカスタマイズしてみたいと思ったりはしませんか?

デザインのカスタマイズをするためには最低限HTMLとCSSの知識が必要になります。
HTMLとCSSを学ぶことでリンクや画像の設置をできるようになったり、好みの見た目に変えたりすることができるようになります。

本格的に学ぶつもりはないけれど、ちょっとデザインを操作をできるようになりたいという方向けにHTMLとCSSについてのご紹介をします。

前回はHTMLについて紹介をしたので、今回は後半となるCSSについて紹介していきます。
前回のHTMLについてまだ見ていないという方はこちらをどうぞ!

BrandingCreator

HTMLとCSSについて、プログラミング学習サイトでは教えてくれないポイントもはさみつつ解説していきます!ひとつずつ理解…

CSSとは?

CSSとは?

CSSとはそもそも何なのか、どういう役割を担っているのかから簡単に見ていきましょう。

CSSは、カスケーディング・スタイル・シート(Cascading Style Sheets)と言い、頭文字を取ってCSSと呼ばれています。
CSSはWEBページの主に見た目部分を変えるために使われる言語で、HTML(HyperText Markup Language)と一緒に使われ、こちらもHTML同様、厳密にはプログラミング言語とは言わず、スタイルシート言語と呼ばれます。
CSSは、例えばホームページの背景や文字色を好きな色に変えたり、文字の大きさを変えたりしたい時などに使われる言語です。

一点注意をしたいのは、CSSは基本的には動きのないものにデザインをする際によく使われる言語だということです。

「動きのないものってどうゆうこと?」 とイメージしづらいかもしれないので、簡単なハンバーガーメニュー(三本線のメニューのこと指します)でサンプルを作成しました。
下の青と赤のメニューの画像を試しにクリックしてみてください。

青のボタンはクリックしても動きがなく、赤のボタンはクリックに反応して動いてくれましたね。

動きのあるものとは、プログラミングでプログラムを設定して操作毎に違う動きをしてくれるものと考えてください。
CSSでも見た目のデザイン表示だけをある程度動かすことはできるのですが、操作毎に違う動きをするようにプログラムをするということにはあまり向いていません。(一応近いことをできなくもないですが…)
CSSはあくまで見た目部分が動くだけのものであり、同じ一定の動きを繰り返すだけのものです。

基本的にはCSSは見た目デザインを変えるための言語と認識しておきましょう。

CSSの書き方

CSSの書き方

それでは、CSSの書き方を見ていきましょう。
書き方はHTMLと同じく至って単純です。

書き方は、「変化させたいタグ名 { 操作名 : 変化の値 ; }」と書きます。
(正しくは「セレクタ { プロパティ : 値 ; }」と言います)
「{}」、「:(コロン)」、「;(セミコロン)」をつけ忘れないようにしてくださいね。
つけ忘れるとCSSが反映されません。


実際にサンプルで確認してみましょう。

CSSサンプル

HTMLタグを選び、タグをどのように操作したいのかを指定し、どのように変化をさせたいのかを決めてあげるという流れです。

今回はdivタグを選び、高さと幅と背景色を操作しましたが、思っていたよりもそんなに難しいものではないでしょう?

CSSの指定方法

CSSの指定方法

ただタグの指定ばかりでは問題が出てきます。
以下のサンプルを見てみてください。

タグサンプル

pタグの色を赤に変化させるようとしたら、三行目の色を変えたくないところまで変わってしまいましたね。
このようにタグ名だけで指定をすると同じタグを使っている全てのタグにCSSが反映されてしてしまうのです。
これでは変えたくないところまで変わってしまうので、困りますね。

では、特定のものだけを変化させたい場合にはどうしたらいいのでしょうか?

そんな時はHTMLでタグに好きな名前をつけて変化させたいものだけを変えることができます。

操作対象の指定の仕方はいろいろとありますが、今回はクラス(class属性と言います)の指定の仕方だけ見てみましょう。

まず、クラスとはHTMLのタグに名前を付けてあげる機能を言います。 書き方はこちらもシンプル!

  1. まずはHTMLのタグ名の後に「class=”クラス名”」と付け加えます。
  2. CSSでタグ名の代わりに「.クラス名」と記述してあげます。

以上の2ステップです。
サンプルを見て確認してみましょう。

タグサンプル

今回はわかりやすいようにクラス名として、red、blue、green、orangeとつけてみました。
「color」は文字色を操作するための操作名です。
操作名は英単語がそのまま使われていることが多いので、覚えるのは難しくはないと思います。


いかがでしたか?
これまでは用意された設定でしかカスタマイズができなかったけれど、少し自分好みのアレンジをできるような気がしてきませんか?

二回にわたりHTML/CSSについて簡単にご紹介してきましたが、どちらも基本的な書き方の一部分のみです。
これから少しずつ自分でHTML/CSSを扱えるように一緒にがんばっていきましょう!