- ベストアンサー
１行内に複数の文字位置を設定する方法
- １行内で文字位置を揃える方法は、CSSのfloatプロパティを使用して要素を横並びに配置することができます。
- しかし、１行内で複数の文字位置を指定するには、特定の文字の位置を調整するために追加のCSSプロパティを使用する必要があります。
- 例えば、テキストの特定の文字を左から２文字分移動させるには、padding-leftプロパティを使用します。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 文字位置の修正方法は
初めて、ホームページを作るので、出来るだけ詳しくお願いします <center><font size=5>文字</font><center><br><br> <img src="2.jpg" height="300" width="399" align="left" hspace="15"> <font size=4><b> 文書１<br> 文書２<br> 文書３<br> </b></font> <br clear="left"><br><br> 上記のHTMLを書いたのですが、画像の右側の文書がセンターによってしまいます。どのようにしたら、文書１，２、３が左に頭がそろうのですか。 文字数が違う場合は、エクセルのように文字数を同じにするHTMLはありますか。
- ベストアンサー
- HTML
- IE6だと表示がおかしく表示される。
添付写真の上がIE9での表示で、下はIE6(IETesterで表示)ですが。 殆んど同じ記述で「写真」の無いページは、正しく表示しています。 必要と思われるタグは、下記の内容です。なお親ホントは100%です。 <div style="width:32%;float:left;"><img src="省略></a></div> <div style="width:59%;float:left;"><img src="省略"></a></div> <div style="font:1em/2.8em 'ＭＳ 明朝',serif;width:27.9em;float:clear:both;"> <div style="margin-left:9.52em;font-weight:bold;clear:both;">九月十八日</div> <div style="clear:both;width:27.9em;"> <div style="width:11.63em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;">省略</div> <div style="width:5.81em;font:1em/1.4em 'ＭＳ 明朝',serif;float:left;">省略</div> <div style="width:10.34em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;">省略</div> 省略 </div> <div style="font:1em/2.8em 'ＭＳ 明朝',serif;width:27.9em;float:"> <div style="clear:both;width:27.9em;"> <div style="width:11.63em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;margin-top:1.5em;">省略</div> <div style="width:5.81em;font:1em/1.4em 'ＭＳ 明朝',serif;float:left;margin-top:1.5em;">省略</div> <div style="width:10.34em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;margin-top:1.5em;">省略</div> 省略 </div> 誤り内容を教えて下さい。 http://ryuso.info/test/ryu180_250.htm
- ベストアンサー
- CSS
- clear: bothの事で質問です。
XHTML+CSSを勉強してる初心者ですが。 この場を借りて質問させてもらいます。 判らない事は (1) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 300px;width: 400px;float:left;">画像の説明</div> <br style="clear: both;" /> (2) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 100px;width: 400px;float:left;">画像説明</div> <div style="clear: both;"></div> (1)と(2)では、 (1)は<br style="clear: both;" />と記入してますが (2)は<div style="clear: both;"></div>と記入してます。 この(1)と(2)は同じなのでしょうか？ それと使うとするならどちらのほうが有効的なのでしようか？ 教えていただければ光栄です。
- 締切済み
- CSS
- CSSでフローとした際の親要素の高さ
CSSでfloatしたものって、親要素のheightに反映されません？ただ親要素に背景があって、反映されないと凄く困る感じで・・・。 それってどうやって回避すればいいでしょうか？ 取りあえず <div style="width:750px;background:url(mainback.gif)"> <div style="float:left;width:300px;">左側</div> <div style="float:right;width:450px;">右側</div> <br style="clear:both;"> </div> のように、<br style="clear:both;">みたいにして取逃げたんですが、そもそも無意味なbrを入れるのもどうかと思うし。文法的にもbrにclearって微妙な気もするし、 なにか良い逃げ方ってないでしょうか？？ ご存知の方、宜しくお願いいたします。
- ベストアンサー
- HTML
- ＣＳＳで指定してます。プラザーによっては文字の位置
よろしくお願いします。 文字の大きさ、行間を指定しているのですが プラウザーによっては文字の位置が一行ほどずれてしまいます。 何か対策はないのでしょうか？ ＩＥは文字半角分左に、Chromeは一行上に、Operaは半角分右によってます。 ＣＳＳを自力で書き込むのは初めてで、サンプルブックを見ながらしてます。 書き方を間違えているのでしょうか。 ------------------------------------------- 【スタイルシート】 *{ margin:0; padding:0; } #boxA{ background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff; } #boxB{ background:#ffffff; } #boxE{ background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff; } body{ text-align:center; } #container{ width:892px; margin-left:auto; margin-right:auto; text-align:left; } h1{ font-size : 11.5px; color:#333333; font-weight : 500; text-indent:0px; letter-spacing : -0.1em; } .text1{ font-size : 11.5px; letter-spacing : -0.1em; } .text2{ font-size : 70%; } .text3{ font-size : 85%; line-height : 1.3em; } #boxA{ width : 892px; } #boxA2{ width : 708px; margin-top : 10px; margin-left : 90px; background-image : url(../img/top_img.jpg); height : 328px; } #boxA3{ width : 708px; margin-top : 10px; background-image : url(../img/porishi.jpg); background-repeat : no-repeat; background-position : 50% 50%; margin-left : 90px; height : 130px; } #boxE{ width:100%; clear:left; } #boxB{ width : 892px; float : none; } #boxB2{ margin-top : 10px; margin-left : 100px; width : 708px; } ------------------------------------------- 【webページ】 </head> <body background="img/bgcolor.png"> <div id="container"> <div id="boxA"> <br /> <div id="boxA2" class="text1"> <br /> <br /> <br /> <br /> <a href="http://www.wakayama2015.jp/" target="_blank"><img src="img/top_kokutai.png" width="106" height="276" border="0" align="left" alt="2015年紀の国わかやま国体 わかやま大会" /></a><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h1> 暮らしに欠かせない食・住・遊に関する事業を展開する丸長グループ。 </h1> 日々の生活が安心・快適で、そして豊かであってほしい…<br /> その想いがグループ企業の分野を超えたノウハウの共有につながり、<br /> さらなるサービスの向上へと結びついているのです。<br /> これからも郷土和歌山県を拠点に県内外に事業フィールドの拡大に<br /> 邁進してまいります。<br /> </div> <div id="boxB" style="text-align : center;" align="center"> <div id="boxB2"> <img src="img/top_mainimg.png" width="703" height="815" border="0" /> </div> </div> <div id="boxE" style="text-align : center;" align="center"> <p style="text-align : center;" align="center" class="text2"><br /> <font color="#000000">Copyright (C) 2000 MARUCHO GROUP Corporation. All Rights Reserved.</font></p> </div> </div> </div> </body> </html> 【webテスト】 http://www.dream-web.jp/test/maru/ サンプルブック見れば見るほど解らなくなってしまって困ってます。 助力よろしくお願いします。
- 締切済み
- CSS
- 画像リンクの下に文字を付けたいのですが
画像リンクを複数横に並べ、かつそれぞれの画像の下に文字を表示(それぞれの画像の横幅の範囲内に)させたいのですがどうすればよいでしょうか？ 画像と画像の間にスペースを入れることが出来たらなお良いです。 いろいろ調べてみて、 「<div style="float:left"><img src="1.gif"><br>caption 1</div> <div style="float:left"><img src="2.gif"><br>caption 2</div> <div style="float:left"><img src="3.gif"><br>caption 3</div> <div style="clear:both"></div>」 というタグを見つけましたが、これでは画像にリンクがつけられませんし、なぜか画像と画像の間に段が出来てしまいます。 どなたかよろしくお願いします。
- ベストアンサー
- HTML
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- このCSSの設定で何故こうなるのでしょうか?
cssの定義は以下のようにしました。 #L_side { float:left height: 1000px; width: 100px; float: left; } #ctr { float :left; height: 1000px; width: 720px; } #R_side { float: left; height: 1000px; width: 100px; } htmlは <body> <div id="L_side"><img 画像L(サイズは100x1000) ></div>・・・・これをAとします <div id="ctr"><img 画像C(サイズは720x1000) ></div>・・・・これをBとします <div id="R_side"><img 画像L(サイズは100x1000) ></div>・・・これをBとします </body としました。 これをブラウザで表示させたら Aの隣にBの画像が表示されましたがCの画像は改行されたかのようにAの下に表示されました。 私の意図したのはABCと並んで表示されると思ったのですが(カタカナの"コ"の字を反時計まわりに90度回転したような形で)、これは何故でしょうか?
- ベストアンサー
- HTML
- フッターの位置をスタイルシートで
ＨＴＭＬ＆ＣＳＳの勉強を始めたばかりです。 ヘッダー、内容３カラム組み、フッターという形にしたいのですが、どうしてもフッターが最下部に来てくれません。 フッターを３カラムの下に来させるには下記のほかに何が必要なのでしょうか。本とにらめっこしながらプロパティを足したり引いたりはしているのですが。 かなり基本的なところだと思いますがお願いいたします。 ＨＴＭＬ－－－－－－ <div id="header"> あいうえお </div> <div id="main"> <div id="mainleft"> かきくけこ </div> <div id="maincenter"> さしすせそ<br> まみむめも<br> や ゆ よ </div> <div id="mainright"> なにぬねの </div> </div> <div id="footer"> たちつてと </div> ＣＳＳ－－－－－－ div#header{width:600px;} div#main{width:600px;} div#mainleft{top:40px;width:100px;float:left; position:absolute ;} div#maincenter{top:40px;width:400px;float:left; position:absolute ;left:105px;} div#mainright{top:40px;width:100px;float:left; position: absolute;left:510px;} div#footer{width:600px;position: relative;}
- ベストアンサー
- HTML
- firefoxでdivタグの体裁崩れ
お世話になります。 以下のソースを IEで見るとリスト１、リスト２は同じ内容が表示されます FireFoxで見るとリスト２のlist3が左側につめられて表示されます。 ・これはIE or FireFoxのバグになるのでしょうか？ ・IEと同じようにFireFoxで表示したいのですが出来ますでしょうか？ 申し訳ありませんがご教授よろしくお願いいたします。 <html> <title>DIVタグテスト</title> <body> DIVタグテスト<br> <br> リスト１ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list2</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> <br> <br> リスト２ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div></div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- 朝に接続したWiFiが夜になって繋がらなくなり、再起動やパスワード入力など試したが解決せず。困っています。
- WRC-1167GS2-Bという型のWiFiについて朝は繋がっていたが夜になって繋がらなくなりました。
- ドコモ光でたのんだWiFiが朝は正常に繋がっていましたが、夜になって突然繋がらなくなりました。困っています。
お礼
早々、ご回答頂きありがとうございます まだまだ慣れないもので大変申し訳ありません とても参考になりました ありがとうございます