背景指定の基本について

本日の教材動画はこちら いままで当たり前のように使ってましたが、今回は背景の指定について深く掘り下げて勉強していきます。 背景の指定方法のあれこれ 背景プロパティには色々な指定をかけることができます。下記に代表的なものをいくつか記載しました。残りは参照サイトをみてみてくださいませ。 background … 背景の指定をまとめて行う場合に使う。ショートハンド。 background-color … 背景の色を指定する（※1） background-image … 背景の画像を指定する（※2） background-size … 背景の大きさを指定する ※1 色は「色名」「10進数」「16進数」…

z-indexプロパティについて

本日の教材動画はこちら 前回勉強したpositionプロパの関係性が深い、z-indexについて勉強していきます。 z-indexについて z-indexとは、主に奥行きを指定するためのプロパティです。positionプロパでブロックの位置を固定したり、前後の位置関係がありましたよね。基本後ろに記述したものが前に来るのですが、z-indexではその前後関係を変える際に使用します。指定は数字でし、数字が大きくなるほど配置物は手前（上側）にきます。 文字だけだとさっぱりなので、実際に書きながらみていきましょう。z-indexはpositionプロパティにstatic以外の値が指定されている要素に適…

positionプロパティについて

本日の教材動画はこちら 本日もボックスの配置に関係するpositionについてみていきます。今回も動画を見てもいまいち理解に苦しんでしまったので自分で調べたながら書いてます。もし理解などが間違ってたら是非ご指摘ください...。 position プロパティについて 主に要素の位置を決める基準を指定するためのプロパティ。文字だけでは分かりづらいので後ほどの記述画像で確認したほうが早いかも。使える値は static → 配置方法を決めない。初期値。 abusolute → 絶対位置への配置する（※1） relative → 相対位置へ配置する（※2） fixed → 絶対位置へ配置し、スクロールし…

floatとclearとoverflowプロパティについて

本日の教材動画はこちら 本日はボックスの配置に関係するfloatとclearプロパティについて勉強していきます。clearについては動画をみても正直よく理解できなかったので自分で調べたことを書いてます。よしなに。 float プロパティについて float についてですが、これは右や左への回りこみを指定させるためのプロパティになります。言葉では分かりづらいですが、たまに画像の右側に文字が書いてあることありませんか？あのデザインを実現させるためのものになります。（あとで実践しますがそっちを見たほうがわかりやすいかも）指定できる値は下記の3つ left → 指定した要素を左へ回り込ませる。続く内容…

boxサイズの考え方と指定について

本日の教材動画はこちら 今回はboxサイズの指定について習っていきます。boxというよりはブロック要素ってイメージでもいいのかしらね…？（imgとかにも使えるみたいだから厳密には違うけども） 幅・高さの最小値と最大値の指定の仕方 テキストエリアやdivタグ内など、特に指定がなければ書いた分だけ横長・縦長になりますよね。それだと見るブラウザによっては見た目が崩れてしまったり、レスポンシブデザインを目指したがために逆に見えにくくなってしまう場合があります。（例えばPCの表示横幅を50%にした場合綺麗に見れるが、スマホの横幅50%で見た場合は小さすぎるなど） なので、あらかじめ表示させる範囲の最大値…

displayとvisibility プロパティについて

本日の教材動画はこちら 今回はdisplayとvisibilityというプロパティを勉強します。あまり聞きなれないのでどんなのかまったく想像がつかない…。 display について display プロパティは、「そのHTML要素をどのように表示するか」を指定する際に利用されるようです。値の種類が多岐にわたるようなので、今回は動画で紹介されてた部分だけみてみましょう。 block → ブロック要素として表示させる inline → インライン要素として表示させる inline-block → インラインで扱えるブロック要素として表示させる（※） none → 表示させない ※ブロック要素にしか…

margin プロパティについて

本日の教材動画はこちら 前回 padiing と margin の違いをかる～～く触れたんですが、普通に次の動画でmarginについてやってました。というわけで今回はmarginの余白についての指定方法です padding 同様4つに分けて指定することができる 指定についてですが、上下左右の合計4か所指定することができます。書き方は margin-〇〇で、〇〇にはtop（上）bottom（下）right（右）left（左）をいれます。ショートハンドのpaddingとまったく同じなので今回は割愛します。 早速実践でどうなるのか見てみましょう。HTMLページは下記を用意しました。paddingの時…

padding プロパティについて

本日の教材動画はこちら padiing ってなんやねん？って話ですが、どうやら「ボックス（ボーダー）の内側に当たる余白を指定」するプロパティのようです。marginとどう違うの？？って話は最後に調べるとして、ひとまずpaddingの使い方をみていきましょう。 padding は4つに分けて指定することができる まず指定についてですが、上下左右の合計4か所指定することができます。書き方は padding-〇〇で、〇〇にはtop（上）bottom（下）right（右）left（左）をいれる。 今回も実践で違いを見てみましょう。HTMLページは下記を用意しました。 ページのソース内容 ブロック要素が…