見出し画像

なんとしても楽をしたいフロントエンドエンジニア ズボラコーディング#3

エンジニア のん｜COMMA Inc.

こんにちは。
株式会社COMMA のんです。

ズボラシリーズ第3弾
今回は、Webサイト制作の時に
小難しいけど使ってみたら便利だったものについて紹介していきます。

ズボラ、といいつつ今回紹介するのはちょっとコツがいるので
慣れるまでもしかしたら時間がかかるかもしれませんが
できるようになると、楽できるようになるかもしれません。

ズボラシリーズ第2弾　前回の記事はこちら

【 過去記事紹介 】
初心者でもなんとかなる
Shopifyのテーマ「Dawn」を使ったカスタマイズ


PCでSPでレイアウトが違う時のアレ

コーディングするときによくぶつかる壁があります。
PCとSPでレイアウトが違うデザイン。

よくあることですが、これってワンソースではできなくない！？と昔はよく頭を悩ませていました。今でも悩むことも多々あります。

例えばこんなレイアウト。
文字と画像が横に並んだよくあるレイアウトになります。

PCのレイアウトイメージ

ソースコードは以下です。

<section class="area1">
    <div class="flex">
        <div class="text_block">
            <h1 class="text_block-ttl">タイトル</h1>
            <p class="text_block-name"><span>テキスト</span><br>テキストテキストテキスト</p>
            <p class="text_block-desc">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        </div>
        <div class="pic_block">
            <picture>
                <!-- SP時：〜767px -->
                <source srcset="/img/sample_01-sp.jpg" media="(max-width: 767px)">
                <!-- PC時：768px〜 -->
                <img src="/img/sample_01.jpg" alt="PCの画像">
            </picture>
        </div>
    </div>
</section>

そして、SPのレイアウト

SPのレイアウトイメージ

一見、あまり難しくないように思えてしまうのですが
テキストエリアが画像の下に幅100％でレイアウトされています。
こうなると、PCの時に左側のテキストがあるブロックとと画像のブロックで分けていたものから、SPはテキストが入るエリアだけを別々にしないとこのレイアウトを実装することができません。

そんな時に。
display: grid;
display: contents;
この2つのCSSが活躍します。


.flex {
    display: flex;
    justify-content: center;
    align-items: center;

    @include sp {
        display: grid;
        margin: 0 auto;
    }

    .text_block {
        @include sp {
            display: contents;
        }
    }

    .text_block-ttl {
        @include sp {
            grid-column-start: 1;
            grid-column-end: 2;
        }
    }


    .text_block-name {

        @include sp {
            width: 100%;
            grid-column-start: 1;
            grid-column-end: 2;
        }
    }

    .text_block-desc {
        width: 444px;
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .pic_block {

        img {
            width: 100%;
        }

        @include sp {
            width: 193px;
            margin-left: auto;
            grid-column-start: 2;
            grid-row-start: 1;
            grid-row-end: 3;
        }
    }
}

コードはSCSSで記述しています。
フォントサイズなどの細かい部分は割愛しています。適宜設定ください。

まずは、flexをかけている親要素をgridに変更します。
それから、テキストエリアを囲んでいるtext_blockの箱が邪魔をしているので
ここに display: contents;をかけます。
これをすることによって、この箱が無かったことになります。便利！

つまりSPのときだけソースがこうなる、ということです。

<div class="flex">
    <!-- <div class="text_block"> ここがなくなる -->
    <h1 class="text_block-ttl">タイトル</h1>
    <p class="text_block-name"><span>テキスト</span><br>テキストテキストテキスト</p>
    <p class="text_block-desc">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    <!-- </div> ここがなくなる -->
    <div class="pic_block">

        <picture>
            <!-- SP時：〜767px -->
            <source srcset="/img/sample_01-sp.jpg" media="(max-width: 767px)">
            <!-- PC時：768px〜 -->
            <img src="/img/sample_01.jpg" alt="PCの画像">
        </picture>
    </div>
</div>

こうすることで、好き勝手レイアウトすることができるようになります。

gridの概念がちょいムズなので、クロームで検証機能を使いながらやるとわかりやすいです。

gridのアイコンをクリック

gridレイアウトがこのように表示されるようになります。
縦方向がgrid-row、横方向がgrid-columnになります。

gridレイアウトが表示される

【CSSの解説】

一番上のtext_block-ttlと、その下のtext_block-nameには
横方向の1から始まって、2まで範囲が欲しいので
grid-column-start: 1;　grid-column-end: 2;　を設定します。

次にpic_blockの画像部分ですが
横方向の2から始まって、縦方向は1から3まで欲しいので
grid-column-start: 2;　grid-row-start: 1;　grid-row-end: 3;　を設定します。

最後にtext_block-descの幅100％になっているテキストエリアは
横方向の1から始まって、3まで範囲が欲しいので
grid-column-start: 1;　grid-column-end: 3;　を設定します。
ここに幅をつけて、画像に margin-left: auto;をつけるとflexのブロックに対して中身が左右ピッタリレイアウトされます。
その他、それぞれ適宜マージンを設定したら完成です。

flexだけでは解決できないレイアウトはこんな感じで組み替えることが可能です。
またレイアウトは似ているけれど順番がちょっと違う場合なら、
contentsとorderというプロパティを使うとレイアウトはそのままで順番を変えることもできます。気になる方は調べてみてくださいね。

ここまでしてCSSでなんとかしないとダメなの？

これらの組み合わせは、ソースコードを変えることで無限にやりようはあります。
もちろんソースコードをPCとSPで分けるのも1つの手です。
ですが文言変更が入った時に2ヶ所変更しないといけないのを、手間と考えるかどうか…。片方を変え忘れたら事故の元になるかも…？

作り終わったその後のことを考慮して、なるべく簡単でわかりやすい方法で作り込むようにしています。

レイアウト1つとっても、そうです。
今は1つしかないけど将来的に増えることは？横並びになる？
逆も然り。1つになったら真ん中になる？それとも左寄せ？

将来の自分が「ズボラ」できるように、なるべく最初の時点で要件を詰められるかが大切だと思っています。

CSSをSCSSにしたはなし

これまでのコード解説の中で出てきたCSSですが
わたしはSCSSを使用してCSSを記述しています。

4年くらい前から使い始めたのでまだまだわからないこともあるのですが、
色々なコーディングの案件をこなしていくうちに、もう少し作業を効率化できないかなと思うことがありました。
当時はエンジニアとして今よりももっと駆け出しでいくら時間があっても足りないくらいでした。（今でもそうですが）

そんな中でSASSとSCSSについて少し調べてみたところ
CSSと記述方法が似ていること、学習コストが少ないこと、間違えにくそうなことを考慮してSCSSを使用してみることにしました。

HTMLは<>で閉じるもの、CSSは{}で閉じるものと思って生きてきたので、
SASS で使うセミコロンで区切る書き方だと、馴染みがなくて慣れなさそうと思ったのもSCSSを選んだ理由の一つです。

使っていて一番使いやすさを感じたのはレスポンシブ対応のときの記述でした。
PCで書いたコードの直下に@includeで呼び出せばすぐに書き始められるのが書きやすく管理もしやすくとても良かったです。

SCSSは条件分岐や関数など、いろいろなものが使えます。
使うタイミングがなかなかないので詳しく説明できないのですが
もう少し簡単に書けないか、この条件の時だけこうしたいな、などのちょっとしたネコの手も借りたい状態のときに書き方を調べつつ勉強したりしています。

これからも日々勉強をしながらSCSSを使いこなせていければと思います。

無料相談を受け付けています

私の所属する株式会社COMMAでは、大手企業の制作案件から、スモールブランドの広報のお手伝いまで、業種にこだわらず多様なクライアント様とお付き合いしています。
また、代理店や制作会社との協業も多く、企画・デザインのみ、サイト構築のみといった部分的な対応も柔軟にお受けいたします。

Webサイトからは過去の制作実績を掲載した会社案内をダウンロードすることが出来ます。
弊社に興味をお持ちになりましたら、下記Webサイトをご覧ください。

また、Webサイトでは、弊社代表タムラによる無料相談を受け付けています。
・サイトをリニューアルしたいけれど、何から手をつければいいのか分からない
・SEO対策はどうすればいいのか
・SNSを始めてみたが、運用の方法が分からない

など、制作に関するお悩みをお持ちの方はお気軽にご相談ください！



いいなと思ったら応援しよう！