htmlでのHP作成について

質問

html初心者です。
現在楽天に出店しているのですが、
楽天でコードを書く際、ヘッダーやサイド、フッターをそれぞれ別ファイルでつくり、表示される時にはそれが合わさった状態で表示されます。
現在できあがっているデザインを崩さないように修正したいのですが、これらのファイルを合わせてプレビューしつつ、修正をすることは可能でしょうか？
ご回答いただけると幸いです。

回答No.2

weakweak

追記です。html初心者ということであれば、htmlの編集は最低限にとどめたほうが無難です。現在のデザインを崩さずに、ということであればなおさらです。htmlを一切編集しなくても、cssを編集するだけでレイアウトを含め見た目のほぼすべてを自由に変更することが可能ですので。

回答No.1

weakweak

それであれば、google chromeやfirefoxで編集したいページのどこか適当なところで右クリックして、cheomeなら「要素を検証」というのを選びます。するとhtmlの見た目を決めるCSSを、プレビューしながら編集できるのでそちらで編集・保存するのが一番便利です。

以降はchromeを例にして説明します。
編集・保存の仕方です。
1 基本的に今あるcssには手を触れません。もちろん、cssをプレビューだけしたい時は便利なので、既存のcssの値を変えたりしてどんどんテストはします。しかし最終的には以降の手順でルールを保存します。
2 「要素を検証」をクリックした直後は、「Elements」タブが開かれているはずです。もし開かれていなければ左上「Elements」をクリックしてください。
3 すると画面右では「styles」タブが選択されているとおもいますが、その中の一番上に表示されているプラスボタンを押します。
4 そうすると、そのすぐ下に新しいcssルールが出来ますので、編集します。同様にしてどんどんルールを追加していきます。
5 最終的に保存するには、追加したルール(追加したものならどのルールでもいい)の近くにある「inspector-stylesheet:<行番号>」をクリックします。画面が「Sources」タブに切り替わるのでそこで右クリックして保存します。
6 最後に保存したものをコピペして楽天市場のcssに追加すれば完了です。cssは後に書いたルールが優先されるので、先頭ではなく、末尾に追加しないとうまく反映されないことに注意してください。

文字だけだとわかりにくいですが実際は簡単です。その他の詳しい使い方は、以下を御覧ください。
http://dotinstall.com/lessons/basic_chrome_dev
そもそもcssがわからない、ということはないと思いますが、chromeの「要素を検証」の使い方がもし理解できなければcssが理解できていないので、その場合は以下を御覧ください。
http://dotinstall.com/lessons/basic_css_v2