Lynda.comでCSS Flexboxを学ぶ

• かもしれません 6, 2024

ウェブ上での生涯である10年後、私たちはMUSED Literary Reviewウェブサイトに新しい外観を与えることにしました。もちろん、最新のHTMLとCSSを使用したかったため、Flexbox、CSS Grid、およびResponsive Web Designを使用することになりました。

Lynda.comのおかげで、速度を上げるのに時間がかかりませんでした。以下は、MUSEDの新しい外観の設計に役立つ最高のビデオチュートリアルのほんの一部です。

CSS Flexboxを使用した高度なレスポンシブレイアウト
モーテン・ランド・ヘンドリクセン
このプロジェクトベースのコースでは、作成者がFlexboxメニュー、レスポンシブカードレイアウト、Holy Grailレイアウト、およびインタラクティブコンポーネントを作成する手順を順を追って説明します。

グリッドを使用したCSS高度なレイアウト
モーテン・ランド・ヘンドリクセン
このコースでは多くのことを学びます。著者は、CSSグリッドの基本とグリッドレイアウトの計画から始めます。これで、複数列レイアウトとフルブリードの単一列レイアウトを作成する準備が整いました。次に、さまざまなカードレイアウトと、必要に応じて表示されるスライド式のオフスクリーンナビゲーションパネルの設計方法を学びます。

CSSエッセンシャルトレーニング3
クリスティーナ・チュオン
このコースでは、CSSグリッドとFlexboxを使用してレスポンシブレイアウトを構築する方法を学びます。また、Retinaディスプレイ用のWeb画像とSVGベクター画像を準備する方法についても学習します。その後、著者は単純なCSSアニメーション、レスポンシブなタイポグラフィ、アクセシビリティに移ります。

CSS Flexbox First Look
ジェームズ・ウィリアムソン
このコースでは、CSS Flexboxレイアウトモジュールのすべての構文を学習しながら、順を追って学習します。著者は、Flexboxでできることと現在のブラウザーサポートについて説明します。次に、要素フロー、コンテンツのラッピング、アイテムの整列、フレックスコンテナのネストなどのトピックについて徹底的に説明します。

CSSグリッドの最初の外観
モーテン・ランド・ヘンドリクセン
このコースでは、2次元のグリッドレイアウトを作成するための新しい改善された方法を学習します。 CSSグリッドを使用してレスポンシブグリッドレイアウトを構築するための基本から始めて、著者はオンラインマガジンと3列のレイアウトの両方を構築するために知っておく必要があることをカバーします。

Flexboxを使用したレスポンシブフォームの構築
ジェームズ・ウィリアムソン
フォームなしでウェブサイトを設計することはできません。フォームは、サイトの他の部分と同様に、すべての種類とサイズの画面に対応する必要があります。ウィリアムソンは、CSS Flexboxボックスモデルを使用してレスポンシブWebフォームを作成およびスタイル設定する方法を教えます。彼は単純な検索フォームから始め、大きな2列のフォームを作成します。

レスポンシブ画像
モーテン・ランド・ヘンドリクセン
Wordpressを使用している場合、システムにアップロードする画像ごとに複数の異なるサイズの画像が自動的に生成されることがわかります。どうして？このコースでは、レスポンシブ画像の背後にある概念と、自分のWebサイトでそれらを使用する方法について説明します。

動画の説明: 理屈っぽいCSS入門 #04：詳細度と !important指定 (かもしれません 2024).