• 締切済み

横幅が狭い時→自動的に改行、広い時→一定幅以上で制限 と言うデザインをCSSで作りたい。

ウインドウの横幅が狭い時は自動的に改行。 ウインドウの横幅が一定以上になったら、それ以上は広がらず背景だけが広がる。 文字サイズは固定しない。 以上のようなデザインをCSSで作りたいのですがどの様にすればよいのでしょうか? 以下のサイトのように http://3ping.org/ http://web.okanos.com/employment/note19.shtm 私の環境 Win Vista ホームページビルダー11 HTMLタグやCSSの知識はない。 ホームページビルダーの機能で無理ならCSSについて勉強しますのでよろしくお願いします。

みんなの回答

  • koumei8
  • ベストアンサー率95% (20/21)
回答No.1

ウインドウの横幅が狭い時は自動的に改行は、overflowの要素を使うと出来ます。 ウィンドウサイズは、「%」、「auto」の組み合わせで出来ると思います。 2カラムの場合、bodyで全体の幅を指定しないで(auto)、左右のカラムのテーブル幅を%指定するなど。 文字サイズはピクセル単位(px)で指定せずに「%」や「font-size : small」とかするなど。 ホームページビルダー11の機能ですと、「スタイリッシュエフェクト」という機能で可能ですが、タグやCSSの知識がないとカスタマイズ出来ません。(ビルダーのテンプレをそのまま使用なら別ですが・・・) CSS使いたいなら、まずはタグを覚えることから始めた方が良いです。 タグが分からないとCSSはキツイと思います。 あとは、フリーのテンプレート配布サイトのファイルをローカルで保存して、ビルダーで自分なりに変えてみながら覚えていく。 真似はいけないかもしれませんが、そういう手本となるテンプレの中身の構造を見ていくとかしながら、覚えるのが早いと思います。 CSS参考サイト ・http://www.stylish-style.com/index.htmlhttp://cssstyle.net/http://css.uka-p.com/http://www.netmania.jp/templates/css.php

jisakupc
質問者

お礼

すみません。解決しました。(多分) 例として挙げたサイトを丸ごとHDDに落としてビルダーに読み込ませて、不要と思えるものを消して行きました。 min-width: max-width: この2つが探していた物です。 実は質問する前にこの2つのプロパティはグーグル検索で見つけていましたが、IE7は非対応なようで考えからはずしていました。 ホームページビルダーで保存する時に「XML形式のHTML」で保存すると有効になるようです。(「HTMLファイル」で保存すると働かない。) CSSのテンプレートは参考になりそうです。 ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • セブンイレブンのHPのように印刷時に横幅の自動調整をしたい

    セブンイレブンのホームページのように、 横幅を768pxとっているのにも関わらず、A4縦での印刷時に横幅が切れないようにしたいのですが、どのようにしたらできますか? いろいろ試してみたのですが、横幅が750pxを超えると、切れてしまいます。 ◆セブンイレブンジャパン http://www.sej.co.jp/faq/index.html 環境は、 Windows IE5.5↑ HTML、CSS、Javascriptのみ使用可能。

    • ベストアンサー
    • HTML
  • ホームページ製作ソフトについて

    勝手にHTML構文を乱したりしないホームページ製作ソフトで お勧めのものはありますか?(無料ソフト可能) 普段ビルダー2001を使っているものです。 CSSをある程度いじれるようになり、 最近では文章をHPビルダーでうち(改行タグなどをいちいち打つのが面倒なので、ビルダーで自動的に打ってもらってる感じです)、 CSS等のデザインはメモ帳で作るというパターンになってきました。 ところが、せっかくCSSやHTMLでデザインを組み立てても、 ビルダーに読み込ませたとたん、勝手にタグの順番を変えたり、 必要でないタグを打たれたりしてデザインが崩れることが多々あります。 ソフトのバージョンも古いので、 思い切って買い替えを考えていますが、 勝手にHTML構文を乱したりしないホームページ製作ソフトで お勧めのものはありますか?(無料ソフト可能)

    • ベストアンサー
    • HTML
  • ブラウザサイズ変更時のテキストの自動改行の設定の変更の可否or方法について

    ブラウザサイズ変更時のテキストの自動改行の設定の変更の可否or方法について ブラウザのサイズを変更すると、画面幅に合わせてテキストが自動で改行されますが、この自動改行を細かく設定することは可能なんでしょうか?(できればcssかHTMLで) たとえば、「ブラウザの横幅が401~800pxの間ならばテキストが自動改行され、400px以下になったらテキストが自動改行されなくなるように」などです。 どなたかお願いします。

  • CSSで自動改行させたくない。

    スタイルシートやテーブルで、幅を指定してあげると その幅にあわせて自動改行したりとか、その枠内の背景だけを 変更することができると思うんですが。 スタイルシートでやっても、なぜかうまくいきません。 今は、あきらめてテーブルでやってるんですが。 何がよくないのか、教えていただければ幸いです。 根本的な基本が、わかってないんですかね? CSS #main { width:760px; overflow:visible; } #head { width:760px; bgcolor: #ff0000; } .head-img { padding: 0px; margin: 0px; float:left; } #menu { width:760px; margin: 0px; padding: 0px; bgcolor: #ff0000; } .menu-buttom { margin: 0px; padding: 0px; } HTML <html> <head>  <link href="base.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="main">  <div id="head">   <div class="head-img"><img src="img/head_img.jpg"></div>  </div>  <div id="menu"> <img src="img/menu_left.gif" width="20" height="30"><img src="img/menu_top.gif" border="0" width="180" height="30" name="img_m1"><img src="img/menu_hp.gif" border="0" width="180" height="30" name="img_m2"><img src="img/menu_com.gif" border="0" width="180" height="30" name="img_m3"><img src="img/menu_inq.gif" border="0" width="180" height="30" name="img_m4"><img src="img/menu_right.gif" width="20" height="30">  </div> </div> </body> </html>

    • ベストアンサー
    • CSS
  • テンプレートを・・・

    初めて質問します(。。) 今日、前から憧れを抱いていたホームページを作成するために 「ホームページビルダー11」というソフトを買い。 最初は「http://www.oswd.org/」にあるような、テンプレート を使ってみようと思いましたが、ビルダーで編集することができません↓ テンプレートをダウンロードしたあと、どのようにすればいいか、どなたか解る方どうか教えてください。 ちなみに、解凍後の「.html」ファイルを開き、そのタグをコピーしてそのまま貼り付けたり、cssエディタでcssのタグのようなものもコピペしましたが無理でした↓

  • ホームページビルダーV9でのCSS対応

    ホームページの制作を請け負うことになりました。 私自身はタグを直接編集して作成しています。 普段はHTMLとCSSを組み合わせて、レイアウトにはテーブルを使わずに制作しています。 今回のクライアントは、サイトオープン後の更新をホームページビルダーV9を使って自分で作業したいと要望しています。 そこで、ホームページビルダーのサイトを確認したところ、「CSS Level1をサポート(一部を除く)/ CSS Level2をサポート(一部)」と書いてありました。 テーブルレイアウトをせずに、構造はHTML、属性はCSSという作り方をした時に、ホームページビルダー上で適切に表示されるかどうかが心配です。 体験版で試してみようと思いましたが、Mac対応していないようなのであきらめました。 ホームページビルダーで対応している/していないCSSについてご存知の方、どうぞよろしくお願いします。

  • ホームページビルダーでダウンロードしたテンプレートを読み込む方法ってありますか?

    初心者の為説明が下手でしたらすいません。 ホームページビルダーを使ってHPを作ろうとしている所です。 デザインなども自信がなかったので、テンプレートをダウンロードしてきました。 ダウンロードしたファイルは基礎HTMLのファイルと、着せ替えCSS用のCSSファイルです。 このCSSをHTMLに読み込まなくてはならないと思うのですが、まずその過程をホームページビルダーで出来るかどうか、 また、初歩的ですが、そもそもの基礎HTMLをホームページビルダーホームページビルダーに取り込む…というか、読み込めるのかどうかがよく分りません。 ホームページビルダーでファイルを開くから、ダウンロードしたファイルを開こうとしましたが、indexなどのHTML形式のファイルしか、開けそうにありませんでした。 ですが、例えばこの方法だとindex、Menuとそれぞれ同じ様に改変していかないとならない気がします。 親子それぞれのページで同デザインで纏めたい時には、indexで表示されるタグをそれぞれのページにコピーするしかないのか、それとも何か他の方法があるのか…。 どのタイミングでCSSをHTMLに読み込んでいいかもよく分りません。 また、無事に読み込めた際に、それはindexのページだけにのみ反映となってしまわないのか、等疑問点が沢山です。 一度に沢山の質問で申し訳ないのですが、お分かりになる方、もしくは説明のあるサイトをご存じの方がいらっしゃいましたら、宜しくお願いします。 尚、ホームページビルダーのヴァージョンは10です。

  • HTMLのタグで、ウィンドウの横幅を、カーソルで、縮小しても、ホームペ

    HTMLのタグで、ウィンドウの横幅を、カーソルで、縮小しても、ホームページの内容が、細くなって残っているタグってどんなだったでしょうか?今、ホームページを作ってる初心者です。普通なら、半分の幅に、したら、半分消えてしまいますよね、それが残ってるようにできるページがあったので、そのようにしてみたいです。よろしくお教えください。

    • ベストアンサー
    • HTML
  • タグを一度に消去したい

    個人のホームページのHTMLで作製しています。何回も古いホームページビルダで書き換えているうちに、<font= > </font>のタグが、多量になってしまいました。 <font のタグを、一度にすべて消してしまう方法ってあるでしょうか。 今はホームページビルダのエディタモードで、検索置換でやっていますが、途中で改行されていると置換されなかったり、面倒です。一つのファイルから、一気にフォントタグを消し去ってしまうようなソフトかエディターは無いでしょうか。

  • HTMLコードを一定ルールでインデント・改行してくれるソフトは?

    既に書いてしまったHTMLコードを一定のルールでインデント・改行してくれるソフトを探しています。(Win-XP用) 先日、 「HTML整頓くん 0.10β 」 http://www.vector.co.jp/soft/win95/net/se382567.html というフリーソフトを見つけたのですが、何から何まで改行してしまうのでちょっと具合が悪いのです。(<br>とか<b>は改行したくない) どなたかいいソフトご存知ありませんでしょうか? DreamWeaverやホームページビルダーにそんな機能があるというならそれでも結構です。 よろしくお願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう