模写コーディングする際の進め方について

プログラミング初学者です。
HTML/CSSで模写コーディングする際はモバイルファーストを意識してやっていった方がいいですか？

学び始めて間もなく、これまで2つほどサイトの模写コーディング(PCサイズ)をして、見た目自体は仕上がったのですが、中身のコードが複雑で汚く、後から修正するとなるととても見づらい仕上がりになってしまいます。

(基本的には別途CSSファイルを用意してそこにCSSを書き加えていっているが、HTMLの要素の中に同時にstyleを指定して、CSSを調整することが多い。Bootstrapを使用することが多い。まだまだ使いこなせていませんが。

一つはPCサイズ幅で作ったものを後からレスポンシブ対応させたのですが、めちゃくちゃ時間が掛かってしまいました…)

このため、レスポンシブに対応をさせるにしてももはやどこから手を付けたらいいのかわからなくなり、骨が折れそうになります。

作業効率と修正のしやすさを考えてモバイルファーストでやろうとしましたが、逆に今度は初めの段階から各デバイスで表示される要素の幅や高さを意識しすぎて、かえって中々進まなくなってしまいます。

PCサイズだけ作れと言われれば、比較的作りやすいのですが。、、

また、模写コーディングをする際の進め方のコツや手順などがございましたら、簡単に教えていただけると幸いです。

think49

2019/12/21 06:28 編集

> 逆に今度は初めの段階から各デバイスで表示される要素の幅や高さを意識しすぎて、かえって中々進まなくなってしまいます。問題点を具体化してください。 - それは何の作業ですか - 意識しすぎるのはなぜですか。程よい意識がどうして出来ないのですか。 - 意識しすぎるとなぜ時間がかかるのですか

行動規範の内容に同意します

回答1件

ベストアンサー

以前近い質問がありましたけど、ほとんどのケースでは「モバイルファースト」です。
「PC先に作ってそれをモバイル向けにも改修」ということはありません。

何故かと言うとGoogleがモバイルファーストインデックスを宣言しているからですね。

ウェブマスター向け公式ブログ:モバイルファーストインデックスを開始します

質問者さんもそれは理解されているようですし。

モバイル向けのものから考え、そこからPC向けレイアウトをどうするか考えてください。

というか、つけられているタグの通りBootstrap使うならスタートアップテンプレートのようなものもありますし、そこまでレスポンシブの意識が必要には思いません。
それに、現場では多くのケースで自前でレスポンシブを組むということはなく何らかのCSSフレームワークを導入します。
CSSフレームワークを軸としたレイアウトを組むこともできるし、一部の機能だけを利用することも出来ます。

それも要件次第ですね。

・・・そういえば途中から模写云々の話関係なくないですか？

投稿2019/12/21 04:54

編集2019/12/21 04:55