今回はWebデザイナーを目指す人の為のCSS3のプロパティ講座です。CSSはHTMLを装飾する為のものでHTMLと必ずセットで習得する必要があります。装飾出来るCSSプロパティは多岐に渡ります。HTMLと同様にコーディングの際に使用するCSSプロパティも実は、数える程に限られています。こちらの記事で紹介させていただくプロパティのみを習得していただければコーディングをほぼカバーする事が出来ますので、この機会にこちらのページのCSSプロパティを実際に書きながら習得して見て下さい。displayプロパティ5.まとめ1.CSSとは?CSSとは(カスケーディングスタイルシート)の略で、HTMLを装飾する為の言語です。HTMLタグを記述しただけでは、色やサイズ・マージンなどを変更する事が出来ず、骨組みだけの無機質なページになってしまいます。そこで記述したHTMLに対してCSSを読み込み、HTMLタグに対してCSSプロパティを記述をする事でHTMLタグに対して色・サイズ・マージン・余白などを装飾する事が出来ます。HTMLを人に例えるとCSSは服・ネクタイ・シャツ・靴下・靴などのファッションアイテムを着せていく作業にとてもよく似ています。上記の様な階層になっている場合、htmlのheadタグ内に以下のソースコードを書く事でCSSを読み込む事が出来ます。cssファイルの拡張子は.cssです。type="text/css">3.CSSの記述方法CSSはhtmlタグに対して指定を行い、記述していきます。CSSは以下の様に指定していきます。HTMLタグの後は、{}(波括弧)を使いその中にCSSプロパティを記述します。CSSプロパティは:(コロン)でつなげて数値を指定して最後に;(セミコロン)で終了します。CSSは上記のように「どのHTMLタグの何をどうしたいか?」というように記述する事でCSSをHTMLに反映させる事が出来ます。(例)上記の例の場合は、h1タグのフォントサイズを24pxにするという記述になります。font-sizeプロパティ文字サイズを変更したい場合には、font-sizeプロパティを使用します。colorプロパティ文字色を変更したい場合は、colorプロパティを使用します。line-heightプロパティ段落などで行間を調整したい時にはline-heightプロパティを使用します。text-decorationプロパティテキストに下線などを指定する事が出来ます。heightプロパティHTML要素の横幅・縦幅を指定する事が出来ます。list-styleプロパティリストマーカーの指定をする事が出来ます。リストマーカーを消したり表示したりする際に使用します。リストマーカーはdisk、circle、squareなどを指定出来ます。floatプロパティfloatは、メニュー・ナビゲーション・大枠のボックスなどを左揃えにしたり、右揃えにしたい時に使用するプロパティです。リスト要素にfloatをかけると以下のようになります。both;floatをかけて左・右に寄せた要素以降は同じようにfloatに巻き込まれてしまい影響を受けてしまいます。その際にはfloatを解除する必要があります。bothで解除する事が出来ます。指定する事が出来ます。background-sizeプロパティ背景画像のサイズを指定したい場合、background-sizeプロパティを使います。CodePen.276794-11.要素と要素のマージンを指定したいmarginプロパティWeb制作では要素と要素にマージンを指定してレイアウトを行っていきます。要素の外側に間を開けたい時に使うのがmarginプロパティです。使用する単位はpx(ピクセル)です。以下のサンプルは、ボックス1の下にマージンを30px当てています。paddingプロパティ要素の外側に間をあけたい時はmarginプロパティを使用しますが、それに対して要素の内側に間をあけたい場合は、paddingプロパティを使用します。要素の内側の間の事を余白と言います。以下のサンプルコードはボックス1の内側のみに30pxのpaddingを当てています。borderプロパティHTMLタグ要素にボーダーを指定したい場合に使用します。ボックスの外枠をつけたり、見出しをデザインする際によく使います。以下のサンプルコードは、ボックス1をborderで施し、見出し1の左側の水色をborderで施したものです。borderのプロパティにはsolid(線)・dotted(ドット)・dashed(点線)があります。text-alignプロパティテキストを左揃え・中央揃え・右揃えに指定する事が出来ます。font-familyプロパティフォントを指定する事が出来ます。z-indexプロパティz-indexを使う事で、指定した要素の上に重ねて表示する事が出来るようになります。relative;を指定し、z-indexの数値が大きい要素が上に重ねて表示されます。border-radiusプロパティCSSでボックスを簡単に角丸にする事が出来ます。CodePen.276794-18.横幅の最大値を指定するmax-widthプロパティ要素にmax-widthを指定すると横幅の最大値を決める事が出来ます。以下のサンプルはボックス1に対して横幅の最大値を100pxに指定したのでそれ以上になる事はありません。heightプロパティ最近は様々なデバイスがあるので、画像などがデバイスごとに可変する必要があります。以下のサンプルは写真の横幅サイズを最大400pxに指定し、自動的に調整する事が出来ます。その為縦横の比率を保持したまま写真を表示出来るのです。displayプロパティスマホサイトなどを作成する時に、タップしやすい様に、aタグ(リンク)の領域を変更したい場合があります。その際によく使えるのがdisplayプロパティです。display:block;を指定し、横幅縦幅を指定する事で、リンク領域を好きなサイズに変更する事が出来ます。CodePen.276795.まとめいかがでしたでしょうか?今回ご紹介させていただいたCSSプロパティはコーディングの際に特によく使うものをピックアップしてご紹介させていただきました。私がいつも使用しているCSSはこのページのものに集約されます。わからないCSSプロパティは、その都度調べながら使っていけば良いのです。CSSの習得も難しくはないので、こちらの記事を参考に、実際にHTMLとCSSでコードを確かめながら練習を進めて見て下さい。HTMLは「Webデザイナーを目指す人の為のHTML5タグ入門」を参考にして下さい。