自分用メモまとめ

ただの備忘録です


■参考

文章など内容を書くための要素

h2~h6要素

見出し:数字が若いほど(たしか意味的にも)大きい見出し

見出しに記号をつける

疑似セレクタ :before :after
プロパティ content (表示させる記号を指定)
を使用する。

つけたい要素のおしりに疑似セレクタを記述。
(例)h4:before
&{}内に content:'記号'; を記述。

見出しの後ろ、あるいは両方に指定することもできる。
両方の場合は
h4:before,
h4:after
で記述。

p要素

段落

リストについて

ul要素(unorder list)

リスト:箇条書きのリストで表全体を示す。
文頭に記号のついた箇条書きになる。

ol要素(order list)

リスト:順序のあるリストで表全体を示す。
番号付の箇条書きになる。

li要素(list item)

リスト:項目
項目を順不同リストとして並べるときに使用。
サイトのナビゲーションやギャラリーなど、何かを同列に並べたいときもこれ。
中で br を入れてもOK。
※li要素以外をul要素、ol要素の中へ入れてはいけない。

ulとli、またはolとliの組み合わせで使う。

dl要素

リスト:見出し付きの定義リストで表全体を示す。
ある単語とその説明をセットにしたもの。用語集等。

dt要素

リスト:定義する用語

dd要素

リスト:用語の説明

dl、dt、ddが1セット。(dlの中にdt、ddが入る)

lh要素

リストのタイトル。
HTML3.0の時に検討されていたタグで、実際には存在しない。

2行目以降の字下げ

CSSに text-indent: -1rem; を記載する。
※1行目は記号があるのでつじつまが合う?

各要素の並び方について

ブロックレベル要素

文章を構成する基本となる要素
ブラウザでは前後で改行される=タテに並ぶ
ひとつの塊として認識される
【例】div ul li など

インライン要素

ブロックレベル要素や文章の中にある要素
テキストと同じ扱い(=テキストと一緒に流し込まれる)
自動では改行されない=ヨコに並ぶ
【例】a br strong など

※CSSで変更できるので、あくまで初期状態のはなし。
※HTML4.01まで適用。HTML5では廃止。
 代わりにコンテンツモデルが導入されている。(P47参照)

テーブルについて

table要素

表全体

th

ヘッダーのセル
tr で囲った中に th の各項目を並べて入れる

tr

行を定義する=囲った部分が横一列になる(たぶん)

td

データのセル

rowspan="結合するセルの数"

縦方向に統合

colspan="結合するセルの数"

横方向に統合

表の幅について

セル幅が指定されていない場合、内容物(文字数など)に応じて横幅が自動で決まる。
そのため中身が少ないと狭くなり、折り返しが発生するときがある。
一部のセル幅のみ(thなど)を設定すると、それ以外の要素(tdなど)の幅のみが自動で決まるため、記述コードが少なめで済む。

テキストに意味を持たせる要素

※文書的に意味を持たせるためのものなので、見た目を変えるために使わないこと

small要素

注釈(免責事項、著作権表記など)。意味を弱める。
文字が小さくなる。

em要素

強調。
文字がナナメになる。

strong要素

emよりもさらに強調。
文字が太くなる。

b要素

他と区別したいテキスト(キーワード、製品名など)に使う。
文字が太くなる。

i要素

声、心の声(?)などに使う。重要性、強調は表さない。
文字がナナメになる。

mark要素 ※HTML5から

ハイライトして目立たせる。重要性、強調は表さない。
黄色マーカーがつく。

del要素

削除部分。
取り消し線がつく。

aside要素

補足的な内容。
HTML文書の中で複数回使ってもOK。

見た目を変えるCSS

font-weight

文字の太さを変える。

数値の場合

100、200、300、400、500、600、700、800、900から指定する。
太さが9種類用意されているフォントはあまりないので、変わらない場合もある。
標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなる。

キーワードの場合

normal:標準(=数値の400)
bold:太字(=数値の700)
lighter:相対的に一段階細くする
bolder:相対的に一段階太くする

iframe要素の中央寄せ

iframe要素はインライン要素なので、
display: block; で margin: 0 auto; を指定

max-width: auto; をかければ幅とか変えても真ん中になる(はず)

インライン要素なのでtext-align行けるはずなんだけど出来なかった(多分どっか別んとこを間違ってる)要確認。

その他

コメントアウト:/**/


戻る