🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

600閲覧

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

pr_777

総合スコア20

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/12/21 00:44

編集2019/12/21 00:46

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

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

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

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

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2019/12/21 06:28 編集

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

回答1

0

ベストアンサー

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

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

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

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

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

それも要件次第ですね。

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

投稿2019/12/21 04:54

編集2019/12/21 04:55
m.ts10806

総合スコア80875

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pr_777

2019/12/21 10:30

ご丁寧にありがとうございます。 予めテンプレートを使ってコーディングするのが割と普通なんですね! 参考になりました! …模写というより実務の話になりましたね(笑)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問