CSSってすごいですね！

私が学んでいること

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 の決定的な見解とはみなしません。

偶然の別れの思い

Lorem Ipsum のプレースホルダーが必要ですか?少しスパイスを加えてみませんか!

• https://baconipsum.com/ -- 肉食動物に最適
• http://officeipsum.com -- 私をひどく怒らせたい場合は、これを使用してください。
• https://cupcakeipsum.com -- 甘党の方へ。

VSCode ユーザー向けのいくつかの拡張機能:

• lotus-ipsum: マジック ザ ギャザリングのプレースホルダー テキスト
• ホラドリム イプサム: ディアブロ ファンの皆様へ!

以上がCSSってすごいですね！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。