□サイトカピネコ–NAVERホームページ2/2

★コード作成

Git Linkタヌキ匹

1.NAVER右側

●justify-content: space-betweenの欠点

の左右端に配置する特性

.

2flex-wrap: wrapの状態では、第1行と第2行のコンテンツ数が異なる.
→次の行の内容を極端に左右端

に置く.

解決方法:①コンテンツ数の調整②float: leftでソート(推奨)●結果スクリーンショット(登録部)

●結果スクリーンショット(トレンドショッピング部)

2.NAVER下端

●:beforeを使用して文字の前に棒グラフを作成する
●vertical-align一般的なmiddleだけでなく、数値を入力することもできます
例){ vertical-align: -1px; }:1 px未満(-負)

#main-footer .corp-lists li:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    background-color: #e4e8eb;
    margin: 0 8px;

    vertical-align: -1px;
}

・最初の文字の前に欄がないので、:first-childを使用して無に初期化します.

#main-footer .corp-lists li:first-child:before {
    content: initial;
}

●結果スクリーンショット

□難点

これは既存のコードの重複であり,あまり困難ではない.

□解決方法

冗長なコードや類似のコンテンツを繰り返すことによるコードエラーを減らすことに力を入れています.

□勉強心得

これまで学んだことを復習できるようになったので、重複コードはますます熟知しているようです.