HTML、CSSについて教えてください
- HTML、CSSについて教えてください。縦二段、右から左へ移行する方法や、テキストの配置について質問があります。
- HTML、CSSで縦二段、右から左へ移行する方法やテキストの配置について質問があります。具体的な記述方法について教えてください。
- HTML、CSSについての質問です。縦二段にする方法や右から左へ移行する方法、テキストの配置について教えてください。
- ベストアンサー
HTML、CSSについて教えてください。
以前質問しましたが、私の準備が出来ていなくて、回答者の方にはご迷惑をお掛けしました。 改めて、以下のように質問させていただきます。よろしくお願い申し上げます。 １．縦二段、右から左へ移行は、何とか格好はつきましたが、記述に問題はないでしょうか。 2． Txtも「valign="top" align="right"」の記述したのですが、有効ではありません。記述に問題 があるのだと思いますが、色々やってみましたが、うまくいきません。 よろしくご指導いただきますよう、お願い申し上げます。 本体記述 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><title>縦テーブル右から左へ</title> <meta content="text/html; charset=shift_jis" http-equiv="Content-Type"> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> <!-- .vertical { writing-mode: tb-rl; direction: ltr; } --> </style> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <table border="1" cellspacing="1" cellpadding="1" align="right"> <tr> <td height="50" valign="top"><p class="sample2"><font face="ＭＳ 明朝">１</p></font></td> </tr> <tr> <td height="500" valign="top"><p class="sample2" ><font face="ＭＳ 明朝">アアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアア</font></p></td> </tr> </table> <table border="1" cellspacing="0" cellpadding="0" align="right"> <tr> <td height="50" valign="top"><p class="sample2"><font face="ＭＳ 明朝">２</font></p></td> </tr> <tr> <td height="500" valign="top"><p class="sample2"><font face="ＭＳ 明朝">エエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエ</font></p><font face="ＭＳ 明朝"> </font></td> </tr> </table> <table border="1" cellspacing="0" cellpadding="0" align="right"> <tr> <td height="50" valign="top"><p class="sample2"><font face="ＭＳ 明朝">３</font></p></td> </tr> <tr> <td height="500" valign="top"><p class="sample2"><font face="ＭＳ 明朝">オオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオ</font></p> </td> </tr> </table> </body></html> -------------------------------------------------------------------------- 外部記述 [sample.css] <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> p.sample1 {writing-mode: lr-tb; vertical-align:top;} p.sample2 {writing-mode: tb-rl; vertical-align:top;} </body> </html>
- nino01
- お礼率88% (54/61)
- ホームページ作成ソフト
- 回答数4
- ありがとう数9
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
補足ありがとうございます。どこに書けばいいのかがわからないのであれば、やはりCSSの基本から学ぶ必要があると思います。まずは下記３種類の書き方を覚えること、そして簡単なところ（文字の色や大きさを変えるなど）から始めることをおすすめします。 【1.style属性を使った書き方】 <p style="text-align: right;">文字が右寄せになります</p> 《style》という属性を使って、HTML内に直接CSSを書いていく方法です。一番書きやすくて覚えやすい方法だと思いますが、やりすぎるとHTMLがゴチャゴチャになるという欠点もあります。 【2.<style>タグを使った書き方】 <!DOCTYPE html> <html lang="ja"> <head> <style> p { text-align: right; } </style> </head> <body> <p>文字が右寄せになります</p> </body> </html> HTMLファイル内に<style>というタグを（一般的には<head></head>のなかに）追加し、ここにCSSを書いていきます。１の方法にくらべると難しくなりますが、まとめて一回でCSSを指定できるという長所があります。わかりやすくいえば、何度も何度も《height="500"》や《face="ＭＳ 明朝"》を書かなくて済むということです。 【3.外部CSSファイルをつくる方法】 《↓HTMLファイル：index.html》 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" href="sample.css" /> <!-- ここで外部のCSSファイルを読み込む --> </head> <body> <p>文字が右寄せになります</p> </body> </html> 《↓外部CSSファイル：sample.css》 @charset "shift_jis"; p { text-align: right; } HTMLとCSSをそれぞれ別に用意し、別の場所にある《sample.css》をHTML側の<link>タグを使って読み込む方法です。一番難しい方法ですが、HTMLとCSSを別々に管理できるため、HTMLファイルがシンプルになって見やすくなります。質問者さんが『外部記述』と書いているところと同じ方法ですが、外部のCSSファイルに<html>や<head>は不要です。このあたりの書き方が間違っているために、外部記述のCSSが正常に動いていないのだと思います。 CSSというのは奥が深く、なかなかネット上の文章だけで説明するのは難しいです。２番さんもおっしゃっていますが、できれば本とネットを併用しながら勉強していったほうがいいのではないかと思います。外部CSSファイルをつくる方法は少し難しいので、まずは２番目の方法、<style>タグを使って書くところから始めてみてください。
その他の回答 (3)
- Katsu_Kaiz
- ベストアンサー率58% (345/586)
どういうふうなところへ持っていきたいのか、いまひとつわかりづらいのですが……。 数字を右寄せしたいのであれば、たとえば p { text-align: right; } などになるのではないでしょうか。 また、『writing-mode』というCSSを知らなかったので調べてみましたが、いわゆるIE独自拡張のCSSみたいですね。こういうのはIE以外のブラウザでは動かないこともあるため、使うときには注意が必要です。というよりも、初心者の人が無理して使うようなものではありません。 さらに、空間や段差についてはheightだけではなく、widthも指定してあげないとブラウザの幅によってズレるかと思います。そしてもうひとついえば、《sample.css》の書き方が申しわけないですが全然ちがいます。 そもそも、皆さんもおっしゃっていますが全体的に書き方が古いです。《fontタグ》や《align属性》などは、今となっては使わないほうがいいとされています。それに、古い書き方で新しいこと（縦書き）に挑戦しようとするといろんなところで苦労します。 いきなり難しい縦書きに挑戦するのではなく、まずはHTMLとCSSの基本から勉強されたほうが、いまよりも記述もシンプル（たぶん今の半分くらいに減らせます）になって縦書きにも挑戦しやすくなると思います。
お礼
OKウェブの終了手続きを知らず、補足コメント欄で御礼申し上げたので、それで良いと思っていました。 今更ながらですが、改めてお礼申し上げます。
補足
ありがとうございます。 p { text-align: right; } をどこに記述するのか解りませんが、 とにかくやってみます。
- muuming2001
- ベストアンサー率23% (202/845)
直接答えではありませんが、 HTML 4.0を勉強したいのではないですよね。 書かれている記述が古いです。HTML５の時代なので、勉強している本、サイトを変えましょう。
お礼
OKウェブの終了手続きをしらず、補足コメントで御礼申し上げたので、それで良いと思っていました。お詫び申し上げます。
補足
『HTML５』の時代ですか。こんなことも知りませんでした。 さっそく、検索してとかかってみます。 ありがとうございました。
- dragon-man
- ベストアンサー率19% (2700/13647)
言うまでもなくHTML、CSSは記述言語で、この段階はプログラミングで言えばまさにデバッグフェーズです。バグの直し方が分からないと言って、いちいち人に聞いていたのでは、いつまでたっても完成しません。ブラウザ表示が目的に合わないのは、確実にどこかの記述が文法的に間違っているのです。つまりバグです。それは自分で見つけて治すしかありません。この質問箱を利用して他人にデバッグさせるのは如何なものか。余計なことを言って済みません。
お礼
OKウェブの終了手順を知らず、補足コメントで終了したつもりになっていました。今更ながらですが、改めて、御礼申し上げます。
補足
＞それは自分で見つけて治すしかありません。 おっしゃる通りだと思います。 これでも一生懸命やったつもりです（汗）。 参考サイトかヒントでも与えて頂ければ幸いです。 ＞質問箱を利用して他人にデバッグさせるのは如何なものか。 とんでもありません。溺れかかって、取り付く島を探しています。 よろしくお願い申し上げます。
関連するQ&A
- background-color ｃｓｓ
目的：社員のスケジュール表を作りたいです。 出勤、休み、緊急休みを一目瞭然に表で表現したいですが、そのやり方が分からないです、ご存知の方々教えてお願いします。 <!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=windows-31j" /> <title>表</title> <style> <!-- .open{ background-color:rgb(255,255,255); } .holiday{ background-color:rgb(166,166,166); } .rest_holiday{ position:relative; filter:alpha(opacity=50); background-color:rgb(255,0,0); } .rev{ background-color:rgb(185,205,229); } --> </style> </head> <body> <table border="1" cellspacing="1"> <tr> <td valign="top"> <table border="1" cellspacing="0" width="60" > <tr align="center"> <td height="23" >名前</td> </tr> <tr align="center"> <td ></td> </tr> <tr align="center"><td>田中</td></tr> <tr align="center"><td>島村</td></tr> <tr align="center"><td>喜田村</td></tr> <tr align="center"><td>林義夫</td></tr> </table> </td> <td valign="top" > <table width="00" cellpadding="0" cellspacing="0" border="1"> <tr align="center"> <td width="100" height="23" colspan="2" >10時</td> <td width="100" height="23" colspan="2">11時</td> <td width="100" height="23" colspan="2" >12時</td> </tr> <tr > <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="open"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rev"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- デーブルが延びる
たまにテーブルが意図しないかんじで右にのびる場合が あります。これを防ぐにはどうすれば、いいですか？ どういうタグを打てばいいですか？ <table width="85%" border="0" cellspacing="0" cellpadding="2" bgcolor="#ff0066"><trheight="216"> <td valign="top" align="center" bgcolor="#ff0066" width="786" height="216"><table width="786" border="0" cellspacing="0" cellpadding="2" bgcolor="#eeeeee"><tr> <td colspan="2" bgcolor="#ff0066" width="782" height="23" valign="top"><div align="left"> <font size="3" color="white" face="MSゴシック,OSAKA">例</font><b><font size="2" color="white"><font size="3" face="arial,verdana"><b><br></b></font></font></b></div></td></tr> <tr height="158"><td colspan="2" align="center" bgcolor="white" width="782" height="158"> <div align="left"><br> <font size="3" color="#555555" face="MSゴシック,OSAKA">テスト募集</font><font size="2" color="#555555" face="MSゴシック,OSAKA">！</font> <p><font size="2" color="#555555">XXXXX参加して頂ける方を随時募集しております。<br> </font></p><p></p> <div align="left"><p></p></div></div></td> </form></tr><tr height="23"><td colspan="2" width="782" height="23" valign="top"> <div align="right"><br></div></td></tr> </table></td></tr><tr> <td valign="top" width="786"><br></td> </tr></table>ソフトはD WとGo Liveを使います。
- ベストアンサー
- HTML
- テーブルにCSSの枠のつけ方
はじめまして、こんにちわ。 HTMLで組んだテーブルにCSSの枠をつけたいと思っています。 ここのページhttp://www.rakuten.ne.jp/gold/royalparty/ の『NEW ITEMS』みたいに1列4行に枠をつけたい場合はどうしたら良いのでしょうか。よろしくお願いいたします。 組んだテーブルは下です。 <table class="newtable" cellspacing="0" cellpadding="0" border="0" width="610"> <tbody> <tr> <td class="photo" valign="middle" align="center" width="138"> 1-1 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-2 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-3 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-4</a></td> </tr> <tr> <td valign="top" align="left" width="138"> 2-1</a> </td> <td valign="top" align="left" width="138"> 2-2</a> </td> <td valign="top" align="left" width="138"> 2-3 </a> </td> <td valign="top" align="left" width="138"> 2-4</a> </td> </tr> <tr> <td valign="top" align="left" width="138">3-1</td> <td valign="top" align="left" width="138">3-2</td> <td valign="top" align="left" width="138">3-3</td> <td valign="top" align="left" width="138">3-4</td> </tr> </tbody> </table>
- ベストアンサー
- HTML
- CSS line-height が効かない
下記のように<table>の行の間隔を狭める為、CSSのline-height: をつかっているのですが、 <td>の内側に<a hrefを使っているのが原因なのか、line-heightが効きません。 sample.css table td.aa { font-size : 0.8em; line-height:150%; } sample.html <table> <tr><td class="aa"><a href="http://......">ああああああああ</a> </td></tr> <tr><td class="aa"><a href="http://......">いいいいいいいい</a> </td></tr> </table> どなたかお助けください。
- ベストアンサー
- HTML
- ホームページ製作過程で、タグの組み方に困っています。
テーブルを <TABLE cellpadding="0" bgcolor="#000000" border="3"> <tr> <td valign="middle" align="center" width="13" height="23"><font face="" color="#FFFFFF" size="3">0</font></td> <td valign="middle" align="center" width="13" height="23"><font face="" color="#FFFFFF" size="3">0</font></td> <td valign="middle" align="center" width="13" height="23"><font face="" color="#FFFFFF" size="3">0</font></td> <td valign="middle" align="center" width="13" height="23"><font face="" color="#FFFFFF" size="3">0</font></td> </tr> </TABLE> のように組んでいます。 これは同盟に参加している人数を表示するためのものなのですが、このテーブルの左右に 現在のメンバー ○○○○ 名 （○→テーブル） のように字をするにはどうすればいいのでしょうか。 また、この字を含めたテーブル全体の表示位置を指定するにはどうすればいいのでしょうか この２点について教えていただきたいです。よろしくお願いいたします。
- 締切済み
- HTML
- 初めてCSSをデザインに取り入れたらレイアウトが崩れてしまいました・・。
dreamweaverMX2004を使用しているホームページ作成初心者です。 スクロールバーが付いているテキストボックス（更新画面用）の下に文字なり画像なりを入れると、なぜかだいぶん間が空いて表示されてしまいます。テキストボックスの高さを400くらいの大きな数字を指定すると間はなくなるのですが、どうしても高さ200～250くらいに指定したいんです…。 参考になるかも知れないので、コードを貼り付けておきます。 以前、教えてgooで同じような質問があって、そのときにどなたかが、 http://cssbug.at.infoseek.co.jp/detail/winie/b053.html を紹介していたので、もしかしたらこの状態なんでしょうか？あるいは、決定的なミスをしているのでしょうか？ どなたかご存じの方、いらっしゃったら、どうぞお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style type="text/css"> <!-- .style1 { color: #000000; font-size: 12px; } .style2 {font-size: 12px} .style4 {color: #000099; font-weight: bold; } --> </style> </head> <body> <style type="text/css"><!-- html, body { scrollbar-base-color: #D5D0F7; } --></style> <table width="800" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="279" height="357"> </td> <td colspan="2" valign="top"><style type="text/css"> <!-- .memo { width: 470px; height: 220px; overflow: auto; } --> </style> <div class="memo style1"> <p align="left" class="style1 style2"> </p> <p align="left"><span class="style4">2008年1月4日更新</span><br> あけましておめでとうございます。<br> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2">あけましておめでとうございます。<br> </p> </div></td> </tr> <tr> <td height="43"></td> <td width="248" valign="top">pppp</td> <td width="273"> </td> </tr> </table> <br> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- tableでレイアウトが崩れる場合
技術の足りなさからCSSにできなかったので、再度テーブルでサイズを指定してやってみようとしているところです。 どこかの数字がおかしくなっていると思うのですが、どうしてもわかりません。 ちゃんと表示できるブラウザとそうでないブラウザがあり、Firefoxは環境設定により表示が崩れる場合があります。 使用ソフトはビルダーの１１です。 なんでも良いのでどうぞアドバイスをよろしくお願い致します。 <body> <div ALIGN="center"> <table> <tbody> <tr> <td CLASS="td4" HEIGHT="70"> <table WIDTH="600" CELLSPACING="1" CELLPADDING="0"> <tbody> <tr> <td VALIGN="top" CLASS="td1" WIDTH="400" ALIGN="left" HEIGHT="180"> <b>文字 <textarea ROWS="15" COLS="70">文字</textarea><br> <br> </td> <td VALIGN="top" CLASS="td1" WIDTH="100" HEIGHT="180"> <table CELLSPACING="0" CELLPADDING="4"> <tbody> <tr> <td CLASS="td2" HEIGHT="16" WIDTH="100">文字</td> </tr> </tbody> </table> 文字 <br> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div> </body>
- ベストアンサー
- HTML
- HTMLについて
HTML初心者です。いろいろ調べながら下記の画像のテンプレートを作っているのですが、1枠と2枠の頭が揃いません。わかる方教えてください。画像が見づらいかもしれませんが宜しくお願い致します。 <html> <body> <br><center> <font size="6" color="#00000"> <b>タイトル</b> </font> <hr> <br><br> <table width="800" height="500" cellpadding="15" cellspacing="10" BORDER="4" bgcolor="F3F30E"> <tr> <td width="50%" rowspan="4" BGCOLOR="F2F276" ALIGN="left" VALIGN="top"> <font color="#00000" size="4"><b><u> 1 </u></b></font> <br><br> <font size="3" color="#00000"> </font> </td> </tr> <tr> <td width="50%" bgcolor="F2F276" ALIGN="left" VALIGN="top"> <font color="#00000" size="4"><b><u> 2 </b></u></font> <br><br> <font size="3" color="#00000"> </font> </td> </tr> <tr> <td width="50%" bgcolor="F2F276" ALIGN="left" VALIGN="top"> <font color="#00000" size="4"><b><u> 3 </b></u></font> <br><br> <font size="3" color="#00000"> </font> </td </tr> <tr> <td width="50%" bgcolor="F2F276" ALIGN="left" VALIGN="top"> <font color="#00000" size="4"><b><u> 4 </b></u></font> <br><br> <font size="3" color="#00000"> <b></b> </font> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
- テーブルの位置指定について
html編集で困っています。 <TABLE cellpadding="0" border="3" bordercolor="black" style="float:left;"> <TR> <TD rowspan="3" valign="bottom" align="center" width="76" height="75" background="background.jpg"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="95" height="25"><font face="" color="#ffffff" size="1"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="50" height="25"><font face="" color="#ffffff" size="2"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="40" height="25"><font face="" color="#ffffff" size="1"></font></TD> </TR> </TABLE> というようにテーブルを組みました。 このテーブル全体を、ページ全体の中で、 左右では左寄せ、上下では中央 に配置するにはどうすればいいのでしょうか。 パソコンの画面の大きさの違いでデザインが崩れてしまうので、上のような形に配置できればとてもうれしいです。 ご教授よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
いやー！ ありがとうございます。 ９月２日から始まって、今回で三回目の質問投稿で、やっとここまでたどり着けました。 皆さんのお陰ですが、素人の私にとって、Katsu_Kaizさんの懇切丁寧なご回答は、何ものにも勝る励ましとなります。 まだ完成はしておりませんが、何度も試行錯誤を重ねながら完成させたいと思っています。 実を申しますと、皆さんにお詫びしなければならないのですが、私は物書きで、ここで質問させていただいたのは二義的なものです。 しかし、第一義を成功させるためには、どうしても、この第二義を作り上げなければならなかったのです。 最初から二義的などと申しますと、真剣にご回答いただいている皆さんに失礼になるのではないかと案じたからです。 大変申し訳ございません。深くお詫び申し上げます。 第一、第二とも完成しましたら、改めて御礼を申し上げたいと存じます。 ありがとうございました。