[css]中央揃えラッパー自作の最適解の模索

自作せずにテンプレ使えばいいのにね。

変遷
それから

変遷

こんな感じでやってた。レスポンシブを踏まえて左右に余白が欲しくなったんで、widthかpaddingで削ってた。

.content{
    width: calc(100% - 40px);
    max-width: 980px;
    margin: 0 auto;
}

幅にバリエーションが欲しくなった。

.content980{
    width: calc(100% - 40px);
    max-width: 980px;
    margin: 0 auto;
}
.content1200{
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto;
}

それから

classひとつで完結するのは楽だけど、重複しまくってるのが気持ちよくないのと地味にチューニングがちょっとだるくなった。

ベースを作っておいて、最大幅は別classで指定する。

.content{
    width: calc(100% - 40px);
    margin: 0 auto;
}
.max980{ max-width: 980px;}
.max1024{ max-width: 1024px;}

ちょっとこれで回してみる。