案件評判
CSSを理解する!初心者でも分かる歴史、できること、基礎知識などを簡単に解説!

CSSを理解する!初心者でも分かる歴史、できること、基礎知識などを簡単に解説!

最終更新:2022/03/15 投稿:2020/08/03
CSSを理解する!初心者でも分かる歴史、できること、基礎知識などを簡単に解説!

CSSはWebページの見た目・デザインを調整するためのスタイルシート言語です。CSSの登場によってHTMLで作成されたWebページ上での表現をより高度に装飾ができるようになりました。CSSを習得することによってデザイン面を考慮した様々なバリエーションのWebページを作成することが出来ます。この記事ではCSSを理解するために初心者でも分かる歴史・できること、基礎知識などを簡単に解説していきます。

CSSとは

CSSとはWebページの見た目・デザインを調整するためのスタイルシート言語です。正式名称は『Cascading Style Sheets(カスケーディング・スタイル・シート)』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。CSSは1994年にスイスのCERN(欧州原子核研究機構)で誕生しました。その際の中心人物はオペラ・ソフトウェアの最高技術責任者であるホーコン・ウィウム・リー氏です。CSSの登場によってHTMLで作成されたWebページ上での表現をより高度に装飾ができるようになりました。
具体的には文字のサイズや色、レイアウトなどの表示スタイルなど細かな編集まで手が届くようになったのです。CSSはファイル名に拡張子の『.CSS』を付けることで、コンピューターにCSSファイルとして認識されます。CSSは誕生から数々のアップデートを重ね、2020年現在『CSS4』が最新バージョンとなっております。

『CSSの基本情報』
誕生時期:1994年
開発者:ホーコン・ウィウム・リー氏
種別:スタイルシート
拡張子:.css
最新:CSS Level4(2020年時点)

CSSの読み方・名前の由来

CSSの読み方は『シーエスエス』が一般的となっております。名前の由来は『Cascading Style Sheets(カスケーディング・スタイル・シート)』からきており、それぞれの頭文字をとって略称した呼び名で親しまれております。カスケーティングという言葉の意味については「ユーザーエージェント(多くの場合ウェブブラウザ)、ウェブサイト制作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる(カスケードする)ことができる」とウィキペディアに記されております。

出典: フリー百科事典『ウィキペディア(Wikipedia)』>>

CSSの誕生と歴史

CSSはスイス・ジュネーブにある欧州原子核研究機構(通称:CERN)においてホーコン・ウィウム・リー氏によって1994年に提唱されました。ホーコン・ウィウム・リー氏はノルウェーの大手ソフトウェア企業であるオペラ・ソフトウェアの最高技術責任者(CTO)を務めております。CSSは誕生当初から仕様のアップデートを度々繰り返してきましたが、CCS特有の表現で「Level」という名称でその変化を遂げております。CSSは誕生から数々のアップデートを重ね、2020年現在『CSS Level4』が最新バージョンとなっております。

年代 バージョン 備考
1996年 CSS Level1 CSSの初期段階
1998年 CSS Level2 表示メディアによって自動的にスタイルシートの変更が可能に
2011年 CSS Level3 CSS3以降、仕様がモジュール(部品)単位で策定される方針に変更
2018年 CSS Level4 2020年現在の最新規格


CSSとHTMLの関係・違い

CSSとHTMLの関係(違い)はCSSは『デザインを担うもの』でHTMLは『Webページの作成、文章の構造を担うもの』となります。ようするにCSS単体でWebページを作成することは出来ません。あくまでもHTMLで作成されたWebページをより見やすく美しくデザインを加えるために使用するのがCSSなのです。

CSS Webページのデザインを担う
HTML Webページの作成、文章の構造を担う



HTMLの歴史やできることを紹介している記事はこちら>>

CSSでできること

CSSではHTMLで作成されたWebページの内容において見た目の部分を編集することが出来ます。具体的にどのようなことができるのか見ていきましょう。

文字色・サイズの変更

CSSではHTMLで作成されたWebページのテキストの文字色・サイズなどを変更することができます。色についてデフォルトは『黒』が設定されており、文字サイズのデフォルトについては『16px』といわれております。使用頻度の高い基本的な文字色は以下の通りです。

色(読み方) 16進数 カラーネーム
レッド(赤) #FF0000 red
ブルー(青) #0000FF blue
グリーン(緑) #008000 green
イエロー(黄色) #FFFF00 yellow
グレイ(灰色) #808080 gray


レイアウトの変更

CSSではHTMLで作成されたWebページのレイアウトを変更することができます。HTMLで構成した様々な要素(テキスト・表・画像)などの位置を成業することが可能です。CSSの代表的なレイアウト構造で『グレッドレイアウト』『フレックスボックス』の2種類が挙げられます。

『グレッドレイアウト』
グレッドレイアウトとは縦横にページを直線に分断し、これらを組み合わせてブロック内の要素の大きさや余白を構成していく手法

『フレックスボックス』
フレックスボックスとはある要素に定義するだけで、その直下の要素が並列になるフレキシブルにボックスレイアウトが組める手法

装飾機能

CSSではHTMLよりより高度で様々な装飾機能が用意されております。基本的なできることは以下の通りです。

『装飾機能』
・太字にする
・斜体にする
・字間を指定する
・行間を指定する
・下線を引く
・フォントを指定する

CSSの基本的なプロパティについて

CSSを使用するにあたって便利なのが数多く用意される『プロパティ』です。このプロパティの役割はスタイルシートにおいて様々な装飾を簡易的に実現されるために用意されたテンプレートタグのようなものです。こちらでは基本的なプロパティについて紹介をしていきます。

font系

font系のプロパティでは文字通り『font(文字)』を自体の装飾をするために使うものです。サイズ、太さ、スタイルなど様々な文字の編集が可能となっております。

プロパティ名 内容
font-size フォントのサイズを指定
font-weight フォントの太さを指定
font-style フォントのスタイルを指定
font-family フォントの種類を指定
font-variant フォントをスモールキャップ


text系

text系のプロパティでは文字通り『text(文字)』に関わる装飾をするために使うものです。字間、インデント幅、下線などなど様々な装飾が可能となっております。

プロパティ名 内容
text-align 行の揃え位置・均等割付を指定
text-justify 均等割付の形式を指定
text-underline-position 下線の表示位置を指定する
text-indent 一行目のインデント幅を指定
text-transform 大文字・小文字・全角文字への変換を指定


文字色・背景系

文字色・背景系のプロパティでは文字通り『文字色・背景』に関わる装飾をするために使うものです。文字色の指定、背景画像や色の指定など様々な装飾が可能となっております。

プロパティ名 内容
color 文字色(前景色)を指定
background 背景に関する指定をまとめて実施
background-attachment 背景画像の固定・移動を指定
background-color 背景色を指定
background-image 背景画像を指定


CMSがおすすめ(CSSを習得せずWebページが作れる)

CMSとはWebサイトの作成を行う際にHTMLやCSSといった専門的な技術を保有せずとも、Webサイトの作成、管理、更新などを誰でも簡単に実現できるツールです。CMSというその名は、Contents Management System(コンテンツ・マネジメント・システム)の頭文字をとった略式の名称です。代表的なCMSとして”WordPress”や”EC-CUBE”などが挙げられます。CSS、CMSの良し悪しは以下の表を参考にしてみましょう。

CSS CMS
難易度 CSSの仕組みを理解していないと難しい CSSの仕組みを理解せずとも容易
自由度 自由度高い 自由度低い(CMSに依存)
プラグイン プラグイン無し 豊富なプラグイン
運用面 CSSの仕組みを理解していないと難しい HTMLの仕組みを理解せずとも容易



CMSの特徴や機能を紹介している記事はこちら>>

まとめ

CSSを理解するために初心者でも分かる歴史、できること、基礎知識などを簡単に解説させて頂きました。CSSを一言で表すと『Webページの見た目・デザインを調整するためのスタイルシート言語』です。Webページをデザインするために必要な「文字色・サイズの変更」「装飾機能」「レイアウトの変更」などを用意しております。CSSについてこの記事に記載されている最低限の内容は理解しておくようにしましょう。

案件評判
常駐する会社が、実際どんな会社で、どんな案件が動いているか詳しく知りたい。
これは常駐形態で働く方なら誰もが感じていることだと思います。 常駐の働き方をされている方は是非一度「案件評判」で案件についての評判をチェックしてみてください。