- ベストアンサー
css（スタイルシート）について質問
最近cssをはじめたのですが、いまいち構造が理解できません。 甘えて申し訳ありませんが、縦横60pxが9枚あります。 この写真を横3枚縦3枚（3行3列）で綺麗にＨＰ内の中心に収まるように全体をセンタリングしたいのですが、お詳しい方アドバイスを頂戴願えますでしょうか。 お願いします。（css+xhtmlでお願いします。）
- beginner_w
- お礼率55% (91/164)
- HTML
- 回答数8
- ありがとう数4
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
一つの参考。 IE6、Firefoxにて動作確認済み。 span.clrはそうしなければ IE6で余分なスペースが付加されるため。 -------------------------------------------------------- <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <title>画像表示</title> <style type="text/css"> <!-- * {margin: 0;padding: 0;} .clr:after{ content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } .clr { display: inline-block; } /* no ie mac \*/ * html .clr{ height: 1%; } .clr{ display: block; } /* */ body { text-align: center; } ul.imgbox { margin: 0 auto; width: 180px; list-style: none; display: block; } ul.imgbox li { width: 60px; height: 60px; display: block; float: left; } --> </style> </head> <body> <ul class="imgbox clr"> <li><span class="clr"><img src="01.jpg" alt="" width="60" height="60" /></span></li> <li><span class="clr"><img src="01.jpg" alt="" width="60" height="60" /></span></li> <li><span class="clr"><img src="01.jpg" alt="" width="60" height="60" /></span></li> <li><span class="clr"><img src="01.jpg" alt="" width="60" height="60" /></span></li> <li><span class="clr"><img src="01.jpg" alt="" width="60" height="60" /></span></li> <li><span class="clr"><img src="01.jpg" alt="" width="60" height="60" /></span></li> <li><span class="clr"><img src="01.jpg" alt="" width="60" height="60" /></span></li> <li><span class="clr"><img src="01.jpg" alt="" width="60" height="60" /></span></li> <li><span class="clr"><img src="01.jpg" alt="" width="60" height="60" /></span></li> </ul> </body> </html>
その他の回答 (7)
下記ソースですが、IEとfirefoxで描写のされ方の違いを見てみてください。 手持ちのIEが6なら#head .jpg1のmarginの取られ方が違うと思います。 floatとmarginを指定した場合IEではバグが出るので、display:inline;を指定すると良いです。 さらに#headにbackground:#f00;を追加して、もう一度IEとfirefoxで表示を確認してください。 表示が違うと思うので、clearfixで検索を。 HTMLですが、同じような画像が複数枚並んでいるということは、リストタグでマークアップするのが妥当と言えます。 HTMLは、タグでそれぞれの役割を明確にするための規格のようなものなので、divは使いやすいのですがより適切な意味を持ったタグで記述するとよりしっかりとしたHTMLになります。 ulとliタグを調べてみてください。 チェックにはこれを使うといいですよ。 http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
お礼
ご指摘ありがとうございます。 リストタグですか。 早速ul&liタグを調べて改善してみます。 本当にありがとうございます＾＾
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ちょっと長くなりますが、本を読むのが面倒でない貴方なら理解できるでしょう。 ≫CSSの構造が理解できません。 この場合の構造は、CSSは、「0個以上の声明(statements)から構成され、声明には@規則と規則集合の２種類がある。・・・・・」のことです。 一方、HTMLの構造は、「文書構造」のことで、タグで示された要素で構成されている。・・・というほう。 ですから、「CSSの構造が理解できません。」と次の質問「収まるように全体をセンタリングしたいのですが」とは結びつかない。 「CSSの構造が理解できません」に続いて、「セレクタの書き方が分からない」とかの質問が続くものかと・・ 「HTMLの構造が分からない」なら、「風景を撮影した写真を、説明文と共に並べたいがどのようにマークアップしたらよいか」という質問に・・ ですので、「収まるように全体をセンタリングしたい」という質問の趣旨からは外れていることを承知の上で、HTMLの理念から、すなわち「あらゆる利用者に利用できること」からすると、「このようにデザインしたい」は、「違うよ」と説明しました。 色々な参考書も良いですが、必ず読まなければならないのは HTML 4.01 Specification (ja) http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html Cascading Style Sheets, Level 2 http://www.y-adagio.com/public/standards/tr_css2/toc.html XHTMLについては、HTML4.01をXMLに合わせて定義しなおしたものなので、HTML4.01の仕様書を読む方が分かりやすいでしょう。 特にHTML4.01の仕様書は、隅々まで読んでおくべきです。理解できなくても必要なときどこに書いてあったか見つけ出せるようにはなっておいたほうが良い。 ネット上だけでなく、書籍でも本当に仕様書を理解しているのだろうかというものがたくさんあります。何が正しいかと迷ったときは仕様書を確認する事が出来るように!! そのあたりは、 はじめてのWebドキュメントづくり http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ あたりから始められると理解できるでしょう。 写真を展覧したいという場合でも、それをどのようにマークアップするかは、著者であるあなたでないとできないことなのです。 たとえば、写真と説明を定義リストでマークアップして、ディスプレイ上は写真だけを（ディスプレイの幅に合わせて）並べて、ポインタを重ねると説明が表示されるようにデザインする事は可能なのです。しかも、携帯端末で表示すると、画像が縦一列に、印刷時には、それなりに・・・というふうに、それが、HTMLの目的に合致した構造化の方法であり、CSSの書き方なのです。
補足
専門家のアドバイスはうれしいです＾＾ cssとhtmlの文書構造自体は読んで見ました。 やはり奥が深いですねぇ。というか初心者のわたしには難しすぎて、概念を理解するまで相当時間がかかりそうです。（汗） 一応質問にある「縦横60pxが9枚あります。 この写真を横3枚縦3枚（3行3列）で綺麗にＨＰ内の中心に収まるように全体をセンタリングしたいのですが」の件ですが、なんとかやってみました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #head { width: 500px; margin-right: auto; margin-left: auto; } #head .jpg1 { height: 60px; width: 60px; float: left; margin-left: 160px; } #head .jpg2 { float: left; height: 60px; width: 60px; } #head .jpg3 { float: left; height: 60px; width: 60px; } --> </style> </head> <body> <div id="head"> <div class="jpg1"> <img src="1.jpg" width="60" height="60" /></div> <div class="jpg2"> <img src="2.jpg" width="60" height="60" /></div> <div class="jpg3"> <img src="3.jpg" width="60" height="60" /></div> </div> </div> </body> </html> 専門家様から見て、この書き方はどうでしょうか？ お暇なときにでもコメントを頂けると幸いです。
- DrFell
- ベストアンサー率55% (305/551)
根拠ですか？ 立派な向学心ですね、すごいです。感服しました。 cssに構造は無いと断言できる根拠ですね。 では、端的に言うと、「仕様書よめ」となります。 「わたしもw3c肯定派ですので……」と書かれて居られるので、当然読まれているとは思うのですが、理解が難しいですか？ 構造はｈｔｍｌで……の部分抜き出されているページと解説つきの場所を紹介しますね。 http://hp.vector.co.jp/authors/VA022006/css/introduction.html#situation_and_role 緑枠が仕様書の「和訳」です。 ネット上には嘘の情報も溢れ返っています。この情報も嘘かもしれませんね。本当に勉強したいなら勉強の仕方を間違えておられるように思います。わかっていない人もｃｓｓサイトを開いておられますから。検索に引っかかる物の真贋を見分ける必要がありますね。少し前の本も同じでしたので、あまりたちよくない本にあたられたのかも知れませんね。１冊だけをまず、されてみてはいかがですか？７冊も同時にやれば、そりゃぁ、混乱するでしょう。 こんな問題を追及してもｃｓｓを学びたいなら益にはなりませんよ。本気なら、先にも述べましたが、基本から、端折らずに構造と見た目の分離に触れている初学者向きのサイト１つを一通り通し、ｃｓｓとｈｔｍｌの関係など基本知識を身に付けることをお奨めします。 では、さようなら
補足
DrFellさん ご親切にありがとうございます。 いま一読しましたが・・・ 引用>>「CSSとは，構造化文書で明示された意味や構造などの概念を様式化し，具体表現としてユーザに提示する仕組です。」 これを読む限りcssは構造であるという概念をもてますよね？ どうなってるんですか？？
- DrFell
- ベストアンサー率55% (305/551)
そうですね。あたりまえですね。ｃｓｓに構造なんてありませんから。 構造はhtmlの役割です。その構造にｃｓｓでデザイン（スタイル）をつけ、見栄えを調整するのです。 三かける三にどういうタグをつけるかは、その意味によって違ってきます。中身が何であるかのタグをつけ、そのデザインをｃｓｓで三かける三に見えるように調整してください。 タグやｃｓｓのプロパティだけ真似しても決して、ｃｓｓ+ｘｈｔｍｌにはならないと思います。考え方をリセットする必要がありそうですね。 構造と見た目の分離から解説しているサイトで勉強されることをお奨めします。
お礼
ふむふむ。 定義と概念の違いですね。
補足
それにしても変だなぁ・・・ 「cssの構造」で検索するとこんなにＨＩＴしました。 cssに構造は無いと断言できる根拠はどの辺にあるのか、もしよろしければ教えていただけますか？ http://search.yahoo.co.jp/search?p=css%E3%81%AE%E6%A7%8B%E9%80%A0&ei=UTF-8&fr=sfp_as&x=wrt
- ORUKA1951
- ベストアンサー率45% (5062/11036)
写真の配置のためにtableタグを使わないほうが良いのは、ディスプレイが小さいと横にスクロールを強(し)いるからなのです。 そもそも、 ≫この写真を横3枚縦3枚（3行3列）で綺麗にＨＰ内の中心に収まるように全体をセンタリングしたい が、HTMLの基本から外れているから、 【CSSでデザインしなさい】といわれるのですよ。 その根本を理解しないから、『写真を横3枚縦3枚』となるのでしょう。大きなディスプレイだと4枚、携帯のような小さなディスプレイだと縦に一列並ぶようにデザインしましょうということです。 写真を配置したい要素<div>を左右のマージンを取ってrelativeかabsoluteで配置して、その内部にfloatで写真を並べましょう。 ≫最近cssをはじめたのですが、いまいち構造が理解できません。 頑張ってください。・・・まず、なんでCSSなのかからね。 14.1 スタイルシートの概説( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/styles.html#h-14.1 )より引用＿＿＿＿＿_ * メーカー独自拡張のHTMLを使う。 * テキストを画像に置き換えて表現する。 * 余白制御のために画像を用いる。 * ページレイアウトの目的で表を用いる。********CSSでやっても同じだよ!! * HTMLでページを作らずにプログラムに頼る。 こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
お礼
なるほど。cssの定義からはじめなければいけないようですね。 わたしもw3c肯定派ですので、表以外の目的でtableは使用したくありませんし、とにかくcssでがんばってみようと思いまして、専門書も７冊買ってきました。 しかし頭が悪くて思うようにできません・・・ イメージとしては大体把握できました。 アドバイスに従ってがんばってみたいと思います。 ありがとうございました。
- nori_007
- ベストアンサー率35% (369/1048)
写真を並べるのなら、table で良いと思います。 table の使い方を良く理解してみてください。 CSS と xhtml の使い方を良く理解してください。 写真を並べる等は、表組みになると思います。
補足
CSS と xhtmlの組み合わせでテーブルレイアウトですか・・・ う～ん ありえないです。
- SAYKA
- ベストアンサー率34% (944/2776)
ソースを載せてるのは約束でできないから概念だけ 表ではないからtableを使えないって考えなら float:left を使ってdivを並べ 中に画像 幅を指定した全体のdivを用意してその中に↑の並べたdivを内包させる その全体divをセンタリングする。 http://www.google.com/search?lr=lang_ja&q=css%20block%E8%A6%81%E7%B4%A0%E3%81%AE%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0
補足
なんとなくわかるんですが・・・ ソースのほうも確認しましたが、裏技的なものも多いですね。 いまいちよく理解できないです。
お礼
こんばんは。 リストタグだけでこんなことができるなんて初めて知りました。 まったく無駄がないですね・・ それに比べたら僕の書いた物は贅肉だらけに見えます。 すごいスマートなタグでここまでできるとは・・ 勉強になりました。 ありがとうございます。