HTML&CSSノート
HTML＆CSSの主要なタグの忘備録。自分自身の反転学習用です。
HTML
Emmet（ショートカットキー）
! 一般的にHTMLで必要な要素
nav>ul>li navの下にulその下にliみたいな感じで小要素を展開できる
ul>li*5 ulの下にli要素を5個展開できる
一番最初に<!DOCTYPE html>（これはhtmlですと教える。）
headには設定を書く
具体的にはmeta charset="utf-8"（コンピュータが理解するために文字化けを防ぐ）やtitleやlink rek="cssの名前" href="cssファイルの名前"
h1、h2タグなど
見出しをつけるためのタグ
aタグ
リンクを作成するためのタグ
hrefで実際のURLを追加できる。
imgタグ
画像を付け加える。このとき src="/tweets.png" って感じで最初に/を入れる。alt属性をつけることによって、画像の説明文をつけてくれる。
ol、ul、liタグ
olタグ数字区切りのリストを作成できる。
ulタグ ・ 区切りのリストを作成できる。cssにlist-style:none;を加えると ・ を表示させなくできる。ヘッダーやフッターには最適。
div
まずはhederやmainやfooterなどをくぎって全体を小分けするところから。さらにその中にdivを書いて要素を小分けしていく。大きなdivの中にはさらにdivを書いて小分けにするとおしゃれ。
span
文字の中の一部のみ色をかえるときにこれを使う。
header、footer、main、section、article、nav、aside、formなど
セマンティックなHTMLの要素でdivと変わらないがSEOの観点などで重要。
header、footer 読んで字のごとく
section 文章の塊などを入れる
nav ページ内に飛ぶリンク
aside 間接的な要素。サイドバーなどに使われる
hr、br、pなど
hr ラインを引く
br 改行
p 画像のちょっとした説明文とかを付け加えるときに使うタグ。
form、label、input、button、textarea
form ウェブサーバーに何かしらの情報を送信するための箱。action属性を追加することでどこに送信するかを指定する。
button ボタンを作れる。何も属性を追加しなかったらformの内容が送信される。
label inputに説明書きなど関連づけて何かを追加する。この場合、labelのfor属性とinputのid属性を合致させる
input 入力欄を作成する。type="xx"でボタンみたいな形やパスワードを入れる形式に変更できる。name属性を追加することでサーバーに送る情報に名前をつけられる。
class
要素ごとの名前だ。複数のインライン要素なんかをに変更したいときは、btn xxという感じで頭に同じクラス名をつけるのが良き。
table、thead、th、tbody、tb、tr、colspan、rowspan
table 表
thead 表のヘッダー(thを囲うためのもの)
th 列のタイトル
tbody 表の中身(tb、trを囲うためのもの)
tr 行
tb 行の中の１要素。左から順番に。
colspan、rowspan colspanが行数の指定。rowspanが列数の指定
CSS
font_〇〇
sizeやfamilyと入力することによってサイズやフォントの種類を指定できる。
width：横幅 height：縦幅
画像の縮尺なんかもうまく調整できる。widthの上手い使い方
最初に大きなdivで横の広さを決めた上でwidth:xx%という書き方をすると綺麗なレイアウトを作成できる。
float
htmlは書いたときは全て縦並び。それを横並びにする便利CSS。
pading、margin
位置を調整するCSS。
時計回りに指定することで省略できるよ。
一個の引数だと上下のみ、二個だと上下左右
marginはpadingの外側の枠。autoで中央揃えできるお。
border
border:太さ 種類 色 を指定して線を引くことができる。
background
background-colorで色の指定。
image:url(xx)で背景画像。
size:coverで背景を埋め尽くすまで一つの画像で表現できる。
rgba(色, 色, 色, 透過度)で背景色だけなどを透過できるようになる。ヘッダーなど他とダブることが前提のものに使える。
opacity
透明にできる。０が完全透明、１が不透明だ。
letter-spacing、line-height
文字の幅を広げれる。
行間を広げれる。
display
インライン要素、ブロック、インライングロックを変更できる。
インライン要素は大きさや位置を変更しずらい。
ブロックは縦並び、インラインブロックは横並びだ。
border-radius
角を丸くできる。
text-align
インライン要素とインラインブロックの横の位置をずらすことができる。
fontawesome
アイコンを追加できる。
headにlink rel="css" href="<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">"
を打ち込むことで参照できるようになる。
使い方はfacebookの場合、<span class="fa fa-facebook">って感じ。使いたい項目をURL（https://fontawesome.com/）から探し頑張って使う。
hover
div:hoverと記述することによってカーソルが当たった時のアニメーションを追加できる。
transition
アニメーションを付け加えることができる。transition:変化の対象(allが一般的)、何秒後(1sなど)と記すことでどこが何秒後に変化するか指定できるお。hoverと一緒に使うことがよくあるお。
position:abdolute top: xx left:xx
と指定することによって場所の絶対値を指定できる。これを組み合わせることによって画像の中に文字を入れることもできる。親となる画像にはposition:absoluteと記載する必要がある。
box-shadow
aタグで作ったボタンなんかに影をつけれる。
box-shadow:右方向px 下方向px 影の色という書き方だ。
div:active
クリックした沖のアニメーションをつけれる。
box-shadow:none;とかにすることによって押した感をつけれる。
position:fixed
position:fixed; top:0;と書くことでスクロールしてもそれを固定できる。ただ普通にやるとスクロール先の項目とダブってしまうので、z-index:10;と記載してあげることによって順位づけを行うことができる。
この記事が気に入ったらサポートをしてみませんか？