解説

実例で学ぶASP.NETプログラミング

第8回 ASP.NETで実現する「見栄えの良い」商品紹介ページ−前編

小田原 貴樹(うりゅう)
2003/07/19

ページ上部のデザインを作成する

 ページ上部のページ・タイトルと「商品種類・商品名・商品画像」の表示部分に関しては、これまでに何度も解説してきたVisual Studio .NETのGUI操作で構築できてしまうので、以下の操作を参考に作成してほしい。商品紹介ページの構築は「PRODET.ASPX」というファイル名でフォームを新規作成してから作業を行ってもらいたい。

商品紹介ページの作成:手順1
PIXフォルダ内の画像「bana3.gif」をドラッグ&ドロップで画面上部に配置する

商品紹介ページの作成:手順2
Imageコントロールをドラッグ&ドロップで画面左部に配置し、コントロールIDを「PI」に変更する

商品紹介ページの作成:手順3
Labelコントロールをドラッグ&ドロップで画面中央上部に配置し、コントロールIDを「PTL」に変更する。ユーザーに見やすいようFontサイズを「18PX」にする

商品紹介ページの作成:手順4
Labelコントロールをドラッグ&ドロップで画面中央上部に配置し、コントロールIDを「PNL」に変更する。商品名が格納されるので、Fontサイズを「20PX」と大きめにし、さらに太字(Bold)にする

 注意することといえば、「VS屋」の場合には商品画像の大きさが一定でないため、画像の位置がまちまちにならないよう、テーブルを用いて独立した列の中にImageコントロールを格納しているところくらいだろう。

 これで、非常に単純ながら商品紹介ページのミニマムな状態のものができあがったので、商品一覧ページで選択したものがこの段階の商品紹介ページに表示されるようにして動作をテストしてみよう。


 INDEX
  実例で学ぶASP.NETプログラミング
  第8回 ASP.NETで実現する「見栄えの良い」商品紹介ページ−前編
    1.商品カテゴリ別一覧ページ作成の補足説明
    2.ユーザーが左メニューを選択した場合の処理を実装する
    3.「フレーム間の制御」と「ページ間の値渡し」
  4.商品紹介ページ上部のデザインを作成する
    5.一覧表ページと連結させて表示をテストする
 
インデックス・ページヘ  「解説 :実例で学ぶASP.NETプログラミング」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間