Webコーディングする時によく使うCss編

初めてのコーディング

初めて1からコーディングをする時によく使うCssの記述を紹介します。

whidth

「whidth」とは要素の横幅を設定するCss

whidth:100px;/*横幅100px*/

max-whidth:100px;/*最大の横幅100px*/

min-whidth:100px;/*最小の横幅100px*/

サンプル画像

height

「height」とは要素の高さを設定するCss

height:100px;/*縦幅100px*/

max-height:100px;/*最大の縦幅100px*/

min-height:100px;/*最小の縦幅100px*/

サンプル画像

padding

「padding」とは要素の内側にスペースを開けるCss

padding:10px 10px 10px 10px;/*上/右/下/左の順番*/
 
padding-top:10px;/*上側だけにスペースを開ける場合*/
 
padding-right:10px;/*右側だけにスペースを開ける場合*/

padding-bottom:10px;/*下側だけにスペースを開ける場合*/
 
padding-left:10px;/*左側だけにスペースを開ける場合*/

サンプル画像

margin

「margin」とは要素の外側にスペースを開けるCss

margin:10px 0px 0px 0px;/*上/右/下/左の順番*/
 
margin-top:10px;/*上側だけにスペースを開ける場合*/
 
margin-right:10px;/*右側だけにスペースを開ける場合*/
 
margin-left:10px;/*左側だけにスペースを開ける場合*/

サンプル画像

text-align

「text-align」とは要素の内側のテキストなどの位置を調整Css

text-align: center;/*テキストをセンター寄せ/
 
text-align: right;/*テキストを右寄せ/
 
text-align: left;/*テキストを左寄せ/


サンプル画像

border

「border」とは要素の枠線を指定するCss

border:1px solid #000;/*線の太さ/線の形状/色を指定*/
 
border-top:1px solid #ff0000;/*上側だけに線の太さ/線の形状/色を指定*/
 
border-right:1px solid #0006ff;/*右側だけに線の太さ/線の形状/色を指定*/

border-bottom:1px solid #00ff1e;/*右側だけに線の太さ/線の形状/色を指定*/

border-left:1px solid #ffd800;/*左側だけに線の太さ/線の形状/色を指定*/

サンプル画像

font-size

「font-size」とは要素のテキストの大きさを調整Css


font-size: 16px;/*pxでテキストの大きさを指定*/

font-size: 100%;/*%でテキストの大きさを指定*/

font-size: 16em;/*emでテキストの大きさを指定*/

font-size: 16rem;/*remでテキストの大きさを指定*/


list-style

「list-style」とはulタグを使った際の「・」を調整Css


  list-style: none;


color

「color」とはフォントの色を調整Css


  color: #000000;/*#カラーコードを指定*/


position

「position」とは要素の位置などを調整Css


  position: relative;/*基準点の指定*/

  position: absolute;/*基準点からの位置を指定*/

  position: absolute;/*基準点からの位置を指定*/
  top: 0;/*トップからの位置を指定*/
  left: 0;/*左からの位置を指定*/
  right: 0;/*右からの位置を指定*/
  bottom: 0px;/*下からの位置を指定*/

  position: fixed;/*位置を固定して追従したりするように指定*/


background-color

「background-color」とは要素の背景色を指定するCss

background-color: #カラーコード;/*カラーコードを入れて色を指定*/
 
background-color: #rgba(255, 0, 0, 0.5);;/*rgbで色を指定し、最後の数値で透明度を指定*/

background-image:

「background-image」とは要素の背景に画像を指定するCss

background-image: url("画像のパスを指定");/*画像のパス部分にスタイルシートから画像までの場所を指定*/