案件評判
CSSはWebページの見た目・デザインを調整するためのスタイルシート言語です。CSSの登場によってHTMLで作成されたWebページ上での表現をより高度に装飾ができるようになりました。CSSを習得することによってデザイン面を考慮した様々なバリエーションのWebページを作成することが出来ます。この記事ではCSSを理解するために初心者でも分かる歴史・できること、基礎知識などを簡単に解説していきます。
CSSとはWebページの見た目・デザインを調整するためのスタイルシート言語です。正式名称は『Cascading Style Sheets（カスケーディング・スタイル・シート）』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。CSSは1994年にスイスのCERN(欧州原子核研究機構)で誕生しました。その際の中心人物はオペラ・ソフトウェアの最高技術責任者であるホーコン・ウィウム・リー氏です。CSSの登場によってHTMLで作成されたWebページ上での表現をより高度に装飾ができるようになりました。
具体的には文字のサイズや色、レイアウトなどの表示スタイルなど細かな編集まで手が届くようになったのです。CSSはファイル名に拡張子の『.CSS』を付けることで、コンピューターにCSSファイルとして認識されます。CSSは誕生から数々のアップデートを重ね、2020年現在『CSS4』が最新バージョンとなっております。
CSSの読み方は『シーエスエス』が一般的となっております。名前の由来は『Cascading Style Sheets（カスケーディング・スタイル・シート）』からきており、それぞれの頭文字をとって略称した呼び名で親しまれております。カスケーティングという言葉の意味については「ユーザーエージェント（多くの場合ウェブブラウザ）、ウェブサイト制作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる（カスケードする）ことができる」とウィキペディアに記されております。
出典: フリー百科事典『ウィキペディア（Wikipedia）』＞＞
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は『Webページの作成、文章の構造を担うもの』となります。ようするにCSS単体でWebページを作成することは出来ません。あくまでもHTMLで作成されたWebページをより見やすく美しくデザインを加えるために使用するのがCSSなのです。
| CSS | Webページのデザインを担う |
| HTML | Webページの作成、文章の構造を担う |
CSSではHTMLで作成されたWebページの内容において見た目の部分を編集することが出来ます。具体的にどのようなことができるのか見ていきましょう。
CSSではHTMLで作成されたWebページのテキストの文字色・サイズなどを変更することができます。色についてデフォルトは『黒』が設定されており、文字サイズのデフォルトについては『16px』といわれております。使用頻度の高い基本的な文字色は以下の通りです。
| 色（読み方） | 16進数 | カラーネーム |
| レッド（赤） | #FF0000 | red |
| ブルー（青） | #0000FF | blue |
| グリーン（緑） | #008000 | green |
| イエロー（黄色） | #FFFF00 | yellow |
| グレイ（灰色） | #808080 | gray |
CSSではHTMLで作成されたWebページのレイアウトを変更することができます。HTMLで構成した様々な要素（テキスト・表・画像）などの位置を成業することが可能です。CSSの代表的なレイアウト構造で『グレッドレイアウト』『フレックスボックス』の２種類が挙げられます。
CSSではHTMLよりより高度で様々な装飾機能が用意されております。基本的なできることは以下の通りです。
CSSを使用するにあたって便利なのが数多く用意される『プロパティ』です。このプロパティの役割はスタイルシートにおいて様々な装飾を簡易的に実現されるために用意されたテンプレートタグのようなものです。こちらでは基本的なプロパティについて紹介をしていきます。
font系のプロパティでは文字通り『font（文字）』を自体の装飾をするために使うものです。サイズ、太さ、スタイルなど様々な文字の編集が可能となっております。
| プロパティ名 | 内容 |
| font-size | フォントのサイズを指定 |
| font-weight | フォントの太さを指定 |
| font-style | フォントのスタイルを指定 |
| font-family | フォントの種類を指定 |
| font-variant | フォントをスモールキャップ |
text系のプロパティでは文字通り『text（文字）』に関わる装飾をするために使うものです。字間、インデント幅、下線などなど様々な装飾が可能となっております。
| プロパティ名 | 内容 |
| text-align | 行の揃え位置・均等割付を指定 |
| text-justify | 均等割付の形式を指定 |
| text-underline-position | 下線の表示位置を指定する |
| text-indent | 一行目のインデント幅を指定 |
| text-transform | 大文字・小文字・全角文字への変換を指定 |
文字色・背景系のプロパティでは文字通り『文字色・背景』に関わる装飾をするために使うものです。文字色の指定、背景画像や色の指定など様々な装飾が可能となっております。
| プロパティ名 | 内容 |
| color | 文字色（前景色）を指定 |
| background | 背景に関する指定をまとめて実施 |
| background-attachment | 背景画像の固定・移動を指定 |
| background-color | 背景色を指定 |
| background-image | 背景画像を指定 |
CMSとはWebサイトの作成を行う際にHTMLやCSSといった専門的な技術を保有せずとも、Webサイトの作成、管理、更新などを誰でも簡単に実現できるツールです。CMSというその名は、Contents Management System（コンテンツ・マネジメント・システム）の頭文字をとった略式の名称です。代表的なCMSとして”WordPress”や”EC-CUBE”などが挙げられます。CSS、CMSの良し悪しは以下の表を参考にしてみましょう。
| CSS | CMS | |
| 難易度 | CSSの仕組みを理解していないと難しい | CSSの仕組みを理解せずとも容易 |
| 自由度 | 自由度高い | 自由度低い（CMSに依存） |
| プラグイン | プラグイン無し | 豊富なプラグイン |
| 運用面 | CSSの仕組みを理解していないと難しい | HTMLの仕組みを理解せずとも容易 |
CSSを理解するために初心者でも分かる歴史、できること、基礎知識などを簡単に解説させて頂きました。CSSを一言で表すと『Webページの見た目・デザインを調整するためのスタイルシート言語』です。Webページをデザインするために必要な「文字色・サイズの変更」「装飾機能」「レイアウトの変更」などを用意しております。CSSについてこの記事に記載されている最低限の内容は理解しておくようにしましょう。
EC2を理解する！初心者でも分かる歴史、メリット、…
Reactを理解する！初心者でも分かる歴史、特徴、…
Liftを理解する！初心者でも分かる歴史、特徴、基…
Windows10/11アカウント作…
Node.jsを理解する！初心者でも…
WindowsFormsを理解する！…
フリーランスのHTMLコーダー（HT…
フリーランスのUnityエンジニア（…
Db2を理解する！初心者でも分かる歴…
フリーランスのSwiftエンジニアの…
精算幅を理解する！超過・控除に関する…