HTML+CSS 2019-05-10
前回
単位について
カスケード(滝。継承)
アップデート
やったこと
分かったこと
やってみる
分からなかったこと
全体の目標
エンジニアがマークアップしているというのはどういうことか雰囲気を知る
HTMLメールやWordPressでちょっとした見た目を調整できる
EPUBの調整ができる?
一からHTMLとCSSを書けるようになる
簡単なJavaScriptまで行けたら素晴らしい
今回の目標
HTMLについて
セレクターについて
HTML
今日は「きちんと」は説明しません
HTMLとは
ドキュメントの意味をコンピューターに教えるためのマークアップ(印付)の言語
形式
タグを使う
親子関係がある
先祖 - 親 - 子 - 子孫
種類が決まっている
<p>、<a>、・・・
例
code:title.html
<div class="title">
<h1>
<span class="aloha-shirts">
<span class="limited"><span>限定各色<br>70着</span></span>
<span class="lede">SPACE<br>BROTHERS</span>
<span class="product-name">アロハ</span>
</span>
<span class="ampersand">
&
</span>
<span class="slippers">
<span class="limited"><span>期間<br>限定</span></span>
<span class="lede">月面足跡スタンプ</span>
<span class="product-name">ビーチ<br>サンダル</span>
</span>
</h1>
</div>
CSSの書き方
HTMLのstyle属性に書いていった
<style>要素に書いてみる
別ファイルに書いてみる
<link href="./style.css" rel="stylesheet">
セレクター
要素にまとめてスタイルを指定できる
code:style.css
span { /* 要素とか(セレクター)+「{」記号 */
color: rgb(255, 0, 0); /* style属性に書いてたのと同じ */
} /* 「}」記号で「ブロック」を終了させる */
/* 「すべての」span要素に color: rgb(255, 0, 0); を適用 */
要素以外にも種類がある
要素セレクター
code:element.css
/* 全ての<span>要素 */
span {
}
/* <h1>の子孫の<span> */
h1 span {
}
/* <h3>の子孫の<span> */
h3 span {
}
/* <span>の子孫の<span>要素 */
span span {
/*
* * 適用される要素の予想を立てて
* * 確かめてみましょう
*/
}
クラスセレクター
class属性は特別
.記号+classの名前
code:class.css
/* class="limited" と付いてる要素 */
.limited {
}
/* class="aloha-shirts" の要素の子孫の class="limited" の要素 */
.aloha-shirts .limited { /* 「.limited」の前に空白がある */
}
/* class="limited" と付いてる<span>要素 */
span.limited { /* 「.limited」の前に空白がない */
}
/* class="limited" と付いてる<div>要素 */
div.limited {
}
/* div要素の子孫の class="limited" が付いてる要素 */
div .limited { /* 「.limited」の前に空白がある */
}
次回
HTMLちゃんとやる
参考リンク