レスポンシブ化時のCSS時短ツールを自作

10146 ワード
HTML 時短 ツール CSS レスポンシブ HTML テキストリンク

どうも7noteです。レスポンシブWEBサイトを作成するとき、PCスマホで重複しやすいプロパティを自動削除するツールを作成

自作ツールの紹介記事です。まだ一般公開していないので、利用いただくことはできませんが、ソースだけ先に記事内で公開します。
使ってみたいという方はページ内にあるソースからindex.htmlを作成して利用してください。インターネット環境不要でだれでも利用できます。

解決する課題

レスポンシブWEBサイトを作成する場合の手順は以下のような流れで作成します。（※私自身の例です。個人見解としてお読みください。）

①HTMLを記述
②CSSのPC用(レスポンシブ共通)を記述
③PC用のCSSを複製してスマホ専用を記述
④完成

（※スマホファーストで作り慣れてないのを何とかしたい。。。）

この手順でおこる課題として「PC用で書いたCSS」と「スマホ専用のCSS」で重複するCSSがでてくることです。

なので考えました。

『②の手順と③の手順の間で、あらかじめ重複しやすいCSSプロパティを自動で除外すればいいのでは！？』と思いついたわけです。

レスポンシブ化するうえで、重複しやすいプロパティを削除するツールを作った。

本題です。
レスポンシブサイトを作るうえでPC用のCSSを複製してスマホ専用のCSSを作成するまえに、「重複しやすいプロパティを削除するツール」を使うことで、後でちまちま1行ずつ不要なプロパティを消す作業が必要なくなるのではと思い、自作ツールを作ってみました。

その名も・・・

「レスポンシブで重複するプロパティを一括削除しれくれる君」（※命名が適当）

ソースはこんなかんじ。あんまりこういうツールとかの作成は経験がないので、ソースが汚いかもしれませんがご容赦ください。
コピペで使えるように、あえてhtmlのワンファイルにしています。

作りはまだ雑なので一般公開する際にもう少し調整できればと思っています。（br使って強制改行している個所とかナンセンスすぎて早く直したい。。。）

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>レスポンシブで重複するプロパティを一括削除しれくれる君</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
</head>

<body>
    <textarea name="" id="boxA" cols="100" rows="20"></textarea>
    <br>
    <input type="button" onClick="slim()" value="スリム化">※処理後、クリップボードにコピーされます。
        <br>
    <textarea name="" id="boxB" cols="100" rows="20"></textarea>

    <script>

        function slim() {
            // 削除するプロパティ一覧（例：「background: #」ならこれを含む行を削除する）
            var regexp = /align-items:|background: #|border-radius:|border: solid 1px|border-top: solid 1px|border-left: solid 1px|border-right: solid 1px|border-bottom: solid 1px|bottom: 0|box-shadow:|color:|content:|counter-increment:|counter-reset:|cursor:|display:|flex-shrink:|flex-wrap:|font-family:|font-weight:|justify-content:|left: 0|line-height:|list-style:|outline:|position:|right: 0|text-align:|text-decoration:|text-overflow:|top: 0|transform:|vertical-align:|white-space:|word-break:|writing-mode:|z-index:/;

            var data = document.getElementById("boxA").value;
            var outdata = "";
            var count = 0;

            var lines = data.split(/\r?\n/);

            lines.forEach(element => {
                if(element.match(regexp)){
                    count = count + 1;
                } else {
                    outdata = outdata + element + "\n"
                }
            });

            // 結果を出力
            document.getElementById("boxB").textContent = outdata;
            console.log(count + "行削除しました");

            // 生成したCSSを自動コピー
            var reslutBox = document.getElementById("boxB");
            reslutBox.select();
            document.execCommand("copy");
            console.log("コピーしました");

            // 値を初期化（あんまり意味ないかも）
            outdata = "";
            var count = 0;

        };

    </script>

</body>
</html>

使い方

①上側のtextareaにPCスマホ共用のCSSを貼り付け
②「スリム化」と書かれたボタンをクリック
③自動的にクリップボードにコピーされます。それを使いたいcssファイルに貼り付けるだけです。
（※検証ツールのコンソールログに何行削除されたか書いてます。）

ざっくり解説

  1. 貼り付けられたCSSデータを.split(/\r?\n/)を使って1行ごとに配列に分解します。

2.forEach(element => { });とif(element.match(regexp)){
}を使って、1つずつ削除するプロパティかどうかを判定。削除するものであればカウントを取り、残しておくものだった場合には吐き出す用の変数(outdata)に追記する形で格納していきます。
削除する基準は、変数（regexp）にある単語郡が含まれているかどうかを基準に見ています。

※重複チェック例１（font-family:）
font-family: hogehoge ⇒ 削除される

※重複チェック例2（background: #）
background: #000000; ⇒ 削除される
background: url(hogehoge.jpg); ⇒ 削除されない

背景色が変更になる場合は少ないですが、背景画像がPC用・スマホ用で分かれる場合があるのでこのようにしています。お好みで調整してください。

3.チェック処理処理が終われば、document.getElementById("boxB").textContent = outdata;のところで、書き出し用のtextareaに出力し、かつそのtextareaを選択した状態にしてdocument.execCommand("copy");を実行し自動でクリップボードにコピーを行います。

まとめ

時短ツールなどがいろいろ紹介されていたりしますが、結論でいえば人によって作り方や手順は違うので、自作できる人が一番強いのではと思っています。

WEBツールでも便利なものはたくさんあるので、自分に合ったものを使い続けるのが良いかなと思います。

いろいろ使ってみて試していると時間はかかりますが、最終的にいいものを長く使い続けていれば時短になるので、どんどん便利なものは使ったり、作ったりしていきたいですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ