レスポンシブデザイン作成時に、PC版からCSSをスマホ版にコピーする際のコピーのおすすめ方法

Question

こんにちは。
表題の件で質問させていただきます。

HTMLコーダーの勉強をしているのですが、題名の通りおすすめのコピー方法を教えていただきたいです。
詳細を書きます。
まず前提としてPC版のレイアウトを先にコーディングします。
PC版が完成し、そのままスマホ版の作成に取り掛かるのですが、この時にPC版のCSSを
①そのまま全コピペする。⇨必要な箇所を変更していく
②class名やid名のみコピペする。⇨必要な箇所を記述していく
③その他方法

どれが一番効率が良いでしょうか？
自分は①、②どちらも実験的にやってみたのですがそもそもコーディングが遅いのでどちらが良いか分かりませんでした。

コーディングをする際の常識などあれば教えていただきたいです。

以下追記です。
現在作成しているページは外部へ出せないのでほんの一部分のみ抜粋です。
このような形でCSSは書いています。

@charset "UTF-8"; 

@font-face {
    font-family: "NotoSansJP";
    src: url("../font/Noto_Sans_JP/NotoSansJP-Medium.otf") format("opentype");
    font-weight: normal;
  }
@font-face {
    font-family: "poppins";
    src: url("../font/Poppins/Poppins-ExtraBold.ttf") format("truetype");
    font-weight: normal;
  } 
*{
    margin: 0;
    padding: 0;
}
body{
    line-height: 1.15;
    font-family: "NotoSansJP";
}
header{
    background-image: url("../img/main_pc.png");
    background-size: cover;
    width: 100%;
    height: 50.0732vw;
}
h1{
    margin: 0;
    background: linear-gradient(transparent 69%, #F940BC 0%);
    padding-bottom: 0.86vw;
    font-size: 3.2943vw;
    width: 40.5vw;
    text-shadow: 3px 0 #fff;
}
.header__content{
    padding: 7vw 0 0 52vw;
    font-family: "NotoSansJP";
}
@media screen and (max-width: 767px) {
    *{
        margin: 0;
        padding: 0;
    }
    body{
        line-height: 1.15;
    }
    header{
        background-image: url("../img/main_sp.png");
        background-size: cover;
        width: 100%;
        height: 111.2vw;
    }
    h1{
        margin: 0;
        background: linear-gradient(transparent 71%, #F940BC 0%);
        padding-bottom: 1.5vw;
        font-size: 5.0667vw;
        width: 62.5vw;
        text-shadow: 4px 0 #fff;
    }
    .header__content{
        padding: 23vw 0 0 37vw;
        font-family: "NotoSansJP";

Comments

[penguin520]

現在のPC版とおっしゃっているページのHTMLとCSSのサンプルを掲載することは可能ですか？

＞コーディングをする際の常識
コピペを多用すると、エラーの原因を踏むので、あまりコピペは使いません。

[maisumakun]

> 自分は①、②どちらも実験的にやってみたのですが

レスポンシブなのにコピペする必要が生じた背景はどのようなものでしょうか？

[opensee]

すみませんこちらの回答に気づいていませんでした。
cssのサンプル載せたものを更新しています。

ちなみに背景は今やっているブートキャンプでそう教わったためです。
初心者中の初心者です。

[penguin520]

初心者中の初心者にしては、綺麗に描いたCSSですね。センスはあると思うので頑張ってください。一緒に仕事することになったら宜しくです。

Answer 1

総じて要件によりますが、
現代では、①、②の方法をとることはほとんどありません。

ではどうするかというと、
多く採られている手法としては、
ベースのCSSの後行に、
メディアクエリにて上書きのスタイルを記述する手法です。
こうすれば、ファイル数が増えづらく、メンテナンスがしやすいですし、
エラーが起きた時の原因をしぼりやすくなります。

Comments

[opensee]

ご回答ありがとうございます。
メディアクエリは使用していますが、そのままコピペではないということですか？

自分はpc版とスマホ版完全に分けて作成しています。
＠media~
より下は全てスマホ用
上は全てpc用としています。

こうするのではなく、一つ一つの要素に＠media〜を仕込んでいくということでしょうか？

[penguin520]

横やり失礼します。
どうなんでしょう。そもそも、PC版とおっしゃっていますが、ページをつくる時点で、PCでもモバイルでも表示できる構造で造るので、完全に分けることをしてないです。どうしても、モバイル表示の時だけって場合にメディアクエリを使います。

[miyabi_pudding]

openseeさん >
これ以上の話は、openseeさんが書いている現在のソースコードを見てみないとなんともいえません。
@media内に、まとめて、
スマホ用（スマホベースなら、PC用）の上書きスタイルを記載することはあるかと思いますが、
"完全に分ける"ことはほとんどありません。
（完全に分けると、HTMLをPC用とスマホ用に要素を分けることになり、SEO的にもあまり良くない）
あくまで"スタイルの上書きが必要なセレクタのみ"のスタイルを上書きするよう記載します。

[opensee]

追記させていただきました。
HTMLは一つのみです。

[penguin520]

1個コードを別回答で載せますね。

[miyabi_pudding]

追記されたCSSは、
①の方法でしょうか？
PCとスマホで同じ記述が入っている箇所が多いので、無駄が多いように思います。
かと言って、②では、そもそもスマホ用に改めてスタイリングが必要ではないセレクタもコピーすることになるでしょう。

やはり、スマホでは上書きスタイルが必要、というセレクタのみ、
メディアクエリ内に上書きスタイルを記載する、が、最適かと思われます。

[opensee]

miyabi_takatsukさん

このコードは①です。
デベロッパーツールを使ってスマホ用カンプに合わせて数値を変えたり、新たにcssを記述したりしながら作りました。
被っているコードは見つけたら消していくようにしています。（消し忘れもよくあります）
今取り組んでいるページが勉強用ということもありほとんどの要素で変更が必要になります。
そのためコピペが当たり前だと思っていました。
要件によるとはこのことですかね。
ちなみに私のこのコードのような形は普通ではないですか？
いろんなサイトのソースコードを見ると＠media~の記述が至る所にあるように見えます。（自分のように一か所にまとめるのではなく、セレクタの終わりに書き足すように＠mediaが記載されています。（全体を通して＠mediaの記述が多いような。。）

[miyabi_pudding]

総じて要件によります。
都度都度@mediaを記載するのは、
何かしら理由があるかと思います。
（チーム開発で、すぐ変更点がわかるように、スタイルの直後行に記載するルールがある、など）

上記のような理由がなければ、記載者のただの好みになるかと思います。
（そっちのほうがなんとなく良い、など）

私は、なるたけ同じ記載は二度としないように、と拘ってコーディングするため、まとめて記載することが多いです。

が、それでも、要件や、ルールによっては、都度都度記載する事もあります。

[opensee]

やはり現場でルールがあるのですね。
今受けているブートキャンプも”答えはない”とよく言われます。
悩んでいてもしょうがないのでまずは基本をおさえつつ慣れてきたらいろんなことをやっていきたいと思います。
少しスッキリしました。

長い時間ありがとうございました！

Answer 2

ベストアンサーの回答へのコメントから派生しての回答になります。
どこの会社がバレそうで怖いですが、うちの会社のホームページの、わたしが書いたCSSはこんな感じです。

* {
      margin: 0;
    }

    body {
      margin: 0;
    }

    p {
      padding: 10px;
    }

    div#m2 {
      background-color: #FFFFFF;
      width: 80%;
      margin: 0 auto;
      display: none;
    }

    @media screen and (max-width: 1000px) {
      h1 {
        font-size: 30px;
      }

      h2 {
        font-size: 24px;
      }

      h2 {
        font-size: 22px;
      }

      p {
        font-size: 20px;
      }

      img.none-img {
        display: none;
      }

      nav {
        display: none;
      }

      div#b {
        margin: 0 !important;
      }
    }

    nav ul {
      width: 500px;
      display: inline-flex;
      flex-direction: row;
      padding: 10;
      margin: 0px 0px 8px 8px;
    }

    nav ul li {
      width: 99px;
      list-style-type: none;
      border-left: 1px solid white;
      color: white;
      background-color: #000000;
      text-align: center;
    }

    a.link-white {
      text-decoration: none;
      color: white;
    }

    a.link-white:visited {
      color: white;
    }

    .balloon2-left {
      position: relative;
      display: inline-block;
      margin: 1.5em 0 1.5em 15px;
      padding: 7px 10px;
      min-width: 120px;
      max-width: 100%;
      color: #555;
      font-size: 16px;
      background: #FFF;
      border: solid 3px #555;
      box-sizing: border-box;
    }

    .balloon2-left:before {
      content: "";
      position: absolute;
      top: 50%;
      left: -24px;
      margin-top: -12px;
      border: 12px solid transparent;
      border-right: 12px solid #FFF;
      z-index: 2;
    }

    .balloon2-left:after {
      content: "";
      position: absolute;
      top: 50%;
      left: -30px;
      margin-top: -14px;
      border: 14px solid transparent;
      border-right: 14px solid #555;
      z-index: 1;
    }

    .balloon2-left p {
      margin: 0;
      padding: 0;
    }


    .button {
      background: lightblue;
      color: #fff;
      padding: 0 2em;
      border: 0;
      width: 500px;
      height: 100px;
      font-size: 45px;
      border-radius: 5px;
      font-weight: 900;
      position: relative;
      left: 400px;
      top: 260px;
      font-family: serif;
    }

    .button:hover {
      background: lightcoral;
      cursor: pointer;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .modal-content {
      background-color: #f4f4f4;
      margin: 300px auto 10px auto;
      width: 90%;
      box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
      animation-name: modalopen;
      animation-duration: 1s;
    }

    @keyframes modalopen {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .modal-header h1 {
      margin: 1rem 0;
    }

    .modal-header {
      background: lightblue;
      padding: 3px 15px;
      display: flex;
      justify-content: space-between;
    }

    .modalClose {
      font-size: 2rem;
    }

    .modalClose:hover {
      cursor: pointer;
    }

    .modal-body {
      padding: 10px 20px;
      color: black;
    }

    #container {
      width: 100%;
    }

    /*========= LoadingのためのCSS ===============*/

    /* Loading背景画面設定　*/
    #splash {
      /*fixedで全面に固定*/
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 999;
      text-align: center;
      color: #fff;
    }

    /* Loading画像中央配置　*/
    #splash_text {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 999;
      transform: translate(-50%, -50%);
      color: #fff;
      width: 100%;
    }

    /*IE11対策用バーの線の高さ※対応しなければ削除してください*/
    #splash_text svg {
      height: 2px;
    }

    /*割れる画面のアニメーション*/
    .loader_cover {
      width: 100%;
      height: 50%;
      background-color: #333;
      transition: all .2s cubic-bezier(.04, .435, .315, .9);
      transform: scaleY(1);
    }

    /*上の画面*/
    .loader_cover-up {
      transform-origin: center top;
    }

    /*下の画面*/
    .loader_cover-down {
      position: absolute;
      bottom: 0;
      transform-origin: center bottom;
    }

    /*クラス名がついたらY軸方向に0*/
    .coveranime {
      transform: scaleY(0);
    }

Comments

[opensee]

ご回答ありがとうございます。
自分の作っているものと似ているようで似ていないようで。。
こちらのサイトはレスポンシブではないということでしょうか？
@keyframes modalopen
↑初めて見ました！

[penguin520]

レシポンシブというか、モバイルフレンドリーで、スマホでもPCでも同じように見えるように作っています。

[penguin520]

みていただいたらわかると思いますが。　h2　のフォントサイズを2回指定していたり（めんどくさいから消すのわすれてどっちだったかわかんなくなった）。　使ってない class の CSSも そのまんまにしてたりとかです。
最近、あんまりみなくなったんですが、コメントアウトの嵐とか普通だった時代もあったり。

ブートキャンプで、勉強中とのことなんですが。現場いくと、だいたいは　WordPress　つかってて、コード読めない書けない人間がごろごろいる現場もわりとあるので、実際にコード書く機会は少ないと思います。
どこかのフロントエンド開発にもし行ったとしたら、コーディングのルールが現場ごとにあるはずなので、それに従えばよいと思います。
ご質問のような、いまから、書き方とか、どうあるべきかとか、心配する必要ないと思うんです。

[opensee]

そうなのですね。
綺麗に楽にコードを書くことに執念していましたが、少し考えた方が良さそうですね。
コーディングで副業するというのが最終目的になります。
なので自分でコードは書けるようになっていたいです。
しかしそれも現場でやり方があるのでしょうね。まずはしっかり基礎を押さえることに集中します！

[penguin520]

センスはあると思うので頑張ってください。一緒に仕事することになったら宜しくです。

[opensee]

ありがとうございます！
最初のうちは悩んでばっかりですがいつかマスターでできるよう頑張ります！