HTMLとCSSでよく使うものまとめ(雑)
リンク
画像を表示
リスト（先頭に黒点） ,
リスト ,
文字色 color:色;
文字の大きさ font-size:大きさpx;
書体 font-family:種類;
背景色 background-color:色;
高さ height:数字px;
幅 width:数字px;
特定の要素にCSSを適用 ○○ クラス名を与える
.selected { }
DOCTYPE宣言 <!DOCTYPE html>
設定に関する情報
headの中の要素 （文字コードの設定）※文字化け防止
（ブラウザのタブに表示される）
（CSSの読み込み）
リストの黒点削除 li{ list-style:none; }
文字を横並びにする float: left;
余白 padding: 数字px;この場合全ての方向に余白
上方向に余白 padding-top: 数字px;
下 padding-bottom
左 padding-left
右 padding-right
余白まとめて書く padding: ○px ○px ○px ○px 上→右→下→左
padding:○px ○px 上下 左右
特定のliにCSSを適用 .header-list li{ }
右から順に横並びにする float: right
文中の一部だけCSS適用させる 文字
span{ }
ボーダー（下線） border-bottom:太さpx 線の種類 色
ボーダー（囲い） border:太さpx 線の種類 色
ボーダーの内側全体の余白 padding:○px ; "paddingみたいにまとめられる
ボーダーの外側全体の余白 margin:○px
一行のテキストボックス 終了タグ不要
複数行のテキストボックス ,
送信ボタン
↑の送信ボタンを別の文字に変更
背景画像を設定 background-image:url();
コンテナを中央寄せ width: ○パーセント
コンテナを中央寄せ margin :0 auto;
透明度 opacity:○○; （０．０〜１.０）
文字間隔 letter-spacing:○px;
ボタン作成 タグで作成→display: inline-block;で要素を変える。（block（ブロック要素）, inline-block（インラインブロック要素）, inline（インライン要素）がある
カーソル乗ったとき色変更 セレクタ:hover { background-color:red等 }
角を丸くする border-radius: ○px
要素の配置変更 text-align:left; テキスト、ボタンとかのインライン、インラインブロック要素はmarginじゃなくてこっち使う
フォント（head要素に入れる） ※ タグにfaクラスとfa-アイコン名クラスを指定する
色を透明 rgba(○, ○, ○, ○) opacityプロパティは要素全体を透過 rgbaを使うとその色だけを透明にすることが出来る（最後の数値が透明度）
文字にアニメーション付ける transition: all 0.5s;
行の高さ line-height:○px;
文字の太さ font-weight:normal; normalまたはbold
配置（％） width:25%; （pxじゃなくて％表示にすると親要素に対しての％になる）
要素同士を重ねて表示（全体左上基準） position: absolute; top: px; left:px; 活用するすると要素の移動にも使える
要素同士を重ねて表示（指定場所左上基準） position: relative;
ボックスに影を付ける box-shadow:0px 7px #1a7940; 水平 垂直 色
クリック時に変化 セレクタ:active { }
クリック時ボタンを凹ませる ・box-shadowをnoneにする
・position: relative;とtopによって影の分だけ位置を下げる
ヘッダーを画面上部に固定 position:fixed; top:0px;
重なり順序 z-index:10;
背景画像ぴったり background-size: cover;
ボタン作成
↧