• ベストアンサー
  • 困ってます

CSSでのWebデザインについて。

現在、Webページを作っておりCSSでデザインしようと思っているのですが http://jyouhouya3.sakura.ne.jp/ (情報屋さん。) このサイトや http://cowscorpion.com/  (Cow&Scorpion) このサイトのように、大体見てもらえれば分かって頂けると思いますが、大きいテーブルの中でサイトを作っているとでもいいますか・・・・ サイト自体の幅が狭いとでもいいますか・・・ どう説明したらいいのかわからないです、すみません^^;  して、Cow&Scorpionさんのソースを見てみまして この部分を作るタグが下記のようにでてきまして(多分間違っているでしょうが^^;) <base href="http://cowscorpion.com/"> <link rel="stylesheet" type="text/css" href="style.css" /> <div class="banner_top" align="center"><img src="/img/vbar.gif"></div> <table class="tablebody" cellspacing="0" cellpadding="0" border="0" align="center" width="730px" height="100%"> <td valign="top" class="i" colspan="2"> このままじゃ自分のサイトには貼れませんでした。CSSはサッパリなんでどこがどうなっているのか分かりません。 なお、HTMLは大体わかります。 とりあえずこの様にサイトを作るにはどのようにして、HTMLタグに書けばいいのでしょうか?  お手数ですがお願いします。 乱文、長文すみませんでした。

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数74
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.1

こんにちは 簡単に書くと <body style="background-color:blue;"> <table style="width:700px;height:800px;margin:auto;background-color:white"> <tr> <td>aa</td> </tr> </table> でできます テーブルの角を丸くするのは『角丸テーブル』などで検索すると色々出ます

共感・感謝の気持ちを伝えよう!

質問者からのお礼

回答有難うございます。 お陰様で面白いように上手く角丸テーブルを作れました。 非常に助けになりました、有難うございました。

関連するQ&A

  • ★CSS★

    CSSについて質問です。 firefoxでは下記を記載し、たてよこの真ん中に表示することができました。 IEではセンターにすることはできましたが、ミドルにすることができませんでした。 display:table-cell; が効かないのでしょうか? IEでもミドルにできる方法を教えてください。 .imgs{ display:table-cell; height: 160px; width: 160px; text-align:center; vertical-align:middle; } <div class="imgs"> <a class="aaa" href="./pop.php> <img class="imgtf" id="imgtf" alt="タイトル" src="images/thumbnail/eee.jpg"> </a> </div> よろしくお願いします。

    • ベストアンサー
    • CSS
  • CSSについて初歩的ですがわかりません

    こんにちは。CSSPLAYと言うサイトでCSSをDLしたのですが、 手を加えて、ページとして成り立つようにしたいのですが、 なぜか形が崩れてしまいました。自分じゃ何がおかしいかさっぱりわからないので、 どなたか、詳しい方指摘してもらえませんか? 参考URL=http://www.cssplay.co.uk/menus/pro_drop13.html <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <link rel=stylesheet type="text/css" href="1.css"> <style> body {text-align:center;} .end {clear:both;} .box {width:85%; margin:0 auto 0 auto; text-align:center;} .main {width:80%; float:left;} .side {width:20%; float:left;} .top {width:80%; margin:0 auto 0 auto; text-align:center;} .top1 {width:20%; float:left;} .top2 {width:80%; float:left;} </style> </head> <body><div class="box"> <div class="top"> <div class="top1"> トップ </div> <div class="top2"> <div> <span class="preload1"></span> <span class="preload2"></span> <ul class="prodrop4"> <li class="top"><a href="./index.html" id="home" class="top_link"><span>Home</span></a></li> <li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span>Sales</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub1"> <li><a href="../menu/" class="fly">Digital SLR Cameras</a></li> <li><a href="../boxes/">Interchangeable Lenses</a></li> <li><a href="../mozilla/">Flash Guns and Accessories</a></li> <li><a href="../ie/">Professional Tripods</a></li> <li><a href="../opacity/">Filters &amp; Lens Hoods</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul></div> </div><div class="end"></div> </div> <div class="side"> サイド </div><!-- サイドここまで --> <div class="main"> メイン </div><!-- メインここまで --> <div class="end"></div> </div></body> </html> 文字制限で入りきらないので、メニューのほうは参考URLからみてください・・・ すいません

  • テーブル内に隙間が。

    テーブル内に隙間が。 質問です。CSSとテーブルタグを使用してwebページを作りました。が、 IE,FireFox,Chrome等のブラウザでは添付画像のように隙間が出来ます。 これを無くすにはどうすればいいのでしょうか。 (html/cssの書き直さなくてはならない箇所はどこでしょうか) 高さは左右のセルとも300に合わせているのですが…。 どなたかご教授願います。 <!--ソース --> <style TYPE="text/css"> <!-- td { margin: 0; padding: 0px; } .content_title { display: block; position: relative; padding-left: 0px; width: 100%; height: 40px; color: #ffffff; background-color: #000000;} .content_cell { position: relative; padding-bottom: 0px; width: 100%; height: 260px; padding: 0; } .menu_link { display: block; position: relative; width: 100%; height: 30px; padding-top: 12px; text-align: center; font-size: 11pt; color: #f5f5f5; background-color: #000000; } --> </style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> <td rowspan="6" width="72%" bgcolor="#ffffff" height="300" valign="top"> <div class="content_title">あいうえお</div> <div class="content_cell"><img src="img/hikaku.png" width="100%" height="100%" border="0"></div> </td> <td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../about/index.html">cell_1</a> </td> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../flash/index.html">cell_2</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../web/index.html">cell3</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../diy/index.html">cell_4</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../link/index.html">cell_5</a> </td></tr> <tr><td width="28%" align="center" height="150" bgcolor="#000000"> <!-- no contents -->no content </td></tr> </table>

その他の回答 (1)

  • 回答No.2

CSSがさっぱりわからない状況では、同じように作るのは難しいと思いますよ。 ちなみに<link rel~~~>のタグのとおり、CSSファイルを読み込んで使用していますので、実際にはこれだけのHTMLタグでできているわけではありません。 別途、CSSを書き込む必要があります。 まずは、下記のようなサイトもありますので、お勉強なさってはいかがでしょうか。

参考URL:
http://www.2step-css.com/

共感・感謝の気持ちを伝えよう!

質問者からのお礼

回答有難うございます。 style.cssって事で外部から読み込むのは理解できました。 ですので、他に方法は無いかな・・・・? と思いまして質問した訳です。 そのサイトでCSSを勉強してみるとします。

関連するQ&A

  • CSSでロールオーバーを作って中央揃えにしたい。

    CSSを使ってロールオーバーを作成しました。 がんばっているのですが、なかなか難しく、壁ばかりです。 なんとか、ロールオーバーは出来たのですが、その画像が左揃えになっていて、中央揃えにならないのです。 どなたか、お力をお貸しください。よろしくお願い致します。 HTML ----------------------------------- <link href="css.css" rel="stylesheet" type="text/css"> <div class="contents_box2"> <h3 class="no"><a href="info.html"><img src="contents_img2_1.jpg" alt="教室のご案内" width="215" height="53" /></a></h3> <p class="contents_text2">ああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2"><br /> <div class="rollover01"><a href="info.html"><img src="button2.jpg" alt="詳しくはこちら" width="172" height="29" /></a></div> <img src="contents_img2_3.jpg" width="215" height="18" /></div> -------------------- css↓↓↓ ------------- BODY { COLOR: #666666; TEXT-ALIGN: center; margin-top: 0px; font: 12px/130% "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; VERTICAL-ALIGN: bottom; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; margin: 0px; padding: 0px; } .contents_box2 { FLOAT: left; MARGIN: 0px 12px 0px 0px; WIDTH: 215px; TEXT-ALIGN: left; padding: 0px; background: url(contents_img2_2.jpg) repeat-y; } .contents_text2 { MARGIN: 10px 16px 0px } .contents_detail { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 215px; PADDING-TOP: 0px; TEXT-ALIGN: center } .rollover01 { width:172px; height:29px; background:url(img/button3.jpg) no-repeat center bottom; text-align: center; } .rollover01 a { display:block; width:172px; height:29px; font-size:1px; line-height:1px; outline:none; text-align: center; } .rollover01 a:hover { text-indent:-9999px; } -------------------------------------

  • HTMLタグについて

    <!-- #EndEditable --> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="&#21476;&#12356;&#12487;&#12540;&#12479;&#12540;/text.css" type="text/css"> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="5" marginwidth="0" marginheight="5"> <table width="760" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td><div align="center"><img src="toppu2.gif" width="700" height="92"></div></td> </tr> </table> <div align="center"> <table width="760" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"><img src="botan4.gif" width="700" height="57" border="0" usemap="#Map6"></div></td> </tr> <tr> <td><div align="left"><!-- InstanceBeginEditable name="contents" --> _________________________  上記のタグで 【<link rel="stylesheet" href="&#21476;&#12356;&#12487;&#12540;&#12479;&#12540;/text.css" type="text/css"> 】が文字化けしてるから可笑しいと思うのですが、これを テンプレート上で下記のように修正してもエラーが出て 上手くいきません。 <link rel="stylesheet" href="../../text.css" type="text/css">  この他におかしい部分が多分あると思うのですが、 そこをお教えください。  宜しくお願い致します。

  • CSSについて教えて下さい

    ホームページビルダーでの経験しかない初心者です。CSSに挑戦していますが不明な点ばかりです。 無料テンプレートを加工していますが下記の内容を教えて頂けませんか。 topとtop2の左側(上下位置は中間)に私が追加したtop3の画像を 表示させたいのですがうまくできません。宜しくお願いいたします。 CSS #bodyid{ background:#eafefe url('img/bg.png'); padding:0; margin:0; text-align:center; } #bg{ width:706px; background:#fff; margin:0 auo; } #top{ width:400px; height:80px; background:url('img/title1.gif') no-repeat center top; text-align:left; } #top2{ width:400px; height:60px; background:url('img/title2.gif') no-repeat center top; text-align:left; } #top3{ position:absolute; left 120px; top 30px; width:100px; height:80px; background:url('img/image555.gif') no-repeat center top; } html <body id="bodyid"> <DIV id="bg"> <div id="top"></div> <div id="top3"></div> <div id="top2"></div>

  • <img>タグにCSSのclass設定可能?

    <img>タグにスタイルシートのclassは、直接設定できるのでしょうか? 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1: ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します(ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。)。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか?できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか? 質問2: また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSでの配置方法

    今学校の課題でCSSをやっています。 画像を「position」のタグで自分のやりたいように配置できません。 本やHPを参考にまねをしてみているのですが、それでもうまく配置できません。 -------------------------------------- <html> <head> <title>MY RADIO FLYER</title> <link rel="stylesheet" type="text/css" a href="stop.css"> </head> <h1><div class="section"> <img id="top" src="image/myradioflyer.gif"> </div></h1> <h2><div class="section2"> <img id="spec" src="image/spec.gif"> <img id="photo" src="image/photo.gif"> <img id="top photo" src="my radio flyer/a.jpg" alt=""> </div></h2> </html> ------------------------------------------ body {background-color: #ff0000;} div.section{align:center;} div.section2{align:left;} img#top photo{ position: absolute; right:80px; top:40px;} ------------------------- 今こんな感じでやっています。 ひとつひとつの画像それぞれを操りたいのですが、全くできません。 また、配置には関係の無いはずのタグを追加しただけでも、配置が換わってしまったりと、全くもってわからなくなってしまいました。 どなたかよろしければ配置方法教えてください。

    • ベストアンサー
    • HTML
  • cssで画像を中央に表示する方法

    http://wayohoo.com/programming/css/how-to-center-the-img-tag.html を参考にしたのですが、 「imgをdivで囲って画像を中央揃えする方法。」なら、画像を中央に表示できるのに、 「imgに埋め込んだclassを使って画像を中央揃えする方法。」だとできません。 【サンプル】 <style type="text/css"> img.line{ width: 700px; margin-left: auto; margin-right: auto; } div.center{ text-align: center; } </style> </head> <body> <img class="line" src="http://test/line.jpg"> <div class="center"><img src="http://test/line.jpg" /></div> </body> のように2つの画像を表示させた場合、divタグのほうは、ちゃんと真ん中に表示されますが img class="line" のほうはされません。 しかし、img class="line" の方でも、画像のサイズは調整できています。 margin-left: auto; margin-right: auto; の部分の何が間違ってるのでしょうか?

    • 締切済み
    • CSS
  • テーブルにCSSの枠のつけ方

    はじめまして、こんにちわ。 HTMLで組んだテーブルにCSSの枠をつけたいと思っています。 ここのページ&#8203;http://www.rakuten.ne.jp/gold/royalparty/&#8203; の『NEW ITEMS』みたいに1列4行に枠をつけたい場合はどうしたら良いのでしょうか。よろしくお願いいたします。 組んだテーブルは下です。 <table class="newtable" cellspacing="0" cellpadding="0" border="0" width="610"> <tbody> <tr> <td class="photo" valign="middle" align="center" width="138"> 1-1 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-2 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-3 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-4</a></td> </tr> <tr> <td valign="top" align="left" width="138"> 2-1</a> </td> <td valign="top" align="left" width="138"> 2-2</a> </td> <td valign="top" align="left" width="138"> 2-3 </a> </td> <td valign="top" align="left" width="138"> 2-4</a> </td> </tr> <tr> <td valign="top" align="left" width="138">3-1</td> <td valign="top" align="left" width="138">3-2</td> <td valign="top" align="left" width="138">3-3</td> <td valign="top" align="left" width="138">3-4</td> </tr> </tbody> </table>

    • ベストアンサー
    • HTML
  • HTML。携帯での画像配置

    皆さんお世話になります。 今、携帯用のホームページを作っているのですが、 携帯で見たときに画像が真ん中にくるようにしたいのですが、 どこをどう直せばいいのかが解らないのです・・・ よろしくお願いします。 <BODY> <DIV style="top : -3px;left : -2px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"> <DIV> <TABLE border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_A_070408180231" height="570" class="hpb-cnt-tb1"> <TBODY> <TR valign="middle" align="center"> <TH align="center" height="343" width="200" valign="top" class="hpb-cnt-tb-th1"><IMG src="i-g-2.gif" width="200" height="61" border="0" align="middle"><BR> <P align="center">〒100-000<BR> 東京都千代田区<BR> 5-7-16布引ビル1F<BR> <BR> Tel (03)***-***</P> <IMG src="i-g-3.gif" width="200" height="230" border="0"><IMG src="i-g-4.gif" width="200" height="164" border="0"></TH> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY> </HTML>

  • CSSとSSI 一緒に使えますか?

    今までテーブルでデザインしたサイトでSSIを使ってメニューなどを更新していました 同じような感じのデザインのサイトをCSSで作成し、SSIを利用しようと思ったのですが、どうしてもSSIが利用できません CSSも初心者でテンプレートをコピペしてなんとかやってみた感じです <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="description" content="このページの要約文"> <meta name="keyword" content="キーワード,キーワード,キーワード"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>このページのタイトル</title> <link rel="index" href="http://"> <link rel=stylesheet type="text/css" href=".css"> <div align="center"> <div id="outline"> <div class="header"> おお </div><!-- end header --> <div align="center"> <div id="frame"> <div id="frame-margin"> <div class="center_left"> <div class="center"> ああ </div><!-- end center --> <div class="left"> いい <!--#include virtual=".html"--> </div><!-- end left --> <br class="c-both"> </div><!-- end center_left --> <div class="right"> うう <!--#include virtual=".html"--> </div><!-- end right --> <br class="c-both"> </div><!-- end frame-margin--> </div><!-- end frame --> </div><!-- end centering --> ご教授のほどなにとぞよろしくお願いします

  • HTML,CSSの記述について

    添付画像のようなレイアウトにする場合,どのように記述すればよいでしょうか? (画像マウスオーバー時に画像のみが切り替わるという事です) 初心者なのでサンプルを書いてくださると助かります ↓これは自分で考えてみたものです。自分のブログからのコピペなのでおかしいかもしれません。 【html】 <div class="rolloverPositionMenu"> <div align=left> <img src="a.jpg"> </div></div> <div align=right> <div class="left">text-areaA</div><div class="right">text-areaB</div> <div class="left">text-areaC</div> </div> 【CSS】 .left { float:left; } .right { float:right; } a.rolloverPositionMenu { background: #fff url(b.jpg) left top no-repeat; color: #fff; display: block; overflow: hidden; text-align: center; position: relative; } a.rolloverPositionMenu:hover{ background-color: #f73; color: #f00; } a.rolloverPositionMenu img { background-color: #fff; } a.rolloverPositionMenu:hover img { position: relative; }

    • ベストアンサー
    • HTML