• ベストアンサー

縦に画像を並べるときのCSS

steel_grayの回答

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

一応メニュー類はリストでマークアップしてmarginやpaddingでレイアウトを調整するのが王道だと思いますが… スタイルシートにしたってブラウザ毎の解釈の違いやバグ、仕様の曖昧さ等があるので見た目だけでサイトを作っているなら旧来のやり方(テーブルやスペーサ駆使)でよいかと思います。

関連するQ&A

  • CSSでのテキストの下に画像などを配置したい。

    CSSでレイアウトしたページを作っています。 画面左のナビをテキストで作成しました。 (ヘッダーの下に、左のナビと右のメインエリアという構造) テキストの周囲をボーダーで囲んであります。 (TABLEは使っていません) テキストでの一覧のメニューの下に、画像のボタン等を配置したいのですが、メニューのテキストのテキストサイズを固定していないため、ブラウザの文字サイズを大きくしたりすると、メニューが縦に伸びたりします。 この時、メニューの下に配置する画像を、上のメニューの大きさ(縦幅)が変わってもそれに合わせて配置を上下させたいのですが、どうすればいいのでしょうか? とりあえずposition:absoluteでは絶対位置で指定されてしまうので、うまくいかないってことは分かっているのですが・・・ CSS自体まともに使うのは初めてなので、本等で調べながらやっているのですが、この部分が解決できません。

  • CSSレイアウトってなぜこんなに難しいのか?

    個人事業で、WEBデザインの仕事をしています。 恥ずかしいですが、ずーっと、テーブルレイアウトでのみHP作成してきました。 文字を整えたり、種類をまとめたりだけ、CSSを使ってました。 先日初めて、クライアントから「そろそろテーブルレイアウトはやめてくれ」と、 ダメだしを食らいました。 独学でDreamweaver MX 2004を一から学んで、仕事やって来ましたが、 ちょっと恥ずかしい質問ですが、 CSSレイアウトってなぜ、こんなに難しいのでしょうか?? みなさん、テーブルレイアウトと比べて異常に難しく感じませんか? 今の調子ではHP作成の仕事が請けられなくなっています。(涙) 例えば、テーブルレイアウトって、自由にドキュメントで確認しながらデザインできますよね。 でも、CSSレイアウトって、コードで全部書き出しますので、 ちょっとサイズや項目や要素を変更するだけでも、どのdiv?、どのクラス?のタグにそれを指定したかとか、 複雑になり解らなくなってしまい、ちょっと変更するだけでも凄い時間がかかってしまいます。 ■もしかして私、CSSレイアウトの学び方、作り方を間違ってるのでしょうか? ■今まで2~3冊位、Dreamweaverの本で、CSSレイアウトを勉強してますが、  いっこうに進歩しません。(ここに本の題名書き出すとマズイですよね?) ★CSSレイアウトが解り易く学べる、勉強本を教えて頂けますでしょうか。 ■もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか?  HPビルダーとかなら、もっと簡単に出来るのでしょうか? ■今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、 #header #side #main #footerを、#contentの中に入れて、 その中の各々の要素は、今までとおり、テーブルでレイアウトする。 (メニューや、商品スペック、写真並べなども、テーブルで。) それが精一杯ですが、これで通用するのでしょうか? HPデザイナーとして、恥ずかしい質問ですが、 ご教授どうぞ宜しくお願い致します。

  • CSSを使って、背景色をブラウザの縦100%につづかせたいです。

    こんにちは。おせわになります。 CSSを使って、左側に同じ背景色がブラウザの縦いっぱいにつづき、 右側に、たくさんの文字や画像をのせるレイアウトをしたいと思ってます。 しかし、どうやっても左の背景が縦100%になりません。 右のテキストの量が少なければ、問題ないのですが、多いとむりです。 グーグルなどでも調べましたが、どうしてもわからないです。 とてもこまってます。よろしくお願いします。 (ソース例の「たくさんの文字」というところには、多くの文字と写真が入ります。) --------------------------- CSS↓ html{ height:100%; } body{ height:100%; width:100%; } .b1 { background-color: #333333; height: 100%; width: 100px; float: left; } .b2 { background-color: #99CC33; height: 100%; width: 200px; float: left; } BODY内↓ <div class="b1">文字</div> <div class="b2"> たくさんの文字</div>

  • 「見出し画像+小見出し」と「見出し画像+小見出し」の並べ方

    「見出し画像(文字と同じ大きさ程度)+小見出しのtext」をいくつか縦に並べたいのですが、その間隔をCSSで設定したいと思います。 ■画像A+小見出しtext (この間隔を制御したい) □画像B+小見出しtext (この間隔を制御したい) ★画像C+小見出しtext....以下同じ 「画像+小見出し」をdivでまとめて、それに対して「下方向margin」を与えて間隔を制御したのですが、このやり方は間違った方法なのでしょうか?正しいCSSを学びたいのですが、どなたか教えていただけますか?

    • ベストアンサー
    • CSS
  • フルCSSでバナーを作りたい

    フルCSSでレイアウトをしています。今までだと画像を貼付けてリンクを貼ってというかんじでバナーを作っていたのですが、CSSで画像を貼るのではなくてバナーみたいに作っているサイトがいくつかあって、それをやりたいのですが、やり方がわかりません。画像はまったく使わないでもバナーっぽくできるんでしょうか。オーバーオールも可能なんでしょうか。そのバナーをクリックするとそのバナーだけではなく、左側の余白も点線で選択されます。

  • cssレイアウトについて

    こんにちは。cssでデザインを作っているのですが、思うようにレイアウトができなくて困っています。 このような ┌─────┐ │  1  │ ├──┬──┤ │ 2│ 3│ └──┴──┘ レイアウトを作ろうとしています。 1の部分には画像、2の部分にはテキスト、3の部分にはtableが入ります。 しかし、3の<table>上の部分が2の<p>分下に下がって表示されてしまいます。 これを2と3の上の部分が揃うようにレイアウトするには、どうすればいいでしょうか? 分かる方、教えてくださいませ。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • dreamweaverのCSSについて。

    こんにちは。CSSについて質問があります。 今ドリームウェイバーにてHPを作成しています。 それで文字のサイズ、行間(ライン高)、文字の間隔、の三つを CSSで指定したのですが、この場合回覧者がエクスプローラー等の文字の大きさを変えても文字のサイズ、行間(ライン高)、文字の間隔は一定で 変化はしないと思いますが、この場合やはり見にくいでしょうか? 自分的にはデザインが固定されるので出来れば文字の大きさなど固定 したいのですが、CSSで固定する場合何ピクセルくらいの文字の 大きさが妥当でしょうか?

  • ホームページビルダーV9を使いながらHTML・CSSを覚えたい

    ホームページビルダーでHPを作成しています。基本的なところまでは、HTML・CSSの知識が無い私でも出来るのですが、思い通りにレイアウト出来なかったり任意の場所にバナーを貼れなかったりとかなり行き詰っています。 HP作成ソフトを使わず、サンプルを作りながら学習していく類のテキストは見かけますが、ホームページビルダーを基本にHTML・CSSを覚えていく様なテキストはないでしょうか? あれば是非教えて下さい。

  • CSSで縦メニューを作りたい

    CSSを使って画像1のような縦メニューを作ろうとしていますが上手くいかず、検索をしてもお手本になるような作り方を探し当てることができずに困っています。要素としては、枠はsolidの1px、リンクは枠内のどこでもクリックでき、枠内の色は交互に変えるといった感じです。お分かりの方いましたら教えていただけると嬉しいです。よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSで文字と画像の配置方法は・・・

    HTML+CSSで書いています。 画像とテキストを配置しようとしています。 画像は位置固定にして、 テキストは回り込みではなく、その上にかぶさる感じにしたいの ですが、画像は画像、テキストはテキストに分離してしまいます。 (画像を背景みたいに扱いたいのですが、すでに背景はCSSで 指定されてしまっています。。。。) どのようにCSSを記述すればいいのでしょうか?