- 締切済み
掲載画像の様なページを作成する手順
掲載画像のようなレイアウトのホームページを作りたいのですが 何から手をつけていいのかわかりません。 テーブルもしくはliで後はスタイルシートで作っていくという 漠然とした方法しか思いつきません。 スタイルシートはこの様なテーブルレイアウトのページは 何を設定すればいいのでしょうか 全部作ってくださいとは言いません。 作り方の大まかな概要と手順とスタイルシートに何を設定して レイアウトを実現していくかという筋道を教えてください 独学で学んでいるのですがテーブルをいくつも入れ子（組み合わせて） にすればこのようなレイアウトはできるのですが。 プロの方が作るともっとスマートなプログラミング（スタイルシートに デザイン情報を記述しHTMLはシンプルになると以前このサイトで回答を 頂いたのですが実際のスタイルシートのプログラミング方法がわかりません） 皆さんのお知恵を借りて解決できればと思います。
- tkwavek
- お礼率11% (103/930)
- CSS
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- too_bad
- ベストアンサー率53% (70/130)
少々ですが参考までに・・・ HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/top.css" /> </head> <body> <table id="sample1"> <tr> <td class="tdsam1"> No. </td> <td> <form action="cgi-bin/sample.cgi" method="post"> <input type="radio" name="nam" size="40"> </form> </td> <td> <form action="cgi-bin/sample.cgi" method="post"> <input type="checkbox" name="chkmrk" value="サンプルその1"> </form> </td> </tr> <tr> <td class="tdsam1"> 当社部署 </td> <td colspan="2"> <form action="cgi-bin/sample.cgi" method="post"> <select name="busyo"> <option value="A">A部署</option> <option value="B">B部署</option> <option value="C">C部署</option> </select> </form> </td> </tr> </table> </form> </body> </html> CSS body { margin-top: 0px; } table { border: none; } table#sample1 { width: 1024px; padding: 0px; margin-left: auto; margin-right: auto; border-collapse: collapse; } .tdsam1 { text-align:left; } img { border: none; vertical-align: top; } 使うサーバーにより異なりますが、Apacheの場合、 .htaccessを作成し、AddType text/html .htmlと記述する。 ただし、完全なテキスト(文字列)のみとして扱う場合、 代わりにAddType text/plain .txtと記述する。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
HTMLをシンプルにした所で、CSSが相当複雑になりそうですし、 テーブルレイアウトが無難じゃないですかね。 <tr>１つ増えた所で、HTMLが複雑になるわけでもないでしょう。
- e_16
- ベストアンサー率19% (847/4388)
その画像のサイトを探せばいいのでは？
- e_16
- ベストアンサー率19% (847/4388)
そのページのソースをコピーして組みかえれば簡単よ (^_^)v
関連するQ&A
- 掲載画像のレイアウトはテーブルレイアウトで実現？
掲載した画像のようなホームページのレイアウトはテーブルを何重にも組み合わせて （テーブルを何重にも入れ子にして）実現するのが最近の一般的な手法なのでしょうか このようなホームページのレイアウトのコーディング方法の概略を教えてください。 webデザイン素人のためなるべく詳しく丁寧に教えていただけると助かります。
- 締切済み
- CSS
- tdにスタイルシートをかけると、入れ子にすると文字が小さくなりすぎてしまいます
どうしてもテーブルでレイアウトしなければいけない状況にあります。 それで、文字のサイズを下げようとtdにスタイルシートをかけると、テーブルレイアウトなので入れ子になっているところが文字が小さくなりすぎてしまいます。 td{ font-size:80% } としています。 こういった場合、入れ子の中には影響しないようにする方法、もしくはほかの方法がありましたら、ご教授お願いいたします。
- ベストアンサー
- HTML
- CSSでのページ作成＜こまかなレイアウト＞
CSSを勉強しながらページ作成をしています。 今まではテーブルをつかって組立てをしていました。 初歩的な質問かもしれないのですが、どのたかお教えください。 テーブルを使って細かいレイアウトを設定する際には、<table>を入れ子にして、spacer.gifで空白の部分を構成しますが、 CSSを使っての場合は、どのような方法がありますか？マージンなどを駆使するのでしょうか？ それとも、spacer.gifを使うのでしょうか？ それと、<table>の入れ子のように、<div>も入れ子にしていいのですか？あまり多用しない方がいいですよね？ 本を見たのですが、そのような実践上の細かい説明が載っていなく、困っています。 慣れている方には初歩的な質問で大変申し訳ないのですが、やさしく教えて頂けると有難いたいです。 どうぞ宜しくお願い致します。
- 締切済み
- ホームページ作成ソフト
- [スタイルシート] マージンとその他の部分を違う色にしたい
検索等で調べてみましたが、 方法を見つけることが出来なかったので 質問させていただきます。 今までテーブルを使ってレイアウトをしていましたが、 余裕も出てきたのでスタイルシートを使うことにしました。 テーブルの場合は<body bgcolor="color1">と <tr bgcolor="color2">で2つの背景色を使えたのですが、 スタイルシートでこれを実現するにはどうすればいいのでしょうか。 全体を<div>や<p>で囲んでbackground-colorを指定するという 強引な事も思いつきましたが、もっとまとも(?)な方法を探しています。 ちなみにスタイルシートは外部のものを読み込ませるようにしています。 テーブルは表のためだけに使うべきだと思うので、 テーブルを使わない方法でよろしくお願いします。
- ベストアンサー
- CSS
- スタイルシートを利用したページレイアウト
数年前からWEBページのレイアウトにはCSS(スタイルシート)を使用した ものが一般的になっているようですが、 自分はHTMLの知識はある程度持っているのですが、TABLEレイアウト しか経験がない為、いちからCSSを利用したページレイアウトを勉強したい と思っています。 そこで、そんな私に最適な書籍やWEBサイトがありましたら教えて いただきたいと思っています。 よろしくおねがいします。
- 締切済み
- その他（インターネット・Webサービス）
- ヘッダー部のスタイルシートを<body>で実現可能か？
HTMLのヘッダー部分にページ全般に渡るスタイルシートを指定することができます。 これと同様な処理をboby配下で実現可能なのでしょうか？ たとえば<div>の区画全般にa:linkの設定 や liの設定ができるのでしょうか？ やり方が載っているサイトなどを紹介していただきたいのですが、よろしくお願いします。
- ベストアンサー
- HTML
- dreamweaver cs3 でのホームページ作成について
お世話になります。 以前HPBで全てテーブルレイアウトで添付画像のようなHPを作成致しました。 サイトのページ数が約15枚ほどで、画像の「1,ヘッダー」 「3,左メニュー」「4,フッター」は全てIフレームにして別のHTMLを表示させるようにしています。 「1,ヘッダー」「3,左メニュー」「4,フッター」は全てのページで共通 で表示され「3,コンテンツ」のみ内容が切り替わるようにしています。 この度ページを更新しようと思ったのですが、段々と左メニューやコンテンツ、フッター等内容が多くなってきてしまい、なおかつテーブルの入れ子に次ぐ入れ子という感じでレイアウトしていたために、どれがどのテーブルかわからず、レイアウトを調整しようと色々といじっていたらレイアウトがぐちゃぐちゃになってしまいました。 そこでこの際勉強も兼ねて一からサイトを作り変えようと思っております。ソフトはdreamweaver cs3でやってみようかと思っています。 cssを使って何とか添付画像のようなレイアウトは作れたのですが、 ヘッダー内や左メニュー内にも細かな段組みレイアウトが作れません。 通常細かな段組み（ヘッダー部分のメニューや左メニューのレイアウト）についてはやはりテーブルでのレイアウトが正しいのでしょうか？ まだdreamweaver cs3も使い始めて間もないもので細かなレイアウトの方法などが理解できていません。今後のサイト更新のためにも分かりやすい形で作りたいのですが・・・。 どなたかレイアウトについての参考URLや方法などご存知の方がいらっしゃいましたらご教授下さいませ。 よろしくお願い申し上げます。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートレイアウトで・・
初めまして。よろしくお願い致します。 先日、知人のＨＰをテーブルレイアウトからスタイルシートレイアウトで作り直しました。すると、ブラウザでは問題なく見れるのですが、 ホームページ作成ソフトの画面で見ると、大きくレイアウトが崩れています。文字の大きさなどはスタイルシートで設定したとおりです。 ちなみに、元々のＨＰ（テーブルレイアウト）はドリームウィーバー４日本語版というもので作られており、私が作成したものではありません。それを私が、ホームページビルダー１０を使って、スタイルシートレイアウトに書き直しました。 いろんなソフトで確認してみると『ビルダー１０』のページ編集の画面では、レイアウトの崩れはありません。『ビルダー９』のページ編集の画面でみると右と左に回りこみを指定したのに、文字などが重なってしまいます。 また、『ドリームウィーバー４日本語版』のデザインビュー画面だと文字の大きさ以外のスタイルシートは、全く無視され大幅に崩れてしまって、回り込みなどは全く無視され、下へ下へ書き込んだＨＴＭＬソースどおりに表示されます。 『ドーリームウィーバーＭＸ２００４』だと左に回り込みを指定した部分だけが崩れて、その部分が左の最下部（フッターよりも下）になっています。 ソフトが違うから崩れるのでしょうか？それともスタイルシートの設定がおかしいのでしょうか？何から修正すればいいのかわかりません。 当方、ＨＰ歴はビルダーで1年ほどほぼ独学の初心者です。 うまく説明できなくて、申し訳ありませんがよろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- スタイルシート 画像の置き換え について
スタイルシート初心者です。 宜しくお願いします。 ----------------------------------------------- <div id="Nav"> <ul> <li><a href="/nav1/"><img src="/nav1.gif"></a></li> <li><a href="/nav2/"><img src="/nav2.gif"></a></li> </ul> </div> ----------------------------------------------- 上記、nav1.gifとnav2.gifの２枚の画像を、スタイルシートで別の２枚へ差し替えたいのですが、何か方法はありますでしょうか。 #Nav li img{ } ではダメですよね。 何か上手い指定方法があるのでしょうか。 HTMLは変更不可です。
- 締切済み
- HTML
- 入れ子テーブルの親テーブルの行高を動的に変化させる
入れ子テーブルの親テーブルの行高を動的に変化させるには JSPで開発を行っているのですが掲載画像の青く塗りつぶした 入れ子になっている明細行を表示するテーブルの行数は動的に 変化します。そのため、動的に高さがかわると思うのですが 明細が増えるごとに入れ子の親テーブルの行高を変化させるに はどのようにプログラミングすればいいでしょうか なるべくソースコードでのご回答をお願いいたします。
- 締切済み
- Java
お礼
ご回答ありがとうございます。 このページは画像のデータしかなくソースを見ることはできません