背景指定の基本について
本日の教材動画はこちら
いままで当たり前のように使ってましたが、今回は背景の指定について深く掘り下げて勉強していきます。
背景の指定方法のあれこれ
背景プロパティには色々な指定をかけることができます。下記に代表的なものをいくつか記載しました。残りは参照サイトをみてみてくださいませ。
- background … 背景の指定をまとめて行う場合に使う。ショートハンド。
- background-color … 背景の色を指定する（※1）
- background-image … 背景の画像を指定する（※2）
- background-size … 背景の大きさを指定する
※1 色は「色名」「10進数」「16進数」どれかの方法で指定。詳しくはこちらで
※2 画像の指定は「url（’ファイルパス’）」で指定。
それでは今回も実際にみてみましょう。
ページ内容とCSSの中身は上記で用意。現在ページ内容を何も指定していないため表示は真っ白な状態です。ここに背景の指定をしてみましょう。
背景色をピンク、背景画像をうちの猫写真にしてみました。背景画像は何も指定をしなかった場合上記のように指定箇所を埋めるように連続で表示されます。そのため現在は背景色に指定しているピンク色が見えない状態になっています。
ということで画像表示を「繰り返さない」に指定してみました（background-repeat:no-repeat の部分ですね）。こうすることで画像が1個だけになり、背景色のピンクも表示されるようになったことがわかりますね。
ショートハンドでまとめて指定をしてみる
次に「background」を利用した、背景の一括指定を試してみましょう。ショートハンドですので、今まで長々書いていた background-〇〇 の部分全てを省略できます。書き方としては ｛background：color image repeat position～…；｝と言う風に、指定したい内容をつらつら書いていきます。順不同で大丈夫です。
さらに、「，」で区切ることで次の背景の指定を続けて行うことができます。言葉で説明するのは難しいので実際に見てみましょう。
最初の指定は「背景に猫画像、繰り返さない、位置は上と左から50pxの位置」を指定。次の背景指定を行いたいので「，」で区切り、次の指定を「（透過されている）背景画像、背景色はピンク」としました。
ここで大事なのは、後ろに書けば書くほど、奥に表示されるという事です。つまりpositionやCSSの基本ルールとは逆の原理がここでは働いています。後ろに書いたものが優先されるわけではなく、後ろに書いたものほど後ろに表示されます。その証拠に、最後に指定した「背景ピンク」は一番下に来ていることがわかりますね。
なので画像と指定の順番を逆にした場合はこうなります。2番目に猫ちゃんの画像を指定しているため、最初の画像の下側にきているのが確認できます。
ただ唯一分からなかったのは、一番最初の指定にピンクを入れた場合、背景色が表示されないだけでなく全ての表示が消えてしまったんですよね。今までの事を考えると「背景全体をピンクにしたことにより次の指定は全てみえなくなる」と思っていたんですが…まさかの1番目も2番目も指定が全部きえて真っ白になるという謎の現象が起きました…。なんでだ……？ちなみにピンクの記載を消すだけで直りました。なんでなんだ……？誰か教えて……。
とまあ最後にちょっと謎の疑問が残りましたが、背景指定の基本はこんな感じです！background-〇〇の〇〇部分の各詳細につきましては、1個1個書いてると長くなるので参照サイト様を確認いただけたら幸いです。今まで当たり前のように背景色を指定していましたが、色以外にも色々と指定できるんですねー。
【参考サイト】
z-indexプロパティについて
本日の教材動画はこちら
前回勉強したpositionプロパの関係性が深い、z-indexについて勉強していきます。
z-indexについて
z-indexとは、主に奥行きを指定するためのプロパティです。positionプロパでブロックの位置を固定したり、前後の位置関係がありましたよね。基本後ろに記述したものが前に来るのですが、z-indexではその前後関係を変える際に使用します。指定は数字でし、数字が大きくなるほど配置物は手前（上側）にきます。
文字だけだとさっぱりなので、実際に書きながらみていきましょう。z-indexはpositionプロパティにstatic以外の値が指定されている要素に適応することができます。なのでまずはpositionを使ったページを作ってみました。
ページの内容と外部CSSがこちらで
出来上がったページはこの様に表示されます。何も指定していないので、あとに書かれた物のほうが上に配置されていることがわかりますね。
ここにz-indexを適応してみましょう。使用方法は簡単で、「z-index：数字；」とするだけです。数字は任意です。10でも100でもかまいません。数字が大きい方が上に来ることだけ覚えておけばOKです。
こちらが実際にz-indexを使ってみたページ。赤線で引っ張ってる部分に注目してほしいのですが、数字が大きいものが上、小さいものが下側にかわったことがわかりますね。今回は順番を真逆にしてみただけですが
勿論このように変則的な重なり方をさせることも可能です。参考サイトをみていたところ、positionプロパさえ適応していれば、セレクタがpタグだろうがimgタグだろうが適応できるようです。使いこなせればデザインの幅が色々と広がりそうですね～！
【参考サイト】
positionプロパティについて
本日の教材動画はこちら
本日もボックスの配置に関係するpositionについてみていきます。今回も動画を見てもいまいち理解に苦しんでしまったので自分で調べたながら書いてます。もし理解などが間違ってたら是非ご指摘ください...。
position プロパティについて
主に要素の位置を決める基準を指定するためのプロパティ。文字だけでは分かりづらいので後ほどの記述画像で確認したほうが早いかも。使える値は
- static → 配置方法を決めない。初期値。
- abusolute → 絶対位置への配置する（※1）
- relative → 相対位置へ配置する（※2）
- fixed → 絶対位置へ配置し、スクロールしても固定される。
※1 親ボックスにstatic以外の値が指定されている場合、親ボックスの左上が基準位置となる。親ボックスにstatic以外の値が指定されていない場合はウィンドウの左上が基準位置となる。
※2 staticで表示される位置が基準位置となる。
配置する位置を決めるオプション
positionで配置位置の基準を決めるだけでなく、配置場所を決めるオプションを付与することができます。指定できる値は見慣れた下記の4つ。
- top → 上からの配置位置（距離）を指定する
- bottom → 下からの配置位置（距離）を指定する
- right → 右からの配置位置（距離）を指定する
- left → 左からの配置位置（距離）を指定する
さて、今回も動画を見てもよくわからない部分があったので実践しながら確認していくことにします。今回用意したコードとCSS内容はこちら。
divの幅を400pxに指定。各クラスの縦横は100pxに指定し、それぞれ分かりやすく色とボックス内に指定する値を記載しています。
出来上がりページはこんな感じ。div幅が400pxありますが背景色付け忘れたのでわかりづらいですね…。ひとまずこれでいきます。
absoluteを指定してみる
では真中のmiddleにposition：absoluteをしてみましょう。どのように表示されるかというと…
何故かbottomがmiddleの裏へ隠れてしまいましたね。動画の説明聞いてもあんまりわからなかったのですが、絶対位置にしたことによりmiddleが浮いて、浮いた分できあがった隙間にbottomが回り込んでしまった…っていうイメージ図のような感じで理解していいのかしら？
位置指定をしてみる
ではここに、middleの位置を top 10px で指定してみます。するとどう表示されるか…
今度はtopが隠れてしまいましたね。これもmiddleの位置を上から10pxに固定したため、その下にあるtopが隠れてしまった…というイメージ図の理解で合ってるのかな？誰か間違ってたらまじで教えて…。
leftの位置指定も追加するとこうなります。上から10px、左から10pxの位置にmiddleが配置されましたね。同様に右から10px、下から10pxの指定をすると右下に配置されるようになります。0を指定した場合はそこにぴったりくっつきます。
fixedを指定してみる
次にfixedを見てみましょう。内容としてはabdoluteと同じですが、こちらはスクロールしても位置が変わりません。固定化されます。
こんな感じですね。先ほどと同じ上10左10のところに配置しました。ここに大量のコンテンツを追加してページスクロールが必要になったとしても、上記のように位置はずっと上10左10から変わりません。middleは絶対位置として固定されているので、残りのコンテンツはその裏側にまわることになります。
親要素をrelativにした場合のabusoluteの動き
次に親要素のpositionをrelativ、その中の要素にabusoluteを指定してみます。
するとこのように表示されました。abusoluteは「親ボックスにstatic以外の値が指定されている場合、親ボックスの左上が基準位置となる」性質があります。今回static以外、つまりrelativeを指定しているので、親ボックスの左上が配置基準となり、そこから上10px、左10px下がったところにmiddleが配置されました。
前回はウィンドウ左上が基準でしたが、これもabusoluteの「親ボックスにstatic以外の値が指定されていない場合はウィンドウの左上が基準位置」となる性質のおかげということですね。
子要素もrelativeにした場合の動き
ではabusoluteではなく子要素もrelativeにした場合はどうなるか。
このように表示されました。「絶対位置」の指定ではなくなったため、従来表示される位置から上10px左10pxずれた位置に表示されましたね。
ただ唯一分からなかったのは、relativeだけでなくabusoluteを指定してもmiddleが裏側にまわってしまったこと。こちらは検索しても理由がよくわからず…。CSSの「あとに書いたものが優先」されるという基本のせいかなーという考えに至りましたが…親要素のpositionによってその辺もいろいろ変わるのかしら。難しいですね！
positionプロパティはかなり便利でいろんな場所で使われているのでマスターしたい感じですが、動きが複雑怪奇で使いこなすまでなかなか難しそうですね…。実践の際はトライ＆エラーで習得を目指そうかと思います。
【参考サイト】
position …… ボックスの配置方法（基準位置）を指定する
floatとclearとoverflowプロパティについて
本日の教材動画はこちら
本日はボックスの配置に関係するfloatとclearプロパティについて勉強していきます。clearについては動画をみても正直よく理解できなかったので自分で調べたことを書いてます。よしなに。
float プロパティについて
float についてですが、これは右や左への回りこみを指定させるためのプロパティになります。言葉では分かりづらいですが、たまに画像の右側に文字が書いてあることありませんか？あのデザインを実現させるためのものになります。（あとで実践しますがそっちを見たほうがわかりやすいかも）指定できる値は下記の3つ
- left → 指定した要素を左へ回り込ませる。続く内容は右に寄る。
- right → 指定した要素を右へ回り込ませる。続く内容は左に寄る。
- none → 何もしない。初期値。
clear プロパティについて
clear は float とセットになります。何故なら「floatの回り込みを解除する」ためのプロパティだからです。詳しい使い方は後述しますがまずは使える値を紹介。
- left → 左寄せされた要素に対する回り込みを解除する
- right → 右寄せされた要素に対する回り込みを解除する
- both → 左右両方に対する回り込みを解除する
- none → 回りこみを解除しない。初期値。
さて、今回も実際に記述しながらどうなるかみてみましょう。いつも通りページソースと何もしてない外部CSSを準備します。
シンプルに画像1つとその下にダミー文を用意しました。また、今回も範囲などが分かりやすいようにdivの背景だけピンク色に変えています。
出来上がりのページはこちらになります。divのピンク範囲内にねこの画像と書いた文章がありますね。何もしていないので要素ごとに自動で改行されているのもわかります。ちなみに写ってるにゃんこは我が家の子です。かわいいですね～～！！
floatを右に指定してみる
ではこの画像タグにfloatを追加してみましょう。外部CSSに1行 img｛float: right;｝と追加してみました。するとどう表示されるか。
ご覧の通り、画像が右に寄り、残りの文章は画像を回り込むように左に寄ったのが分かります。左にした場合は左右反転するだけで効果は同じです。
clearで回り込みを解除させる
では回り込んでる文を途中で解除したくなった（画像の下側に文章を表示させたい）場合はどうすればいいでしょうか？そんな時に使うのが clear プロパティです。実際に使ってみましょう。
回り込みを解除したい部分をクラス指定し、CSSで左右の回り込みを解除するよう指定してみました。するとどうなるか。
文の途中で回り込みが解除され、通常通りに戻っているのがわかりますね！動画では正直この辺りが分かりづらかったのですが使い方はこれで正解なはずです。
画像が大きくて余白ができてしまう場合の対処方法
あとこれは調べていてわかったのですが、回り込ませる対象（今回は画像）が続く要素よりも大きくなってしまった場合。例えば画像が大きいとか、ブラウザ幅によって横長になって完全に回り込めなかった場合ですね。そういう場合は
上記のように表示されてしまいます。画像の縦幅に対して、divのピンク部分が途中で途切れてしまっているのが分かりますね。これでは不格好という事で、簡単に解消させるプロパティがあるようです。それが overflow という指定。早速実際に使ってみました。
divタグにクラスを追加し、CSSで overlfow→auto の設定をしてみました。するとどう表示されるか…。
画像の高さに対して続く要素が足りないにもかかわらず、divタグ（背景がピンクの箇所）が画像幅全体にかかったのがわかりますね。これでどのブラウザからもある程度見た目のいいページが作れるようになるんじゃないでしょうか。
調べてみたところこのプロパの値は他にもいくつが種類があるようですので、気になる方は是非参照サイトを一読してみてくださいませ～！
【参考サイト】
boxサイズの考え方と指定について
本日の教材動画はこちら
今回はboxサイズの指定について習っていきます。boxというよりはブロック要素ってイメージでもいいのかしらね…？（imgとかにも使えるみたいだから厳密には違うけども）
幅・高さの最小値と最大値の指定の仕方
テキストエリアやdivタグ内など、特に指定がなければ書いた分だけ横長・縦長になりますよね。それだと見るブラウザによっては見た目が崩れてしまったり、レスポンシブデザインを目指したがために逆に見えにくくなってしまう場合があります。（例えばPCの表示横幅を50%にした場合綺麗に見れるが、スマホの横幅50%で見た場合は小さすぎるなど）
なので、あらかじめ表示させる範囲の最大値と最小値を決めてあげれば、例え画面が大きく・小さくなってもある一定の見せ方ができるようになります。そこで使われるのが「min」と「max」のプロパティです。具体的な指定方法を見ていきましょう。
- min-width / max-width → 横幅の最小値と最大値を指定する
- min-height / max-height → 高さの最小値と最大値を指定する
「min-〇〇」は最小でもこのサイズより小さくならない。「max-〇〇」は最大でもこのサイズを超えない、という指定です。この時幅や高さは外側のboxサイズにより決まります（特に相対的な単位を利用する時）
サイズの算出方法を決める
このboxサイズの算出方法を決めるオプションもあります。利用するのは下記プロパティのどちらか。
- content-box → padding / border を幅や高さに含めない（初期値）
- border-boc → padding / border を幅や高さに含める
※CSS3のため、ベンダープレフィックスが必要になることに注意。
要はサイズ指定する際に、paddingやborder領域を指定に含めるか含めないかのオプションですね！ベンダープレフィックスについてはブラウザ毎に違うので書き方は要検索。
文字があふれた場合の取り扱い
サイズを指定したはいいが、指定枠内からはみ出すレベルで文章が多かった…といった場合の、あふれた文字の取り扱いをどうするかについて。指定できるプロパティは下記の3つとなります。
- visible → はみ出して表示させる
- scroll → スクロールバーをbox内に表示させ、スクロール可能にする
- hidden → はみ出た部分は表示させない
今回も言葉だけでは伝わりにくいので、早速それぞれ実践で書いてみましょう。
今回用意したページ内容とひとまずの外部CSS内容となります。
表示されるページの見た目はこちら。ここに色々と追加してみましょう。
まずは幅と高さの最大値を決めてみましょう。div範囲（ピンクの範囲）を縦300、横300pxに指定してみます。
divの幅と高さが300pxになりました。ただ入力した文字が多すぎて、範囲からあふれているのがわかりますね。なので今度は文字があふれた場合の取り扱いを追加で指定してみます。
今回は「スクロールバーを表示させる」指定をしてみました。幅と高さを指定したdivの範囲内にスクロールバーが追加されたのがわかりますね。これであふれた文字は全部範囲内にいれつつ、スクロールすれば全文読めるようになりました。
hiddenだとピンクの範囲外の文字は表示されず、スクロールもできないため完全に読めなくなります。使いどころがよくわかりませんが何かに使えるんでしょうね。
これらを駆使する事によって、box内の見た目だけでなく、画像の大きさなどもレスポンシデブにすることができます。どのタグに使えるのかなどは随時検索しながら学ぶことにしたほうがよさそうですね。
【参考サイト】
displayとvisibility プロパティについて
本日の教材動画はこちら
今回はdisplayとvisibilityというプロパティを勉強します。あまり聞きなれないのでどんなのかまったく想像がつかない…。
display について
display プロパティは、「そのHTML要素をどのように表示するか」を指定する際に利用されるようです。値の種類が多岐にわたるようなので、今回は動画で紹介されてた部分だけみてみましょう。
- block → ブロック要素として表示させる
- inline → インライン要素として表示させる
- inline-block → インラインで扱えるブロック要素として表示させる（※）
- none → 表示させない
※ブロック要素にしか適応できないCSSオプションを指定する時に使われる
★ブロック要素とインライン要素についての復習は下記より。 syufu33.hateblo.jp
実際に display プロパティを使ってみる
言葉だけではわかりにくいので早速見ていきましょう。今回利用するソースコードはこちらになります。
何も指定しなかった場合の表示がこちら（わかりやすいよう背景色だけはつけてます）
ここに、display プロパティをいくつか付与してみます。まずは「none」から。noneは「表示しない」という設定です。今回合計3個のpブロックを用意。ためしに一番上のpにnoneを指定してみます。するとどうなるか。
一番上のpブロックが消え、残り部分だけが表示されました。これは「none」が「表示しない」という指定のため、ソースコードにあっても実ページでは「表示されません」。簡単に言うと存在がなかった扱いになるわけですね。
次は「inline-block」の値を使ってみましょう。inline-block は簡単に言うとインライン要素をブロック要素として表示してくれる値です。今回は「aタグ」につけてみました。するとどう表示されるか。
通常aタグはインライン要素のため、改行などを挟まなければ横続きになります。ですが今回ブロック要素を付与したため、＜a＞＜/a＞ごとに改行されているのがわかります。
※ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素で、一般的なブラウザでは前後に改行が入って表示されます。 インライン要素とは、主に文章の一部として利用される要素でその前後は改行されません。
また、ブロック要素を付与したことにより、インラインでは指定できない余白なども設定できるようになりました。
試しに下側に30px余白を作ってみました。これがただのインライン要素であれば余白は作られないのですが、今回ブロック要素を付与しているので下側に余白ができたことがわかります。
visibility について
次にvisibility プロパティをみてみましょう。visibilityプロパは「そのHTML要素をどのように見せるか」を指定する際に利用されます。使える値は下記の3つになります。
- visible → そのボックスを表示させる
- hidden → そのボックスを非表示にさせる
- callapste → テーブルの行や列に指定するとその部分を詰めて表示する（※）
※visibility:collapseを指定した場合、ブラウザの種類やバージョンによって表示が若干異なるので注意が必要とのこと。
こちらも言葉だけではわかりにくいので実際に書いてみましょう。HTMLソースはまったく同じものを利用します。
今回はここの上から2番目にあるp（中央の段落）に、「hidden」の値を付与してみます。するとどう見えるか。
hiddenは「非表示」にさせる値の為、ご覧の通りそこにあったはずのpタグの内容がすべて非表示になったことがわかります。noneとの大きな違いは、noneは「なかったこと」にしてくるのにたいし、hiddenは「あるけど見えない状態」にしてくれることです。非表示にしているだけなので、pタグで指定した空間はそのまま残っているのがわかりますね。
非表示にしたいがレイアウトを変えたくない場合はvisibility、非表示にしてページレイアウトに反映させたい場合はdisplayを使えばよさそうですね！一般的にdisplayが使われることの方が多いそうです。（こっちの方がどのブラウザでみてもレイアウトが崩れにくいからかな…？）
【参考サイト】
display:none と visibility:hidden の違い
display …… 要素の表示形式（ブロック・インライン・フレックス等）を指定する
margin プロパティについて
本日の教材動画はこちら
前回 padiing と margin の違いをかる～～く触れたんですが、普通に次の動画でmarginについてやってました。というわけで今回はmarginの余白についての指定方法です
padding 同様4つに分けて指定することができる
指定についてですが、上下左右の合計4か所指定することができます。書き方は margin-〇〇で、〇〇にはtop（上）bottom（下）right（右）left（左）をいれます。ショートハンドのpaddingとまったく同じなので今回は割愛します。
早速実践でどうなるのか見てみましょう。HTMLページは下記を用意しました。paddingの時と全く同じ中身です。
表示されるページがこちら。
※今回も余白がわかりやすいよう、div範囲を点線で囲み、pタグの背景色を黄色、marginを0にしています。marginを0にしなかった場合も後ほど説明します。
さて、上記のページにmarginの指定をしてみました。
上下左右全て10pxの余白を設定しました。また、余白が分かりやすいよう文字の間隔も均一になるようにしました。
出来上がったページがこちらになります。前回のpaddingでは黄色い部分の余白が広くなりましたが、今回は黄色い部分より外側に余白がついたことがわかります。
marginは－（マイナス）数値も指定ができる。
paddingとmarginの違いの一つに、「marginは－数値を指定できる」というものがあります。言葉だけでは分かりずらいので実際に見てみましょう。
上右は15pxなのに対し、下左は－15pxを指定してみました。（bodyにも余白設定を追加しましたが、これはより余白部分を分かりやすくするに追加しただけなので気にしないでください）
そしてこちらが表示されるページになります。－数値を入れた箇所が、範囲から飛び出て表示されていることが分かりますね。これを利用してデザインとしてずらして表示させることが可能になります。
marginとpaddin の初期値について
さて、今回も余白をわかりやすくするためにpタグのmarginを0にしました。もし0にしなかった場合はどう表示されるか？
これは前回も見ましたが、下記のように表示されます。
ではなぜ最初からmargin余白が出来上がってしまうのか？？これについて調べてみたのですが、どうやらブラウザが見やすいようにと、勝手に一定の余白をいれてくるそうです。（marginだけでなくpaddingも自動設定するそうです）なので好きなように余白を決めたい場合、またはブラウザ間で見た目を統一したい場合は、一旦このブラウザ設定をリセットしてあげる必要があります。
今回はpタグにだけ0設定をしましたが、全ての要素をリセットしたいんだ！！って場合は、CSSの最初に * ｛margin: 0;padding: 0;｝と指定してあげるといいそうです。「CSSは後に書き込まれた記述を優先する」というルールがありますので、この後に続くCSSでそれぞれの余白を設定していってあげれば思い描いたデザインになるという寸法です。
【参考サイト】
