ここでは、cssの代表的なプロパティを紹介したいと思います。
これを覚えたら、おおよそ基本的なレイアウト技術は見につくはず。
簡単なところから実践してみてくださいね！
※cssの知識がない人は、最初にこちらの記事を読むと理解が深まりますよ。
cssの「プロパティ」ってなに？
cssでスタイルやレイアウトをデザインするときには、「セレクタ」と「プロパティ」が必要となります。
セレクタは上記記事を読んでもらえば分かるんですが、両者にはこのような役割があるんです。
- セレクタ・・・スタイルを適用する範囲を指定するためのもの
- プロパティ・・・どのようにスタイルを変更するかを指定するもの
「文字の色を変える」とか「画像を中央に配置する」など実際の”スタイル”を指定してあげるのがプロパティの役割。
まさしくここが、cssを学ぶ上で一番面白い醍醐味の部分です！
今回は、僕が専門学校で学んだ「最低限覚えるべき基本のプロパティ」のみ紹介しますが、仕組みを理解すればもっと複雑で面白いプロパティも使いこなせるようになると思います。
それでは順番に見ていきましょう！
フォントに関するプロパティ
文字に関する様々なスタイルを変更するためのものです。
サイズ、種類、様式などを変更できます。
font-sizeプロパティ
フォントのサイズを指定します。
- px、％、em
font-size:14px;
font-weightプロパティ
フォントの太さを指定します。
- bold（太字）
- nomal（標準）
font-weight:bold;
font-styleプロパティ
フォントの様式を指定します。
- italic（イタリック体）
- oblique（斜体）
- normal（標準）
font-style:oblique;
font-familyプロパティ
フォントの種類を指定します。優先度付きで複数指定できます。
- メイリオ
- Osaka
- ヒラギノ
- MSゴシック など
font-family:メイリオ|Osaka|ヒラギノ|MSゴシック;
fontプロパティ
上記で紹介したフォントに関するプロパティを一括指定できます。sizeとfamilyは必須です。
font:15px bold “メイリオ”;
テキストに関するプロパティ
テキストに関する様々なスタイルを変更するためのものです。
行間や文字の間隔などを指定します。
line-heightプロパティ
行の高さを指定します。
- Px、％、em
line-height:120%;
text-alignプロパティ
テキストの水平位置を指定します。
- left（左よせ）
- right（右よせ）
- center（中央よせ）
text-align:center;
vertical-alignプロパティ
テキストの垂直位置を指定します。
- top（上端よせ）
- middle（中央寄せ）
- bottom（下端よせ）
vertical-align:center;
text-decorationプロパティ
テキストの装飾を指定します。
- underline（下線）
- overline（上線）
- line-through（打消し線）
text-decoration: underline;
letter-spacingプロパティ
文字の間隔を指定します。
- px、em、ex
letter-spacing:0.07em;
背景画像に関するプロパティ
背景画像や表示形式を指定するプロパティです。
背景に同じ画像を繰り返し使いたい時に便利です。
background-imageプロパティ
背景画像を指定します。
background-image:url(“画像のパス”);
background-repeatプロパティ
背景画像の繰り返し方向を指定します。
- repeat（縦横に繰り返す）
- repeat-x（横方向に繰り返す）
- repeat-y（縦方向に繰り返す）
- no-repeat（繰り返さない）
background-repeat:repeat-x;
リストに関するプロパティ
リストマーカーを変更するためのプロパティです。
list-style-typeプロパティ
リストマーカーの種類を指定します。
- none（マーカーなし）
- disc（黒丸）
- circle（白丸）
- decimal（数字）
list-style-type:none;
テーブルに関するプロパティ
表の形を指定するためのプロパティです。
border-collapseプロパティ
テーブルのボーダーモデルを指定します。
- separate（セルの間に間隔あり）
- collapse（セルの間に間隔あり）
border-collapse:collapse;
ボーダーに関するプロパティ
線の種類やサイズなどを指定するプロパティです。
border-○-styleプロパティ
線の種類を指定します。
○（top、bottom、left、right）
- dotted（点線）
- dashed（破線）
- solid（通常の線）
border-bottom-style:solid;
border-widthプロパティ
線の太さを指定します。
- px
- thin（細い）
- medium（中くらい）
- thick（太い）
border-width:thin;
bordr-colorプロパティ
線の色を指定します。
bordr-color:blue;
borderプロパティ
上記で紹介したボーダーに関するプロパティを一括指定できます。
border:solid thin blue;
幅と高さに関するプロパティ
ボックスの幅や高さを指定します。HTMLタグ１つ１つをボックスと考えてください。
width、heightプロパティ
幅と高さを指定します。
- px、%
width:100px; height:50px
ボックスに関するプロパティ
ボックス上下左右の余白を指定します。
パディング（内側余白）とマージン（外側余白）があります。
padding-○プロパティ
コンテンツエリア内側の余白を指定します。上、下、左、右を指定して行います。
○（top、bottom、left、right）
- px、%、auto
padding-top:10px;
paddingプロパティ
上下左右のパディングを一括指定できます。
- 値が１つ（上下左右）
- 値が２つ（上下 左右）
- 値が３つ（上 左右 下）
- 値が４つ（上 右 下 左）
padding:10px 5px 15px;
margin-○プロパティ
コンテンツエリア外側の余白を指定します。上、下、左、右を指定して行います。
○（top、bottom、left、right）
- px、%、auto
margin-top:10px;
marginプロパティ
上下左右のパディングを一括指定できます。
- 値が１つ（上下左右）
- 値が２つ（上下 左右）
- 値が３つ（上 左右 下）
- 値が４つ（上 右 下 左）
margin:10px 5px 15px;
ページレイアウトに関するプロパティはこちらを参考に。
cssプロパティはweb制作の第一歩
今回紹介したプロパティは、web制作で非常によく使うものです。まさに第一歩と言えます。
実際に使うことで、それぞれの特徴も見えてきますから、ぜひ自分の運営するサイトなどで、簡単なものから試してみてください！
