HTML&CSS①
HTML&CSS①
学んだことを忘れないようにメモメモ
～HTML～
見出し…<h1>～<h6>
見出しは<h1></h1>～<h6></h6>までの要素を使用する。
※ブロック要素
段落…<p>
段落は<p></p>要素を使用する。
※ブロック要素
コメント…<!-- -->
コメントは<!--コメント-->を使用する。
リンク…<a>
<a href="URL">表示させたいテキスト</a>
※インライン要素
画像表示…<img>
<img src="URL"> 閉じタグ不要
※インライン要素
リスト作成…<ul><ol><li>
<ul>…順不同のリスト
<ol>…順番のある箇条書き
※ブロック要素
上記２つの直下には<li>しか入れてはいけない
DOCTYPE宣言でHTMLのバージョンを宣言
<!DOCTYPE html>と宣言することでHTML5が適用される
設定に関する情報…head
<head>内に書く内容
文字コード指定…<meta charset="UTF-8">
ページタイトル…<title>タイトル</title>
CSS読み込み…<link rel="stylesheet" href="スタイルシートのURL.css">
div要素
divisionの略。グループ化するために使用。
※ブロック要素
span要素
<span>～</span>で囲むと文字の中の一部のみ色を変えたりすることが可能。
※インライン要素
input要素
１業のテキスト入力を受け取ることが出来る。閉じタグ不要
type属性を指定することで見た目を変更することが出来る。
name属性で管理する。value属性で表示されるテキストを指定できる。
textarea要素
複数行のテキスト入力を受け取ることが出来る
～CSS～
文字の色を変える…color
color:色指定;
コメント…/* ～ */
HTMLと違うので注意
文字のサイズを指定…font-size
font-size:文字サイズ指定
・px
・em
・rem
・%
違いについては
様々なブラウザでの閲覧の可能性があるので、pxでの指定はあまりよろしくなさそう。
文字の種類を指定…font-family
font-family:"フォント名";
クォーテーションは基本つけときゃ間違いない気がする。
背景色指定…background-color
background-color:色指定;
横幅…width・縦幅…height
要素の横幅、縦幅を指定します。
auto,px,%等で指定。%指定すると親要素に対する%で表示。
class
classを指定することによりその要素に対する個別の指定が可能。
CSS内でclass名を指定する場合は先頭にドット「.」をつける。
li要素にlist-styleプロパティを指定
none指定でリスト先頭のマークを消すことが可能
後に続く要素の配置を指定…floatプロパティ
left、right、none(初期値)
要素に余白を入れる…padding、margin
値が１つだと上下左右すべてに適用
２つだと１つめが上下、２つめが左右に適用
４つだと、上、右、下、左の順に適用される。
特定の方向に指定したい場合はpadding-top,padding-bottom,padding-left,padding-right等を使用する
線を引く…border
太さ 種類 色を指定。
そのままだと要素が線で囲まれた状態になる。
特定の場所のみに線を引きたい場合はborder-top,border-boto,border-left,border-right等を使用する
