ドットインストールのCSS入門の動画を見て分かったこと(箇条書き)
01CSSとは何か
・CSSはHTMLと共用する。HPの見ばえを規定する。
・必要なツール：ChromeとAtom
・CSSのバージョン：CSS2.1での内容
・CSSの仕様書：W3CのHPに記載
02はじめてCSS
・CSSを書く方法：HTML内の<style>、style属性、CSSファイルの読込
・<div>は一般的に前後に改行が入るブロック要素であり、<span>は、前後に改行が入らないインライン要素である。どちらも文章をブロック型に区分する機能を持つ。
・使用例
<style>p{color: orange;}</style>
Or
<link rel="stylesheet" href="default.css">
どちらも<head></head>内部で行っていた。
(・CSSでのコメント方法：/*文章orコード*/`)
03セレクタとプロパティを理解しよう
・基本構造
セレクタ{プロパティ名: 値;}
Or
セレクタ{プロパティ名: 値; プロパティ名: 値;}のように複数のプロパティを使用できる
・以下セレクタ部分に入るもの
・すべての要素を指定したい場合：*、ユニバーサルセレクタという
・セレクタに要素名を書く場合：p,h1,divなどのタグが個別のセレクタに対応する
・#の後にid名
・.の後にclass名
・使用例
h1 {color: orange;}
#japan {color: violet;}
.countries {color: skyblue;}
04もっとセレクタを理解しよう
・a, b：同じスタイルを複数のセレクタに使う場合
・a b：aの下の階層にあるbの全てにスタイルを使う場合
・a > b：aの直下にあるbだけにスタイルを使う場合
・a + b：aの次に来るa要素にスタイルを使う場合
・ab：aでありかつbである要素にスタイルを使う場合
05属性セレクタを使ってみよう
・使用例1：a[title] {color: skyblue; }
・使用例2：a[href=””] {color: skyblue; }
・使用例3：a[class~=”search”] {color: skyblue; }
06疑似クラスを使ってみよう
・リストの最初だけスタイルをつけたい場合：ul li:first-child {color: skyblue; }
・リンクを訪問したことがあるかどうかでスタイルを変えたい場合：a:link {color: skyblue; }ora:visited {color: skyblue; }
・マウスが載った時、クリックした時のスタイルを指定したい場合：a:hover {color: skyblue; }ora:active {color: skyblue; }
・入力ボックスにフォーカスが当たった時にスタイルを当てたい場合：input:focus {background: skyblue; }
07疑似要素を使ってみよう
・ある文章の一行目のみにスタイルを当てたい場合：p:first-line {color: skyblue; }
・ある文章の一文字目のみにスタイルを当てたい場合：p:first-letter {color: skyblue; }
・ある要素の直前または直後に要素を付け加えたい場合：p:before {content: “--> ”; }orp:after {content: “<-- ”; }、この場合pタグの前と後にこれらの記号が表示される
08セレクタの詳細度を理解しよう
・複数のセレクタがあった場合にどのセレクタが優先されるかを決めるためのルール
セレクタを設定すると4つの数値で詳細度が決まる
・(a)style=””：スタイル属性にスタイルを書くことで1ずつカウントされていく
・(b)id：セレクタにidが入るたびに1ずつカウントされていく
・(c)id以外の属性か疑似クラスが入るたびに1ずつカウントされていく。
・(d)要素名か疑似要素が入るたびに1ずつカウントされていく
・(a)の方から比べていって、大きいほうから優先されていく
・具体例：a{color: skyblue; }では、(a)が0、(b)が0、(c)が0、(d)が1である。
・具体例：a.link {color: skyblue; }では、(a)が0、(b)が0、(c)が1、(d)が1である。
・a{color: skyblue; } a.link {color: pink; }では、後者の方が優先される。
・同じ詳細度の場合、後から描いた場合が優先される。
・a{color: skyblue; } a.link {color:pink; } a.search {color: violet; }では最後が優先される。
・具体例：a#site {color: orange; }では、(a)が0、(b)が1、(c)が0、(d)が1である。
・a{color: skyblue; } a.link {color:pink; } a.search {color: violet; } a#site {color: orange; }では最後が優先される。
・(b)~(d)はcssファイルに書くが、htmlファイルにスタイル属性style=””がある場合はこれが優先される。
・a{color: skyblue; }でもa{color: skyblue !important; }のように「!important」祖挿入すれば最優先にできる。
09プロパティの値を指定しよう
・プロパティの値の指定方法：主に使われるのが「長さ」と「色」である。
・長さ：px,em,%
・emと%は相対的な指標になっている。
・px：body {font-size: 16px;}
・em：h1 {font-size: 2em;}前で定義したピクセルの二倍になる。body {font-size: 16px;} h1 {font-size: 2em;}の場合h1は32ピクセルになる。
・%：font-size以外も対応していて、ベースになっている親要素の幅や大きさの~%にするか決めることができる。body {font-size: 16px;} h1 {font-size: 2em;} h2 {font-size: 150%;}の場合h2は親要素(body)の1.5倍の24ピクセルになる。
・色：blue,skyblue,green,orange,violetなど名前とRGBで指定する方法がある。
・RGB：Red,Green,blueを16進数や数値で指定していく。
・Red,Green,Blue：16進数の場合「0からf」か「00からff」で指定でき、数値の場合は「0から255」か「0%から100%」で指定することができる。
・h1を青色に指定する場合：h1{color: blue; }かh1{color: #00f; }かh1{color: #0000ff; }
・「#00f」の意味：redが0、greenが0、blueがfull。
・RGBを数値や%で指定したい場合：h1{color: blue; }と同じ表示をh1{color: rgb(0, 0, 255); }やh1{color: rgb(0%, 0%, 100%); }で指定できる。
10ボックスモデルを理解しよう
・プロパティの一つ「ボックスモデル」：HTMLの要素はブラウザに反映された時に四角い領域を持つ。この領域を確保するためのプロパティである。ホームページでコピペする時など出てくるアレ。
・この四角いボックスの高さを「height」と、横幅を「width」と呼ぶ。
・borderプロパティでこの領域に枠線をつけることができる。
・borderと要素の間にある余白はpaddingというプロパティで
・境界の外にある、親要素との境目の余白はmarginプロパティで管理していく。
・divにwidthとheightを設定する場合：div {width: 200px; height: 100px;}
・%を使う場合：div {width: 50%; height: 100px;}にすると、親要素の50%の幅を保つ。実際のブラウザ画面を見ると、HPの幅を変更してもその半分の幅を保つことが分かる。
※heightの注意点：div {width: 200px; height: 50%;}ではHPの高さの半分にならない。高さに関しては親要素の高さを明示しておかないと機能しない。
divの親要素はbodyやhtml等になるので、cssファイルの一番上にbody, html {height: 100%;}と挿入しておくと機能する。
11borderで境界線のスタイルを変えよう
・border-color：色
・border-width：
・border-style：solid直線、dotted点線、dashedは線、doubleは二重線、insetとoutsetは立体的に見せるためのスタイル
・領域を示す境界線の幅を4px線を点線ピンク色で示したい場合：div{border-color: pink; border-width: 4px; border-style: dotted;}といったコードになる。
・これら3つをまとめて書くことができる：div{border: pink 4px dotted;}
・以上の設定は上下左右すべての境界線に対する設定だったが一部の設定もできる：div{border-top: pink 4px dotted;}
12paddingで余白を制御しよう
・ブラウザが初期設定としてmarginを持っている
・body{margin: 0; }で初期設定のmarginを消すことができる。
・paddingも上下左右個別に設定できる：「padding-top: 10px;」「padding-right: 10px;」「padding-left: 10px;」「padding-bottom: 10px;」
・「padding:」の形でももちろん使える。しかし与える値の数(1~4)によって意味が異なる。
・与える値が1個の場合：上下左右すべてを1つの値で設定する
・与える値が2個の場合： 1つ目の値がtopとbottom、２つ目の値がrightとleftを設定する、div {padding: 10px 50px;}だと上下のpaddingが10px、左右のpaddingが50pxになる。
・与える値が3個の場合：1つ目の値がtop、２つ目の値がrightとleftを、3つ目の値がbottomを設定する
・与える値が4個の場合：1つ目の値がtop、２つ目の値がrightを、3つ目の値がbottomを、4つ目の値がleftを設定する
13marginとmarginの相殺を理解しよう
・marginの設定：基本的にpaddingと同じ
・maiginの相殺：div #box1{background: orange; margin: 10px 20px 30px;} div #box2{background: silver; margin: 20px; }のコードでは、合計50pxのmarginが空くと考えられるが、実際は30pxしか空かない。上下のmarginは統合され大きいほうのmarginが採用される。これをmarginの相殺と呼ぶ。
14文字に関するプロパティを使ってみよう
・text周りのスタイル：color,font-size,font-family,font-weight, text-align, text-decorationなどのプロパティ
・color：orangeなど
・font-size：14pxなど
・font-family：Arial, Helveticaなど
・font-weight：bold(太字)かnormalなどがある。
・text-align：right(右揃え),center(中央ぞろえ),left(左揃え)
・text-decoration：underline(下線),line-through(打消線),none(URLなどの下線を消す機能)
・使用例：p{color: silver; font-size: 24px; font-family: Arial; font-weight: bold; text-align: center; text-decoration: underline line-through;}
15list-styleでリストのスタイルを変えよう
・list-style-type：disc(黒丸),circle(白丸),square(四角),decimal(連番),lower-alpha(アルファベット順)などたくさんある。
・list-style-image：画像(顔文字など小さな画像が使われる)のファイル名を指定するとマーカーを画像にしてくれる
・list-style-position：inside(マーカーをリストの中に入れることができる),outside(デフォルト、番号やアルファベットなどのマーカーが本文の左に飛び出している)
・list-style：上の項目を一気に指定できる
・使用例：ul {list-style: inside decimal; }
・ul {list-style: inside decimal; }の注意点：ul {list-style: url(‘ファイル名.png’); }などｃ使うとlist-style-typeの設定は上書きされる。
16cursorでカーソルの形状を変えよう
・cursor：カーソルの形状を変えるためのプロパティ
・特定の領域に焦点があった時に「何ができるか」がカーソルの形で分かれば便利。
・「.help」：.help(cursor: help; )
・「.dragme」：.dragme (cursor: move; )
・「.clickme」：.clickme(cursor: pointer; )
・「.smile」：.smile(cursor: url(‘ファイル名.png’), auto; )、画像を張り付ける場合は画像が表示されなかった時に表示する文章を書く必要がある。「auto」と書いてもいい。
17backgroundで背景スタイルを変えよう
・使用例：body{background-color: silver; }
・画像をbodyの背景にする場合：body{background-image: url(‘ファイル名.png’); }、画像の背景の場合、デフォルトで繰り返し敷き詰められていく。変更したい場合はbody{background-image: url(‘ファイル名.png’); background-repeat: no-repeat; }(繰り返しなし)や
body{background-image: url(‘ファイル名.png’); background-repeat: repeat-x; }(x軸だけ繰り返す)や
body{background-image: url(‘ファイル名.png’); background-repeat: repeat-y; }(y軸だけ繰り返す)とコードを追加する。
・body{background-image: url(‘ファイル名.png’); background-repeat: no-repeat; background-position: 10px 20px; }(既定の位置から右に10px下に20pxの位置に背景画像を設置する)、このコードで背景画像をどの位置から始めるか指定できる。
body{background-image: url(‘ファイル名.png’); background-repeat: no-repeat; background-position: top center; }、background-positionはこのような書き方もでき、この場合はHPの上中央に画像が表示される。
・background-attachment：背景が画面のスクロールに追いついくように移動して表示されたり(scroll)、スクロールに関係なく特定の位置に背景画像が固定されたり(fixed)と設定できる。body{background-image: url(‘ファイル名.png’); background-repeat: no-repeat; background-attachment: scroll; }かbody{background-image: url(‘ファイル名.png’); background-repeat: no-repeat; background-attachment: fixed; }
・以上の機能を「background」だけでまかなえる。body{background: url(‘ファイル名.png’) no-repeat scroll; }といったコードの書き方になる。
18displayで要素の配置方法を変えよう
・HTMLのそれぞれの要素はどのように配置されるのかがあらかじめ初期値としてブラウザに設定されている。
・<h1></h1><p></p>など下に詰められて配置されていく要素と<a></a>や<span></span>など左に詰められて配置されていく要素がある。
・下に積み重なって配置されていくボックスを「ブロックボックス」、ブロックボックスを生成するh1やpのような要素は「ブロックレベル要素」と呼ばれる。
・に積み重なって配置されていくボックスを「インラインボックス」、ブロックボックスを生成するaやspanのような要素は「インラインレベル要素」と呼ばれる。
・初期設定で満足せず特定の要素の配置を変えたい場合：displayプロパティ
・display：block(ブロックボックスにしたい場合),inline(インラインボックスにしたい場合),list-item(リストのように左にマーカーを持たせたい場合),inline-block(インライン要素のように左から詰められていく要素だがブロック要素の性質を持つようになる),none(そもそも表示しない)
・h1とpを左から横に配置したい場合：h1, p{display: inline; }、インライン要素にすると、幅と高さの設定が無効になってしまう。h1, p{display: inline; }とh1, p{width: 120px; display: inline; }は表示画面に違いがない。
・インライン要素の幅と高さを揃えたい場合：h1, p{width: 120px; display: inline-block; }のコードを使うと高さと幅が有効になる。
・スクリプトによって要素の表示非表示を切り替えたい場合：「非表示にしたい要素やタグ」 {display: none;}
19display:tableを使ってみよう
・「display: table」：表組のようなレイアウトを簡単に作成できる。
・使用例：「HTML一部」<body><div class=”box gray”>文章その1</div><div class=”box silver”>文章その2</div><div class=”box orange”>文章その3</div></body>
「CSS」.gray { background: gray; } .silver { background: silver; } .orange { background: orange; }このままでは、文章が3つ縦に並んでおり、それぞれの行ボックスが上から灰色銀色オレンジ色の順に塗られている。
これを全体表と見なして、それぞれのdivを1つ1つの「レスツ」と見なして3columnのレイアウトに変更する。
方法は、上記の「HTML一部」を<body><div class=”container”><div class=”box gray”>文章その1</div><div class=”box silver”>文章その2</div><div class=”box orange”>文章その3</div></div></body>に変更し、「CSS」を.container { display: table; width: 300px; } .box{ display: table-cell;} .gray { background: gray; } .silver { background: silver; } .orange { background: orange; }とする。さらに.box{ display: table-cell; }から.box{ display: table-cell; width: 100px;}に変更すると表の各ボックスの横幅が100pxに統一される。
・さらに2×2の表を作りたい場合：
<body><div class=”container”><div class=”box gray”>文章その1</div><div class=”box silver”>文章その2</div><div class=”box orange”>文章その3</div></div></body>から<body><div class=”container”><div class=”row”><div class=”box gray”>文章その1</div><div class=”box silver”>文章その2</div></div><div class=”row”><div class=”box gray”>文章その1</div><div class=”box silver”>文章その2</div></div></div></body>
に変更し、さらに
<body><div class=”container”><div class=”row”><div class=”box gray”>文章その1</div><div class=”box silver”>文章その2</div></div><div class=”row”><div class=”box orange”>文章その1</div><div class=”box gray”>文章その2</div></div></div></body>
に変更する。
.container { display: table; width: 300px; } .box{ display: table-cell; width: 100px;} .gray { background: gray; } .silver { background: silver; } .orange { background: orange; }を
.container { display: table; width: 300px; } .box{ display: table-cell; width: 100px;} .row { display: table-row;}.gray { background: gray; } .silver { background: silver; } .orange { background: orange; }とすればよい。
20positionで位置を調整してみよう
・使用例：「HTMLの一部」<body><div id=”box1”></div><div id=”box2”><div id=”box3”></div></div></body>
・position：要素の位置を調整するプロパティである。
・div要素のボックスは通常前のコードのボックスの下にその後のコードのボックスが来る。
・上のコードの状態では、box1の下にbox2が配置され、box3はbox2の子要素として配置されている。
これらの位置を調整するにはpositionプロパティを使う。
このプロパティがとる値はstatic,relative,fixed,absoluteの4つがある。
・static：positionプロパティの初期値である。
・relative：staticの位置からずらしたいときに使う。
・具体例：「CSS一部」body { margin:0 ; } #box1 {width: 100px; height: 50px; } #box2 {width: 100px; height: 50px; }#box3{width: 50px; height: 25px; } #box1 { background: gray; } #box2 { background: silver; } #box3 { background: green; }から
body { margin:0 ; } #box1 {width: 100px; height: 50px; } #box2 {width: 100px; height: 50px; }#box3{width: 50px; height: 25px; } #box1 { background: gray; position: relative; top: 10px; left: 10px; } #box2 { background: silver; } #box3 { background: green; }に変更するとbox1の位置が変わる。
・fixed：スクロールしても位置を固定しておきたい要素に使う。配置の基準点が画面の左上になる。例えば、box1をfixedにしたら、box1は通常の要素の配置から外れるためbox2が繰り上がりで画面の左上に来る。box1も左上にあり、box1はスクロールしても追いかけるように左上を保持して移動する。
・absolute：親要素のポジションがどうかによって配置の基準点が変わってくる。#box3 { background: green; }を#box3 { background: green; position: absolute; top: 10px; left: 10px; }に変えてやると、box3は親要素の値(static)に影響を受け、基準点を画面の左上になる。Box3は左上から10px下10px右に配置される。
もし、box2の状態がrelativeだったら、box3は親要素box2の基準点に従い配置される。
21z-index、overflowを理解しよう
・z-index：要素の重なり順を指定するプロパティである。
・通常の状態の重なり順の確認：body{margin: 0; } #box1, #box2, #box3 {width: 100px; height: 50px; position: absolute; }#box1 {background: gray; top: 10px; left: 10px; } #box2 {background: silver; top: 20px; left: 20px; } #box3 {background: orange; top: 30px; left: 30px; }、重なり順は通常
後ろに書いたものほど上にくる
・z-indexの注意点2つ：position:static以外の要素、z-indexの値が大きいほど上にくる
・上記の例でz-indexを使った場合：body{margin: 0; }#box1, #box2, #box3 {width: 100px; height: 50px; position: absolute; }#box1 {background: gray; top: 10px; left: 10px; z-index: 3;} #box2 {background: silver; top: 20px; left: 20px; z-index: 2;} #box3 {background: orange; top: 30px; left: 30px; z-index: 1;}となる。
・ovwerflow:ブロック要素の中のコンテンツがその幅と高さを超えて存在する時にどのような表示方法にするかを設定できるプロパティ。
・デフォルトがvisibleでhiddenにするとはみ出た部分を非表示にする。Scrollにするとスクロール領域を作ってくれる。
22line-height、vertical-alignを理解しよう
・通常、<p></p>の中身に対してボックスモデルが作られるが、実際は行単位でも四角い領域が定義されており、「行ボックス」と呼ぶ。
・1つ1つの行ボックスの高さを規定するのが「line-height」プロパティである。
・文字の大きさは「font-size」であるのに対して「line-height」は行ボックスの高さを規定するプロパティである。「line-height」から「font-size」を引いた長さの半分の長さは文字の上下に振り分けられている。
・p{border: 1px solid #ddd; line-height: 24px; }またはp{border: 1px solid #ddd; line-height: 1.5; }などのコードでline-heightを規定できる。(2つ目のコードはfont-sizeの1.5倍の大きさを設定している。)
※#ddd：色の規定、明るめの灰色。
・vertical-align：文章の途中とか前後に画像などのインラインレベル要素を表示したい場合にどの縦位置に表示したいか指定するためのプロパティである。
・このプロパティは位置合わせをしたいインラインレベル要素に指定するため、イメージ要素につける。img { vertical-align: baseline }(初期設定、文章のボトムラインに沿って配置される)
img { vertical-align: top }(行ボックスのトップ)
img { vertical-align: bottom }(行ボックスのボトム)
img { vertical-align: middle }(小文字のaの中心とインラインレベル要素の中心を合わせる)
img { vertical-align: 10px}(ベースラインからの距離を指定)
img { vertical-align: 10em }(ベースラインからの距離を指定)
23float、clearを使ってみよう
・float：指定した要素を通常の流れの配置から切り離して左右に寄せるためのプロパティである。
・具体例：「html一部」、<body><h1>文章</h1><p><img src=”food.jpg”>文章</p><h2>文章</h2><p>文章</p></body>
「CSS」h1, h2, p, img {border:1px solid #ddd; }
このような場合、写真を左に寄せたいならば、イメージにfloatプロパティでrightを指定すればいい。
「CSS」h1, h2, p, img {border:1px solid #ddd; } img {float: right; }
イメージをfloatさせることで通常の配置の流れから外してちょうどそれだけ浮いているような形になる。それ以外の要素はあたかもイメージがないように配置される。
ただし行ボックスの中身はフロートを避けて配置される。
これにより、<p></p>内のイメージが左端先頭から右端により、行ボックスもよりスマートに縦に配置された。
フロートされた要素はブロックボックスを生成するので幅をつける必要がある。※上記の例は、画像ファイルなので自動でサイズ調節してくれていたが、floatにはwidthをつける癖が必要。
img {float: right; width: 100px; }
・clear：floatを解除して、ここから下はフロートした要素の下に配置してよと設定するプロパティである。
・上記の例では、イメージフロートが内容の異なる次のボックスモデルと位置がかぶっている可能性がある。
・clearは次のボックスモデルをフロートと重ならないように下にずらす機能である。
右に配置したフロートを避ける場合はclear right
左に配置したフロートを避ける場合はclear left
左右両方のフロートを避ける場合はclear bothをつける。
・clearプロパティの注意点：clearはブロックレベル要素にしか適応できない。
・使用例：「CSS」h1, h2, p, img {border:1px solid #ddd; } img {float: right; width: 100px; }の後ろに、`h2{clear: right; }をつけるとボックスモデルとフロートが重ならなくなる。