よろしくお願いします。
このビデオでは、今私たちのサイトのスタイリングに取り組んでいきます。
終わりのように見えるものの近くにはどこにもない場所です。
では、実際にそれらを並べて比較しましょう。
ここに私たちのものがあります。
そこで、コーナーを四捨五入するために必要な大きな変更のいくつかは、ここで上にスペースを追加しています。
ここのボタンのスタイリングを変更する。
だから、これらのボタンは、あなたがそれらの上にマウスを置くと、ホバー効果を得るまでボタンのようには見えません。私たちのボタンは間違いなく恐ろしいもので、ホバー効果はありません。
また、彼らの位置は少し間違っています。
私がここで推測するとわかるように、私はテキストを手に入れることができますが、新鮮であれば、テキストが私たちのバージョンと比べてすでに取り上げられているのではないかと思います。
ここにアニメーションもあります。
ですから、私が正しくクリックしたときに私たちがゆっくりとどのようにフェードアウトするかを通知をクリックすると、間違ったものをクリックするとただちに削除されます。
だから我々はそれに移行を加えたいと思う。
また、私たちはH-1を持っています。
それはより多くのスペースを取る必要があります。
背景色を変更する必要があります。
フォントを変更したい
私たちの色の範囲が正しくフォーマットされていることを確認して、それがそれ自身の行にあり、より大きなフォントになるようにする必要があります。
また、本文全体のフォントを変更する必要があります。
したがって、これらはすべて同じフォントです。
最後に、ストライプとボディーの端の間に少しスペースがあることに気づくでしょう。ソリューションバージョンではスペースがまったくありません。
OK。
最初にこのH-1に取り組んで始めましょう。
だから、私たちはサブラインのテキストに行き、H-1に行きます。最初に行うことは、ソリューションの中で見ているように、物事を真ん中に整列させることです。
物事は中心に整列しています。
だから、テキストアラインメントセンターを追加し、保存して更新するだけです。
ちょっと改善。
次は、背景色を変えて色がまだ青色に変わるようにしましょう。しかし、私は今すぐページをリフレッシュするとうまくいきます。
しかし、私は再びリフレッシュしてゲームに勝つか、新しい色をクリックします。
それは黒に戻ります。なぜなら、私たちのjavascriptコードは、javascriptで暗い灰色の黒い色に戻っていることを上書きしているからです。
2 3 2 3 2 3という色にリセットする場所を見つける必要があります。
さあ。
これをまだ青色に変更したいだけです。
そしてそれは私がそれをリフレッシュするときにも、それはまだ青です。
私は新しい色を得る。
まだ青いままです。
OK。
そうです。
さあ、私たちのH-1の両側にあるすべての黒いスペースを取り除きましょう。
だから私たちのH-1では上下左右の余白マージンゼロを取り除くつもりです。
そうするときに何が起こるか注意してください。
この黒いスペースは、左上と右上のこのわずかな間隔を除いて、すべての面で消え去る。
そして、それは実際に身体から来ているH-1から来ていません。
だから、私たちは身体に行って余裕ゼロを与えることができるように修正する。
そして今、この小さな隙間に気をつけて、私はリフレッシュし、それは消え去ります。
だから私たちの白いストライプは、ここのこのバージョンでそうであるように、すべての方法で側面に向かっています。
OK。
次は、楽しみに焦点を当てましょう。
だから楽しさはすべての要素で同じになるでしょう。
ボタンとH-1は、ここではすべて同じフォントで、少し異なるフォントウェイトです。
そして、我々はAvenirと呼ばれるシステムの誇りを持っている組み込みのフォントのうちの1つだけを使うつもりです。
だからそれはフォントファミリーAvenirになるだろう。
それはそこにあるすべてのシステムで動作しないかもしれないフォントです。
だから我々はモンである別のオプションを追加するつもりです。 それと同じようにSerat。
だから私たちはここでは、まったく同じに見えないこの楽しいところで終わります。
それがフォントの重みになります。
だから、H1だからこのフォントの重みを変える必要があります。
デフォルトでは、太字にしたり、700または800、または900のフォントの太さにすることができます。
私たちがやりたいことは、フォントの太さを普通にすることです。
だから私たちのH-1はフォントウェイトを追加して保存することができます。
リフレッシュ。
それはもっと近づいている。
今私たちが変える必要があるいくつかのことがあります。
まず第一に、これはすべて大文字で、RCSSを使って大文字変換と大文字変換を使用して行うことができます。これで近づいて見えますし、私たちの色が独自の行にあり、それをする。
私たちはここでチームに入り、実際には老人を少し編集します。
これが私たちがこの仕事をする最初の方法です。
私たちはPearcey
SSでそれをやる別の方法を見ていきますが、私たちは、これをスタイリングして1行で素晴らしいものを見つけてから、休憩を追加することから始めます。
私たちはabrタグを使うことができますが、実際にはスタイルに関しては少し悩まされていますが、リターンや改行を追加するのはすばやく簡単な方法です。改行
だから私たちは偉大な後に欲しい、僕らは休憩をしたい、そして僕らのスパンを欲しがってから、別の休憩をして、そしてゲームの色を下にして、リフレッシュすればもっと近づいていくのを見ることができます。
今度は、スパンをもっと大きくすることに焦点を当てる必要があります。
だから、このバンドはカラー表示のアイデアを持っています。
だから私たちはR C S Sに行き、このようにカラーディスプレイを選択するつもりです。
Idの色を表示して、フォントサイズがH-1のフォントサイズの200％だと言うでしょう。
また、リフレッシュすると、フォントサイズがはるかに大きくなります。
そして近づいてきています。
私たちはここに休憩を取っています。
また、行間にはここよりも多くのスペースがあることに気付きました。
だからこそ私たちができることがいくつかあります。
最初の行は、行の高さを変更することです。
そこで、行の高さを1にします。 1を保存します。
もう一度バージョンを見てみましょう。ちょっと縮小しています。
しかし今、私たちは上部と下部のスペースを失いました。
そこには少しスペースが必要です。
だから私たちがやることは、パディングを加えることです。
したがって、上下左右にはパディングを追加し、上と下には20ピクセルを必要とします。したがって、このパディングのように20ピクセルとゼロを行うことができます。
トップ20ピクセルとパディングボトムをパディングすることもできましたが、これはリフレッシュするのがより簡単な方法であり、現在ほぼ完成しています。
だから私たちのヘッダーは上手く見える。
私たちは正しいフォントを正しいフォントの形にしています。それは大文字の正しい背景色です。
私がプレーしている間、正しい表情をすべて残しておくようにしましょう。
次は、このナビゲーションバーのボタンです。
だから我々は間違いなくそれらを改善するための道のりを持っている。
私たちが最初にやりたいことは、境界線を取り除くことです。そのため、ボタンの周りにはっきりとした境界線がありません。
我々はまた、背景色を取り除きたい。
だから、ここで見られるような背景はないはずです。
私たちが動かすまで、または選択するまで待ちます。
また、ここでフォントファミリがこのフォントと同じであることを確認したい。
だから始めましょう。
そして私はすべてのボタンを選択するつもりですので、ボタンを押して、境界なしと言うだけで保存します。
私がリフレッシュするとき、ボタンに注意を払う。
OK。
だから我々は今、国境がない。
しかし、私たちはまだその背景色を持っています。
だから今は同じ背景なしと保存してリフレッシュし、我々は近づいている。
だから今私たちは平易なテキストを持っています。
そして、ここから始まるようにすべてのテキストを大文字にすることから始めます。
だから私たちはテキストの変換を再度使用するだけで、その行をペーストしてそこにコピーしてリフレッシュします。
今、私たちのボタンはすべて大文字です。
次は、ボタンがdivストライプコンテナの上端から下端まで確実に移動するようにします。
今はスペースの一部しか占めていないので、高さを100％に設定することでそれを行うことができます。
そしてそれは、私たちがもっと近づくことがわかるように、含有元素の100％を占めることを意味します。
我々は今、いくつかの色を変更する必要がありますフォントサイズをフォントの重量を変更し、我々はまだセットアップしていないホバー効果を変更します。
次のことは、フォントを少し重くして、青色に変えることです。
だから、フォントの重量は700色になり、色も青色になります。
そしてそれをリフレッシュしてみましょう。
だから少し古くなってきて、ここに戻ってきたのと同じ色がまだ青色に変わっているのを見ることができます。
文字の間隔を1ピクセルに変更することができます。
私がリフレッシュするときに注意を払うと、各文字の間にちょっとした間隔があることが分かります。
レスリーはフォントサイズに注目しましょう。
彼らは少し小さすぎるようです。
だから、フォントサイズを使用して継承するように設定します。
私がリフレッシュすると、フォントサイズが継承されていることがわかります。明示的にフォントサイズを継承する必要はありません。
だから今見てみましょう。
大きな相違点の1つは、現在は別々に配置されていることです。
ページが読み込まれるとすぐに、ここにスペースがあります。
しかし、ボタンをクリックするまで、そのスペースはありません。
それで、私たちがする必要があるのは、実際にはここのスパンをスタイルすることです。そのスパンはメッセージと呼ばれ、私たちはそのスペースを占めるようにいくつかのプロパティを与え、それを与えたいと思っています。実際にプロパティ。
そこで、このファンである私たちのメッセージを表示するように選択し、表示プロパティを変更することにします。
BLOCKそれでは、私がリフレッシュすると、すぐに大きな違いに気付かないでしょうが、20％の値を与えて保存して更新する必要があるからです。
この画面の20％を占めるものはそれに含まれていないにもかかわらず、このスパンを持っています。
それは、これらの要素を私たちが求めているものと正確に反対側に押し付けます。
見てみましょう、それらを比較してみましょう。
そうですね。
今度は、選択したクラスを適切な色に合わせ、ホバー効果を持たせることです。
だから私たちのボタンの下になるだろうし、最初にホバー効果を追加するつもりです。
ですから、Colan
Hufferボタンを追加するだけで、フォントの色を白く、背景の色をスチールブルーに変更します。
基本的には色を反転させて保存してリフレッシュします。
私がホバリングしたら、私はその効果を得ることができます。
完璧。
私たちが選んだクラスは、まったく同じように見えます。
ちょうどスタイルをコピーするつもり。
選択されたときと比較して何かを乗り越えるときに違いはありません。
彼らは同じように見えるはずです。
だから、私はあなたがホバリングしている間だけ右に見え、私はホバーしているのを見ることができます。
その青い背景と白のテキストの色を取得しますか？
そして私が動くとき、それは遠ざかります。
若干の違いがあります。
ソリューションボタンの上にカーソルを置くと、その色が消えることがわかります。
私のバージョンではただのスイッチではありません。
それは即座にトグルするだけです。
ボタンセレクタの内部でC Sのトランジションプロパティを使って修正できます。
我々は移行を書き、それを渡すつもりです。
2つの引数は2つの値で、最初のものは遷移したいものです。この場合、すべてのプロパティにそれを追加するだけです。次の引数は、どれくらい長くしたいのかです。
だから私は最初に2秒でそれを誇張するつもりです。
もう一度、トランジションプロパティは、カラー変更やフォントサイズの変更とプロパティ間のトランジションをアニメートする方法をCSXに伝える方法です。
だから私がここで言ったことは、私たちの場合は本当に色と背景になるボタンのプロパティがいつでも変わるということです。
だから色が変わって背景色が変わるたびに2秒かかります。リフレッシュすると表示されます。
そして私は立ち向かう。
ああ、まだ動作していません。
私はここに私の行方が見当たりません2。 00秒。
そして、リフレッシュしてホバーすると2秒間フェードインし、選択したクラスをクリックして追加すると2秒かかります。フェードアウトするには2秒かかります。
2秒は間違いなく長すぎます。
私は約3秒間を目指していると思う。
それを試してみましょう。
そこに行く。
それは私にはかなり良く見えます。
最後の大きなことは、これらの四角形の丸みを帯びたコーナーを得ることです。丸みを帯びたコーナーを得るには、Border
radiusというプロパティを使用しています。
あなたが見たいと思えば中央のドキュメントを開いています。
それは良い読書です。
しかし、彼らはあなたが半径をボードで行うことができる様々な事例についていくつかの例を示しています。
だから私たちがやろうとしているのは、わずかなボーダー半径を与えることです。ここは四角です。
私たちが目指しているものを見てみましょう。
そういうものが私たちが欲しいものです。
だからそれはやや微妙なカーブでした。
私たちのスクエアクラスに上がって、ボーダー半径を割り当てましょう。まず始めに誇張したことをしてみましょう。私たちが50％行ったら何が起こるかを示します。
サークルを取得すると、実際にサークルを使用する方が好きかもしれません。
私はそれらを使用することを検討していたが、最終的に私はこれらの丸い角の四角を好み、私が使用した数字は15パーセントです。
そして、それらを2倍にチェックして比較します。
OKだからいいよ。
15％だが、もし望むなら、私たちが5％のようなことをしてリフレッシュしたら何が起こるかを見せてくれるだろう。
我々は非常にわずかに角を丸くする。
だから私は私の15リフレッシュに戻って、私たちは素敵な丸みを帯びたコーナーを持っていますが、アニメーション効果を得るためには、これらのいずれかをクリックするときに作業する必要もあります。
ホバー効果がフェードインまたはフェードアウトしたように、色がどのように変化するかに注目してください。
これを実現するには、遷移プロパティを使用する必要がありますが、やや異なる方法で行う必要があります。
だから私は正方形に行きます。私たちが変えたいのは、背景色か背景だけです。
もう一度、2のような長い時間を過ごしましょう。 0秒と見える方法を参照してください。
だから私はリフレッシュし、私はこれらのいずれかをクリックします。
フェードアウトするまでに2秒間かかることがわかります。
だから私たちは長い間何かを持続させたくありません。
おそらくおそらくゼロ点6になるでしょう。
それを試してみましょう。
OK。
それは妥当と思われる。
その背景が変わるたびに0がかかります。 6秒。
しかし、違うところは、他のプロパティが変更されたときに、プロパティが変更されたときに私たちが言ったボタンのようにアニメーション化しないと、3秒間かかるはずです。
私たちは背景だけをターゲットにしており、その変化があります。
0になるはずです。 6秒。
私たちが気づいてほしいことの一つは、移行プロパティはすべてのブラウザで今のところ書かれているように、できるだけブラウザに優しいとは言えません。
実際には、2つのプロパティを追加する必要があります。これらのプロパティは、機能の違いに気付くことはありませんが、ブラウザサポートのためだけにあります。
最初のものはWeb Kit Daschへの移行です。ちょうどそれと同じ正確な値を追加します。
そして、私たちはこれがもう一つのダッシュMoz Mであるべきであるもう一つを必要とします。 オジー。
したがって、これらは実際にはブラウザの接頭辞です。
Web KitはWeb Kitのためのもので、ブラウザがSafariのように使うエンジンです。
そして、私たちはMozを持っていて、短い形式のMozyはFirefoxが構築しているZilahです。
つまり、トランジションプロパティはすべての単一のブラウザにまだ組み込まれていないため、サポートを追加するだけです。
だから我々はリフレッシュします。
何も違って見えるはずはありません。
私たちのゲームは同じように動作しますが、同じアニメーションが得られます。すべてをトランジションしてトランジションに変更し、すべて0にすると、同じアニメーションが得られます。
MOOC移行のための3秒。
ここで解決できる最後のことは、ストライプとグリッドの開始点との間の間隔です。
だから、私たちがここにないスペースがもう少しあることが分かります。
そして今、私たちが検査すれば、私たちはグリッドの周りにある要素を持っています。
私たちには正方形があり、div IDのコンテナがあり、コンテナdivは6つの四角形のすべてを囲んでいます。
だから我々はそれを使用することができますし、ちょうどそのコンテナのdivにいくつかのスペースを追加するだけで、上下に余白を追加します。
だから私はすでにそれを少しスタイリングしたと思う。
さあ。
だから、マージンはゼロだと言った。
代わりに、私たちがやることは、マージンが上下に20ピクセル、左右にオートがどのようにセンタリングされているかということです。
だから私はそれが左と右に自動であることを願っていますが、一番上のリフレッシュでは20ピクセルです。
私たちには間隔があります。
これでスタイリングが完了しました。