DIVを右寄りにする方法
- DIV要素を右寄りにする方法について説明します。
- 上記のコードでは、DIV要素を右寄りにするためには、CSSのtext-alignプロパティを使用します。
- また、左divと右divを同じ位置に左右に表示させるためには、displayプロパティをinlineに設定する必要があります。
- ベストアンサー
DIV 右寄りにしたい
<!DOCTYPE html "-//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" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> <!-- div.右, div.左{ background-color: #ffff00; display:inline; border: 1px #BDBDBD solid; padding: 10px 6px; } div.右{ text-align:right; } --> </style> </head> <body> <div class="左"> 左 </div> <div class="右"> 右 </div> </body> </html> 上記のコードで、 一つのDIVは右寄り、もう一つは左寄りにしたいのですが 右寄りの仕方がわかりません。 どうやらdivはtext-align:right;では右に寄らないのですが どうすれば右に寄せられますか？ 右divも左divも同じ位置に左右に表示させたいです。
- ZUJQBMYGELLXE
- お礼率86% (31/36)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
display:inline; コレをしていしているので、DIVの意味が無くなっています。誤解を恐れず簡単に言えば、DIVの指定を無効にしているようなモノです。 なので、このinline指定を無くして、（か、或いはdivデフォルトの display : block ; とする） DIV右,DIV左{ float : left ; width : 任意のDIVの幅をpxや％等々で指定 ; } コレを加えてみてください。 こうすれば、質問者様の図のようにdivが左詰でfloatされます。 divは、デフォルトで横幅が100％の指定になっているので、この指定をし直してやらないと、float出来ないので注意です。 ※一度要素をフロートさせると、そのあとの内容も、フロートされた要素に続いて流れ込むことがあります。なので、HTML側に <div 右>～～～</div> <div 左>～～～</div> <div style="clear : both ;"></div> この最後の「<div style="clear : both ;"></div>」一行を入れることで、フロートがクリアされ、その後の行が、div右、div左の横に流れ込むのを解除します。（IEだとコレが無くても正常に表示されることもありますけど、他のブラウザで表示が崩れたりしますので注意）
その他の回答 (1)
- t_ohta
- ベストアンサー率38% (5083/13285)
display:inline; にしているので、そのdivはインライン要素です。 <div class="右">はdivの幅の中で右寄せになているでしょうが、幅は文字数分しかないので右に寄っているのか左に寄っているのか中央にあるのか判別出来ません。 div.右{ float: right; text-align: right; } としたら思い通りに表示されるでしょう。
関連するQ&A
- 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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } .container { width: 960px; text-align: center; background-color: #FFF; margin: 0 auto; } .header { background-color: #ADB96E; } .content { text-align: left; padding: 10px 0; } .footer { padding: 10px 0; background-color: #CCC49F; } --> </style></head> <body> <div class="container"> <div class="header"> </div> <div class="main"> <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p> </div> <div class="footer"> </div> </div> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
- XHTMLの文字コードのEUC-JPの文字化け
いつもはHTML４.01で作業をしていて XHTMLはどうも不慣れなせいか 今、外注が作成したHPを修正していて 文字コードをEUC-JPにどうしても変更しなければならないのですが それがうまくいかず、文字化けが発生してます。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> を <?xml version="1.0" encoding="euc-jp"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> このように設定したら文字化けが発生しました。 どのように設定したら文字化けがなくなりますか？
- ベストアンサー
- その他([技術者向] コンピューター)
- iframeを使わずに上下50%ずつに分割したい
タイトルどおりですが・・・ frameやiframeを使わずに上下２分割させ、50%ずつ固定にしたいのですが、うまくいきません。 高さ100%は http://black-flag.net/css/20110621-3232.html で再現できたのですが、この中にheight:50%のdivを切ろうとしても上に詰まってしまいます。 表現する方法はあるでしょうか。 <!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" xml:lang="ja" lang="ja" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>CSS HEIGHT 100% SAMPLE</title> <meta http-equiv="content-style-type" content="text/css" /> <style type="text/css"> *{ margin: 0; padding: 0; } html,body { height: 100%; } body { font-size: 100%; line-height: 160%; font-family: Arial,Helvetica,sans-serif; color: #000; text-align: center; background: #cccccc; } #container { margin: 0 auto; width: 800px; height: 100%; min-height: 100%; text-align: left; background: #fff; } body > #container { height: auto; } .half{ margin:0 auto; min-height:50%; height:50%; width:800px; } #container > .half { height: auto; } </style> </head> <body> <div id="container"> <div class="half"> <div> 上のコンテンツ。固定にしたい </div> </div> <div class="half"> <div style="overflow:scroll"> 下のコンテンツ。スクロールさせたい </div> </div> </div><!--/#container--> </body> </html>
- ベストアンサー
- CSS
- xhtmlのスタイルシートについて
<?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja" xml:lang="ja"> <head> <meta name="robots" content="noindex,nofollow,noarchive" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> t { color : 407133; k { color : 337060; r { coior : 454580 > </style> ↑どこか間違っているところがありましたら教えてください。 <span class="#407133">てすと</span> 文字色が変わりません。 どなたか指摘願います。
- ベストアンサー
- その他（インターネット・Webサービス）
- i-modeでxhtmlをみるには、、
Perlからxhtmlをはきだして、i-modeで見れるようにしたいのですが、 表示がうまくいきません。 ヘッダーは Content-type: text/html; charset=Shift_JIS <?xml version="1.0" encoding="Shift_JIS"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> こんな感じです。 「Content-type: text/html; charset=Shift_JIS」の部分を 「Content-Type: application/xhtml+xml」や 「Content-Type: application/xhtml」等でやっても表示されませんでした。 もし分かる方がいましたら教えてください。 宜しくお願いします。
- 締切済み
- XML
- 「全体のレイアウト：中央揃えについて」補足
「全体のレイアウト：中央揃えについて」の質問で、IE7ではバグで「text-align: center;」にしなければ中央揃えができないということでしたが下記のように<div class="zen">に「text-align: center;」を指定しても中央揃えはできませんでした。 <?xml version="1.0" encoding="Shift-JIS" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <style type="text/css"> <!-- div.zen { width: 900px; margin: 0 auto; text-align: center; } div.k1 { width: 900px; height: 200px; background-color: black; } --> </style> <title></title> </head> <body> <div class="zen"> <div class="k1"></div> </div> </body> </html> ということは、 1.body { text-align: center; }（中央揃え確認済み） 2.文字コードをUTF-8にして、XML宣言を省略する（中央揃え未確認） の二つしかIE7で中央にそろえる方法はないということでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- charsetとフォーム入力文字
Htmlファイルの先頭が <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ・・・ で始まります。 このファイルのフォームに入力した文字はUTF-8で送られるのでしょうか。 それともOSの文字コードに依存するのでしょうか?
- ベストアンサー
- HTML
- phpの外部読み込みで半角ハテナがでる
初歩的な質問内容なのかもしれませんが、宜しくお願いします。 phpの外部読み込みをすると半角ハテナがでてきてしまいデザインが崩れてしまいます。 下記がソースです。 【index.php】 <?php echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"; ?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </head> <body> <?php include("information.php"); ?> </body> </html> 【information.php】 <div id="infomation" class="scroll"> <h3><span class="red">更新履歴</span></h3> <dl> <dt>サイト作成開始<span class="new">New!!</span></dt> <dd>０７年０５月０４日：管理人の閃きで作成。</dd> </dl> </div> 上記のように本当にシンプルなソースといいますか・・・ この感じでindex.phpにinformation.phpを呼び出すと 【index.php】 <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </head> <body> ?<div id="infomation" class="scroll"> <h3><span class="red">更新履歴</span></h3> <dl> <dt>サイト作成開始<span class="new">New!!</span></dt> <dd>０７年０５月０４日：管理人の閃きで作成。</dd> </dl> </div> </body> </html> という結果になり半角ハテナが入ってしまいます。 この現象がでるのはInternetExplorerとOperaでアクセスした場合です。 Firefoxの場合はこの現象は現れませんでした。 この半角ハテナを出なくする方法はありませんでしょうか？ 宜しくお願いします。
- ベストアンサー
- PHP
- フォントと文字サイズの指定方法
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とヘッダに書いたCSSでフォントサイズの表示が変わってしまう
Win IE6にて、外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまいます。 下のようにヘッダに書いた場合のフォントサイズが、 外部CSSにのみ同じように書いた場合に比べて小さくなります。 --------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> <!-- #a .b { font: 70% "ＭＳ Ｐゴシック", Osaka; color: #333333; } --> </style> </head> <body> <div id="a"> <div class="b">表示のテストです</div> </div> </body> </html> ----------------------------------------------------- 外部CSSに書いた場合でも小さく表示させるようにするには どうしたらいいでしょうか？ また、小さくなる原因はわかりましたらご教授願います。
- ベストアンサー
- HTML
