【初心者の悩みを解決!】CSS(スタイルシート)とは?

HTMLを学ぶ場合、必ず一緒に学ぶことになるCSS(カスケーディング・スタイルシート)。CSSは上手く活用することで、ウェブ構築作業の効率化、そしてSEO効果などが期待されています。どうせ、学ぶならしっかりと基本やメリットを理解したうえで、学びたいですよね?今回は、初心者にも分りやすいようにCSSの基本についてご紹介いたします!

目次

CSSの歴史


CSSは、1994年にノルウェー人のコンピューター・サイエンティスト、ホーコン・ウィウム・リー氏により提唱されました。リー氏は、当時www(World Wide Web)を世に生み出した欧州原子核研究機構(CERN) の職員で、現在はオペラ・ソフトウェアの最高技術責任者 (CTO)に就任しています。

wwwやCERNの歴史については、以下の記事でも詳しく紹介しています。

【HTMLって何!?用途から歴史まで徹底解剖】
https://webtre-plus.com/archives/2015

CSSとは?CSSの特徴


HTMLがウェブサイトの構造(骨組み)であるのに対して、CSSはウェブサイトの体裁を定義するものです。これらを、別々に定義づけるために提唱されたのが、CSSなのです。CSSの登場によって、ウェブサイトの内用に合わせてスタイルシート切り替えが可能になりました。

カスケードとは、もともとは、「岩場を段になって流れる滝」という意味で、そこから派生して「庭園などにつくられる、階段状に連続した滝。水階段」「段々になっているもの。段階的に連なっているもの。」という意味をもつようになりました。(参考:『カスケード【cascade】』|weblio辞書 https://www.weblio.jp/content/cascade)

IT用語では、カスケードは「カスケード表示」などの例に挙げられるように、「重なり合う、重ね合わせる」というような意味で使われています。CSSは、ウェブサイト制作者、ユーザーがそれぞれ定義した体裁の内用を重ね合わせられる特徴があるのです。

HTMLの基本について知りたい方は、こちらも合わせて読みましょう!

【保存版】HTML初心者の疑問を解決!HTMLの基本とは?
https://webtre-plus.com/archives/1933

CSSの使い方


CSSを活用すると、HTML内にデザイン内容を毎回書き込まずに済みます。

<h1>大見出し・サブタイトル</h1>

この大見出しに対して、CSSを定義づけるときは、

文字の色を変更する場合

h1{color:#FFFFFF;}

文字の色は、カラーコード一覧表を参考にしましょう。CSSでは、基本的には16色から構成されるHTML 4と同じカラー数を定義しています。CSS 2.1では、これらの基本色に”orange”が追加されました。

文字の大きさの変更の場合

h1 {font-size:値の指定;}

文字の大きさを変更する方法は、いくつかあります。

pxを使用して文字の大きさを12pxに変更する場合

h1 {font-size:14px;}

%を使用して文字の大きさを20%大きくしたい場合は

h1 { font-size:120%;}

キーワードの指定により文字の大きさを変更する場合は

h1 { font-size:small;}
h1 { font-size: xx-large;}

ページ全体の文字の大きさを変更する場合

body { font-size: 大きさの値 }

ページ全体の文字の大きさを変更したい場合は、セレクタの部分をbodyに変えます。

段落ごとの文字の大きさを変える場合

p { font-size: 大きさの値 }

パラグラフ全体の文字の大きさを変更する場合は、セレクタの部分をpに変えます。

クラスごと文字の大きさを変える場合

.クラス名{ font-size: 大きさの値 }

クラス名の前には必ずピリオド(.)を打つようにします。クラスは、一度スタイルを定義づければ、何度も宣言を書く必要がなくなるので、手間が省けます。

id名の文字の大きさを変える

# id名{ font-size: 大きさの値 }

id名の前には必ずシャープ(#)を入れるようにします。クラスが同じHTML内で何度も同じスタイルを定義づけられるのに対して、idは一度しか定義づけする事ができません。

CSSを積極的に活用しよう!

今回は、CSSの歴史や使い方などを、初心者向けに分りやすく解説しました。CSSは、極力簡潔に書く事でSEO効果を上げたり、デザインを統一したりすることができます。HTMLでウェブサイトを構築する際には、CSSを積極的に活用して、よりユーザー・フレンドリーなウェブサイトを作りましょう!

「プログラミング未経験から
収益化までの7ステップ」
無料配布中!

こんなお悩みありませんか?

  • プログラミング似興味があるけど何からやったらい良いのか分からない
  • 未経験から収益化出来るのかが不安だ
  • 本業以外にも収入の柱を構築したい
  • パソコンを使った副業がしたい
  • プログラミングに挫折したけどもう1回チャレンジしたい
  • プログラミングの勉強をしているけど収益化が出来ていない

挫折率の高いプログラミング学習において、挫折することなく収益化を目指すなら、
挫折してしまう原因や、収益化のためのポイントを押さえて学習を進めていく必要があります。
そのポイントを7つのステップとして具体的に動画で解説!

動画トピックス
  • IT業界の現状
  • プログラミングに挫折する3つの壁
    (◯◯の壁 / ◯◯の壁 / ◯◯の壁)
  • 未経験から収益化までの7ステップ
    (準備編 / 学習編 / 収益化編)
よかったらシェアしてね!

この記事を書いた人

目次
閉じる