Webデザイナーを目指す人の為のCSSプロパティ入門

Webデザイナーを目指す人の為のCSSプロパティ入門

今回はWebデザイナーを目指す人の為のCSS3のプロパティ講座です。CSSはHTMLを装飾する為のものでHTMLと必ずセットで習得する必要があります。色・サイズ・背景・マージン・余白・行間・字間など装飾出来るCSSプロパティは多岐に渡ります。

HTMLと同様にコーディングの際に使用するCSSプロパティも実は、数える程に限られています。こちらの記事で紹介させていただくプロパティのみを習得していただければコーディングをほぼカバーする事が出来ますので、この機会にこちらのページのCSSプロパティを実際に書きながら習得して見て下さい。

1.CSSとは?

CSSとは(カスケーディングスタイルシート)の略で、HTMLを装飾する為の言語です。HTMLタグを記述しただけでは、色やサイズ・マージンなどを変更する事が出来ず、骨組みだけの無機質なページになってしまいます。

そこで記述したHTMLに対してCSSを読み込み、HTMLタグに対してCSSプロパティを記述をする事でHTMLタグに対して色・サイズ・マージン・余白などを装飾する事が出来ます。

CSSとはHTMLに装飾をする事が出来る言語です

HTMLを人に例えるとCSSは服・ネクタイ・シャツ・靴下・靴などのファッションアイテムを着せていく作業にとてもよく似ています。

2.CSSの読み込み方法

サイト階層

例えば上記の様な階層になっている場合、htmlのheadタグ内に以下のソースコードを書く事でCSSを読み込む事が出来ます。cssファイルの拡張子は.cssです。

3.CSSの記述方法

CSSはhtmlタグに対して指定を行い、記述していきます。CSSは以下の様に指定していきます。HTMLタグの後は、{}(波括弧)を使いその中にCSSプロパティを記述します。CSSプロパティは:(コロン)でつなげて数値を指定して最後に;(セミコロン)で終了します。

CSSの書き方

CSSは上記のように「どのHTMLタグの何をどうしたいか?」というように記述する事でCSSをHTMLに反映させる事が出来ます。 (例)上記の例の場合は、h1タグのフォントサイズを24pxにするという記述になります。

4.コーディングの際に特によく使用するCSSプロパティ一覧

4-1.文字サイズを変更する font-sizeプロパティ

文字サイズを変更したい場合には、font-sizeプロパティを使用します。

See the Pen vWrqMj by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-2.文字カラーを変更する colorプロパティ

文字色を変更したい場合は、colorプロパティを使用します。

See the Pen jaKjoN by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-3.行間を調整する line-heightプロパティ

段落などで行間を調整したい時にはline-heightプロパティを使用します。

See the Pen dZKxbd by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-4.テキストを装飾する text-decorationプロパティ

テキストに下線などを指定する事が出来ます。

See the Pen BmVggb by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-5.横幅・縦幅を指定する widthプロパティ heightプロパティ

HTML要素の横幅・縦幅を指定する事が出来ます。

See the Pen bYKPXy by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-6.リストのマーカーを指定する list-styleプロパティ

リストマーカーの指定をする事が出来ます。リストマーカーを消したり表示したりする際に使用します。リストマーカーはdisk、circle、squareなどを指定出来ます。

See the Pen QOxewW by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-7.要素を右または左に寄せたい floatプロパティ

floatは、メニュー・ナビゲーション・大枠のボックスなどを左揃えにしたり、右揃えにしたい時に使用するプロパティです。

例えばリスト要素にfloatをかけると以下のようになります。

See the Pen zPagrw by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-8.floatを解除したい clear: both;

floatをかけて左・右に寄せた要素以降は同じようにfloatに巻き込まれてしまい影響を受けてしまいます。その際にはfloatを解除する必要があります。floatはclear: bothで解除する事が出来ます。

See the Pen JOBwZp by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-9.背景を指定したい backgroundプロパティ

HTML要素に対して背景をしたい場合、backgroundプロパティを使います。背景色・背景画像などを指定する事が出来ます。

See the Pen wPXVWV by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-10.背景サイズを指定したい background-sizeプロパティ

背景画像のサイズを指定したい場合、background-sizeプロパティを使います。

See the Pen XzBogM by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-11.要素と要素のマージンを指定したいmarginプロパティ

Web制作では要素と要素にマージンを指定してレイアウトを行っていきます。要素の外側に間を開けたい時に使うのがmarginプロパティです。

主に使用する単位はpx(ピクセル)です。以下のサンプルは、ボックス1の下にマージンを30px当てています。

See the Pen eeKqBg by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-12.余白を設定したい paddingプロパティ

要素の外側に間をあけたい時はmarginプロパティを使用しますが、それに対して要素の内側に間をあけたい場合は、paddingプロパティを使用します。要素の内側の間の事を余白と言います。

以下のサンプルコードはボックス1の内側のみに30pxのpaddingを当てています。

See the Pen eeKqBg by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-13.ボーダーをつけたい borderプロパティ

HTMLタグ要素にボーダーを指定したい場合に使用します。ボックスの外枠をつけたり、見出しをデザインする際によく使います。

以下のサンプルコードは、ボックス1をborderで施し、見出し1の左側の水色をborderで施したものです。borderのプロパティにはsolid(線)・dotted(ドット)・dashed(点線)があります。

See the Pen yPEmoV by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-14.テキストを左揃え・中央揃え・右揃えにしたい text-alignプロパティ

テキストを左揃え・中央揃え・右揃えに指定する事が出来ます。

See the Pen EbpOJy by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-15.フォントを指定したい font-familyプロパティ

フォントを指定する事が出来ます。

See the Pen EbpOqg by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-16.要素の重なりを指定したい z-indexプロパティ

z-indexを使う事で、指定した要素の上に重ねて表示する事が出来るようになります。重なりを指定したい要素に両方position: relative;を指定し、z-indexの数値が大きい要素が上に重ねて表示されます。

See the Pen ZajVYb by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-17.ボックスを角丸にしたい border-radiusプロパティ

CSSでボックスを簡単に角丸にする事が出来ます。

See the Pen xPJmGq by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-18.横幅の最大値を指定するmax-widthプロパティ

要素にmax-widthを指定すると横幅の最大値を決める事が出来ます。以下のサンプルはボックス1に対して横幅の最大値を100pxに指定したのでそれ以上になる事はありません。

See the Pen eejbZZ by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-19.高さを自動に設定したい heightプロパティ

最近は様々なデバイスがあるので、画像などがデバイスごとに可変する必要があります。可変する際に自動で調整してくれるのがheight: auto;です。以下のサンプルは写真の横幅サイズを最大400pxに指定し、自動的に調整する事が出来ます。その為縦横の比率を保持したまま写真を表示出来るのです。

See the Pen yPqGVY by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

4-20.aタグのリンク領域を指定したい displayプロパティ

スマホサイトなどを作成する時に、タップしやすい様に、aタグ(リンク)の領域を変更したい場合があります。その際によく使えるのがdisplayプロパティです。display:block;を指定し、横幅縦幅を指定する事で、リンク領域を好きなサイズに変更する事が出来ます。

See the Pen bYjORX by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5.まとめ

いかがでしたでしょうか?

今回ご紹介させていただいたCSSプロパティはコーディングの際に特によく使うものをピックアップしてご紹介させていただきました。私がいつも使用しているCSSはこのページのものに集約されます。

わからないCSSプロパティは、その都度調べながら使っていけば良いのです。CSSの習得も難しくはないので、こちらの記事を参考に、実際にHTMLとCSSでコードを確かめながら練習を進めて見て下さい。

HTMLは「Webデザイナーを目指す人の為のHTML5タグ入門」を参考にして下さい。

コメントを残す

Photoshop本で挫折した方必見!! Webデザイナーに必須のPhotoshop力がたった7日で身につく動画講座

STACK DESIGN

一生涯使える人気のスキル!Photoshopを使ったデザイン力がたったの7日間で身につくオンライン動画講座。すべて無料で受講出来ますので、この機会にぜひご活用下さい。

  • デザイナー歴13年のプロが、デザインする時に使うテクニックのみを厳選してわかりやすくご紹介。無駄なテクニックはすべて排除。
  • デザインにかかる作業時間を10倍スピードアップさせるショートカットキーをご紹介。
  • あなたのわからないを現役デザイナーがすべて解決!解決するまで質問し放題です。
  • PC・スマホ・タブレット対応。学校、カフェ、通勤、通学あなたがどこにいても動画で学習出来ます。