0%

Designデザインワークショップ

Posted:2015.04.21

ウェブサイトコーディングでよく使用するCSSプロパティのまとめ(1)

前回のHTMLタグについての記事に引き続き、ウェブサイトのコーディングには必須となるCSSについてもスポットを当ててみたいと思います。ウェブサイトのコーディングでは、まずHTMLで文書をマークアップし、その後でCSSを使って整えていきます。このCSSはご存知の通り、レイアウトやフォーマットなど主に見た目のデザインを指定する時に使います。

 

CSSには「プロパティ」と呼ばれるスタイルの種類を示すものがあります。このプロパティもHTMLのタグ同様たくさんの種類が存在します。もちろん全て覚えるのがベストですが、一般的なサイトを構築するのに十分なものに絞って今回の記事で紹介していきたいと思います。

 

またHTML同様、CSS3対応版の内容で紹介します。CSS3についても詳しくは後ほど解説したいと思います。

 

1. テキスト・フォント
font-size:; フォントの大きさを指定します。pxなどの絶対サイズと、%などの相対サイズで指定します。
font-weight:; フォントの太さを指定します。boldなどのスタイル名や数値で指定します。
font-style:; フォントの書体(イタリック・斜体)を指定します。
font-family:; フォントの種類を指定します。
text-align:; 水平方向の文字揃えを指定します。
vertical-align:; 水平方向の文字揃え(行間内の範囲)を指定します。
text-align:; 水平方向の文字揃えを指定します。
vertical-align:; 垂直方向の文字揃え(行間内の範囲)を指定します。
line-height:; 行間の高さを指定します。
text-indent:; 文頭文字のインデントを設定します。
text-decoration:; 文字の装飾を指定します。(下線・打ち消し線・文字の点滅など)
letter-spacing:; 文字の間隔(カーニング)を指定します。
text-decoration:; 文字の色を設定します。固有の色名やRGBコードで指定します。
text-shadow:; 文字の影を設定します。水平、垂直方向への距離や影のぼかし半径、影の色の指定ができます。
text-wrap:; テキストの改行方法を指定します。
word-wrap:; 単語内での改行方法を指定します。

 

2. 背景
background-color:; 背景色を設定します。固有の色名やRGBコードで指定します。
background-image:; 背景画像を設定します。相対パス及び絶対パスのURLで画像を指定します。
background-position:; 背景画像の表示位置を設定します。固有の位置名やx、y座標で指定します。
background-repeat:; 背景画像の繰り返しを指定します。水平、垂直方向と全方向、繰り返し無しを指定します。
background-size:; 背景画像のサイズを指定します。

 

3. 幅・高さ・余白
width:; 領域の幅を指定します。数値での絶対的な指定と、コンテンツによって可変する相対的な指定ができます。
max-width:; 幅の最大値を指定します。幅の範囲の上限を設定します。
min-width:; 幅の最小値を指定します。幅の範囲の下限を設定します。
height:; 領域の高さを指定します。数値での絶対的な指定と、コンテンツによって可変する相対的な指定ができます。
max-height:; 高さの最大値を指定します。幅の範囲の上限を設定します。
min-height:; 高さの最小値を指定します。幅の範囲の下限を設定します。
margin:; マージン(要素の外余白)を指定します。上下左右の方向へ個別に設定できます。
padding:; パディング(要素の内余白)を指定します。上下左右の方向へ個別に設定できます。

 

4. 境界線
border-width:; ボーダーの幅(太さ)を指定します。上下左右へ個別に設定できます。
border-color:; ボーダーの色を指定します。上下左右へ個別に設定できます。
border-style:; ボーダーの形や種類(スタイル)を指定します。点線、二重線、凹凸など、上下左右へ個別に設定できます。
border-color:; ボーダーの色を指定します。上下左右へ個別に設定できます。
border-image:; 画像をボーダーに指定します。ボーダーに表示されるスライス部分や、繰り返し方向、画像部分の幅なども設定します。
border-radius:; 角丸を指定します。垂直、水平方向の半径(=角丸の丸み)をそれぞれ設定できます。

 

 

今回は前回のHTMLタグに引き続きCSSプロパティを紹介いたしました。たくさん存在するプロパティも必要なものを集中して覚えて、効率良くコーディングを進めていきたいですね。今回は長くなってしまったので残りは次回【ウェブサイトコーディングでよく使用するCSSプロパティのまとめ(2)】のエントリーで紹介したいと思います。

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】