IT-Diary~27歳未経験からプロのwebデザイナーになる~

アパレル業界からIT業界へ転職したブロガ―の軌跡です。

CSS/CSS3の基礎知識を10日間で覚えてみる

空いた時間でスキルを学ぶ

ワードプレスを使っているいる以上、cssやcss3に関しては基礎知識を蓄えなくてはと思い、近くの図書館で入門書をレンタルしてきました。

翔泳社出版のCSS/CSS3入門教室という書籍です。学んだ事を深く理解するには、ブログでアウトプットするのが一番だと思い、筆を窘めた次第です。

[amazonjs asin="4798124036" locale="JP" title="10日でおぼえるCSS/CSS3入門教室"]

HTMLとCSS

まず書籍を開くとオリエンテーションとして、事前知識の講義のページが表れました。まずはHTMLとCSSとはそもそもなんなのか?について説明しなければなりません。

HTML・・・テキストの各部分が文書の構成要素として何であるかを示す言語 CSS・・・HTMLのタグをつけた範囲のテキストの表示方法をしていする言語

 

ここでいう言語とは、コンピューター上で特定の処理をさせる為に作られた書き方のルールを表しているようですね。言語がなければ、PCは処理ができないので動けないということです。

CSSの構成

cssの言語はソースコードと呼ばれています。これはエンジニアやプログラマの人たち各個人によって見た目が大きく変わります。というのも、cssは書式を構成する各部分の間に半角スペースを複数入れることができるからです。

このスペースの有無は、ソースコードの見やすさ・読みやすさに関わりますが、実際の動作には影響はありません。

CSSで使える単位

cssには数字の直後に使用する事で、単位を言語として繁栄させる事ができるようです。使用できる単位は以下の通り。

px・・・ピクセル

pt・・・ポイント(1/72インチ)

cm・・・センチメートル

mm・・・ミリメートル

in・・・インチ(2.54センチメートル)

pc・・・パイカ(12ポイント)

CSSにおける英単語

cssには言語を使用する際に英単語で指定します。この英単語の事を「キーワード」と呼びます。キーワードは7段構成になっています。標準のサイズは「midium」となっており、一番小さいサイズは「xx-small」一番大きいサイズは「xx-large」と表記します。

また、ひとつ前のサイズを変えたい場合は「smaller/larger」を使用する事になっています。

CSSで色を指定する方法

cssでは文字や背景に色を付けたいときに、キーワード(英単語)若しくは数字で指定します。CSSCSS3で表記出来る色の数が異なり、前者は約17色・後者は約150色となっています。

例えば、栗のような茶色ならmaroon/#800000となります。

CSSの基本書式

cssにおいて書式の基本形は以下のようになります。

適用先{表示指定}

適用先{表示指定 表示指定 表示指定}

表示指定はいくつでも書き入れる事が出来ます。また、大きく2つに分かれており、「:」で区切られています。1つの表示指定の最後には「;」が付く事で終わりを意味します。

指定間に半角スペースを入れたり、改行やタブなども好きなだけ入れる事が可能です。

適用先の指定方法

適用先の指定方法には3つのパターンがあります。

特定の種類の要素に適用:要素名

id='ID名'の要素に適用:#ID名

すべての要素に適用:*

表示の指定方法

文字サイズ・・・ font-size:○○○;

文字色・・・ color:○○○;

背景色・・・ background:○○○;

背景のない余白・・・ margin:○○○;

背景のある部分の余白・・・ padding:○○○;

テキストの影・・・ shadow:○○○;

まとめ

最後は駆け足になってしまいましたが、cssの基本的な部分について書いてみました。私も始めたばかりなのでまだまだ勉強中ですが、これから学んでいき、自分でワードプレスのシートなどを作れるようになりたいと思います。