本日のテーマ
HTMLとCSSを結び付けていきましょう
授業詳細
【まとめサイト】
- HTMLとCSSの基礎をまとめたサイト
https://samplesdl.me/training_html-css/ - HTML-CSS 入門講座概要
https://html-css.hamaya2020.com/
img 要素（画像）
ページの中に画像の埋め込みを定義します。src 属性で表示する画像ファイルを指定し、alt 属性で代替テキストを指定します。代替テキストは、なんらかの原因で画像が表示できない場合に代わりに表示する文字列になります。代替テキストはアクセシビリティの観点で必ず指定するようにしてください。
iframe、imageはインライン性質を持っている。インラインは自分の幅をもっているので、並びになる。
ブロック性質は横幅全部自分の領域のため、自分の隣には何も並ぶことができない。
CSSとの紐付けについて
HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用されます。
CSSの基本構造について
- HTML ファイルとは別に記述する場合
- HTML ファイル内に記述する場合
- HTML タグにインラインで記述する場合
CSS：セレクタの記載方法
- 全称セレクタ
- 型セレクタ
- id セレクタ（#）
- class セレクタ（.）
- 子孫結合子セレクタ
- 子結合子セレクタ（>）
- 隣接兄弟結合子セレクタ（+）
- 一般兄弟結合子セレクタ（~）
CSS：幅・高さの単位
- px（ピクセル値）
- %（要素の割合（百分率））
- em（要素の割合）
- rem（ルート要素の割合）
- vw（画面の表示幅の割合）
- vh（画面の高さの割合）
- calc 関数（値の計算）
CSS：色の指定方法
- カラーネーム
- #rgb（ハッシュ（#）で始まる 16 進数 3 桁）
- #rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
- #rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
- rgb(r,g,b)（rgb 関数）
- rgba(r,g,b,a)（rgba 関数）
- hsl(h,s,l)（hsl関数）
- hsla(h,s,l,a)（hsla関数）
- 線形グラデーション（linear-gradient 関数）
- 放射グラデーション（radial-gradient 関数）
授業の感想
今回はCSSについては初めて学び、オンラインの聴講のみだったので、自分的にはとても厳しい時間だった。覚えることが多いのと、あまりイマージができずよくわかっていないと思う。
次回の来校時に手を動かして覚えたいと思う。
HTMLは今まで使い方を間違えていたところが多く、今回の時間は大変実りのある時間だった。