HTML+CSS 2019-07-19
前回
アップデート
やったこと
分かったこと
やってみる
分からなかったこと
全体の目標
エンジニアがマークアップしているというのはどういうことか雰囲気を知る
HTMLメールやWordPressでちょっとした見た目を調整できる
EPUBの調整ができる?
一からHTMLとCSSを書けるようになる
簡単なJavaScriptまで行けたら素晴らしい
今回の目標
全体を思い出す
よく使うCSSプロパティを知る
調べる方法を知る
当初の期待と比べる
ページ作成の全体
HTMLとCSS
HTMLの書き方
CSSを書く場所
CSSの書き方
HTMLとCSS
HTMLの書き方
code:index.html
<html>
<head>
</head>
<body>
<h1 class="title">ページタイトル<h1>
</body>
</html>
抜き打ちテスト
CSSを書く場所
三か所
code:sample.html
<html>
<head>
<style>
p span {
color: black;
}
</style>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1 style="font-size: 30px;">title</h1>
</body>
</html>
CSSの書き方
よく使われるCSSプロパティ
ブロックのレイアウト
display
block, inline, inline-block, flex, grid
position
basis, relative, absolute, fixed
top
left
bottom
right
width
height
margin
padding
装飾
font-size
font-weight
font-family
line-height
letter-spacing
text-align
left, center, right
text-decoration
border
border: solid 1px black
border-color: white;
border-style
border-width
border-radius
color
background
background-color
background-image
background-position
list-style
opacity
transform
transform: translateX(50%)
translate
scale
rotate
skew
動き
transition
animation
ビューポート
メディアクエリー
code:sample.css
h1 {
font-size: 20px;
}
@media (max-width: 640px) {
h1 {
font-size: 20px;
}
}
@media (min-width: 640px) {
h1 {
font-size: 40px;
}
}
CSSセレクター
要素セレクター
p, div
code:sample.css
div img {
color: ...;
}
子孫セレクター
p em, div img
クラスセレクター
.image, .title
code: sample.css
.image {
width: 20%;
}
code:sample.html
<div class="image">
</div>
IDセレクター
#header
子要素セレクター
.media > img: mediaクラスを持ってる要素の直接の子要素のimg要素
code:sample.html
<div class="media">
<img> <!-- これは対象 -->
<p> ... </p>
<div class="thumbnail">
<img> <!-- これは対象外 -->
</div>
</div>
詳細度
code:smple.css
/*
id > class > element
elem: 10pt
class: 100pt
id: 1000pt
*/
color: red;
}
div p img {
color: black;
}
div {
color: yellow;
}
.article {
color: blue;
}
code:sample.html
<div id="main" class="article">
</div>
::beforeと::after