〇imgタグとｃｓｓ背景
HTML画像 imgタグはテキストが追加できる。消えてはいけない画像のときにつかう
CSS背景 背景は消えても大丈夫な場合のイラストなどのときに使う
CSS疑似要素 見出しの装飾などに使う
background-attachement 背景画像の固定・移動
値をfixed にして、ブラウザをスクロールしたときに背景画像が固定されて移動しないようになる
ショートハンド
margin:(10px 20px 30px 40px); 纏めて書ける
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; これを上記で一行で
margin: 10px; 4辺全て10pxずつ
margin: 10px 20px; 上下10px 左右20px
border: 1px solid #ff0000; 線幅 線状 カラーをまとめて
background: 色 画像 位置 繰り返し; まとめられる
background: 色;
このように色のみを指定してしまうと、画像位置繰り返しの部分は初期化されてしまう
google フォントの使い方
注意点 CSSに記入時和文フォントを先に記述してから英文フォントを書き込む
font-family:”Roboto”, “Sawarabi Mincho”, serif;
ウェブフォントのメリット
・サイト製作者側が意図するフォントで文字を表示させられる
・文字を画像で表示せずに済み、SEO的にも強くなる 文字で表現できるため
・内容の修正や更新が簡単
・自動翻訳や音声読み上げにも対応できる
ウェブフォントの注意点
・有料フォントもある
・無料でも利用規約に注意 ライセンス表示や商用利用不可など
・日本語が少ない
・CSSを知っている必要がある
〇ブロック要素の特徴
- 幅の高さの概念がある
- 上下左右のpaddingを設定できる
- 上下左右のmarginを設定できる
- float やpositionなどで特別指定しない限り、配置された要素は自動改行され上から下に並ぶ
〇インライン要素の特徴
- 幅と高さの概念がない
- 上下marginが無効 左右は効く
- br要素で強制改行されない限り横並び
〇インラインブロック inline-block
- インライン同様に改行されず横に並ぶ
- ブロックと同様に幅高さ上下左右のmargin paddingの設定ができる
- 親要素のtext-align属性でテキスト同様に左右方向の行揃えが可能
〇不透明度 opacity
透明度を1～100％を0～1で表す
透明にできるんだって！
〇デベロッパーツールの使い方
右クリック検証で表示 もしくはF12
その場で見ためを変更できるのでよく使う
今日のごはん
