peeks-blog

自分用メモ

随時追記していく

※参考：CSSの基礎知識。セレクタ、プロパティ、値とは？

CSSで指定したスタイルが表示されない場合の調べ方

原因の切り分けとしては、以下２つに大きく分かれる。

CSSファイル自体がブラウザに読み込まれていない

①そもそも命令のコードを書いてない
②命令のコードは書いたけど、各場所が間違っている（headタグ内に書いてない）
③命令のコードが所定の形式ではない（ブラウザにとって、何を命令されてるか解析できない）
④命令のコードは合ってるけど、CSSファイルをそもそも置いてない
⑤命令のコードは合ってるけど、ファイルのパスが間違っている
※画像：パスとは？絶対パス相対パスの違い。フォルダ構造や必要な3つのファイル

ファイルが読み込まれてるかの確認は、ディベロッパーツールを使う。
「Network」タブ→「CSS」

ただし、キャッシュ（保存）には注意する必要がある。
CSSなど、ファイルは１回「ブラウザ」に読み込まれるとキャッシュ（保存）される。
保存されると、新たにCSSファイルの中身を修正して再度ブラウザをリロードしても、
ブラウザ側が「キャッシュされた前のCSSファイル」を読み込んでしまう。
→こうしたときは、リロードを連打するとブラウザ側がやっと読み込んでくれる。
→これは、cssファイルだけでなく、htmlファイルやJavaScriptファイルにも当てはまる。
→「修正したのに表示が変わらない」場合は、キャッシュの可能性がある事を念頭に入れておく。

該当箇所にCSSのスタイルが適用されていない

①CSSの形式で書かれていない
②CSSセレクタの形式が間違っている
③CSSセレクタで指定している、id名やclass名がhtmlタグで使われていない

→上記３つはケアレスミスやスペルミス。

④スタイルとして指定しているプロパティ名や設定値が間違っている
⑤指定したスタイルの優先度が低い
⑥該当のhtmlタグには使えないスタイルを適用しようとしている
⑦他のhtmlのスタイルが邪魔をしている
⑧実現したい事が、そのスタイル指定方法では出来ない。

レイアウトの３要素について

「レイアウトを整える」という作業を具体的に言えば、
①サイズ
②間隔
③配置
この３要素を調整していくこと

CSSでは「ブロックレベル要素」に対して、
サイズと間隔を設定できる

※参考：クリエイティブ、プログラミング用語まとめ

このうち「間隔の設定」について具体例を挙げると…
・要素を縦や横に並べるときの間隔を指定する
・要素の縦線と中のテキストの間隔を指定する
・見出しと本文の間隔を指定する
・リストの行頭下げ

ボックスモデルの４要素とは

CSSでレイアウトをコントロールするためには
「ボックスモデル」の知識が不可欠

ボックスモデルとは、HTML内の全ての要素が持つ領域のことで、
CSSでは、この箱のサイズを変えたり、
位置を調整したりしてレイアウトをしていく

ボックスモデルのイメージは以下の通り



以下４種類の概念で構成されている

・コンテンツ：要素の内容
・パディング：内容とボーダーの余白
・ボーダー：枠線
・マージン：ボーダーの外側にある余白

各領域の境界線を「辺」と呼び、
これらの領域は上下左右の4辺に分かれ、
CSSで個別にスタイルを適用する事ができる

・上：top
・下：bottom
・左：left
・右：rihgt

コンテンツ（contents）

テキストや画像、ボタンなど
Webページに実際に表示する内容の領域

ボーダー（border）

ボーダーは、要素の四辺に枠線を付けるもの
値の指定は「線種」「太さ」「色」の３つを半角スペースで区切って記述する
「border: solid 1px #8b7348」

パディング（padding）

パディングは要素の内側の間隔を指定する
「padding: 10px;」のように指定する

マージン（margin）

マージンは、隣り合う要素との距離を調整するために用いる
つまり「要素の外側の間隔」
ボックスの上下左右それぞれの距離を指定する
「marigin-top: 10px;」のように指定する
特定の辺だけに間隔を空ける指定をする事も可能

ボックスサイズの計算方法

ボックス全体の幅は、以下で決定する
「左右のマージン＋左右のボーダー＋左右のパディング＋コンテンツの幅」

要素のサイズを指定するには

要素には、余白の他にサイズそのものを指定する事ができる

「widthプロパティ」は、要素の横幅を指定する
「width: 300px;」のように書く

高さは「heightプロパティ」で指定する
ただ幅だけ指定して高さは指定しない事もある
「height: 512px;」のように書く

固定枠と可変枠の違いについて

Webサイトは「固定枠」と「可変枠」のいずれかで作成する

固定枠は、どの環境でも同じデザインを見せることが出来る
従来のWebサイトはこの形式を多く採用していた

可変枠は、ブラウザの表示幅に併せて変動するもの
レスポンシブWebデザインはこちら
同じデータであっても、閲覧環境によって表示が多少異なる

様々なカラムレイアウト

Webページのレイアウトには、いくつかの「型」がある
各パーツを複数列に配置する段組みの作り方がことなる
この列を「カラム」と呼ぶ

１カラム、２カラム、３カラムが代表的だが、
それ以上の多段レイアウトもそんざいする
Webサイトのコンセプトや、
インパクトのある演出を求める際に利用される

カラムは、Webサイトのターゲットや
環境を考慮して選択する

要素を浮かせるfloatプロパティ

カラムレイアウトを実現する方法はいくつかあるが、
現在一般的に使われてるのはfloatプロパティ
要素を浮動させて左右にスライドさせ、段組みを実現する
画像などの横にテキストを回り込ませる目的でも使われる

floatプロパティは、要素を”浮かせる”
これがポイント

値はleft, right, noneの３つの値を指定できる
デフォルトはnone

ブロックレベルやインラインを切り替えるdisplayプロパティ

ブロックレベルやインラインなどの特性を切り替えるには
displayプロパティを用いる
手軽なので、パンくずリスト等の小さいものに使われる

このプロパティを使用することで、
ブロックレベル要素をインライン要素に切り替える事ができる
（逆のことも出来る）

※参考：ブロックレベル要素、インライン要素、インラインブロック要素のまとめ