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

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

ただいまの
回答率

90.40%

  • C#

    9462questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET

    635questions

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

ASP.NETの画面デザインの書き方について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,122

cutedog

score 163

※質問の内容を変えています。

環境は
VS2017
ASP.NET WebForm
.NET Framework4.6.1
GrapeCity.Web.Input.v100

下記のような画面を作っていますが
Styleのpositionをabsoluteで作成しているため常に固定位置となっています。

⇒少し、調べたところ、positionにはrelativeというものがあり
これは相関位置指定できるものとわかりました。

1.画面を常にブラウザの中央に表示したい
⇒positionをrelativeに変更して
margin-right: auto;
margin-left: auto;
とすることで左右の中央にできましたが、上下は一番上に固定のままです。
上下を中央にする場合も何かmargin-right、margin-leftのようなものがあるのでしょうか?

2.現在、テキストやラベルの設置位置や高さ、幅などの設定をベタ書きしてますが
一般的に設置する際に設置位置や高さ、幅などの設定は
CSSで各テキストやラベル毎に設定を行うものなのでしょうか?

★ソースUPするときに個人情報やらパスワード云々であげれなかったので
パスワードとかPAsswordとかのキーワードをHOGEとかに変えてます。
★どうしても最後のソースがUPできなかったので
試しに回答へ貼り付けたらUP成功しました

以上、よろしくお願いします。

※Styleのpositionをabsoluteで作成していたときの画面
イメージ説明
`

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteOther.master.cs" Inherits="SiSyokuinKanriWeb.SiteOther" %>

<!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 runat="server">
    <base target="_self" />
    <title><%= formtitle %></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <!--戻るボタンで戻りたくない画面に記述-->
    <script type="text/javascript">
        history.forward();
    </script>

    <script src="../../script/Html5Viewer/jquery-1.10.2.js" type="text/javascript"></script>
    <script>

        $(function () {
            //------------------------
            // jQueryキー制御
            // return値falseによりキーキャンセル
            //------------------------
            $(document).keydown(function (event) {
                //alert("AAA");
                // クリックされたキーのコード
                var keyCode = event.keyCode;
                // キーイベントが発生した対象のオブジェクト
                var obj = event.target;
                // バックスペースキーを制御する
                if (keyCode == 8) {
                    //alert(obj.tagName);
                    //alert(obj.type);
                    // テキストボックス/テキストエリアを制御する
                    if ((obj.tagName == "INPUT" && (obj.type == "TEXT" || obj.type == "text"))
                        || obj.tagName == "TEXTAREA") {
                        // 入力できる場合は制御しない
                        if (!obj.readOnly && !obj.disabled) {
                            //alert("OK");
                            return true;
                        }
                    }
                    return false;
                }
            });
        });
    </script>
    <script type="text/javascript">
        window.document.onkeydown = function () {
            if (event.keyCode == 116) {
                alert("F5 キーが押されました。F5ボタンやブラウザ更新ボタンは誤作動の原因となるため押下しないでください。もし再表示確認の画面が表示された場合はキャンセルボタンで戻ってください。");
                event.keyCode = 0;
                return false;
            }
        }
    </script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

</head>
<body>
    <div class="page" >
        <form id="form1" runat="server">

            <div class="main" style="position: relative; top: -7px; height:620px; border:dotted;">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">




                </asp:ContentPlaceHolder>
            </div>

            <asp:Panel ID="Panel2" runat="server" class="footer" 
                style="position: relative; top:-13px; height: 10px; width: 1050px;  background: #0066FF;" >

                <asp:Label ID="Label1" runat="server"  
                    style="position: relative; left:2px; top:-3px; text-align:left; vertical-align:top;"
                    Font-Italic="True" Font-Size="11px" Font-Bold="True" ForeColor="White"   Text="CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"></asp:Label>

                <asp:Label ID="Label2" runat="server" 
                    style="position: relative; left:2px;"
                    Font-Italic="True" Font-Size="11px" Font-Bold="True" ForeColor="White"></asp:Label>

                <asp:Label ID="Label4" runat="server" 
                    Font-Italic="True" Font-Size="9px" 
                    style="position: relative; left:300px; top:-3px; text-align:right; vertical-align:top;"
                    Text="Copyright c 株式会社xxxxxxxx All Rights Reserved." Font-Bold="True" ForeColor="Yellow"></asp:Label>
            </asp:Panel>

        </form>
    </div>

</body>
</html>
/* DEFAULTS
----------------------------------------------------------*/
body {
   padding: 0 20px;
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
}

.fakeContainer { /* The parent container */
    border-style: none;
    border-color: inherit;
    border-width: medium;
    margin: 0 0 20px;
    width: 709px; /* Required to set */
    height: 18px; /* Required to set */
    overflow: hidden; /* Required to set */
}

.spreadbtn
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    font-size: 9px;
}

.btn
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    font-size: 11px;
}

.btn:hover {
    background-color: #fff;
    border-color: #59b1eb;
    color: #59b1eb;
}

.lbl
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    font-size: 11px;
}

.lblHead
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    font-size: 11px;
}

.rdo
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    font-size: 11px;
}

.chk
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    font-size: 11px;
}

.txt
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    font-size: 11px;
}

.date
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    font-size: 11px;
}

.cmb
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    font-size: 11px;
}

.lnk
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    font-size: 11px;
}

body {
    background: #F0F0F0;
    font-size: .80em;
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
    color: #000066;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

/* HEADINGS   
----------------------------------------------------------*/


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/
.center {
    border: 0px;
    text-align: center;
}

.page {
    position: static;
    height: 650px;
    width: 1050px;
    background-color: #fbfffe;
    border: 1px solid #496077;
    margin-right: auto;
    margin-left: auto;
}

.header {
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #fbfffe;
    width: 99%;
    top: 0px;
    margin-right: auto;
    margin-left: auto;
    height: 114px;
}

.main {
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.footer
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}

.ajax__tab_xp .ajax__tab_header .ajax__tab_tab
{
    height:auto !important;
}

.FpImage img
{
    height: 20px;
    width: 20px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • len_souko

    2018/08/26 08:48

    ↑見づらいし場所取りすぎなので質問本文の方に書いてもらえませんか?コードの言語にaspxはないと思うのでhtmlにしてみるとかの妥協は必要かと思いますが

    キャンセル

  • cutedog

    2018/08/26 10:22

    理由はわからないですが貼り付けられなかったからココなんですよ。

    キャンセル

  • yukihisa

    2018/08/27 14:51

    理由は10000文字制限に引っかかったからかと思います。その場合は補足情報として回答に追加するなど適宜対応をしてください。

    キャンセル

回答 2

checkベストアンサー

+1

とすることで左右の中央にできましたが、上下は一番上に固定のままです。
上下を中央にする場合も何かmargin-right、margin-leftのようなものがあるのでしょうか?

普通のページで「上下を中央」ということはなさそうに思うのですが、どういう場面なのでしょう?

例えば、ユーザーがログインボタンをクリックした際、ID とパスワード入力用のテキストボックスとログインボタンを配置したダイアログ的なものを画面の中央にポップアップ表示したいということですか?

もしそうであれば、自力で書くより巷で提供されている jQuery UI のダイアログ、Bootstrap の Modal などのプラグインなどを使うことをお勧めします。

Dialog
http://jqueryui.com/dialog/

Modals modal.js
https://getbootstrap.com/docs/3.3/javascript/#modals

ASP.NET Web Forms アプリなら ModalPopup も選択肢に入ると思います。

ModalPopup Demonstration
https://ajaxcontroltoolkit.devexpress.com/ModalPopup/ModalPopup.aspx

【追記】

下の 2018/08/27 14:46 の私のコメントで「<div class="page"> を真ん中に持ってくるので良ければ CSS でできると思います。回答欄にサンプルを追記しておきます」と書きましたが、それを以下に書きます。

これがこのまま質問者さんのケースに適用できるかまでは調べてませんが、直接は適用できなくても、応用でやりたいことは実現可能かと思います。

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="0049-Centering.aspx.cs" Inherits="_0049_Centering" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            background: #555;
        }

        .content {
            background: white;
            width:500px;
            height:300px;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-250px;
            margin-top:-150px;
            overflow:scroll;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="content">
            <h1>This page is horizontally / vaerically centered on 
                screens that are wider than 500 / 300 pixels.</h1>
            <h2>Resize the browser window to see the effect.</h2>
            <p>An absolutely positioned element is an element whose computed position value is absolute or fixed. 
                The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. 
                (The containing block is the ancestor relative to which the element is positioned.) 
                If the element has margins, they are added to the offset.</p>
        </div>
    </form>
</body>
</html>


結果は以下の通り。ブラウザは Chrome 68.0.3440.106 です。

イメージ説明

css の position の説明については以下の記事を見てください。

position
https://developer.mozilla.org/en-US/docs/Web/CSS/position

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/27 12:18 編集

    ダイアログでなく普通のページでやりたいのです。
    現在、class="page"にmargin-right、margin-left指定して左右が中央寄りとなっていますので、あとは上下を中央寄りにしたいと思ってましたが
    len_soukoさんのアドバイスの<ul>を使ってできないかをやっているところです。

    -----------------------------------------------
    <div class="page">
    <form id="form1" runat="server">

    </form>
    </div>

    キャンセル

  • 2018/08/27 14:46

    <div class="page"> を真ん中に持ってくるので良ければ CSS でできると思います。回答欄にサンプルを追記しておきます。ただし、それがそのまま質問者さんのケースに適用できるかまでは調べてませんが・・・

    キャンセル

  • 2018/08/28 13:26

    ありがとうございます。試してみます。

    キャンセル

  • 2018/08/28 16:27

    ありがとうございます。期待通りの結果を得ることができました。

    キャンセル

+1

今わかる情報からだと「あきらめましょう」としか言えません。
なんでclassで付けてるのにstyleべた書きしまくってるのかという意味不明な方針だし、
>しかし全てposition: absoluteで固定化しているため位置は変わりません。
>画面自体を常にブラウザの真ん中に表示したい
自分で答えだしてるのだから引用の1行目をあきらめるか2行目をあきらめるのかのどちらかになるかと
SurferOnWwwさんの指摘にある通り情報が少なくこれ以上はあなたが持っていてこちらに提供してこない理由でどうすべきかの判断をつけることになると思うため、これ以上こちらからは何も言うことができない状態にあります

見ればなんとなくわかるものもあるけど、謎技術で全然違うものをそれっぽく再現しているだけかもしれないので質問の際にはフレームワークやらなんやらいろいろ情報を出してください

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/27 10:53

    あっ、すいません。「4.」が抜けちゃってます。

    キャンセル

  • 2018/08/27 19:52

    classはcssのスタイルなどで使用します(javascriptからもclassを指定して取得できます)
    idは、クライアントサイドにおいてはスタイルだけでなくいろいろなことに使用できます
    また、クライアント=>サーバーへのformのsubmitなどにも利用されます
    そして、asp.net webformsに於いてはrunat="server"と指定すればサーバーサイドの処理で操作する際に利用できます
    逆に言うと、サーバーサイドで処理しないのならrunat="server"を指定する必要はありません
    で、今回の質問に関してはサーバーサイドの処理とは全く関係がないため、クライアントサイドの話を書いてありますただ、サーバーサイドでの処理が不要なのにasp:Labelがあるとhtmlの属性によるclass=""がCssClass=""となって混乱しやすいかと思い、また属性やプロパティの関係でまだhtml+cssに不慣れな質問者さんには余計にややこしくなっているかと推測しました。
    もしも今回の質問内容が時間に余裕のないお仕事のプロジェクトでないのであれば、htmlとcssの入門書や入門サイトを一通り基礎を飛ばさずに読んでからの方が良いかと思われます。今ここで丸コピーできるソースを提示してもらっても次に別の事をしようとするたびに解決できないままになるかと思いますので。

    キャンセル

  • 2018/08/28 16:21

    len_soukoさん、アドバイスありがとうございました。
    CSSについて色々と良いこと聞かせて頂きました。
    画面の中央寄りに関しては、SurferOnWwwさんからのサンプルを改良することで
    期待した結果を得られました。
    これから作成するにあたってCSSに関してはアドバイスを参考にさせて頂きます。

    キャンセル

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

  • ただいまの回答率 90.40%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • C#

    9462questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET

    635questions

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