1限目：CSSの基本事項について
2限目：練習問題の説明
3限目：マークアップの練習
4限目：練習問題の解説
5限目：本日の講義のまとめ
今日教わったこと
・マークアップの目的は、HTMLをどうにかして何が書いてあるか検索エンジンに伝える
・HTMLの練習をするなら保存はこまめに
・実務ではデザインラフに対してどのようにCSSを書いていくか想定しながら作成する必要がある
・どのツールでコードを書くかは家では自由だけど会社では指定される。もし求人票に書いてあったらそのツールで書いて慣れるのもいい。
・実務だったらXDとかのデータでついてくる。余白やフォントの確認もそれでする。なので画像だけってのはない。
・CSSは一番下に記述されたものが一番強く優先される。あとはタグに直接書いているのも強い。
・画像のaltについて、意味がない画像の場合は書かない場合もある。会社のルールに従う。
▼CSSの基本構造について
全部できなくもないけど別に記述するのが一番ポピュラー。
・HTMLファイルとは別に記述する場合→headタグ内に読み込みの記述を入れる
だいたいリセットCSSとスタイルCSSで2行書く。リセットCSSの書き方はググれば出てくる。スタイルの方は名前を指定されたらそれを従う。
typeの部分はあった方がいいけど無くてもいけるらしい。
・HTMLファイル内に記述する場合→head タグ内（の直前が良い）に記述する
記述が長くなって後が困るのであんまりやらない。
・HTMLタグにインラインで記述する場合→スタイル（style）属性を使用して記述する。
1つ1つのHTMLタグの要素に対して記載する
・SEO的にって言われる＝検索結果の上に行くか下に行くか。ただ、結局上に行くのはスポンサーサイト。
何にせよきれいに書くに越したことはない。
・CSSもまずは文字コード宣言をする。だいたいUTF-8
・リセットCSSとスタイルCSSって同じファイルで記述してもいいらしい。
▼セレクタの記載方法
・全称セレクタ：全ての要素に一括で指定する時に使う
・型セレクタ：指定した特定の要素の全部に指定したい時に使う
・idセレクタ（#）：id属性を付与したものに対して指定したい時に使う
・classセレクタ（.）：class属性を付与したものに対して指定したい時に使う
・子孫結合子セレクタ：1つのセクションの中に入った特定の要素のタグ全部に対して指定したい時
↓今は一旦2つのセレクタの間に記載するものがあるんだなくらいの認識で↓
・子結合子セレクタ（>）
・隣接兄弟結合子セレクタ（+）
・一般兄弟結合子セレクタ（~）
▼幅・高さの単位（何に対する割合か指定する）
px（ピクセル値）：絶対にそのサイズから変えてほしくない。デバイスによってはみ出す可能性も出るのであんまり使わない
%（要素の割合（百分率））：ページの大きさによって変わる
em（要素の割合）：フォントに対してのみ使う。親要素のサイズに対する割合で指定。1em＝100％
rem（ルート要素の割合）：フォントに対してのみ使う。初期設定で16pxに設定されてる。HTMLタグで指定されているサイズに対する割合を指定する。
vw（画面の表示幅の割合）：10vw＝画面幅の10％で指定する。
vh（画面の高さの割合）：10vh=画面の高さの10%で指定する。
calc 関数（値の計算）：計算式で指定する
▼色の指定方法
カラーネーム
・＃rgb（ハッシュ（#）で始まる 16 進数 3 桁）：Webだと3桁でも反応してくれる
・＃rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
・＃rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）：下2桁で透明度も指定する。00が完全に透明でffが完全に不透明
・rgb(r,g,b)（rgb 関数）：RGBのそれぞれを数値で指定する
・rgba(r,g,b,a)（rgba 関数）：RGBのそれぞれを数値で指定したうえで下1桁で透明度を指定する。完全に透明が0で不透明が1
・hsl(h,s,l)（hsl関数）：色相・彩度・輝度を数値でしている。
・hsla(h,s,l,a)（hsla関数）：色相・彩度・輝度・透明度を数値で指定している
・線形グラデーション（linear-gradient 関数）：どちら側から何色に変化するかを指定できる
・放射グラデーション（radial-gradient 関数）：どこを起点にどんなサイズで何色に変化させるかを指定できる
※グラデーションはネットにジェネレーターがあるから活用した方がいい
・Google chrome検証ツールではCSSの内容を修正することもできる（あくまでローカルの話）
今日の参考サイト
※今日は補足分のみ
コメント