web上に、追加の文章を書く

ASP.NET CSS メディアクエリー
タグの編集
返答する
投稿者 kojiro  (社会人) 投稿日時 2020/7/3 10:23:30
リストボックスには、印刷の際には、収まりきらない文章を書く必要があり、困っております。
以下のように、しましたが、１行しか書けません。
Dim js As String = "XXXXXXX1"
Me.ClientScript.RegisterStartupScript(Me.GetType, "Text", js)   
js = "XXXXXXXXXX2"
Me.ClientScript.RegisterStartupScript(Me.GetType, "Text", js)   
0
管理
投稿者 魔界の仮面弁士  (社会人) 投稿日時 2020/7/3 12:07:32
> 印刷の際には、収まりきらない文章を書く必要があり、困っております。
スタイルシートに media を明示して、
画面表示用は高さ固定のスクロール表示としておき、
印刷用には高さ可変でスクロール無しにしておくのは如何でしょう。
https://webtan.impress.co.jp/e/2015/07/28/20508
0
管理
投稿者 kojiro  (社会人) 投稿日時 2020/7/3 13:44:47
ソースコードへの記述かと、存じます。
HTML上で、<style>要素にmedia="print"を指定してスタイル定義を記述する。
＜style type="text/css" media="print">
  印刷用CSSの定義を指定する
＜style>
のようですが、
画面表示用は高さ固定のスクロール表示としておき、
印刷用には高さ可変でスクロール無しにしておくのは如何でしょう。
については、どのように記述するのでしょうか？
0
管理
投稿者 るきお  (社会人) 投稿日時 2020/7/3 19:53:05
たとえば、このような感じかと思います。
この例ではCSSのdisplay:noneとメディアクエリーを組み合わせて画面ではListBox、印刷時はBulletedListを使うように表示を切り替えています。

WebForm1.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>



<!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">

        @media screen{

            .PrintOnly{

                display:none;

            }

            #ListBox1{

                width: 150px;

                height: 60px;

            }

        }

        @media print{

            .ScreenOnly{

                display:none;

            }

            #BulletedList1{

                list-style:none;

            }

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

        <div class="ScreenOnly">

            <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>

        </div>

        <div class="PrintOnly">

            <asp:BulletedList ID="BulletedList1" runat="server">

        </asp:BulletedList>

        </div>

        

    </form>

</body>

</html>



WebForm1.aspx.vb
Public Class WebForm1

    Inherits System.Web.UI.Page



    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load



        '画面用 

        ListBox1.Items.Add("祇園精舎の鐘の声諸行無常の響あり")

        ListBox1.Items.Add("娑羅双樹の花の色盛者必衰の理を顕す")

        ListBox1.Items.Add("奢れる人も久しからずただ春の夜の夢の如し")



        '印刷用 

        BulletedList1.Items.Add("祇園精舎の鐘の声諸行無常の響あり")

        BulletedList1.Items.Add("娑羅双樹の花の色盛者必衰の理を顕す")

        BulletedList1.Items.Add("奢れる人も久しからずただ春の夜の夢の如し")





    End Sub



End Class



説明を簡単にするためにコンパクトな作りにしていますが、実際にはCSSは外部に独立させたほうが再利用や保守性の面でよいです。
0
管理
投稿者 kojiro  (社会人) 投稿日時 2020/7/5 10:46:04
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="vol.aspx.vb" Inherits="phas21.vol" %>

<!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">
        @media screen{
            .PrintOnly{
                display:none;
            }
            #ListBox1{
                width: 558px;
                height: 333px;
            }
        }
        @media print{
            .ScreenOnly{
                display:none;
            }
            #BulletedList1{
                list-style:none;
            }
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            　　　　　　<asp:Label ID="Label1" runat="server" Font-Size="Larger" Text="地域への情報"></asp:Label>
            　　　<br />
            <br />
            　　地域選択&nbsp;
            <asp:DropDownList ID="ddList_area" runat="server" Height="20px" Width="120px" AppendDataBoundItems="True" AutoPostBack="True">
            </asp:DropDownList>
            &nbsp;<asp:Button ID="menu_exe" runat="server" Text="メニューに戻る" Width="109px" />
            <br />
            <br />
&nbsp;&nbsp;&nbsp; 　　地域<br />
            　　　　　　　　<asp:ListBox ID="ListBox_area" runat="server" Width="120px"></asp:ListBox>
            <br />
            <br />
            　　　　　　　　<asp:Button ID="clear_exe" runat="server" Text="クリア" Width="107px" />
            <br />
            <br />
            <br />
            　複数地域名　<asp:DropDownList ID="ddList_HC" runat="server" AppendDataBoundItems="True" AutoPostBack="True" Height="20px" Width="120px">
            </asp:DropDownList>
            <br />
            <br />
            <br />
            　　出力&nbsp;&nbsp;&nbsp; 　<asp:Button ID="data_output" runat="server" Height="20px" Text="データ" Width="120px" />
            <br />
            <br />
            　　Access Counter <asp:Label ID="lbl_access_c" runat="server" Text="0"></asp:Label>
            <br />
            <br />
&nbsp;&nbsp; 結果&nbsp;&nbsp;&nbsp;&nbsp;
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:ListBox ID="ListBox1" runat="server" Height="333px" Width="558px"></asp:ListBox>
            <br />
            <br />
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <br />
        </div>
         <div class="PrintOnly">
            <asp:BulletedList ID="BulletedList1" runat="server">
        </asp:BulletedList>
        </div>
    </form>
</body>
</html>
ですが、リストボックスの内容やweb上のツールも印刷されます。
0
管理
投稿者 kojiro  (社会人) 投稿日時 2020/7/5 12:21:35
<body>
    <form id="form1" runat="server">
        <div class="ScreenOnly">
としまして、解決しました。
ありがとうございました。
0
管理
返答する