CSSってすごいですね！-CSSチュートリアル-php.cn

CSSってすごいですね！

Mary-Kate Olsen

リリース： 2024-10-20 12:12:02

オリジナル

153 人が閲覧しました

CSS is Awesome!

私が学んでいること

CSS はページに魅力を与えるものです。長年にわたり、CSS はさらに強力になり、以前は JavaScript が必要だったアニメーションの実行にも利用できるようになりました。今週、私はそのより高度なプロパティのいくつかを検討してきました。

メディアクエリ

メディアクエリは、デバイスの新時代にはほぼ必須となっています。スマートフォンの出現により、他のどのデバイスよりも多くの人が携帯電話を通じてメディアを利用するようになりました。そのため、サイトはモバイルで見栄えが良いだけでなく、大きなサイズの画面でも見栄えが良いことが必要です。では、どうやってそれを行うのでしょうか?まあ、部分的には...

フレックスボックス！

メディアクエリとフレックスボックスを組み合わせると、CSS がツールボックスの強力なツールになります。 (小さなツールを 1 つの大きなツールに結合するという、UNIX に似た哲学) これで、本当に素晴らしいことができるようになりました。

事実上、Flexbox は、設定した Flexbox のルールに従ってボックス内の最初の子を処理します。

.flexbox {
    /* Turns on flexbox */
    display: flex;
    /* How would you like stuff displayed? Rows, columns... maybe display the items in reverse order?*/
    flex-direction: row;
    /* How do you want to spacing between your items to work? */
    justify-content: flex-end;
    /* How do you want items arranged on the main axis? */
    align-items: center;
    /*And so on...*/
}

ログイン後にコピー

これは、Flexbox を実際に試してみる初めての試みなので、上記の簡単な説明よりもさらに完全な情報を提供できる資料をいくつか提供します。ここでは説明しきれないほどのことがたくさんあります。

追加の参考資料

MDN: メディアクエリの使用
MDN: フレックスボックス
CSS のトリック: フレックスボックスのガイド

フレックスボックスで遊ぶ

チェックしてください: https://flexboxfroggy.com
こちらも: https://mastery.games/post/flexboxzombies2/
これで、文字通りフレックスボックスで遊ぶことができるようになりました!

次は何でしょうか？

ここからは楽しい部分に入ります。いくつかの基本的なツールを学んだので、これからポートフォリオの作成を始めます。ポートフォリオは、あなたがこれまでやってきたことを雇用主や他の人に示す方法です。これは、進めていくうちに何度も変わると思います。まずは、ポートフォリオの見栄えを良くできるかどうかを見てみましょう。 CSS はそれを行うのに役立ちます。プッシュして何ができるかを確認するのは楽しいはずです。いくつかの障害にぶつかることが予想され、次に書くときに一部の理解を修正する必要があるかもしれないので、これを CSS と Flexbox の決定的な見解とはみなしません。