- ベストアンサー
タグで教えて下さい。
水平線を６０％の長さで入れるとしてその線の上の文字を 線に合わせて左寄せするにはどうすればよいのでしょう？ １００％ならば簡単なのですがうまく線の左端に 文字が合いません。 どなたか教えて下さい。
- choroq
- お礼率58% (335/575)
- その他（インターネット・Webサービス）
- 回答数7
- ありがとう数8
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
#2 です。 どう言う風にしたいのか、良く分かりませんが。。。 <div align="center"> <table border="0" width="60%" cellpadding="0" cellspaing="0"> <tr><td align="left">ここに文字列を入れる。</td></tr> <tr><td align="left"><hr></td></tr> </table> </div> <p> 別の行。 </p> <div align="center"> <table border="0" width="60%" cellpadding="0" cellspaing="0"> <tr><td align="left"><font color="#ff0000">ここに文字列を入れる。</font></td></tr> <tr><td align="left"><hr color="#ccff88"></td></tr> <tr><td align="left"><font color="#00ccff">ここに文字列を入れる。</font></td></tr> <tr><td align="left"><hr color="#ff88cc"></td></tr> </table> </div> <p> 別の行。 </p> どんな風にしたいのか、良く分かりませんが、こんな例を作ってみました。 文字の色は、<font> で設定すれば良いでしょう。 水平線は、color=""オプションを指定する事で色を変更する事ができます。 複数行の例を2種類作って置きました。 普通の<table>タグと同じように考えれば大丈夫ですよ。
その他の回答 (6)
- daaman
- ベストアンサー率36% (55/151)
イメージがいまいち分からないのですが、こんな感じということでしょうか。 <div style="text-align:center;"> <div style="width:60%; margin-left:auto; margin-right:auto; border-bottom:solid 1px #ff0000; text-align:left; color:#ff00ff;"> テキスト1 </div> <div style="width:60%; margin-left:auto; margin-right:auto; border-bottom:solid 2px #0000ff; text-align:left; color:#00ff00;"> テキスト2 </div> <div style="width:60%; margin-left:auto; margin-right:auto; border-bottom:solid 3px #ff00ff; text-align:left; color:#000000;"> テキスト3 </div> </div>
お礼
有難うございました。 難しく考えすぎていたようです。 うまくいきました。 大変助かりました。
- shiow
- ベストアンサー率28% (2/7)
＞フォントを変えたり、ボーダーラインの色を変えたりなどは、下記のページでタグがわかると思います。 ちなみにフォントは、 <font color="red(#000000などでも可)">あいうえお</font> <div style="color:#000000; size:12pt;">あいうえお</div> ※sizeはなくてもかまいません。 また、ボーダーラインは <hr color="red(#000000などでも可)"> とすればOKです ◆ＨＴＭＬ手打ちでできるホームページ講座 http://homepage2.nifty.com/tomoarai/ ◆初心者のためのホームページ作り http://www.scollabo.com/banban/ ※その他Ｇｏｏｇｌｅなどで調べればいっぱい出てきます。
お礼
有難うございました。 難しく考えすぎていたようです。 うまくいきました。 大変助かりました。
- hikaly
- ベストアンサー率39% (47/119)
スタイルシートを使わずにHTMLだけで組むとすると、tableを使う必要があるみたいです。ブラウザによるかもしれませんが、divやpは幅を指定できない（横いっぱい、100%に広がってしまう）みたい。 なので、こんなサンプル↓はどうですか？ コツは、「左寄せしたい文字」と「水平線」をtable（のtd）で囲み、tableの幅を60%にすること。 ----切り取り線---- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test</title> </head> <body> <table align="center" width="60%"> <tr> <td> テストです。 <hr> </td> </tr> </table> </body> </html> ----ここまで---- これだけの為にtableを使うのはスマートではない（と思う）ので、次のようにスタイルシートを使うこともできます。tableを使わずともdivやpでOKです。 ----切り取り線---- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style TYPE="text/css"> <!-- .here { border-bottom: 1px #808080 solid; width: 60%; margin: auto; } --> </style> <title>test</title> </head> <body> <div class="here"> テストです。 </div> </body> </html> ----ここまで----
お礼
有難うございました。 で、その線及びフォントの色を変えたりして さらに何行も続く場合はタグをどのように すればよいのでしょう？
- shiow
- ベストアンサー率28% (2/7)
webデザイナーをしてますshiowといいます。 例えば、以下のHTML構文でもご希望のような形になりますでしょうか？ <table cellspacing="0" border="0" cellpadding="0" width="1000"> <tr> <td align="center"> <table cellspacing="0" border="0" cellpadding="0" width="600"> <tr> <td>あいうえおかきくけこ </td> </tr> <tr> <td><hr size="1" width="100%"> </td> </tr> </table> </td> </tr> </table> という感じなのですが・・・ ようは、大きいセルをつくり その中に横幅が大きいセルの６０％の大きさのセルをつくって、その中に文章とボーダーラインを入れています。 こういった形ではだめでしょうか？
お礼
有難うございました。 で、その線及びフォントの色を変えたりして さらに何行も続く場合はタグをどのように すればよいのでしょう？
- Dpop
- ベストアンサー率51% (279/544)
Web屋です。 テーブルタグを利用すれば良いのでは無いでしょうか? (本当は、スタイルシートでもできると思いますが。。) <div align="center"> <table border="0" width="60%" cellpadding="0" cellspaing="0"> <tr><td align="left">ここに文字列を入れる。</td></tr> <tr><td align="left"><hr></td></tr> </table> </div> 試して居ませんが、こんな感じで良いのでは無いかな。と思います。 文字と横線の間隔は、cellpadding, cellspaingで設定できますが、あまり開けると横線から文字が離れてしまうと思います。
お礼
有難うございました。 で、その線及びフォントの色を変えたりして さらに何行も続く場合はタグをどのように すればよいのでしょう？
- frentzen
- ベストアンサー率28% (2/7)
まず、文字にアンダーバーを引きたいのであれば <U>～</U>を使えば引けます。 違うのであれば、<table>など使ってみてはどうでしょう。 <table>の中に水平線も文字も入れてしまえば 幅がうまく合うんじゃないでしょうか
お礼
ありがとうございました。 参考になりました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
有難うございました。 難しく考えすぎていたようです。 うまくいきました。 大変助かりました。