さて、別のエクササイズの時間ですので、ここではシンプルなミニマリストブログサイトを構築しようとしています。
この演習では、実際にはほとんどすべてに焦点を当てる予定ですが、実際にはボックスモデルの多くのものに当てはまるので、パディングや余白、枠線、ポリゴンのタイプなどは新しいGoogleフォントとその他のフォントを取得しますもの。
そこで私たちはこれを構築します。私はあなたにいくつかの指示を与えるつもりです。
あなた自身で最初に試してみたいと思ったら、次のビデオではいつものように最初からやり直すつもりです。
だから私はあなたにいくつかのヒントを与えるでしょう。
最初に気づくのは、この灰色のボックスです。
それは実際には身体の周りにある境界線なので、ボディにはこの20ピクセルの境界線があり、その周りにはすべてがあります。
そして、それは身体が画面上でずっと進んでいないことを明示していますが、ここからそこに行くことを意味します。
私がここで言及する別のことは、いくつかの色です。
だからあなたは色を推測する必要はありません。
実際にカラーピッカーを使用して、自分でこれを見つけようとすると、あなたにとっては良い練習になります。
しかし、どのようにして品質がビデオを通して引き継がれ、どのように変化するかはわかりません。
私はあなたに色をつけて、ここに入力します。
これらを参照するか、自分の色を自由に使うことができますが、ここでは身体の周りの色がこのグレーの色です。
日付はこの青色で、これは青色の色です。
そして、ブログタイトルの見出しの色は青みがかった灰色です。
そしてもう一つのことは、ここにフォントとこのフォントを含める必要があることです。
私は間違いなくあなたの頭の上を推測することを期待していないでしょう。
これはSource sense proと呼ばれ、Googleのフォントで利用できるので、Googleのフォントを使う必要があります。
それをダウンロードしてください。
それを含める。
私たちはそれをダウンロードしなければなりませんが、あなたの老人に正しくCSSAファイルを含める必要があります。
だからここにいくつか他のものがあります。
このエフェクトは、オンになっている左端の境界です。
だから、私たちがここに持っているのと同じ灰色で、もっと薄いです。
だからそれは左の境界です。
私が注意を払う必要があることは、これらがすべて同じに整列されていることを確認することです。
ちょっとしたマージンやパディングなどがあることに注目してください。
私がここで指摘する次のことは、日付がすべて大文字であることです。
だからあなたの成功でそれを行う方法があります。
大文字にします。
また、ここには少しの文字間隔があります。
これは通常の文字間隔ではなく、少し離れて配置されています。
そして、最後の1つの記事の間に。
この行があり、これは水平要素を表すH要素です。
そして、あなたはこれをスタイリングするためにH Rを追加することができます。この細い線を縮小することができます。
私は何かをオンラインで見つけました。
私はちょうどあなたに次のビデオでそれを示すつもりです。
しかし、ちょうど私たちのスタイルを研究すると、あなたはただコピーすることができます非常に多くの素晴らしい記事やコードペンがあります。
だから私はあなたがこれ以外のところでこれを正当化するとは思わない。
任意のテキストを自由に使用してください。
私はこれがベーコンのipsumだと思ったが、あなたが望むテキストを置いた。
2つ以上の投稿を自由に持ち、色とフォントで狂って自分のものにしてください。
OKですので、次のビデオでお会いしましょう。
私たちは最初から始めます。