そろそろホームページにCSSを導入しようと考えているのですが、それに関していくつか質問があります。
1.CSSには、埋め込み方式と、外部ファイル方式があるとのことですが、一般的には多くのページに共通する大まかなデザインを外部ファイルで作って個別の細かい部分は埋め込みで補うのか、あるいはすべて外部、すべて埋め込みといったように完全に分けるべきなのかという点。
2.文字に色を付けたり、太さを変えるようなことであればCSSに頼らずともできると思いますが、今後はスタイルシートでできるものはすべてCSSに任せていったほうがよいのか、あるいは古いブラウザに配慮をして、レイアウトが崩れない程度にCSSを使うべきなのかという点。
3.外部CSSの場合で、clear属性を使ってfloatの回り込みを解除するとき、HTMLに「<P CLASS="clr"></P>」というダミーを作り、CSSに「.clr{clear:left}」と解除するのは間違いでしょうか?
左に写真を配置し、右に回り込みで解説文を書くレイアウトで、その下にも同様に写真と解説文が連続するため、解除しないと上の解説文の真下に写真が入ってきてしまいます。
写真|解説文
<P CLASS="clr"></P>
写真|解説文
以上の3つの点について知りたいと思っています。
知識不足で的外れな質問をしているかもしれませんが、ご助力よろしくお願いします。
No.5ベストアンサー
- 回答日時:
1.について
ファイルの肥大化を防ぐ意味では、細かい指定をインラインで書くのもありです。が、ブロードバンドが普及してますのですべて外部CSSで指定したほうがメンテナンスしやすいかと思います。
2.について
マークアップはxhtml、デザインはCSSで指定するのが理想です。古いブラウザへの対応は、別途ページを用意した方がサイトの寿命は伸びます。
3.について
余計なタグを入れない方が正しいマークアップになります。clear専用のclassを作成し、floatを解除する要素に指定しましょう。
[例]
(style.css)
.float_left{ float:left; }
.clear_left{ clear:left; }
(index.html)
<img class="float_left" />
<p class="float_left">text</p>
<img class="clear_left float_left" />
<p class="float_left">text</p>
<img class="clear_left float_left" />
<p class="float_left">text</p>
たしかに仕様改正の多いこの分野では外部化して一まとめに修正できたほうが都合がよさそうですね。
floatひとつとっても結構本によって書き方が多くて困りますが、こちらも綺麗ですね。
No.4
- 回答日時:
1.全て「直接」乃至「内部」でも構わないとは思うけど、HTMLの修正では手間が掛かって面倒。
と成ると「外部」が望ましいのか?
と云う事だと、同じサーバーに設置してても参照時にエラーが発生しないとも限りませんし、外部サーバーに設置してた場合はサーバーエラーの事も考えないと読み込めません。
で在るから、結局は管理する本人が解り易い方法で選択するのが無難でしょう。
メンテナンス仕易い方法を選択。
2.携帯電話向けを作成する必要が出て来た場合は「DoCoMo」に基準させないと駄目なので、単純にHTMLでも構いませんが、CSSの場合は規制を受けるので注意が必要。
HTMLチェックでエラーが出ても、正常な表示が出来れば良いレベルならCSSを使わなくても問題では在りません。
3.割愛。
No.3
- 回答日時:
これが正解、と断言する事はできないでしょうね。
サイト制作者のポリシーや特殊で限定的な用途・ターゲットを目的として作られるコンテンツというのもあるでしょうから。商用(プロ)なのか、趣味(個人)なのか、でも基準は違いますし。後者ならはっきり言って「自己満足」のみで制作してあったとしても誰もそれに文句は言えないでしょうし…。ただ、(X)HTMLとCSSの本来の用途を考えるなら、論理構造と装飾性は分離するべきですから、装飾性(スタイル)に関する部分はCSSが担うべきものです。よって、1.と2.に関してはNo.1様と同意見です。
> 3.
原則、この様な「(レイアウト上の不都合を解消する為だけで論理的意味を持たない)要素のないコンテナ」を置くことは推奨されません。それに、(X)HTMLとCSSをある程度ちゃんと理解できている制作者なら、99%そういうダミー的な手段を使わなくてもfloatのクリア程度の事は充分に可能だからです。従って、No.1様の考え方の方が適切だと思いますし、私もそこそこ長い経験上で同様のやり方で様々なケースに難なく対応できてきましたから。
以下のスレッドのNo.3・No.5の回答で同様の考え方に関する細かい説明をさせて頂いてますので、参考までに。
#要は、文法チェックでエラーにならなければ良いというものではないのでは…?という事です。
【参考】http://oshiete1.goo.ne.jp/qa5199457.html
長い間HTMLの透明テーブルを使ったレイアウト程度で十分だったのでCSSの意味をちゃんと理解していなかったようです。
できることなら意味のないものを置かずにレイアウトできないかと思い質問してみました。独学で手探り状態なので無理やりなコードになってしまいますが、いろいろ勉強して正していこうと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS htmlです。 上のところには黒文字でピカチュウで、ピカチュウの文字には影をすべてにつけてください周 1 2023/01/02 12:48
- 宇宙科学・天文学・天気 物理の問題です 写真の問題で、回答を考えたのですが、合ってるか一緒に考えていただきたいです。(本に解 2 2022/10/30 13:54
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- 物理学 写真の解説の赤枠部分についてですが、 なぜ、(-vk-1)と-が付くのかがわからないです。 解説の③ 1 2023/02/10 23:54
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS/日本語のID・クラス名につ...
-
【VBA/HTML】IE画面内のページT...
-
スタイルシートで、id属性の中...
-
brにクラスをつけてcssでdispla...
-
最近、HTMLのヘッダーをIDで定...
-
HP作成(ワッパーを中心に)
-
CSSが効かずどのように指定すれ...
-
HTML要素のid/class名の長さに...
-
透過背景を解除するにはどうす...
-
Bootstrap3でcontainerがずれる...
-
サイトにjQueryが使用されてい...
-
webサイト印刷時に特定の画像を...
-
<div align="right"> を css で...
-
マウスカーソルを当てた時だけ...
-
<span>で2重にかけているものを...
-
CSS, リンクの色を一部変えるに...
-
liリストタグの背景色に色がつ...
-
name属性とid属性
-
cssでIEとFIREFOX(とchrome)の...
-
CSS リンクのスタイル指定をせ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idの中のid指定
-
CSSに同じclass名がいっぱい‥。...
-
個別にリンクの色を変える方法
-
HTML要素のid/class名の長さに...
-
最近、HTMLのヘッダーをIDで定...
-
CSS, リンクの色を一部変えるに...
-
liリストタグの背景色に色がつ...
-
CSSのクラス名・ID名の指定でワ...
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
スタイルシートで、id属性の中...
-
リンク文字の 一部だけ色を変...
-
外部css定義したclassをht...
-
ページの左右の余白(枠外)に...
-
<span>で2重にかけているものを...
-
CSSでテキストリンクの色を複数...
-
同ページ内でリンクの色を変え...
-
CSSが効かずどのように指定すれ...
-
display:table-cell内でこんな...
-
CSSで下まで背景色を伸ばす方法
おすすめ情報