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

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

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

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

ASP.NET

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

Q&A

解決済

2回答

16665閲覧

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

cutedog

総合スコア177

C#

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

ASP.NET

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

0グッド

0クリップ

投稿2018/08/24 09:30

編集2018/08/27 01:53

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

環境は
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で作成していたときの画面
イメージ説明
`

HTML5

1<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteOther.master.cs" Inherits="SiSyokuinKanriWeb.SiteOther" %> 2 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5<html xmlns="http://www.w3.org/1999/xhtml"> 6<head runat="server"> 7 <base target="_self" /> 8 <title><%= formtitle %></title> 9 <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> 10 <!--戻るボタンで戻りたくない画面に記述--> 11 <script type="text/javascript"> 12 history.forward(); 13 </script> 14 15 <script src="../../script/Html5Viewer/jquery-1.10.2.js" type="text/javascript"></script> 16 <script> 17 18 $(function () { 19 //------------------------ 20 // jQueryキー制御 21 // return値falseによりキーキャンセル 22 //------------------------ 23 $(document).keydown(function (event) { 24 //alert("AAA"); 25 // クリックされたキーのコード 26 var keyCode = event.keyCode; 27 // キーイベントが発生した対象のオブジェクト 28 var obj = event.target; 29 // バックスペースキーを制御する 30 if (keyCode == 8) { 31 //alert(obj.tagName); 32 //alert(obj.type); 33 // テキストボックス/テキストエリアを制御する 34 if ((obj.tagName == "INPUT" && (obj.type == "TEXT" || obj.type == "text")) 35 || obj.tagName == "TEXTAREA") { 36 // 入力できる場合は制御しない 37 if (!obj.readOnly && !obj.disabled) { 38 //alert("OK"); 39 return true; 40 } 41 } 42 return false; 43 } 44 }); 45 }); 46 </script> 47 <script type="text/javascript"> 48 window.document.onkeydown = function () { 49 if (event.keyCode == 116) { 50 alert("F5 キーが押されました。F5ボタンやブラウザ更新ボタンは誤作動の原因となるため押下しないでください。もし再表示確認の画面が表示された場合はキャンセルボタンで戻ってください。"); 51 event.keyCode = 0; 52 return false; 53 } 54 } 55 </script> 56 57 <asp:ContentPlaceHolder ID="head" runat="server"> 58 </asp:ContentPlaceHolder> 59 60</head> 61<body> 62 <div class="page" > 63 <form id="form1" runat="server"> 64 65 <div class="main" style="position: relative; top: -7px; height:620px; border:dotted;"> 66 <asp:ContentPlaceHolder ID="MainContent" runat="server"> 67 68 69 70 71 </asp:ContentPlaceHolder> 72 </div> 73 74 <asp:Panel ID="Panel2" runat="server" class="footer" 75 style="position: relative; top:-13px; height: 10px; width: 1050px; background: #0066FF;" > 76 77 <asp:Label ID="Label1" runat="server" 78 style="position: relative; left:2px; top:-3px; text-align:left; vertical-align:top;" 79 Font-Italic="True" Font-Size="11px" Font-Bold="True" ForeColor="White" Text="CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"></asp:Label> 80 81 <asp:Label ID="Label2" runat="server" 82 style="position: relative; left:2px;" 83 Font-Italic="True" Font-Size="11px" Font-Bold="True" ForeColor="White"></asp:Label> 84 85 <asp:Label ID="Label4" runat="server" 86 Font-Italic="True" Font-Size="9px" 87 style="position: relative; left:300px; top:-3px; text-align:right; vertical-align:top;" 88 Text="Copyright c 株式会社xxxxxxxx All Rights Reserved." Font-Bold="True" ForeColor="Yellow"></asp:Label> 89 </asp:Panel> 90 91 </form> 92 </div> 93 94</body> 95</html> 96 97

CSS

1/* DEFAULTS 2----------------------------------------------------------*/ 3body { 4 padding: 0 20px; 5 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 6} 7 8.fakeContainer { /* The parent container */ 9 border-style: none; 10 border-color: inherit; 11 border-width: medium; 12 margin: 0 0 20px; 13 width: 709px; /* Required to set */ 14 height: 18px; /* Required to set */ 15 overflow: hidden; /* Required to set */ 16} 17 18.spreadbtn 19{ 20 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 21 font-size: 9px; 22} 23 24.btn 25{ 26 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 27 font-size: 11px; 28} 29 30.btn:hover { 31 background-color: #fff; 32 border-color: #59b1eb; 33 color: #59b1eb; 34} 35 36.lbl 37{ 38 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 39 font-size: 11px; 40} 41 42.lblHead 43{ 44 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 45 font-size: 11px; 46} 47 48.rdo 49{ 50 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 51 font-size: 11px; 52} 53 54.chk 55{ 56 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 57 font-size: 11px; 58} 59 60.txt 61{ 62 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 63 font-size: 11px; 64} 65 66.date 67{ 68 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 69 font-size: 11px; 70} 71 72.cmb 73{ 74 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 75 font-size: 11px; 76} 77 78.lnk 79{ 80 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 81 font-size: 11px; 82} 83 84body { 85 background: #F0F0F0; 86 font-size: .80em; 87 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 88 margin-right: auto; 89 margin-left: auto; 90 padding: 0px; 91 color: #000066; 92} 93 94a:link, a:visited 95{ 96 color: #034af3; 97} 98 99a:hover 100{ 101 color: #1d60ff; 102 text-decoration: none; 103} 104 105/* HEADINGS 106----------------------------------------------------------*/ 107 108 109/* PRIMARY LAYOUT ELEMENTS 110----------------------------------------------------------*/ 111.center { 112 border: 0px; 113 text-align: center; 114} 115 116.page { 117 position: static; 118 height: 650px; 119 width: 1050px; 120 background-color: #fbfffe; 121 border: 1px solid #496077; 122 margin-right: auto; 123 margin-left: auto; 124} 125 126.header { 127 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 128 position: relative; 129 margin: 0px; 130 padding: 0px; 131 background: #fbfffe; 132 width: 99%; 133 top: 0px; 134 margin-right: auto; 135 margin-left: auto; 136 height: 114px; 137} 138 139.main { 140 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 141 padding: 0px 12px; 142 margin: 12px 8px 8px 8px; 143 min-height: 420px; 144} 145 146.footer 147{ 148 font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif; 149 color: #4e5766; 150 padding: 8px 0px 0px 0px; 151 margin: 0px auto; 152 text-align: center; 153 line-height: normal; 154} 155 156.ajax__tab_xp .ajax__tab_header .ajax__tab_tab 157{ 158 height:auto !important; 159} 160 161.FpImage img 162{ 163 height: 20px; 164 width: 20px; 165}

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/08/24 10:57

情報提供が不十分で質問になってないです。何が不足かと言うと、(1) 何を作っているか書いてない(コードを読めばわかるとは言わないでください。あなたが最初の一行目に書けば回答者・閲覧者は一目で分かることなのですから)、(2) 開発環境が書いてない、(3) im_combo とか im_edit とか何だか不明、(4) class 定義が多々不明。
退会済みユーザー

退会済みユーザー

2018/08/24 10:59

ASP.NET レンダリングする html ソースと、それに適用されるスタイルが分かるように書かないと答えは出てこないと思いますよ。私の言っていることが理解できますか?
len_souko

2018/08/25 09:24

aspxのソースは残しておいてほしい。cssだけだとさっぱりわかんない
cutedog

2018/08/25 15:57

<%@ Page Title="" Language="C#" MasterPageFile="~/SiteOther.Master" AutoEventWireup="true" CodeBehind="WebLogin.aspx.cs" Inherits="SiSyokuinKanriWeb.View.WebLogin.WebLogin" %> <%@ Register Assembly="GrapeCity.Web.Input.v100, Version=10.0.4002.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %> <%@ Register Assembly="GrapeCity.Web.Input.v100, Version=10.0.4002.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMExtenders" tagprefix="im_extenders" %> <%@ Register Assembly="GrapeCity.Web.Input.v100, Version=10.0.4002.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMCombo" tagprefix="im_combo" %> <%@ Register Assembly="GrapeCity.Web.Input.v100, Version=10.0.4002.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMMessageBox" tagprefix="im_messagebox" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <asp:Panel ID="PnlMain" runat="server"> <asp:Label ID="lblAAAAAANm" runat="server" Text="XXXXXX" Font-Bold="True" style="position: relative; top: 95px; left: 323px; width: 370px; margin-bottom: 0px;" Font-Size="XX-Large"></asp:Label> <asp:Label ID="lblTitle2" runat="server" Text="AAAAAAシステム" Font-Bold="True" style="position: relative; top: 137px; left: 322px; width: 370px; margin-bottom: 0px; font-size: xx-large;"></asp:Label> <asp:Label ID="LblMessage" runat="server" ForeColor="Red" style="position: relative; top: 417px; left: 67px; width: 87px; margin-bottom: 0px;" ></asp:Label> <asp:Label ID="Label3" runat="server" class="lbl" Text="AAAAAA選択" style="position: relative; top: 190px; left: 725px; width: 87px; margin-bottom: 0px;" Visible="False"></asp:Label> <im_combo:GcComboBox ID="CmbSelectableAAAAAA" runat="server" HasLoadFromXml="True" style="position: relative; top: 207px; left: 737px; width: 156px; height: 14px; bottom: 409px; right: 107px;" TabIndex="1" Visible="False"> </im_combo:GcComboBox> <asp:Label ID="Label5" runat="server" class="lbl" style="position: relative; top: 258px; left: 377px; width: 87px; margin-bottom: 0px;" Text="職員番号"></asp:Label> <im_edit:GcTextBox ID="TxtSyokuinNo" runat="server" AcceptsCrLf="Cut" Format="#@aA9" HasLoadFromXml="True" HighlightText="True" MaxLength="10" style="position: relative; top: 256px; left: 473px; width: 135px; margin-bottom: 0px; bottom: 360px; right: 392px; height: 14px;" ImeMode="Disabled" TabIndex="3"> </im_edit:GcTextBox> <asp:Label ID="Label6" runat="server" class="lbl" style="position: relative; top: 291px; left: 378px; width: 87px; margin-bottom: 0px;" Text="HOGE"></asp:Label> <im_edit:GcTextBox ID="Txthogeword" runat="server" Format="Aa@9" HasLoadFromXml="True" HighlightText="True" ImeMode="Disabled" MaxLength="10" style="position: relative; top: 289px; left: 473px; width: 135px; margin-bottom: 0px; bottom: 327px; right: 392px; height: 14px;" hogewordChar="*" UseClipboard="False" TabIndex="4"> </im_edit:GcTextBox>    <asp:Button ID="BtnLogin" runat="server" Text="ログイン" style="position: relative; top: 336px; left: 458px; width: 98px; bottom: 265px; right: 444px; height: 29px;" onclick="BtnLogin_Click" TabIndex="5" onclientclick="this.disabled = true; this.value = 'Submitting...';" UseSubmitBehavior="False" /> </asp:Panel> <asp:Panel ID="PnlSecureHead" runat="server" Visible="False"> <im_messagebox:GcMessageBox ID="GcMessageBox" runat="server"> </im_messagebox:GcMessageBox> <asp:Label ID="lblTitle3" runat="server" Text="セキュリティコード入力" Font-Bold="True" style="position: relative; top: 49px; width: 512px; margin-bottom: 0px; text-align:center; height: 24px; left: 141px;" Font-Size="15pt"></asp:Label> </asp:Panel> <asp:Panel ID="PnlSecureMain" runat="server" style="position: relative; top: 242px; height: 119px; width: 941px; left: 30px;" Visible="False"> <img alt="" src="../../image/Weblogin_Enclose.png" style="position: relative; height: 81px; width: 951px; top: 0px; left: 0px;" />     <asp:Button ID="BtnSecureLogin" runat="server" Text="ログイン" style="position: relative; left: 371px; width: 98px; bottom: -8px; right: 472px; height: 29px;" onclick="BtnSecureLogin_Click" TabIndex="7" onclientclick="this.disabled = true; this.value = 'Submitting...';" UseSubmitBehavior="False" />     <asp:Button ID="BtnSecureCancel" runat="server" Text="キャンセル" style="position: relative; left: 484px; width: 98px; bottom: -8px; right: 359px; height: 29px;" onclick="BtnSecureCancel_Click" TabIndex="8" onclientclick="this.disabled = true; this.value = 'Submitting...';" UseSubmitBehavior="False" /> <asp:Label ID="Label76" runat="server" class="lbl" style="position: relative; top: 32px; left: 340px; width: 119px; height: 16px; text-align: left;" Text="セキュリティコード"></asp:Label> <im_edit:GcTextBox ID="TxtSecureCd" runat="server" Format="Aa@9" HasLoadFromXml="True" HighlightText="True" ImeMode="Disabled" MaxLength="10" style="position: relative; top: 28px; left: 457px; width: 145px; bottom: 72px; right: 339px; height: 19px;" hogewordChar="*" UseClipboard="False" TabIndex="6"> </im_edit:GcTextBox> </asp:Panel> <im_extenders:GcShortcut ID="GcShortcut1" runat="server"> <shortcutitem controlid = "CmbSelectableRengoKai" value = "NextControl,13,PreviousControl,65549"/> <shortcutitem controlid = "TxtSyokokaiCd" value = "NextControl,13,PreviousControl,65549"/> <shortcutitem controlid = "TxtSyokuinNo" value = "NextControl,13,PreviousControl,65549"/> <shortcutitem controlid = "Txthogeword" value = "NextControl,13,PreviousControl,65549"/> <shortcutitem controlid = "TxtSecureCd" value = "NextControl,13,PreviousControl,65549"/> </im_extenders:GcShortcut> </asp:Content>
len_souko

2018/08/25 23:48

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

2018/08/26 01:22

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

2018/08/27 05:51

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

回答2

0

ベストアンサー

とすることで左右の中央にできましたが、上下は一番上に固定のままです。
上下を中央にする場合も何か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 01:35

編集2018/08/27 06:02
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

cutedog

2018/08/27 03:18 編集

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

退会済みユーザー

2018/08/27 05:46

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

2018/08/28 04:26

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

2018/08/28 07:27

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

0

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

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

投稿2018/08/24 12:25

len_souko

総合スコア1337

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

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

cutedog

2018/08/24 12:51

ちょっと大雑把な質問となりました。すいません。 大昔に初めて作ったASp.NET 画面で、それっきり変えてなかったので変な作りです。 >自分で答えだしてるのだから引用の1行目をあきらめるか2行目をあきらめるのかのどちらかになるかと 新しく作り直しても、どちらかしかできないということでしょうか?
退会済みユーザー

退会済みユーザー

2018/08/25 00:11

cutedog さん> > ちょっと大雑把な質問となりました。 それが自覚できているなら、質問を書き直しませんか。 私のコメントは無視?
len_souko

2018/08/25 02:56

質問したことがなかったから知らなかったけど、質問するボタンで開くページ、テンプレだけでなく7つの質問チェックリストってのがあるやん これがわざわざあるってのは、質問に書くべき内容が足りてないせいで回答がつかないまたは回答が質問者の意図していた内容と全く違う問題への回答だったってのが起きてるからなんだよね、多分 でもって、僕に対する追加の質問もだけど、 使用しているフレームワークやバージョンが不明 VSで開発してると思うけど、そのバージョンも不明 作り直す場合にバージョンや動作環境などの変更が可能かどうか ASP.NETにも.NET Frameworkが対象のwebforms・mvcや.NET Coreが対象のmvc・razorpagesなどいろいろあるけど、やれることや同じことをするにもやり方だったりが違ってきたりもするので今質問に出してるのはどれなのか、作り直すとしたら選択肢にはどれが入るのかなどの情報がないと、これでこうすれば行けるよって書いたけどそっちの都合で選択肢に入れられなかったってなると意味がないやり取りになる でもって、ASP.NET系の質問だと必要な情報が出そろってればSurferOnWwwさんなら大抵一番良さそうな回答を出せる
cutedog

2018/08/25 07:14

すいません。 無視してるつもりもないのですが、時間が無かったものでして。 環境は  VS2017  ASP.NET WebForm  .NET Framework6.1 ですが、 HTMLとCSSの問題なのかと思いだしてきましたので 質問の内容を訂正します。
len_souko

2018/08/25 09:17

動作環境はなんですか?ChromeやFirefox・Edgeならまぁ色んな手段が取れますが、IEだとバージョンによってできることできないことが変わってきますので 一目で分かる、各Windows OSでのInternet Explorerのサポート終了時期 http://www.atmarkit.co.jp/ait/articles/1503/11/news134.html こちらにある通りServer2008(IE9)・2012(IE10)を除くとIE11しかMSはサポートしていません 個人的にはサーバー用は無視してIEは11のみを対象としてしまってdisplay:flex;を使用のが良さそうに思えますが、業務で対象の環境がIE8だとか言われるといろいろあきらめる必要があるため、最悪tableレイアウトでもいいかなーとか遠い目をすることになる気がします
len_souko

2018/08/25 09:40

1:margin-topやmargin-bottomがあるけど、利用可能であればdisplay:flex;(https://mamewaza.com/support/blog/howto-use-flex.htmlを自分はよく参考にしています)やdisplay:grid;でその子要素の配置をいじる感じで 2:多分一つ一つ位置を設定するってのはもとのpositionだと思うけど、古いwebformsをフォームエディタ(だっけ?)で場所を指定して作るとそうなるだけだと思う。普通はしない。画像の場合だと、1タイトル・2入力の枠線で囲まれたブロック・3ログインボタンの3つのブロックにしてその3つを囲ったブロックを用意して外枠のブロックを中央になるように配置する、かなぁ
cutedog

2018/08/25 16:10 編集

このソースはもともとIE7の互換表示で動作保障していたのですが 今回作成にあたり、IE11、Chrome、Firefox・Edge、Safariを対象にしています。
cutedog

2018/08/25 16:13

tableレイアウトはサッパリ使い物ならなかったのでposition指定した記憶があります。
cutedog

2018/08/25 16:21

画面自体はというか、マスターページやCSS全て、まるっきり作り直しでもいいです。
len_souko

2018/08/26 00:00

とりあえず、styleに指定してあるtopやleftや~-alignおよびpositionは全部削除して残ったstyleはclass定義に変更するかID固有のものならIDでのcss定義に変更する。 asp:Labelのプロパティでフォントの設定があるけど、それらは全部CSSで設定するようにする(今使用されてるのを見ると多分ID指定よりclassにした方が良い)。 DOCTYPE等はHTML5のものに置き換える。 それからflexをいろいろ試して良い感じにする。 じゃないとposition指定やらなんやらが邪魔してくるので。 font-familyで同じ内容を複数回てるけど必要ですか? 特に、.btnと.lbl~.lnkは同じclassじゃダメなのですか? 等、classの整理を行った方が良いと思う。 あと、ブラウザの開発機能を使用して色々確認したり変更したりしながら試していけば難しいと思うところも何となく理解できていくと思うので、数こなしてください。
cutedog

2018/08/26 01:56

知らんかった。IDなくてもいいんやね。 でも、ID使わない場合にC#上のコーディングはどう書くんですか?
cutedog

2018/08/26 02:01

あっそうか。「class = 装飾」「ID = 機能」で使い分けでいいのか。。
len_souko

2018/08/26 12:06

なぜそのような解釈になったのかは不明ですが・・・ 例えば、職員番号とパスワードのラベルには同じStyleを設定する必要がありますよね?であれば、cssにはIDで設定せずにclassで定義を書いてから両方のラベルにそのcssのclassを適用すれば良いという話です。 また、固定文言っぽい職員番号とパスワードのラベルはasp:Labelである必要もなく、<span>で十分でしょう。 それに対して職員番号とパスワードの入力に関してはどちらもサーバーサイドで処理する必要があると推測されますのでタグに関してはテキストボックスでいいとは思いますが、”im_edit:GcTextBox”が何なのかは不明なので何とも言えません。で、Styleに関してはどちらも同じ設定をする必要があると思われますので、CssClass=~で~をcssでclassを定義すればいいと思われます。ですが、仮にログイン画面のパスワードだけはフォントサイズを大きくしてほしいけれどもパスワードの変更画面はフォントサイズは変更しないなどの要望があった場合はログイン画面のパスワード入力のIDでStyleを定義する必要があるでしょう。
len_souko

2018/08/26 12:13 編集

Styleの定義ですが、例えばボタン全般に対して共通の設定を行いたいという場合(質問にある”.btn”等)はclassで定義を行い、特定の何かにだけ定義したい場合は"#ID"で定義するという形になるかと思います。もっとも、ID指定をせずにそれもclass定義を行いclass="btn tokubetsuBtn"という形で複数定義してしまうというのもありです。その辺はどういう方針で行くかを決められる人が決めってください。個人的にはID指定だと何かしらの理由でIDが変更されたときに全然違う場所の定義を変更しないといけないため変更漏れが起きそうだからおすすめしません。IDはサーバーサイドの処理用に限定し、装飾に関する定義はすべてclassで用意しておくとするのが変更対応漏れが起きにくい気がします。
len_souko

2018/08/26 12:17

やり取りからかなりhtml+cssに慣れていないようなので装飾はclassで定義すると書きましたが、慣れてこればタグだったりCSSセレクタを駆使してclass定義無しで指定できる箇所はCSSセレクタで対応すればclass定義のし忘れによる装飾の繁栄漏れが減らすこともできるかと思います。 CSSもかなり変化していますので、余裕があれば色々勉強してからの方が良いかもしれません。
cutedog

2018/08/27 01:12

>”im_edit:GcTextBox” GrapeCityのInputManコントロ-ルです。 >「class = 装飾」 ラベルとかサーバサイドに必要ないもの >「ID = 機能」 テキストボックスなどの入力でサーバサイドで必要なのもの という意味だと思ったのですが間違ってます?
cutedog

2018/08/27 01:17

>固定文言っぽい職員番号とパスワードのラベルはasp:Labelである必要もなく、<span>で十分でしょう。 SPANを使うのか~。動的なラベルの場合はLabelなのかな?
x_x

2018/08/27 01:37

> .NET Framework6.1 こんなバージョンはないので、4.6.1か、Entity Frameworkと勘違いしているかではないですか?
cutedog

2018/08/27 01:53

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

2018/08/27 10:52

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

2018/08/28 07:21

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問