- ベストアンサー
右と左の両端に色を付けるには？
- 右と左の両端の四角の中を赤にする方法を教えてください。
- 参考になるサイトを見ながらサイトを作成していますが、右と左の両端に色を付けたいです。
- 試しにBgColor #FF0000; を追加してみましたが、効果がありませんでした。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そんな酷いサイトを参考にするのではなく、ちゃんとした方法を学ばないと・・ ★『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 すなわち、DOCTYPEは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> これだけで、IEも他のブラウザも標準モードで起動するのでブラウザごとの差はなくなるでしょう。 ★中心に寄せるのはtext-alignではありません。 text-alignは、テキストなど行内要素を中心寄せにするプロパティです。 'text-align'( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/text.html#propdef-text-align ) 断じてブロック要素を中央配置するためのものではありません。 ★<div id="main">この中にページ内容を入れます。</div> class,idの使い方間違っています。この場合はclass="article"かもしくは不要です。 『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』であって、決してデザインするために用いるものではありません。 ウェブ標準の簡単なサンプル ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) のDATA入力(右上のボタン)でチェック済みのHTML4.01strictです。 ★タブは＿に置換してあるので戻す。 一見して分かるように、HTMLには文書構造しか書いていませんから、作成するのも将来のメンテナンスもとても楽なはずです。 class名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を参考に、文書構造を示す物にしてあります。HTML5にするときは <div class="header"></div> → <header></header> <div class="section"></div> → <section></section> <div class="footer"></div> → <footer></footer> <div class="nav"></div> → <nav></nav> に変更するだけです。HTML4.01で作成するときにもHTML5の新しい要素やその使途を参考にすると良いです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css" media="screen"> <!-- /* この中身は次の回答で */ --> </style> </head> <body> <div class="header"> <h1>HomePage</h1> </div> <div class="section"> <h2>本文</h2> <div class="section"> <h3>ページ全体を中央に表示</h3> <p>ページを中央に表示するには、ページがウェブ標準で作成されている限り、IE7以降のモダンブラウザには差はありません。</p> <ul> <li>幅を指定して左右のマージンをautoにします。</li> </ul> </div> <div class="section"> <h3>スタイルシートで指定します。</h3> <p>HTMLには文書構造だけを記述し、プレゼンテーションはスタイルシートで指定します。</p> </div> <div class="nav"><!-- ナビゲーション、メインじゃないので後回し--> <ol> <li>MENUE1</li> <li>MENUE2</li> <li>MENUE3</li> <li>MENUE4</li> <li>MENUE5</li> </ol> </div> </div> <div class="footer"> <h2>文書情報</h2> <dl class="documentHistry"> <dt id="FIRST-PUBLISHED">First Published</dt> <dd>2014-09-29</dd> </dl> </div> </body> </html>
お礼
ありがとうございました。
- outbrave
- ベストアンサー率60% (231/380)
BgColor #FF0000; という書き方はないです。 background-color: #f00; と書きます。
お礼
ありがとうございました。
関連するQ&A
- body要素
body要素のCSSをうまく反映させることができません。 table_testを画面中央に表示させて、全体の背景色を赤にしたいのですができません。 どこが違うのでしょうか？ ご教授ください。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"><TITLE></TITLE> <style type="text/css"> <!-- .body { text-align:center; margin-right:auto; margin-left:auto; bgcolor:red; } .table_test { width:700px; border-style:solid; border-color:blue; border-width:1px; margin-right:auto; margin-left:auto; //--> </style> </head> <body> <table class="table_test"> <tr> <td> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- Firefoxで、tableに指定したmargin-leftがスクロールバーで×（ソース記載にて長文です）
HTMLにて質問してましたが、回答ありませんでしたので、カテゴリを変えて質問させていただきます。 bodyをmargin、paddingともに0にして、tableを配置してmargin-left:15pxを指定したのですが、スクロールバーが出た時にFireFox2.0でずれます（他、IE6、safari3は問題無）。 どうも、marginがきかなくなるようですが、原因がお分かりになれば教えていただけないでしょうか？ また、回避策は何かあるでしょうか？ divに設定したmarginは問題無です。 tableをdivで括って、marginはdivに設定すれば問題ありません。でも、できればシンプルにbodyの直下にtable配置したいと思っているのですが…。 どうぞよろしくお願いします！ 以下にサンプルソースを記述します↓ ------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テーブル</title> <style> <!-- body{ margin:0; padding:0; } --> </style> </head> <body> <div style="width:500px; background-color:#00FF00; margin-left:14px;">div</div> <table width="500" border="0" cellspacing="0" cellpadding="0" style="margin-left:14px;"> <tr> <td bgcolor="#0099FF">テーブル</td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
- fixedで作ったフロートメニューを中央に配置するには
浮かせたaをbの位置に表示させたいのですが、aは左上に固定されてしまいます。 IE7では上手くいくのですが、FF3では思うように行きません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>TEST</title> <style> html,body{margin:0;padding:0;width:100%;height:100%;} </style> </head> <body> <div style="max-width:780px;width:100%;margin:0px auto;text-align:center;border:solid 1px #AAAAFF;color:#AAAAFF;position:fixed;">a</div> <div style="max-width:780px;width:100%;margin:0px auto;text-align:center;border:solid 1px #FFAAAA;color:#FFAAAA;">b</div> </body> </html>
- 締切済み
- HTML
- フォントと文字サイズの指定方法
HTML初心者です。 どなたか助言ください。 以下のソースのようなテンプレHTMLを変更しないといけなくなりました。 以下のソース部分のフォントと文字サイズを指定するにはどのようにすればよろしいでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title><?=$item_title?></title> </head> <body> <div style="width:100%;text-align:center"> <div id="wrapper" style="margin:0px auto;font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#000;text-align:left;"> %IMAGES% <div class="sub_tit" style="padding-left:5px;height:25px;line-height:25px;border-left:solid 20px;color:#2214ff;font-size:25px;font-weight:bold;"> PRODUCT DETAILS </div> ＊＊＊＊以下で出力される文字のフォントと文字サイズを指定したい。 <p class="sub_text" style="padding-left:10px;padding-right:20px;"> %DESCRIPTION% </p> ＊＊＊＊ ......同じような内容が続く </body> </html> よろしくお願いいたします。
- ベストアンサー
- HTML
- ２段リキッド(右可変)時の右ブロックのボーダー表示について
タイトルでは分かりにくいですので、まずはCSSとHTMLのソースを添付します。 test.css=== * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; background-color: black; } #container { width: 100%; height: 100%; } #menu { width: 150px; height: 100%; float: left; display: inline; margin-right: -150px; background-color: white; } #main { width: 100%; height: 100%; float: left; display: inline; margin-left: 150px; margin-right: -150px; background-color: gray; } #mainContent { margin: 10px; border: 1px solid #85b3dc; } === test.html=== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="./test.css" type="text/css"> </head> <body> <div id="container"> <div id="menu"> MENU_CONTENT </div> <div id="main"> <div id="mainContent">MAIN_CONTENT</div> </div> </div> </body> </html> === test.htmlはネガティブマージンを使った２段組みの左固定、右可変のリキッドデザインとなっています。右可変ブロックには#mainContentにより、ボーダーを表示していますが、右可変ブロックの左には10px のマージンが取られているのに、右には10px のマージンがありません。右に10px のマージンをとるにはどうしたら良いのでしょうか？ 分かりにくい内容とは思いますが、お願いします。
- ベストアンサー
- HTML
- CSSでのセンタリング
いつもすみません。 下記のラインをimg（gif）で格好のいい縦ラインにしたいんですが、どのようにしたらいいでしょうか？ よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body{ margin-top: 0px; } #box { height: 500px; width: 700px; margin-right: auto; margin-left: auto; border-right: 1px solid #000000; border-left: 1px solid #000000; } --> </style> </head> <body> <div id="box">←この縦の黒線をimgで表現したいです。</div> </body> </html> ※回答の際には上記タグを改良してお答え願います。
- ベストアンサー
- HTML
- フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- ベストアンサー
- HTML
- ホームページの上下の隙間を消すには
左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。 上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css"> <!-- #main { width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } body { margin:0px; padding:0px; background-color: #999999; } --> </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>
- ベストアンサー
- ブログ
- cssによる配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- css初心者です。プラウザの表示について
以下のような記述を行い、確認為にプラウザに表示させようとしましたが、なぜかsafariではうまくいかずに、googlecromeでは表示されました。どのような事が原因なのでしょうか？ よろしくお願いします。 //html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="box1.css" type="text/css"> </head> <body> <div class="box">箱の表示を作ろうと思います。</div> <p class="box2">こちらはどうなのでしょうか？</p> </body> </html> //css @charset "UTF-8"; /* CSS Document */ .box{ border:4px solid #9C3; width:50px; height:60px; padding:15px 15px; margin:50px 0px 0px 50px } .box2{ width:300; height:200; border:3px solid #F33; padding:10px; } よろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございました。