• ベストアンサー

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タグに書けばいいのでしょうか？　 お手数ですがお願いします。 乱文、長文すみませんでした。

  • CSS
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.1

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

_takeponn_
質問者

お礼

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

その他の回答 (1)

回答No.2

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

参考URL：
http://www.2step-css.com/
_takeponn_
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 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
  • noscriptタグにCSSが適応されません。

    下記のようにコーディングをしたのですが、noscriptタグにCSSが適応されません。 noscriptタグは特殊でCSSが当てられないのでしょうか？ デブツールズで見ても、noscriptタグのCSSには親要素の継承した情報しかありませんでした。 div#loading_imgにカラーなどをいれるとちゃんと継承します。 ＨＴＭＬ <!--Loading Image--> <div id="loading_img"> <img src="img/base/loading.gif" width="128" height="15" /> <p>Now Loading</p> <noscript>当サイトはjavascriptを使用しています。</br>javascriptをONにしてください。</br>ONにしなければこの表示は消えません。</noscript> </div> ＣＳＳ /*Loading Image*/ div#loading_img { position: fixed; top: 50%; right: 50%; bottom: 50%; left: 50%; z-index: 9999; width: 128px; margin: -7.5px 0px 0px -64px; } div#loading_img p { text-align: center; color: #02CCFF; } noscript { text-align: center; color: #044901!important; font-weight: bolder; } /*Loading Image End*/

    • ベストアンサー
    • CSS
  • 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> のように２つの画像を表示させた場合、divタグのほうは、ちゃんと真ん中に表示されますが img class="line" のほうはされません。 しかし、img class="line" の方でも、画像のサイズは調整できています。 margin-left: auto; margin-right: auto; の部分の何が間違ってるのでしょうか？

    • 締切済み
    • CSS
  • CSSとHTMLのページ。IEとFirefoxでデザインが崩れてしまいます；；

    Firefoxだと、右上のフォーム部分がバナーの隣に来るのですが IEだとなぜかフォーム部分が下に来てしまいます。原因と対処法を教えてください。 FirefoxはCSSに厳格だと聞いたのですが、IEが曖昧なためになってしまったのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <link rel=stylesheet type="text/css" href="1.css"> <link rel="shortcut icon" href="favicon.ico"> <title>aaaaa</title> </head> <body> <div class="box"> <div class="top1"> <img src="aaa.jpg" width="468" height="60" alt="バナー"> </div> <div class="top2"> ああ <form method="get" action="あああ" style="margin-top:0em; margin-bottom:1em"> <input type="text" name="word" size=40 value=""><input type="submit" value="検索"><input type="hidden" name="line" value="10"> <input type="hidden" name="indi" value="0"><input type="hidden" name="act" value="search"></form> </div><div class="end"></div> <div class="bar"> <div class ="menu"><a href="./">HOME</a></div> <div class ="menu"><a href="about.htm">ABOUT</a></div> <div class="end"></div></div><div class="end"></div> <div class="side"> サイド </div> <div class="main"> メイン </div><div class="end"></div> </div></body> </html> 以下CSS @charset "utf-8"; /* ------------------------------ 基礎設定 ------------------------------ */ body {font-size:0.875em; margin:0; padding:0; line-height:1.4; color:#c0c0c0; background:#000000; background-image: url("back.jpg"); background-repeat: no -repeat; background-position: 99% 95%; background-attachment:fixed; text-align:center; margin:0 auto 0 auto;} img {border:0;} address {font-style:normal;} /* ------------------------------ ページ枠組み設定 ------------------------------ */ .box {width:800; margin:0 auto 0 auto; text-align:left;} .main {width:80%; float:left; text-align:left; font-size:0.875em;} .side {width:20%; float:left; text-align:left; font-size:0.875em;} .top1 {width:50%; float:left; text-align:left; font-size:0.875em;} .top2 {width:50%; float:left; text-align:right; font-size:0.875em;} .bar {width:100%; height:41; text-align:center;} /* ------------------------------ クリアの設定 ------------------------------ */ .end {clear:both;} .end hr {display:none;} /* ------------------------------ メニューの設定 ------------------------------ */ .menu a{display:block; width:96px; color:#c0c0c0; background:url(menu-img/menu1.jpg) no-repeat; height:41px; line-height:43px; text-decoration:none; text- align:center; font-size:0.9em; font-weight: bold; float:left; font-family:verdana,arial,sans-serif;} .menu a:hover{color:#e9e9e9; background:url(menu-img/menu2.jpg) no-repeat;}

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

    こんにちは。ＣＳＳＰＬＡＹと言うサイトでCSSをＤＬしたのですが、 手を加えて、ページとして成り立つようにしたいのですが、 なぜか形が崩れてしまいました。自分じゃ何がおかしいかさっぱりわからないので、 どなたか、詳しい方指摘してもらえませんか？ 参考ＵＲＬ＝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でロールオーバーを作って中央揃えにしたい。

    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% "ＭＳ Ｐゴシック", 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　CSSを、教えてください。

    お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか？ （オレンジ画像 width＝100　height＝50 でお願いします。） 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }

    • 締切済み
    • CSS
  • ★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と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 --> ご教授のほどなにとぞよろしくお願いします

  • cssについて質問です。

    cssについて質問です。 IE8で思ったように表示されるものが、Firefoxだとレイアウトが崩れてしまいます。 imgの高さや横幅がFirefoxで反映されず文字が上部に表示されるのですがいろいろやっても改善出来ずに途方に暮れています。 ヘッダーやフッターなどもありますが、関係のありそうな部分を抜き出してみました。 添付画像のように画像を３つならべて表示したいのですが、 一番無駄無くdivで組む方法もありましたらご教授下さい。 よろしくお願いします。 ■HTML■ <div class="subcontentsbox"> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> </div> ■css■ .subcontentsbox { font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Osaka,"ＭＳ Ｐゴシック",sans-serif; font-size: 100%; width: 100%; margin: 20px 0px; padding: 0; text-align: justify; -ms-text-justify: inter-ideograph; overflow: hidden; display: block; } .imgbox { background-color: #987654; height: 250px; width: 33.33333%; text-align: center; float: left; } .imgbox a{ text-decoration: none; border: 0; height: 180px; width: 180px; } .imgbox img{ border: 0; height: 180px; width: 180px; }

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する