したがって、私たちがまだカバーし評価していない最も重要な概念の1つは、要素の位置付けです。
では、ページをレイアウトしたり、divを右上に移動させるにはどうすればいいですか？
または、アンカータグを広げたり、画像間にスペースを追加するにはどうすればよいですか？
そのすべてが本当に重要であり、それはすべてボックスモデルと呼ばれるものに関連しています。
だからボックスモデルは基本的なアイデアです.HDのすべての要素の中核をなすもので、基本的にどの要素もその周りに長方形のボックスがあります。
MDAのウェブページに行き、インスペクタを開いて、私は虫眼鏡を選択しました。
そして、すべての要素の上にマウスを置くと、その周りにボックスがあることがわかります。
だから、このH2には青い箱があります。
これは箱を持っています。
特に箱根ではないものさえも。
だから、この丸みを帯びた角のdiv。 それにはまだ周囲に箱があります。
背後にある。
それで、こことこれは本当に丸いものではなく、これらの丸みを帯びたコーナーを持つように見えますが、まだ箱です。
だから、これらのボックスは、それらの上で異なるプロパティをスタイルすることができるので、シーンの裏には本当に便利です。
したがって、4つのプロパティまたは各ボックスの4つの異なる部分があります。
プロパティはたくさんありますが、操作できるボックスの部分には多くのプロパティがあります。
それで、この図はMDAから来たものであり、段落のものであるとしましょう。
だから、段落にテキストがあり、それにオレンジ色や黄色の境界線を付けると、これはユーザーがテキストと境界線を見るものですが、実際には何か他のことが起こっています。
境界線とテキストの間には、パディングと呼ばれるものがあります。
だから、パディングは境界線の内側のスペースだけです。
コンテンツと境界線の間にはパディングがあり、反対側にはマージンがあります。これは外側の境界線と他のものとの間にあります。
したがって、要素間にスペースを追加するために頻繁にマージンを使用します。
だから、2つのパラグラフがあって、それらをもっと離れたいと思ったら、私はマージンを使い、それを増やします。
だから今私たちはそれを行う前にいくつかのプロパティの構文を深く掘り下げていくつもりです。
私は、あなたが最もエキサイティングなものの最初のものを作るのを楽しみにしている2つのことを見せてくれるだけですが、重要なことは今のようなものを作る方法を持っていることです。
これまで、私たちは実際には、互いに結ばれたこれらのボックスを作る方法を持っていませんが、それらに割り当てられているが、そこにはテキストがありません。
だから我々はボックスモデルについて学び、このチックタックトーボードを作るためにここに適用し、次に架空の写真家のためにこのポートフォリオサイトを作るつもりです。
だからこれはいいです。
画像は反応的なので、サイズを変えてウィンドウサイズとグリッドを変更します。
このすべては、ここで学ぶコンセプトに基づいています。
ですから、私は先に進んでここで昇華していきます。
そして私は本当にシンプルな文書を作成しました。
だから単純なHTMLです。
それは接続されたスタイルシートを持っています。
空っぽです。
いくつかのコメントと2つの段落を除いて。
だから私がこれを開くと、それは非常に退屈な非常に基本的であることがわかります、私たちはちょうどボックスモデルで遊んでこれを使用するつもりです。
だから私は成功に向かい、段落を選択してから、これらのコメントを内部にコピーして、私が何をしているのかを視覚的に伝えるためのコードを書くことができます。
だから、これらの境界線を与えることから始めましょう。
だからこれは境界線を見直すべきであり、その青い線を画素の青にして、そのリフレッシュを保存して、コンテンツの周りに境界線があることがわかります。
また、あなたが気づいていることは、ここのコンテンツが画面の向こう側にあることです。
私たちの国境はここでは止まらないし、それはデフォルトで段落を作るときに画面全体に行き渡るからだ。
したがって、テキストの段落自体の幅を変更したい場合は、widthプロパティを使用することができ、先に進んで1の幅を与えます。
開始するのに200ピクセルを使ってみましょう。
私がリフレッシュすると、幅が変更されたことがわかります。
私が内容を調べるなら、青ではない。
そして、その周りに国境があります。
その内容は青です。
そして、このダイアグラムでは、このボックスはこの要素ボックスです。
そして、その周りには境界線があります。
国境とコンテンツの間にはスペースがありません。
幅のあるものと高さがあるもの。
だから、300ピクセルの高さをしてみましょう。
私はそれを取り除くつもりですが、私たちが好きなだけの高さがあります。
パーセンテージを使用できるようにピクセルを使用する必要はありません。
そしてそれらは本当に便利ですので、私にあなたを見せてください。
50％をしようとすると、その50％が何であるか不思議に思うかもしれません。
答えはそれが親要素の50％だということです。
この場合、段落の内側に段落がある本文は、本文の途中になります。
私たちの場合、本文はページ全体です。
それはすべての方法を横切っていた。
だから我々はページの半分で終わる。
また、これについてもうれしいことは、ウィンドウのサイズを変更してもそれが変わるので、多くの人がこれを使用し、このイメージグリッドで実際に使用することになります。
画像が幅を変えていることがわかります。それはパーセンテージです。
私は今のようにそれを保つつもりです。
次に話すつもりのプロパティは、パディングです。パディングは、要素と境界の間のこのスペースです。
そして今、私たちは境界線の上に右のスペースを持っていません。
したがって、パディングというプロパティがあり、それにピクセル数を与え、開始するのに10ピクセルを使ってみましょう。
ファイルを更新して保存します。
そして今、私たちはすべての面に10ピクセルのパディングを持っています。
だから私が今調べてみると、この緑色のコンテンツが現れているので、青色のコンテンツを持っているので、周りと緑色の境界線とコンテンツの間にあるので、明らかにこれを増やすことができます。内部にはさらにスペースがあります。
しかし、これはパディングを設定する唯一の方法ではありません。
これは4つの側面すべてにまったく同じように設定します。
しかし、たまには、境界線のように、片面または両面にのみパディングをしたい場合もあります。
より長いバージョンのためのショートカットがあります。そこでは、ボーダートップ10ピクセルボーダーの下5ピクセルです。
詰め物と同じこと、それはそれをコメントし、詰め物のように40ピクセルと新鮮なものを残すことができます。
そしてここでパディングを取得します。
それがパディングの唯一の場所です。
そして、私はこの青い空の上のスペースが、ここからの彼女の実際の内容であるパディングではないことを覚えています。
右にスペースがあるように見えますが、違います。
それは別の場所から来ています。
私たちがここでできるもう一つのことは、余裕をもって遊ぶことです。
マージンはパズルの最後の部分です。
国境の外側のスペースです。
要素間には
ですから、このスペースをここで増やしたり、増やしたりしたいと思うかもしれないので、これは役に立つでしょう。ここでは、イメージ間のこのスペースはMarjanを使って設定されています。
実際にはパディングのように見えますので、マージンを言うことができ、開始して更新するために100ピクセルのような明白なことをしましょう。
そして、何が起こったのかは、境界線の外側にある要素のすべての側面に100ピクセルのスペースがあることです。
だからアスペクトを見つける。
あなたは、橙色であると識別されたクロムの中に青色の内容があることがわかります。緑色は橙色のパディングです。
ちょうど詰め物のように。
時にはマージンの片側を片側に設定したいので、マージントップが500ピクセルのようにすることができます。
そして、彼らが今ここに来て節約したとき、私たちは一番左のスペースには何もありません。
そして、これ以上のスペース。
左下または右下には何もありません。
だからマージンだ。
時にはマージンのすべての面に値を追加することもありますが、4つの異なる線で行う必要はありません。
だから、もし彼らがここにいるならば、彼らはまったく同じであることを望んでいないが、すべてマージンの上マージンをマージン右マージンボトムと言うわけではない。
だから、国境のような別のショートカットがあります。
あるいは、私たちはすぐにこのマージンを行い、それに4つの価値を与えることができます。
だから、最初のものは上のためのもので、次に右のもの、そして次に下のものです。
500ピクセルを作ってから次に左を作ってみましょう。このようにすることで、値がすべて違っていても1行で済ませることができます。
ここでこれを調べて、500ピクセルを下に取得するかどうかを確認するには、上に20を、左に100を取得し、次に右に40を取得します。
だから、マージンであることがよく見られる最後のものが1つあります。
自動。
だから私たちができるのは、左か右に自動でマージンを設定することです。
それが実際に行うことは、私たちのための要素です。
だから私はそれがどのように動作するかを見せてあげましょう
そして、これをもう一度コメントして、マージンを書くことができます。そして、左端または右端のゼロマージンとボトム、そして左端のオートでゼロマージンと言うことができます。
私はこのフルサイズを作り、リフレッシュすると、それが私たちのために物事を集中させることがわかります。
つまり、これが50％だと決めたのは、ここでは左が自動で右が自動であると分かりますから、それは必要なだけ実際にそれを中心にします。
そして、頂点と底面にゼロがあるので、一緒に遭遇します。
我々はまた、これを行うためのさらに短い方法があり、このマージンゼロのオットーのように見えます。
そして、これは上下左右を0にして自動にします。
したがって、何も変わらず、topとautoに50ピクセルを追加したい場合や、50ピクセルと20ピクセルを追加したい場合は、この構文を使用することもできます。
覚えておくべきことの1つは、数値がゼロでない限り、そこにxが必要なことです。
だから私がこれを行うと、左右の上に20が追加され、上と下に50が追加されます。
だからもう一度ここで要約しましょう。
私たちはここにある内側のコンテンツを持っています。
私たちは国境の間にある詰め物を持っているので、私たちが持っているのはすべて詰め物が残っていて、国境と国境の間に余裕があります。
基本的に要素の間に。
次のビデオでは、これらのコンセプトを適用して、このコースで使用する予定です