エディタの補完機能
タグ名を入力して「Tab」キーを押すと終了タグまで保管してくれる
注意）タグによっては不要なモノまで保管される
並び替え
CSSのfloatプロパティを使用する
left(左)を指定すると、左から順に並びが変わる
liに指定すると横並びになり、class名に指定すると全体が右または左に移動する
余白の調整
CSSのpaddingプロパティを使用する
span要素で文字の装飾を部分的に変える
記述 例)
spam{
color:#ff0000;
}
ボーダー
枠線をつけるために使用する
「border-方向」で場所の指定ができる
記述 例)
logo1{
border-bottom:1px solid #333;
}
ボックスモデルについて
border・padding・marginはボックスモデル概念に基いている
HTMLのすべての要素にはborderがあるが、初期状態では非表示
内側：padding、外側：margin
カーソルを乗せたときに色を変える
カーソルを乗せたときの状態をhoverという
セレクタ:hover{}と記述する（セレクタの所はクラスでも可）
ボタンの角を丸くする
border-radiusプロパティを使う
記述 例)
border-radius:10px;
テキストを中央に寄せる
text-alignプロパティを使う、テキストやボタンなどブロック要素以外で使う
記述 例)
text-align:center;
ボタンにアイコンをつける
ProgateではFont Awesomeを紹介している
<head>にFont AwesomeのCSSを読み込む記述をする
<span>タグにfaクラスとfa-アイコン名クラス指定する
記述 例)
<span class=”fa fa-facebook”>
</span>
背景のみを透過させる
rgbaプロパティを使用する、色の指定がRGBになる
記述 例)
.sample{
background-color:rgba(84,190,238,0.5);
}
ログインリンクの作りかた
アニメーション
transitionプロパティを使う
<a>タグをクリックできる範囲について
<a>タグをブロック要素にすると大きさが親要素いっぱいに広がるため全体をクリックできるようになる
コメント