0
1
コーディングをする際どの流れでやるべきか分かりません
１、htmlを完成させてからｃｓｓ(レスポ含む)の順番で行う
２、htmlとｃｓｓ(レスポ含む)を並行して行う
(例 headerのhtmlが終わったら、headerのcss＆レスポを行う)
３、その他
どうかご教授お願い致します。
回答11件
#1
総合スコア146960
投稿2025/05/01 12:30
どのようなページを作りたいのでしょうか？
トップページやペライチのような、特殊なレイアウトを取り入れたページを1ページだけ作りたいのでしたら、HTMLだCSSだと切り分けず一気にレイアウトするのが妥当ということになります（デザインのためにタグを増やす、なんてことも発生するでしょうし）。
これに対して、記事ページのような同じスタイルのページが増えていくようなものの場合は、さきにレイアウトを策定して、あとはHTMLだけ適切なタグで用意すればページが出来上がる、というようにしておいたほうが便利です。
#3
まだ模写コーディングの段階で今後webサイト全般作りたいと考えています。
目的に応じて柔軟にやり方を切り替えるという発想はとても参考になりました
記事ページの際はレイアウトを策定したら先にcssからやるという事でしょうか?
#4
総合スコア21572
投稿2025/05/02 04:53
現実の話をするのであれば、
HTMLとCSSを同時並行で触って作ることになるでしょう。
元々のCSSの存在意義を辿ると
HTMLにページのレイアウトの都合を書くなよ、HTMLが汚れる！というわけでCSSが出来ました。
例えばHTML4.01では既にfont要素は非推奨となっています。
じゃあ、ただの文字列をCSSのみで修飾しきれるのか？
これが非常に難儀で「どうしてもこのレイアウトを実現するために、もう一個divで括らせてくれ！」という要望がアホほど生えて来ます。
結果、必要最低限のコンパクトなデータだけが記載されていたはずのHTMLに
レイアウトの都合の中間divタグが大量に混ざってくるわけです。
どうしてこうなった……
それでもなんとか抵抗しますよ？
「ここはリストと言えなくもないから、ulとliで表現して、CSSで箇条書きの点だけ削除しようか」とか
でもどう考えても屁理屈じゃん、レイアウトの都合でタグ足してるじゃん。
HTMLとCSSは完全に分業！とはいきません。
これが現実です。
#5
総合スコア10
投稿2025/05/02 04:55
私は、2のhtmlとｃｓｓ(レスポ含む)を並行して行うかな。
#6
総合スコア862
投稿2025/05/02 06:08
正直に言うとなにか正解があると思うのですがノウハウとして語られるところは見たことがありません。
まずは設計として、目次ではありませんが、目次的に何があるのかを集め、それをどこに配置し、どうカテゴライズされていれば自然かを考えます。
そして産まれる文字列や画像をもとにどのようなhtmlの構造が良いのかを考え、cssでデザインをつけるという流れになるのが自然かと思います。レスポンシブは人によって語義が異なりますが、基本的にflexのitemをサイズによって改行したいみたいな意味でいえば、薄く意識していればよいか、設計として決めておいてよいかと思います。
header footerはmainコンテンツに干渉がない、そのサイト自体のメタ情報でありサイト全体として使いまわす要素になるので、mainコンテンツとは分離したタイミングで考えてよいと思います。
まあ、サイト全体としてもheaderとfotter以外にも文書構造としてのheader fotterもhtmlでは許可されているので、そこらへんとは若干役割が変わってきますが。
*メタ情報といってもページ文書のメタデータということではなく、そのサイトでユーザーに表示する情報という意味です。header(bannerロール)はロゴや著者などが、footerは関連文書のリンク、著作権表示などの表示が推奨されています。
#7
総合スコア80
投稿2025/05/02 16:24
私の場合は
・フォトショップでデザインを作る。(客に見せてこんなもんでいいか確認する)
・骨組みのhtmlとcssを作る。htmlは最小限でcssのデザインメイン
・残りをやる。
なので、3.その他になるのかな。
身も蓋もない事言うと好きにしたらいいんじゃないかなとは思います。
(仕事なら進め方の指示はあるはずだし……個人なら誰も困らないし好きにしたら？という意味です)
#8
総合スコア86482
投稿2025/05/04 02:15
画面設計してから、コーディングするわけですが、設計段階ではHTMLとCSSを分けて考えるのは不可能でしょう。
コーディングに入っても、ベテランの方で、全部を「何度も使い慣れた技術だけ」で出来るのなら、それぞれ一気に書くのも可能でしょうけど、私はHTML/CSSの専門家ではなくHTML/CSSを書くのはプライベート、あるいは仕事だと個人便利ツールつくりくらいだけなので、骨組みのHTMLとそれを成り立たせてそれらしく見えるCSSを書いて、それぞれ何度も機能追加してみて思い通りになればその先に進むし、思い通りにならなければ調べ直して修正するというのを数回から数十回繰り返しですかね。場合によっては画面設計からやり直す。
以上は、極めて小規模な開発を、要件定義から開発、テストまでを全部一人でやる場合です。
仕事で何人もで分担分割しての開発で、HTML/CSS担当の人がどうするのかということであれば、また違うでしょうね。過去資産の流用もあるだろうから、CSSを全くのゼロから書くことはあまりないと思います。
ということで、状況によりケースバイケースかと思います。
目的に応じて柔軟にやり方を切り替えるという発想
これは、ITでの開発に限らず、世の中のすべてそうですね。
どうでもいいような細かい案件ならどうでもいいので、「いつもこのやり方で」の決め打ちでもOKです。
#9
退会済みユーザー
総合スコア0
投稿2025/05/08 08:11
僕も前提、ケースバイケースかなぁとは思いますが、
多いのはコンポーネントごとに「htmlとｃｓｓ(レスポ含む)を並行」して行うが多いですかねぇ
#10
総合スコア192
投稿2025/05/08 11:34
経験値が増えると、大体domの数や構造がわかってくるので、今はhtmlでdomをガーッと書いて、css書いてくがやり方ですね。
モバイルの利用者が多ければモバイルのスタイルを、pcの利用者が多ければpcのスタイルをあてて、最後にレスポンシブが自分は多いです。
ただ、dom構造とかが想像できなければ、一つ一つ並行してやっていくが良いかなと思います！
#11
どの意見も物凄く参考になりました！！
皆様本当にありがとうございました