- ベストアンサー
今のサイトをCSSにしたい
ホームページビルダーについて、これまでVer8で HTML 4.01で編集してました。 PCを新調するため、そろそろビルダーも最新のVer13を購入しようと思うのですが最近主流のCSSにするには１から編集が必要でしょうか？ かなり面倒な作業ならVer8のまま使いたいのですがVistaとの相性も心配です。 今後のことも考えてやはりCSSを学び作り直したほうが無難でしょうか？ページ数は２０です。
- kishuu8
- お礼率7% (9/115)
- ホームページ作成ソフト
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
１番 ＨＴＭＬソースへ直接記述したスタイル ２番 外部ファイルで 「リンク」 に設定したスタイル ３番 外部ファイルで 「インポート」 に設定したスタイル ４番 ブラウザ設定のスタイルシート 『自分には１番が簡単かなと思うのですが』 そのかわり、CSSの大きなメリットが失われます。 ×デザインを変えるとき、全部のHTMLに手を加えなければならない。 ×HTMLソースが肥大化する ４番 ブラウザ設定のスタイルシート は、何もしないと同じです。そもそも何のデザインもしていないブラウザで<h1>が大きく見えるのは、そのスタイルシートを使っているということ。 XHTMLでは、ソース内にCSSやスクリプトを書くのは、ちょっと難しいので、外部ファイルで指定するのがスタンダードな手法と考えたほうが良いでしょう。 W3Cの推奨順は 1) link要素、or @import規則 、<head></head>内の<link>または、 リンク先のstyleSheetにて@import 2) style要素、・・・<head></head>内の<style></style> この<style></style>内で@importをつかう。 3) style属性 です。 出来るだけ外部スタイルシートをリンクで使用すること。 【外部ファイルのメリット】 *デザインがスタイルシートの記述を変えるだけで、そのスタイルシートが適用されているすべてのページのデザインを一括して変更できる。 *HTMLは極めてシンプルになる。 読み込みが早い。メンテナンスが容易。・・・・などなど とりあえず、自分の作ったHTMLを評価するなら Another HTML-lint gateway http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でね。
その他の回答 (3)
- rukuku
- ベストアンサー率42% (401/933)
＞１番 ＨＴＭＬソースへ直接記述したスタイル ＞２番 外部ファイルで 「リンク」 に設定したスタイル ＞３番 外部ファイルで 「インポート」 に設定したスタイル ＞４番 ブラウザ設定のスタイルシート ご質問の意図が？なのですが、スタイルシートの設定方法には以下の3つがあります。 １．ＨＴＭＬのタグに直接記述する ２．ＨＴＭＬの文書にまとめて設定する ３．外部ファイルのスタイルシートを読み込む その他、スタイルの指定が特にない場合には ４．ブラウザのデフォルト があります。 －－－ １．は「その部分だけ」にしか使わないときに便利です。あまり他と要しますと、「各ページでデザインを統一したり、いっぺんにデザインを更新するような」というメリットは失われてしまいます。 これならば、わざわざＣＳＳを勉強しなくても、ＨＴＭＬだけで結構できます。 －－－ ２．や３．の方法を使うことでＣＳＳのメリットが生かせます。 各ページ間でデザインを統一するには３が便利です。 あるページの中だけで何カ所かを「赤の太字の斜体」と設定するような場合には２．を使います。そのＨＴＭＬファイルの中でスタイルを指定して、文書の中で呼び出します。 －－－ ４．は特に指定しなければ、ブラウザが自動的に行います。 例えば、まだ見ていないリンクは青字の下線で、すでに見たリンクは赤紫字の下線というような設定はブラウザがしています。 …ページの作成者がスタイルシートで設定すると、スタイルシートでの設定の方が優先されます。 H1やSTRONGは同じHTMLでもブラウザによって表示が異なります。 スタイルシートを使ってフォント、サイズ、色、行間などを指定すれば、ブラウザが違っても同じように表示できます。 …“厳密に同じ”というのは難しいのですが…。また携帯電話やテキストブラウザのように対応していないものもあります。とは言っても、よほどのデザイン重視でない限り問題ないと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ページ数が２０そこらなら、手作業で行っても知れたものです。 特に、CSSでのデザインへの編集なら・・・ ホームページビルダーのどのモードで作られてきたかわかりませんが、CSSを知らずに作られたページでしたら手直しは大変ですから、いっそのこと最初から作り直したほうが楽です。(実際には今のサイトのソースを見なければ、なんとも言えませんが、想像はできます。) ≫今後のことも考えてやはりCSSを学び作り直したほうが無難でしょうか？ 基本的には、間違いなくそうです。ホームページビルダーに限らず、初心者対象のHTMLオーサリングツールは、HTMLやCSSの基本を知らない人向けのものなのです。 それらを知っている人が作ったものとは、まったく異なるものが出来ている事が多いです。(それらを知っている人には無用な長物になることも、しばしばです。) あなたの ≫≫今後のことも考えてやはりCSSを学び作り直したほうが無難でしょうか？ の言葉を借りれば、 「今後のことも考えて、やはり、HTMLやCSSを学び直したほうが良い」のです。その上でホームページビルダーの[画像編集]や[動画作成]などの付録ツールを活用すればよいものが出来るでしょう。 良いページは、ツールではなく、使用者の知識なのですよ。 CSSは無論(HTMLも)実は、このようなオーサリングツールで扱うのは極めて難しいものなのです。なぜなら、彼らプログラムはどんなに逆立ちしても書かれている文章の文意を読み解くことは出来ないから。 ある文章のどの部分が見出しであって、どの部分が引用であって・・などは、結局扱う人が教えないと分からないが、テキストエディタで作るなら、著者は知っているわけですからね。完成したものを想像しながらどの用にマークアップすればよいか知っているのは著者だけです。 HTMLやCSSは、きちんと学べば、そんなに難しいものではありません。 購入するかしないかの決断を後回しにして、とりあえず はじめてのWebドキュメントづくり http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ などの初心者向けのサイトで学んでからでも遅くないかと思います。 【参考サイト】 Webオーサリングツール - Wikipedia http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB
- rukuku
- ベストアンサー率42% (401/933)
はじめまして おそらく、kishuu8さんは誤解されているのだと思いますが、ＣＳＳだけでサイトを作ることはありません。基本はＨＴＭＬです。 違うのは例えば<b>,<i>,<font color="red">などタグで行っていた「装飾」の部分をＣＳＳで記述します。 これまでＨＴＭＬで全て行っていたものを、骨格はＨＴＭＬ、装飾はＣＳＳと役割分担させます。 ＞CSSにするには１から編集が必要でしょうか？ 従って、１から編集し直す必要はありません。 タグで指定していた「文字色」「文字サイズ」「背景色」「背景画像」などの設定をＣＳＳに置き換えればＯＫです。 ＞今後のことも考えてやはりCSSを学び作り直したほうが無難でしょうか？ページ数は２０です。 各ページでデザインを統一したり、いっぺんにデザインを更新するような場合には、ＣＳＳを使うと便利です。 最初に覚えるのはちょっと大変ですが、慣れてくればＨＴＭＬだけで作るよりも楽です。
補足
「装飾」の部分をＣＳＳにすればいいのですね。 少し安心しました。 慣れてくればＨＴＭＬだけで作るよりも楽なんですか！？ ますますやる気が出てきました。 装飾の部分がどれにあたるのか再検討してみます。 ただ、文字の大きさなどは変えたものの字体や背景などは統一してたと思うので意外と簡単かもですね。 この場合のCSSの記述は下のどれが適しているでしょうか？ １番 ＨＴＭＬソースへ直接記述したスタイル ２番 外部ファイルで 「リンク」 に設定したスタイル ３番 外部ファイルで 「インポート」 に設定したスタイル ４番 ブラウザ設定のスタイルシート ちなみに自分のサイトはこちらです。 http://www.tenshimo.com/
補足
専門家の方の意見を聞けて嬉しいです。 これまでビルダーの標準モードで作ってました。 だいたいのソースはわかります。 H1、STRONG、などSEOは強いほうです。 またわからないのはCSSの４分類で自分には１番が簡単かなと思うのですが実際はどうでしょうか？ １番 ＨＴＭＬソースへ直接記述したスタイル ２番 外部ファイルで 「リンク」 に設定したスタイル ３番 外部ファイルで 「インポート」 に設定したスタイル ４番 ブラウザ設定のスタイルシート 自分のHPはこちらです http://www.tenshimo.com/