おい、すべて!今日、私はあなたに複数の「カード」を含んでいるダッシュボードページをスタイリングするために、いくつかの簡単なヒントを与えます.私はRails Backendを使用しています.
また、当社のアプリケーションファイルにGoogleフォントをインポートします!
私は今、最小限の「スタイリング」を持っています、しかし、私はそれをスタイリングと呼びさえしません.このページは、ユーザーのダッシュボードページで、植物コレクションを表示します.
我々はきちんと一緒にそれを保持するためにきちんとコンテナとカードを作るつもりです!(もしあなたのdevの設定がライトモードの場合、以下のスクリーンショットのエッジをはっきりと見ることはできません)

ダッシュボード

最初に、我々の最大の容器を作りましょう:ページ自体!ここに基本的な構造があります.「PlattContainer」コンポーネントが「ダッシュボード」部門の1つの層であることに注意してください.

render() {
        return (
            <div className="dashboard">
                <div>
                    <h2 className="user-name-icon"><img className="user-dashboard-icon" src={user.icon} />
                    {this.props.user.username}</h2>
                </div>
                <div className="dashboard-btn-div-top">
                    <button className="dash-add-plant-btn" >Add Plant</button>
                    <button className="greenhouse-btn" >Greenhouse</button>
                </div>
                <PlantContainer 

                />
                <br></br>
                <div className="dashboard-btn-div-bottom">
                    <button className="dash-edit->Edit User</button>
                    <button className="dash-logout-btn"  >Logout</button>
                </div>
            </div>
        );
    }
}

最も外側のラッパーは「ダッシュボード」のクラスを持っています.開始するには、ページの左端からコンテンツを取得したいだけです.私はそれが触れていることを憎む.CSSファイルで

.dashboard {
     padding: 40px;
}

パディングは、要素の境界からコンテンツにプッシュされます.(マージンは境界から突き出て、境界線は要素の実際の端です)

プラントコンテナ

では、次のコンテナを見てみましょう.これは「植物コンテナ」のクラスでdivを返します.私は、その箱が私が私のコレクションで持っているすべての植物を含むことを望みます!
CSS

.plant-container {
     padding: 20px;
     margin: 20px;
     border: 1px solid black;
}

それで、私は容器を概説するために境界を作りました、そして、私はマージン20 pxで容器から押し出しました、そして、内容が容器の端に正しくないように、中で若干の詰め物で押されました.

涼しいので、現在、我々はもう一つの箱の内部に箱を持っています.私は、私の箱の端が柔らかいようにしたいので、私は加えますborder-radius: 10px; 辺を柔らかくする.plant-container .

プラントカード

いいね.さて、別のレベルを深く行って、カード自体をボックスに取得しましょう.私の植物カードはPlantContainerコンポーネントでレンダリングされているので、上記のスニペットでは表示されません.

.plant-card-dashboard {
         border: 1px solid rgb(0, 0, 0);
         border-radius: 10px;
         padding: 15px;
         margin: 10px;
         width: 200px;
         background-color: rgb(255, 255, 255);
}

それで、私はカードがマージン10 pxによって互いを押し出して欲しいと思います.そして、パッド15 xでそれ自体を押しました.

ラウンドBoyzzz.

カードコンテナ

植物の容器のdiv、私はクラスで別のボックスを作ったcard-container すべてのカードをラップする.私がこれをした理由は、タイトル「あなたの植物収集」が中にあるようにありました.植物コンテナ.

カードはすべての上に積層され、私はそれらを並んで表示してほしい.
そこでダッシュボード>植物コンテナ>カードコンテナを得ました.

.card-container {
    display: inline-flex;
    flex-wrap: wrap;
}

インラインフレックスは、並んで表示させましょう、そして、屈曲ラップは次のカードが容器の次の行に下がるために加えられるのを許します.私は、植物をデモに加えました:
今はもっとジューシーなスタイルを加えたいです.背景画像はいかがですか.我々のところに戻りましょう.dashboard クラススタイリングとイメージを追加します.私のスタイルディレクトリにローカルにイメージがあります.私はイメージサイズを「含んでいる」ように設定します、そして、それは全体の絵を示します、そして、それは自動的に下にそれを繰り返します.
ダッシュボードスタイリングはこちら

.dashboard {
    padding: 40px; 
    background: url(./images/zz2.jpg);    
    background-size: contain;
} 

さて、彼女はこうです.

我々が我々の中に戻るならば.植物コンテナCSSグループ、我々はいくつかのより多くのものを加えるつもりです:

.plant-container {
     padding: 20px;
     margin: 20px;
     border: 1px solid black;
     background-color: rgba(255, 255, 255, 0.521);
     backdrop-filter: blur(5px);
}

“背景色”は、我々の背景画像(ダッシュボードのdivにある)をフェードする約不透明度の約半分です.最終的なタッチとして、私はplantcontainerも少し背景をぼかしたかったので、それは“backdropフィルタ”を行っていることです.しかし、それは高価な効果ですので、一度以上ページを使用しないようにしてください.

プラントイメージスタイリング

今その植物イメージに取り組みましょう.それは少し正方形ですね?私の植物カードでは、イメージクラスですplant-image-dashboard そして、それがスタイルである方法は、ここにあります:

.plant-image-dashboard {
    width: 200px;
    height: 200px;
    object-fit: fill;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

それで、私はそれが正方形であるために高さと幅をセットします.そして、イメージが「一杯」に合うように設定しました.あなたが長方形のイメージを持っているならば、私は正方形のイメージをアップロードしましたobject-fit: fill おそらくあなたのイメージをダウンして、すべての奇妙なワープワープします.それから、私たちは黒い境界を加えて、それを15 pxでローリングして、少しの箱影を加えました.次のようになります.

グーグルフォント

ホロウ!ほとんどそこ.Googleフォントをインポートしましょう.これは少し反応のアプリに関与している.私は「Nanum Myeongjo」が好きでした
クリックDownload Family そして、あなたは少しzipファイルをダウンロードしてドロップを取得します.

それは小さなフォルダに開く.いくつかのフォントが表示されます.ttfファイル.私は、ちょうど「レギュラー」のものが欲しかったです.フォルダを作るstyle ディレクトリfonts をドラッグして、ファイルをあなたのフォントディレクトリにドロップします.私にとってスタイルフォルダはsrc ディレクトリ.

今すぐあなたのアプリケーションをロードするJavaScriptファイルを見つける.js私の反応アプリが付属bootstrap.js 私はブートストラップを使用していないにもかかわらず、それは私のアプリをロードするものです.その後、私のすべての他のコンポーネントをロードします.
あなたのアプリケーションをロードするファイルにあなたのフォントをインポートします.JSのように、私の場所からパスをルーティングbootstrap.js 生活

次に、置くことができますfont-family: 'Nanum Myeongjo', serif; サイト全体のフォントingのためのあなたのアプリケーションのスタイリングで!
今、私たちはあなたの最愛の植物コレクションが表示されますきれいにスタイルのダッシュボードのページを得た.ブーム.

私は、これがCSSを学んでいる誰にでも役に立つことを望みます.私は純粋なバニラCSSをこのプロジェクトで使用しています.
私は他のユーザーの新しい植物を表示するフィードページに似たようなことをした!

(私のハウスプランニングソーシャルメディアアプリ、Faceplantに協力するのに興味を持っている仲間の植物好きですか?