HTML / CSS について個人的リファレンス

HTML

<!DOCTYPE html>
宣言しておくのが必須のタグ。宣言しないと表示が崩れるおそれがある。

<html>
ルート要素となる。lang属性を持つことが推奨されている。

lang="(言語)"
文書の言語を指定する。"ja"ならば日本語、"en"ならば英語。


<head>
Webページに関連する設定や情報(メタデータ)を入れる。

<meta>
メタデータの大体を指定する。幾つもの属性を持つ。

charset="(文字コード)"
文書の文字コードを指定する。文字化けを防ぐ。大体UTF-8。

<title>
タイトルを指定する。

<link>
CSSを読み込むリンクを指定する。

rel="stylesheet"
スタイルシートを読み込むことの宣言をする。
href="(スタイルシートURL)"
スタイルシートのURLを指定することでスタイルシートを読み込む。


<header>
文書やセクションのヘッダーを示す。

<footer>
文書やセクションのフッターを示す。

<main>
ページのメインコンテンツであることを示す。

<nav>
ページのナビゲーションのセクションを示す。

<aside>
ページの本文から外れた補足的な内容のセクションを示す。

<article>
ページの記事のセクションを示す。

<section>
ページの一般的なセクションを示す。他に適したセクショニング・コンテンツがないならコレ。
というか正直<article>との使い分けがわかりづらすぎる。

<div>
divisionの略。囲んだものをブロック要素としてひとまとまりにする。

<span>
囲んだものをインライン要素として扱う。局所的な修飾などに便利。

<h1> ~ <h6>
headingの略。見出しを表示する。6段階ある。

<p>
paragraphの略。段落を表示する。

<a>
anchorの略。リンクを貼る。href属性を持つ。

href="(リンク先URL)"
リンク先を指定する。"#"を指定するとどこにもジャンプしなくなる。

<img>
imageの略。画像を貼る。src属性とalt属性を持つ。

src="(画像URL)"
画像のURLを指定することで画像を表示する。
alt="(画像の説明)"
その画像が概要を記述する。画像が読み込めなかった時に表示される。

<ul>
unordered listの略。順番を持たないリスト(箇条書きなど)を表示する。
<ol>
ordered listの略。順番を持つリストを表示する。
<li>
list itemの略。上記どちらかのリストの項目を表示する。

<input>
1行の入力フォームを表示する。入力に関連する属性がある。

type="(フォームの内容)"
textであればただのテキストを、dateであれば日付を入力するためのフォームになる。
buttonを使うくらいなら<button>を使え。
value="(初期値)"
フォームに予め表示しておく内容を指定できる。

<textarea>
複数行の入力フォームを表示する。最大値(maxlength)とかも指定できる。
value属性が使えないので、タグで囲むことで初期値を指定する。

<button>
ボタンを表示する。<input type="submit">を使うよりセマンティックだし使い勝手もいい。
value属性はあるけど初期値はタグで囲むことで指定する。

<!-- -->
コメントアウトを記入する。


CSS

position
要素の位置の決め方を指定する。

top left bottom right
要素の位置を指定する。positionがstaticのとき以外有効。

display
要素の表示形式を指定する。flexが好き。

flex
flexコンテナの要素の幅の表示をまとめて指定する。

flex-flow
flex-directionflex-wrapをまとめて指定できる。個別に指定することが個人的に多い。

flex-direction
flexコンテナの要素の並び順を指定する。

flex-wrap
flexコンテナの要素の折り返しを指定する。

justify-content
flexコンテナの要素の横軸の配置の揃え方を指定する。

align-items
flexコンテナの要素の縦軸の配置の揃え方を指定する。

float
要素を左か右のいずれかに寄せる。古い。

transition
アニメーションの変化の対象や時間を指定できる。多くの場合hoverセレクタと組み合わせる。

width
幅を指定する。

height
高さを指定する。

background
背景の色・画像(URL指定)・開始位置・大きさなどを指定する。

opacity
要素の透明度を指定する。

list-style
リストの先頭のマーカーのタイプを指定する。表示位置も指定できる。

margin
要素外の余白を指定する。borderの外側にできる。

padding
要素内の余白を指定する。borderの内側にできる。

border
要素の周囲にボーダーを指定する。

border-radius
ボーダーの四隅を丸める。

box-shadow
要素の影を指定する。

cursor
要素にマウスオーバーしたときのカーソルの形を指定する。

text-align
テキストなどインライン要素の配置の揃え方を指定する。

line-height
行間を指定する。

font-family
文字フォントを指定する。

font-weight
文字の太さを指定する。ヘッディング・コンテンツの奴らはこれが常にbold。

font-size
文字サイズを指定する。

letter-spacing
文字と文字の間隔を指定する。

color
文字色を指定する。

/* */
コメントアウトを記入する。


:hover
マウスオーバーしている間のスタイルを指定する。

:active
クリックしている間のスタイルを指定する。

:nth-child()
親要素から見てn番目の、付随する要素のスタイルを指定する。

:first-child :last-child
親要素から見て、最初または最後の要素にのみスタイルを指定する。

nth-of-type()
付随する要素のn番目のスタイルを指定する。

:fist-of-type() :last-of-type
最初または最後の要素にスタイルを指定する。

:not()
条件に合致する要素を省いてスタイルを指定する。

::after ::before
疑似要素を作成する。


HTML・CSS 共通

HTMLの全タグ
グローバル属性としてclass属性・id属性を持つ。

class="(クラス名)"
HTMLの各要素にclass属性を付けることで、CSSで特定の要素を指定できる。
CSSで指定する際には先頭に".(ドット)"を付けて指定する。

ブロック要素・インライン要素
インライン要素の中にブロック要素は持つことができない。
CSSの方でdisplayから指定もできる。

ブロック要素
要素の幅は親要素いっぱいとなり、marginなども指定できる、
インライン要素
要素の幅はそのテキストの情報に左右され、marginなども持たない。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.