サイズの指定方法について

本日の教材動画はこちら 今までなんとなく使っていたサイズの指定方法ついて詳しく勉強していきたいと思います。 ＜絶対的なサイズ＞について 絶対的なサイズとは、名前の通り誰がどの端末でみても同じ大きさをたたき出してくれるサイズの指定方法です。種類と読み方、それぞれのサイズ関係は以下となります。 in（インチ） →1icn = 2.54cm = 25.4mm mm（ミリメートル） cm（センチ） pt（ポイント）→72pt = 1inc = 6pc pc（パイカ） →1pc = 12pt ＜相対的なサイズ＞について 相対的なサイズとは、見る端末や指定環境によって大きさが変わるサイズのことです。サイズ…

構造的な擬似要素について

本日の教材動画はこちら 今回は子要素にかかる動的判別によるセレクタについて勉強しました。これは文字では伝わりづらいため、一先ず概要を書いてから画像でみていきたいと思います。 最初の子要素 最初の子要素に何か指定をかけたい場合、「:firs-child｛～…;｝」で指定をする 最後の子要素 最初の子要素に何か指定をかけたい場合、「:last-child｛～…;｝」で指定をする 唯一の子要素 唯一の子要素に何か指定をかけたい場合、「:only-child｛～…;｝」で指定をする 実際に書いてみました。まず用意したHTMLがこちらです。 HTML内容 次に外部CSSを下記の通り記述してみました 外部…

擬似要素について

本日の教材動画はこちら 擬似要素とは、動的に発生する事象を要素としてセレクタに使うためのものらしい。例えばまだ訪問していないリンクや訪問済みのリンク、マウスポインタが乗っている、フォーカス（選択）されているなど、見る側が何かしらアクションを起こせる場所をセレクタとして使える。 擬似要素の書き方と代表例 擬似要素は「：」を書いた後に擬似要素名を書き、うしろはいつも通りどうしたいかを｛ ｝で書く。今回は代表例を4つ紹介しながら書き方を見ていきましょう。 まだ訪問していないリンク（link） 未訪問先のリンクの指定は「a:link」となります。例えば未訪問先のリンクを、文字色を変えて知らせたい場合は…

属性セレクタでCSSを指定する

本日の教材動画はこちら HTMLには「属性」が指定されているものがある。と言っていたが、どれが指定されてるのかよくわからないし今まで当然のようにでてきてた属性ってそもそもなんだってばよ？となって調べてみた。 属性とは、どうやら「要素の何かしらの設定をつけるようなもの」らしい。なんだかふんわりしている。要素とは…？とか調べ出すと概念を把握するとこまで行きそうなためとりあえずそういうものなんだと思うことにして勉強を進めることにしました。 属性セレクタの利用方法について 今までタイプセレクタ、IDセレクタ、classセレクタを使ってCSSのデザインを指定してきました。今回はここに新しく「属性セレクタ…

特殊なセレクタの記述方法について

本日の教材動画はこちら 前回他にも色々細かくまとめられるらしいけど難しくてよくわからん！って言ってたら、今回少し触れることができた。というわけで今回は特殊なセレクタの設定方法をみていきます。 ＜親要素＞と＜子要素＞について理解する セレクタを理解するためには、まずは親要素と子要素について理解しておく必要があるようだ。「親要素」とは外側にある要素で、「子要素」はその内側にある要素。マトリョーシカの一番外側が親要素で、その中に入ってるのが子要素って認識でいいのかな？ちなみに子要素の中は孫要素というらしい。ひ孫とかもいるのかしらね。 ＜特殊なセレクタ＞について 特殊なセレクタの書き方はいくつかあるよ…

CSSをまとめて指定する方法

本日の教材動画はこちら まとめて指定→同じ設定にしたいということ。同じ設定をするためだけに、何行も同じこと書くのは無駄だよね？ならまとめて書いちゃおう！という考え方です。CSSをまとめて指定する方法は下記の2つがあります。 CSSファイルでまとめる HTMLでclassを指定した後、CSSファイル側でカンマを使ってclassの記述をまとめる方法。具体的な書き方は下記となる。 HTMLでclassを指定し CSS側ではカンマを使って内容をまとめる まとめ方は上記の通り、「.class,」でまとめる。最後のclass行はカンマ不要。まとめたい内容を｛ ｝内に書いた後は、通常通りの記述をする。こうす…

セレクタの種類と書き方について

本日の教材動画はこちら CSSを指定するのに必須なセレクタは、大きく分けて3種類あります。今回はそれぞれの特徴と書き方を見ていきましょう。 1. タイプセレクタ HTMLタグのこと。HTMLが記載してあれば、適応させるために新しく一文を書き加える必要などはない。今まで使ってきたCSSがこのタイプですね（ h1{～....} みたいなタイプ） 2. idセレクタ HTML側ではid属性を利用して指定し、CSS側では「＃」を使って選択する。1つのページ中につき一度しか同じ名前は使えないのが特徴。 3. classセレクタ HTML側ではclass属性を利用して指定し、CSS側では「 . 」を使って…

ブロック要素とインライン要素について

本日の教材動画はこちら CSSを取り扱う際に大事な要素となる、ブロック要素とインライン要素の違いについて勉強していきます。 ＜ブロック要素＞とは ブロック要素とは、その名の通りブロック単位で扱われる要素のこと。pタグやhタグ、tableタグなどがブロック要素となります。簡単な見分け方はタグの前後が改行されるかどうかで判断ができる。 ＜インライン要素＞とは インライン要素はブロック要素とは逆に、文章の一部だけを取り扱う要素のことを指します。aタグやspanタグ、imgがそれに該当し、タグ囲った部分など一部だけが適応されるのが特徴です。 CSSを取り扱う上で把握しておきたい違い ブロック要素はブロ…