progateのHTML&CSSをが学習した結果をまとめておく
HTML
- DOCTYPE宣言 <!DOCTYPE html> 決まりの宣言みたいなもの
- headタグにはWebの設定情報などを記述
- title meta情報 <link rel="stylesheet" src="ファイル"> など
- bodyにWEBページのよく使われる構成のheaderタグとfooterタグが用意されている
- ブロック要素とインライン要素、インラインブロック要素
- 親要素の幅いっぱいに広がる要素をブロック要素
- 改行されない要素をインライン要素
- インライン要素は幅や高さを指定できない
- インライン要素は左右のみ余白を指定できる
- 配置は横並び
- インラインブロック要素はインライン要素のように横並びだが以下
- ブロック要素のように幅や高さ、余白が指定できる
- 配置は横並び
- aタグはインライン要素だがdisplayプロパティを使うとインラインブロック要素に変更できる。
- クラス名はスペースで区切って複数設定できる
CSS
- 書き方
- 要素で指定 要素名 { スタイル } ul { スタイル } a { スタイル }
- クラスの指定は .className{ スタイル }
- idの指定は #idName{ スタイル }
- 特定要素に適用したい場合は
- .className li のようにクラス名の要素に対してのスタイルという記述をする
- 同じスタイルで違う要素を同時に指定する
- 背景画像
- background-image: url("画像URL");
- 横に繰り返しのリピートさせずに1枚で用事させる
- 親要素の中のブロック要素を中央寄せにする
- 要素を半透明にする
- opacity: 0.1;
- 0.0(透明)〜1.0(完全な不透明)
- 文字の間隔を調整する
- letter-spacing: 間隔サイズ; letter-spacing: 2px;
- ボタンの角を丸くする
- boder-radius: 丸みサイズ; border-radius: 10px;
- list の黒点を表示しない
- headerなどでリンクメニューを横並びにする
- float: left;
- おそらくulなどの親要素の中で左付けになって配置されるのだと思う
- 右から並べたい場合はfloat:right;
- 要素に余白を作る
- padding: 上 右 下 左; また padding:上下 左右;のような指定
- padding-top,padding-bottom,padding-right,padding-leftのような指定もある
- 要素の外側に余白をつくる
- paddingと同じようにmargin指定して外側に余白をつくる
- margin: 上 右 下 左; また margin:上下 左右;のような指定
- margin-top,margin-bottom,margin-right,margin-leftのような指定もある
- 要素の種類を変更する
- displayプロパティ
- display: block; display: inline-block; display: inline;
- カーソルが乗ったときの色を変える
- セレクタ名: hover; div: hover;
- テキストなどの位置を変える
- text-align: center; text-align: right;
- ブロック要素などの広い範囲のものはmargin: 0 auto;になり、インラインはこれになるようです
- 文字フォント
- font-family: フォント名; font-family: serif;
- 文字色を変える
- color: 文字色（色コード）; color: red; color: #FF0000;
- 文字サイズ
- font-size: サイズ単位; font-size: 1px; font-size: 1em;
- 背景色を変更する
- background-color: 色指定; background-color: #CECEF6;
- 要素の幅を変更する
- width: サイズ; width: 100px;
- 要素の高さを変更する
- height: サイズ; height: 100px;
- 線を引く
- border:太さ 種類 色; border-bottomのような指定もある
2018/3/4 HTML&CSS中級編の7/18までで残したいことを記述しました。
コメント
コメントを投稿