初心者向けＣＳＳ設定方法

初心者向けのＣＳＳ設定方法を記載します。

よく使う物を厳選してまとめました。

子要素の定義

よく使うＣＳＳプロパティ

テキスト

line-height　（行の高さの変更）

text-align　　（水平位置の変更）

vertical-align　（垂直位置の変更） vertical-align; middle;

text-decoration　（文字の装飾）

letar-spacing　　（文字間隔の変更） letar-spacing: 10px;

フォント

font-size　　（文字の大きさ）

font-weight　　（文字の太さ）

font-family　　（文字を変える）

color　　　　　（文字の色）

ボックス

width　　（横幅）　width:100px; width:1.5em; width:100%;

height　　（高さ）height:100px; height:1.5em; height:100%;

padding　　（内側の余白）padding:10px;

margin　　　（外側の余白）margin:20px;

box-sizing　　（枠線や内部余の大きさを横幅や縦幅に含める）

背景

background-color　　（背景色） background-color: #ffffff;

background-image　　（背景の画像）backgroud-image:url(./img/backgroud.jpg);

background-repeat　　（背景画像の繰り返し）

background-position　（背景画像の表示開始位置）

background-attachment　（背景画像の固定・移動）

background-size　　　（背景画像のサイズ） contain

backgroud-repeat （背景の繰り返し）bacground-reoeat: repeat-y;　(no-repeat)

background-attachment （スクロール処理）backgroud-attachment: fixed; (scroll)

横並び①

flex　　横並び（浮動）

clear　上記の解除

位置設定

flex　　（横並び） display: flex;

flex-wrap　（子要素の折り返し） flex-wrap: wrap;

justify-content　（水平方向の揃え）justify-content: space-between;

align-items　　（垂直方向の揃え） align-items: baseline;

flex-direction　（子要素の並ぶ向き） flex-direction: column;

その他位置指定

position　（位置） position: fixed;

　※親要素にrelativeが設定されていると親要素からの相対位置になります。

top　　（上からの位置）top: 10px;

buttom　　（下からの位置）buttom: 20px;

left　　（左からの位置）left: 10px;

right　　（右からの位置） right: 10px;

z-index　　（重なりの順序）　数字が大きい方が上に表示 zindex:100;