このビデオでは、この写真家のポートフォリオサイトを最初から作成します。
そして、通常、私はあなた自身でこれをやろうとして、それに続いてあなたに解決策のビデオを与えるように依頼します。
しかし今度はそれに沿った意図的なコードです。
だから私は一緒にコード化しようとしたい、あなたが好きな場合は一度それを見て、次回に沿ってコードすることができます。
しかし、ここでの目標は、それを一緒にやろうとしており、そこから抜け出したいことが2つあります。
最初のものは、フロートと呼ばれる新しいプロパティがあります。もう1つは、あなたが少し誇りに思うことができるようなものを少し経験してもらいたいということです。
それはこれまでにやってきた本当に明るいひどい色です。
だから、これは私たちがやることのできる、本当に最小の写真ブログです。
だから始めましょう。
昇華してください。
HMOというフォトグリッドと呼ばれるファイルが1つあります。
私は最初にイメージを表示するか、それ以外は作業しています。
だから、これらは、私がFlickrで見つけた3人の異なる写真家の画像9枚の画像3枚の画像です。
すべての写真はクリエイティブコモンズの下でライセンスされています。
ここでライセンスを取得できます。
だから私たちはこれらのイメージで何かをする前に、私は実際にそれらを取り除くつもりです。私は写真のブログで私の年配のスケルトンad-Dinを追加するつもりです。こんにちはと言う人と、さよならと言う人を追加すると、この部分と一緒にコーディングする必要があります。そして、私はそれらを保存します。そして、スタイルシートを追加します。 SSと私のdivをスタイルするつもりです。
だから私は実際に彼らに私を与えるつもりです。 D. ちょうどそれを1と呼ぶ。
もう一度これは何かを実証するだけです。ここで私は1つと2つを選択します。私はすべて、それらに異なる背景色を赤色にし、次に背景色を紫色にしますそれらの両方にすべてのdivと100ピクセルの幅を与えます。
だから、私がこれを行うと、私はブラウザでそれを開きます。
私たちには次々と2つの部門があります。
私たちが検査すれば、彼らを覚えています。
彼らは基本的に彼ら自身の行をブロックレベルの要素とするように設定されています。
ですから私がイメージグリッドのためにやっていることが起こることを望まないのであれば、イメージがグリッドまたは複数のものを形成することを同じライン上にしたいのです。
もしそうなら、私がdivを使ってそれをしたいのであれば、私はfloatというプロパティを使う必要があります、それは私がそれを達成できる方法の1つです。
だから私がしているのは、安全なフロートが残っていて、それが何をするのかです。
ドキュメントの通常の流れからすべての要素を取ります。
だから、それぞれ別々の行にスタックがあります。
そして、起こることは、彼らが左に浮動して、重力がドキュメント内でほとんどなくなると考えることです。
そして、このdivは浮き上がって左に押し出されます。
これに対して
だから私がここで新鮮ならば、彼らは今、同じ行にいることがわかります。
だから、画像を使っているときにこの原則を使って、基本的に画像を取得してグリッドを作ることができます。
だから私はこれをすべて取り除いて、私たちが持っているデバイスを取り除き、私はこのようにイメージに追加するつもりです。
だから私はこのフルスクリーンを作り、このビデオに含まれているそのファイルにあるこれらの画像リンクに貼り付けます。
このような9つのイメージタグを作成してイメージタグを作成し、それをコピーして9回貼り付けて、非常に遅くする必要があります。
ここで私は少しずつ魔法を使うつもりです。ここでコマンドを使ってすべての行の先頭を選択してから、イメージソースを入力して行の最後に移動します。
だから私はコマンドを使用しました。右矢印コマンド左矢印は最初のコマンドに移動します。右に行くと、引用符で終わり、次に閉じ括弧で終わります。
それはあなたがエルフであるすべての人をイメージタグとして囲む、本当に簡単で素早い方法でした。
したがって、これを保存してブラウザに移動すると、更新すると表示されます。
今は9つの画像があります。
もちろん、統合されていません。
彼らは多くのスペースを占めています。
だから今私たちはスタイルシートに行き、すべての画像を選択します。
私たちが最初にやりたいことは、それらをあきらめるだけです。
だから、開始するには100ピクセルのようなものを与えましょう。これはあまりにも小さくなるでしょう。
しかし、私はあなたに何が起こっているかを見て、リフレッシュすると、これらのイメージすべてが一緒に並んでいることに気づくでしょうが、指定しなかったイメージの間隔があります。
マージンやパッディングなど何も設定しません。
そこで、実際に追加されている白いスペースがあり、スチーム・フクロウではちょっと変わったことが起こっています。
しかし、他に何もない画像があるときは、空白または空白が1つだけあります。
だから私たちがそれを取り除きたいのであれば、floatを使うことができ、floatがドキュメントの流れから物を取り除くことを思い出してください。
だから、もし私がリフレッシュすると、あなたはイメージがお互いに突っ込んでいることが分かります。そして、基本的にそれらの間にスペースは全くありません。
そして、私たちは戻って自分の空間にそのスペースを追加することができます。
だから私たちは明らかに、彼らがこの小さなスペースを占めないようにしています。
我々は3つが行き渡ることを望んでおり、それらの間にいくらかのマージンが必要だが、それを制御したい。
したがって、それらをフローティングすることによって、ブラウザが私たちのために追加した空白を取り除き、実際の空白ではなくmarginプロパティを使用して独自のカスタム間隔で入ることができるようになりました。
今は幅を変更して30％から始めましょう。
だから、イスラエルの割合は身体の親要素に比例していることに注意してください。
だから、それぞれが体の30％を占めるでしょう。
そして私が30から始める理由は、それらがすべて1行に収まるか、3つが収まるかを確認することです。
私の心の中で、あなたは3人の人の間に隙間なしに行くことがわかります。
そして、私たちが取り上げているのはわずか90％だからです。
したがって、実際にマージンを分割し、それらの間にスペースを追加するために、他のパーセンテージを使用します。
すでに3つのグリッドがあります。
私たちが次にやりたいことは、このように見えるようにすることです。
または、それらの間に間隔を均等にします。
だから、私たちは実際に数学をやる必要があります。
だから私はすでにそれをやった。
しかし、基本的にこれを計算すればここにマージンがあります。ここにもマージンがあります。
ここに3つのマージンがあります。
そして、この1つのことについては、この上に5つ。
そして、この1つまたは6つ。
だから私たちは10％を持っており、6と10を6で割った値を6で割り算する必要があります。
だから我々がやることは、マージン1ポイント6 6パーセントと言うだけです。
したがって、ブラウザに戻って結果をチェックしてみると、間隔が空いている3つの均等な間隔の画像が得られることがわかります。
だから、数学はそれをもう一度打つだけでした。
これらはそれぞれ10％です。
だから、彼らはわずか30％しか提供しません。
それぞれのマージンは1です。 いずれにしても6％。
だから両側を左右に1つずつ6つずつ2つプラス30％とし、それぞれに3つのポイントを3つ与えます。
だから、それは正確に、またはほぼ正確に私たちが四捨五入している3分の1ですが、ここでできることは最高です。
だから三十三点三パーセント。
これらのそれぞれを検証して確認することができます。
そこに行く。
あなたはそれがちょうど3分の1を占めることがわかります