• 締切済み

CSS&HTML

はじめまして、こんばんは ご質問です。 今htmlとCSSを使いHPを作成いたしています。 二段コラムの雛型にあてはめています。 メインコラムに ボックスを指定いたしたいのですが 上手く作成できません。<div id=main> </div>の中にタグは入れられますか?   mainはCSS HTML記述が終わっています。 幅 200 高さ100ぐらいのBOXボーダーラインで囲み 作成いたしたいのですがどうすれば出来ますか ボックスのタイトルをH3にしたいのですが CSSHTMLどう記述すれば いいのでしょうか ご指導ください 私がやりますとレイアウトが崩れます。

みんなの回答

  • jprr
  • ベストアンサー率51% (108/210)
回答No.1

> <div id=main></div>の中にタグは入れられますか? はい。入れられます。 >幅 200 高さ100ぐらいのBOXボーダーラインで囲み <style type="text/css"> <!-- #main {width: 200px; height: 100px; border: * + ?;} --> </style> *+?にはそれぞれ値を入れて下さい。以下参照。 http://www.htmq.com/style/#bor >ボックスのタイトルをH3にしたいのですが h3の長さや太さを指定するプロパティがないので、<h3></h3>で指定してみては?

jjnara
質問者

補足

jprrさま 本当にありがとうございます。 感謝申し上げます。 お手数かけすみません。 もう少しお尋ねも申します。 <div id="main"> その下に記述します。 これをCSSに別途記述する 場合を教えてくだい。 width 200px hight100px で タイトルバーを20pxぐらいとり font 10 weight 700(ちょっと太め)で ボックス内は通常のfontで 作業したいと思います。その際にタイトルバー内のタイトルをH3に致したいのですがご指導お願いできますでしょうか。 初めてこのコーナーを使いますが、ほんと助かりますし ご親切な方にめぐり合い、心をなでおろします。 ありがとう ご面倒でもお願い致します。 jjnara

関連するQ&A

  • HTML5をCSSでレイアウトする場合

    section  articleといった新しい要素をCSSのfloat等でレイアウトするのは間違いなのでしょうか? いろいろと調べてみましたが、sectionを使ったレイアウトは駄目で、divでレイアウトするとか… また、article aside nav 等をCSSでカラムレイアウト解説をしているサイトもありました… また、Q&Aサイトで <div id="article_1"> <article> …………… </article> </div> のようなsampleで、わざわざ無駄なことをせずにhtml5の新しい要素でレイアウトしましょう…? <article id="article_1"> …………… </article> と言うような回答もありましたが… 確かに、HTML5でWEBページ作成をするのに、レイアウトは<div>でネストするのは意味がないように思いますが… よりよい方法を教えてください。m(_ _)m

    • ベストアンサー
    • HTML
  • CSS:3カラム センター固定

    質問させてください。 コンテンツを挟んで左右違う背景をつけたウェブサイトを作ろうと思います。 3カラムのうちセンターのカラムだけは900px固定の中央配置で 左右のカラムはウィンドウ幅に合わせて可変幅にしたいのですが、 HTMLを <div id="left_box"> <!-- left background --> </div> <!-- /left background --> <div id="main"> <!-- main contents --> <div id="header"></div> <div id="contents"></div> <div id="footer"></div> </div> <!-- /main contents --> <div id="right_box"> <!-- right background --> </div> <!-- /right background --> としたときのCSSの適用の仕方について教えてください。 左右カラムには縦に長い異なった画像をbackground-imageで 横にタイルしていく方法にしようと思っています。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSでのdivタグに付いての質問です。

    現在HTMLを学習し始めたばかりで困惑しております。 HTML内の<body>タグ内に<div>タグを作りidを"main"としました。 具体的には<div id="main">Main</div>と記述しました。 そこからCSSで#main {color: red;} と記述しましたが、文字色の変更が全く反映されない状態です。 他の<p>タグや<h1>タグ、また<body>タグは全て奇麗に反映されるのに<div>だけが全然ダメな状態です。 一体何が原因なのか教えて下さい。 初心者すぎる質問だと思いますが、どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • HTML,CSS:文章内の文字を強調する方法

    例えば、 HTML部分 <div class="a">私は、~~<? class="b">「●●」</?>~~である。</div> CSS部分 div.a {font-style: normal; font-size: 11pt; font-family: "MS 明朝"; line-height: 125% } のとき、<?>の部分を強調したいのですがどのタグを使えばいいでしょうか?レイアウトはCSSと聞いてるので、あまりHTML側でレイアウト用のタグは使わない方がいいのではないかと思っているのですが…。 ちなみに、<?>は改行しない場合です。 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSレイアウトの2カラム左メニューでコンテンツを先にHTMLに記述できる方法をおしえてください。

    趣味でHPを作成しております。 一般的なCSSレイアウト2カラム左メニューにしたいのですが、 HTML部分で左メニューよりコンテンツを先に記述し、 CSSで左メニューで右にコンテンツがくるようにしたいです。 現在のCSSは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。 つづきましてHTML部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu">  メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。 しかしこれだとHTML部分はコンテンツが先にきておりますが、 メニューが右になってしまいます。 これをHTML部分を変えずにCSSでメニューを左に配置する方法はありますでしょうか? 1週間くらい試行錯誤したのですが、できませんでした。 お詳しい方教えてください。

    • ベストアンサー
    • HTML
  • divの入れ子を多用してページをつくることはださいのでしょうか?

    CSSで2カラム左メニューレイアウトのサイトを作成しております。 レイアウトはできたのですが、 ページ内にいくつかdivでボーダーのないボックスをつくり 写真をいれたり文章をいれたりします。 1ページのCSSレイアウトしたコンテンツ部分のdivの中に 5つほどdivが入れ子ではいる予定です。 インターネットでdivの多用について調べると ださいだの、わかってないだと書いてあります。 でもdivを多用しなければ、 例えば写真の横にテキストを配置したり、 よこにイメージを配置したいときに テーブルやHTMLタグをつかわないといけないので、 余計ソースが汚くなるんではないでしょうか? 私は、CSSを本格的に勉強し始めてほとんど初心者ですので、 詳しいことがわかりませんので、もしご存知の方おられましたらご意見お待ちしております。

    • ベストアンサー
    • HTML
  • CSSの三段組みレイアウトについて教えて下さい。。

    CSSレイアウト初心者ですが、CSSの作成段組みを作る時に <div id="container"> <div id="header"> </div><!--/header--> <div id="contents"> <div id="left_bar"> </div><!--/left_bar--> <div id="main"> </div><!--/main--> </div><!--/contents--> <div id="right_bar"> </div><!--/right_bar--> <div id="footer"> </div><!--/footer--> </div><!--/container--> と三段組固定レイアウトを作成したいのですが、 一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、 contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、 どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。 これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか? CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び?! CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか?

    • 締切済み
    • CSS
  • [HTML][CSS] 画像の高さを揃えるには?

    HTML、CSSの書き方について教えてください。 ブロック中に複数の画像を配置し、それらのアスペクト比を変えずに高さを揃えようとしています。 ベースとなるHTMLコードの例: <div class="photos"> <img class="photo" src="xxx1.jpg"> <img class="photo" src="xxx2.jpg"> <img class="photo" src="xxx3.jpg"> </div> やりたいこと:  要件1. <div>内の写真の数によって幅を固定させたい。   例:写真が3枚なら、1枚あたりの幅は3/画面幅。  要件2. <div>内の複数の写真を一番小さい高さの写真に揃えたい。   例:写真1の高さ200px、写真2の高さ250px、写真3の高さ100px     →写真1~3の高さを100pxとしたい。  要件3. 要件1と2を満たしつつ、画像のアスペクト比は変えたくない。    →幅をベースとして高さを動的にトリミングしたい。     読み込んだポストによって幅や高さが変わるので、     css+JavaScriptというよりはHTMLタグに属性を直に書いてできると良い。     (<div style="xxxxx">とか<img style="yyyy">とか。) clip:rect()でできるのかもしれないのですが、座標の扱い(position:absolute;)とかがよくわからないです…。 なお、HTML内にて各画像の高さを取得する必要はありません。既に取得済の情報を使います。 何か良い案はありますでしょうか?

    • ベストアンサー
    • HTML
  • CSSで微妙にずれる

    CSSで微妙にずれる こんにちは、最近HPを作成するようになった初心者です。 あるフリーサイトのCSSを雛形としてHPを作成したのですが、 (TOPとMENUとMAIN(コンテンツ)とFOOTERの4構成 MENUは左でMAINが右) ブラウザの枠の中にFOOTER部分が表示されると (上下に短いコンテンツ) 微妙に左(多分3PXぐらい)に、ずれて表示されてしまいます。 この様な、場合原因の部位を特定するには、どの様なアプローチを 行えばよろしいのでしょうか? 教えていただけるとありがたいです。 ちなみに、FOOTERのHTMLは <div id="footer"> <address>Copyright &copy; 2010 XXXXX All Rights Reserved.</address> </div> で、 CSSは div#footer { clear:both; margin:0 20px 0 20px; } です

  • CSSでのレイアウトについて

    現在、table、flameタグを使わず、CSSだけでレイアウトを組んでいるのですが、その際、BOX同士が離れてしまってどうしてもBOX同士をくっつけれません。。Illustratorで作った画像をスライスしてそれをつなげたいのですが。。。marginも0にしてるのに、どうもBoxの底辺にわずかな隙間ができてしまうのです。。 css body { width:800px; margin:0; padding:0; border:0; } #outline { width:800px; margin:0; padding:0; border:0; } <!-- endheader --> <div class="center-free1"> <div class="main"> メインスペース </div> <div class="free1"> </div> <br class="clear"> </div> <div class="free2"> 灰色back </div> <div class="clear"> </div> <div class="under"> </div> </div> </BODY> 一応ソースも載せてみました。。周りでcssを使ってる人がいないので、誰にも聞けず、途方に暮れています。。どうかご教授願います。。

    • ベストアンサー
    • CSS

専門家に質問してみよう