質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

1回答

5200閲覧

ASP.NET MASTERページの設計、contentplaceholder(内部ページ)を画面中央に配置したい

saya24

総合スコア221

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

0クリップ

投稿2019/03/22 05:11

編集2019/03/25 10:41

CSSの知識がうすいため、もしくはASP.NETの開発に不慣れで、マスターページを採用した内部ページを
画面中央に表示する方法が分からなくて困っています。

内部ページのデザインに定義したTABLEが左詰めで表示されてしまっている問題なのか
contentplaceholderが左詰めで表示されてしまっているのか問題なのかも 正直分からないです。

現在はマスタページの下に、内部ページが現れているものの左上に表示されている感じです。
どうすれば 画面中央に内部ページもしくはTABLEを表示できるのでしょうか?

ASP

1//commonheader.master ★マスターページのデザイン★ 2<html xmlns="http://www.w3.org/1999/xhtml" > 3<head id="Head1" runat="server"> 4 <title>○○○○システム</title> 5 <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 6</head> 7<body> 8 <form id="form1" runat="server"> 9 <div> 10 <div style="width: 50%; float: left; text-align:left"></div> 11 <div style="width: 50%; float: right; text-align:right;" ></div> 12 <div style="clear: both;"> 13 <asp:Image ID="Image2" runat="server" Height="15px" ImageUrl="~/Images/Line.JPG" Width="100%" /> 14 <asp:contentplaceholder id="ContentPlaceHolder0" runat="server" ></asp:contentplaceholder> 15 </div> 16 </div> 17 </form> 18</body> 19</html> 20 21 22//entryform.aspx ★内部ページのデザイン★ 画面真ん中に表示したい・縦・横中央希望、現在左はじの表示 23<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder0" Runat="Server"> 24 <table> 25 <tr> 26 <td style="text-align: left"><span style="font-family: MS P明朝;">申請書</span></td> 27 <td></td> 28 <td></td> 29 </tr> 30 </table> 31</asp:Content>

デバッグモード時(OK)
イメージ説明

サーバアップロード時(駄目)
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/03/22 06:54

asp:contentplaceholder の id="ContentPlaceHolder2" と asp:Content の ContentPlaceHolderID="ContentPlaceHolder0" が違います。単なる書き間違いですか?
saya24

2019/03/25 05:22 編集

書き間違えです。直ちに修整いたします。
guest

回答1

0

ベストアンサー

どうすれば 画面中央に内部ページもしくはTABLEを表示できるのでしょうか?

質問に書かれているコードでは「内部ページ」というのは table で、それを左右中央になるようにしたいということですね。

以下の画像は Visual Studio 2015 の「Web フォーム」のテンプレートで自動生成される ASP.NET Web Forms アプリの About.aspx に表を追加したものですが、このような感じで良いのでしょうか?

イメージ説明

であれば、上の画像を表示した About.aspx のコードを以下にアップしておきますので参考にしてください。これが質問者さんのやりたいことと異なる場合は、どこがどう違うのか連絡ください。

<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="WebApplication2.About" %> <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <h2><%: Title %>.</h2> <h3>Your application description page.</h3> <p>Use this area to provide additional information.</p> <style type="text/css"> table.style1 { border-style: solid; border-width: 2px; border-color: Silver; border-collapse: collapse; margin-left: auto; margin-right: auto; } table.style1 th { border-style: solid; border-width: 2px 1px 2px 1px; border-color: Silver; padding: 5px 8px; background-color: #6699FF; color: #FFFFFF; text-align:center; } table.style1 td { border-style: solid; border-width: 1px; border-color: Silver; padding: 2px 8px; } </style> <table class="style1"> <tr> <th>No.</th> <th>方法</th> <th>結果</th> </tr> <tr> <td>(1)</td> <td>JSON.stringify()</td> <td>2017-02-01T03:15:45.000Z</td> </tr> <tr> <td>(2)</td> <td>DataContractJsonSerializer</td> <td>/Date(1503727168573+0900)/</td> </tr> <tr> <td>(3)</td> <td>WCF</td> <td>上記 (2) の結果と同じ</td> </tr> <tr> <td>(4)</td> <td>JavaScriptSerializer</td> <td>/Date(1030806000000)/</td> </tr> <tr> <td>(5)</td> <td>ASP.NET Web サービス</td> <td>上記 (4) の結果と同じ</td> </tr> <tr> <td>(6)</td> <td>ASP.NET Web API</td> <td>2017-08-26T15:39:32.6330349+09:00</td> </tr> </table> </asp:Content>

css の table.style1 クラスの中の margin-left: auto; と margin-right: auto; が table を中央に持ってくるために必要な設定です。

投稿2019/03/22 07:29

編集2019/03/22 07:41
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

saya24

2019/03/22 09:44

SuferOnWwwさん ありがとうございます。「できました!」contentplaceholderの配置位置じゃなくて、普通のHTMLのスタイルの話しだったのですね。 左右に対しての中央配置が達成できましたが、もし簡単なことで、当該テーブルを縦方向に対しても中央配置ができるのであれば 教えてくださいませんか? margin-top: auto; と margin-bottom: auto; でできちゃったりするのでしょうか? (やってみたら そうは見えなかったのですが)
saya24

2019/03/25 05:42

新たな問題が発生しました、引き続きご教示を頂けたら幸いです。 左右の中央配置が出来た!!と述べましたのは、実は当方の開発端末(OS:Windows7)での話しでした。VisualStudio2012でデバッグモードで実行していたとき(IISExpress?)は、フォーム上のテーブルは真ん中に表示されていたのですが いざこのWebフォームをWindowsServer2008R2上のサイトへアップロードして置き換えたところ、真ん中に表示されないのです。 IISの再起動とか必要なのでしょうか? (ちなみに縦位置の中央表示は諦めました...)
退会済みユーザー

退会済みユーザー

2019/03/25 06:21

サーバーから送信されてくる html と css が同じならサーバーは関係なくてクライアント(ブラウザ)側の問題なので、同じかどうか調べてください。css を外部ファイルにしていると、ブラウザにキャッシュされるので注意。
saya24

2019/03/25 10:36

ご見解をありがとうございます。ご教示を頂きましたTABLEへのmargin-right: auto; margin-left: auto;のスタイルはWebフォームのHTMLに直接追記して反映させました。 外部ファイルのCSSを適用しているWebフォームであるといえばあるのですが、先のスタイルの記述を打ち消してしまうようなことはないのかな、と考えています。 いずれにしてもVSのデバッグモードで表示させた当該Webフォームと、サーバにアップしてから表示させた当該Webフォームについて、仰られるようにHTMLを比較してみました。 同じ端末のブラウザ(IE)の開発者ツールを利用しての比較ですが...なぜか本文に表したようにレイアウトで双方のテーブルが異なった定義をしています。これがデバッグモード時とサーバにアップされた画面でイメージが異なる原因でしょうか? こうなってしまう要因は 何が考えられるのでしょうか???
退会済みユーザー

退会済みユーザー

2019/03/25 12:08

自分はエスパーではないのでそれだけの情報では分かりません。レイアウトではなくてスタイルを見て比較してみては?
saya24

2019/03/26 01:54 編集

ブラウザ(IE11)の開発ツール右端のスタイルタグを見て、デバッグモード実行時とサーバ上で実行時の当該Webページの仕上がり具合を比較したところ、やはり違いはありませんでした。 ただ...同開発ツール右上にドキュメントモードを切替えられる部分があって、この設定が双方で異なった表示をしていることに気が付きました。同じ端末でも、デバッグモード実行時と、サーバ上での実行時で こちらが異なった設定になってしまうのは VS2012の設定が要因でしょうか? ただ、希望はデバッグモード時で達成されている表示ですね。デバッグモード実行時ではドキュメントモードが「edge」で表示され、サーバでの実行時は「5」という表示になっています。 (HTMLのHEADタグ内に直接<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=EDGE" />とか書けばよいのだろうか) そもそも もう別の問合せとして掲載すべきでしょうか
退会済みユーザー

退会済みユーザー

2019/03/26 02:14

> 同開発ツール右上にドキュメントモードを切替えられる部分があって、この設定が双方で異なった表示をしていることに気が付きました。 原因はそれですね。サーバ上での実行時には IE が互換モードで動いているのだと思います。 デバッグモード実行時でも、F12 開発者ツールのエミュレーションでドキュメントモードを 5 に設定すると問題を再現できると思いますので確認してみてください。 meta タグ (X-UA-Compatible) で互換モードになるような設定をしてなければ、ブラウザの互換表示設定で[イントラネットサイトを互換表示で表示する]にチェックが入っているからではないかと思われます。 meta タグ (X-UA-Compatible) を付与して content="IE=edge" を指定することをお勧めします。ブラウザの互換表示設定よりそちらが優先されるはずです。詳しくは以下の記事を見てください。 IE の互換表示設定と meta タグ http://surferonwww.info/BlogEngine/post/2015/02/24/meta-tag-setting-in-page-overrides-ie-legacy-document-mode-setting.aspx
saya24

2019/03/26 02:29

ご支援をありがとうございました。今回もいい勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問