OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

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

最終更新日:2018.1.7 Update!!
前回の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)】のエントリーで紹介したいと思います。    
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram