JavaScript: HTML CSS

ある項目とそれに関連する複数の補足/詳細情報を記載、あるいはそれらのページをリンクするようなパターンは、Webページにおいて一般的に使われている構成です。

そのような構成で、全ての詳細情報を1つのページ内に記載し、ページ内リンクでのアクセスを提供する方法では、 ページに情報を詰め込み過ぎるような印象を与え、情報の区切りも判り辛くなりがちです。 また、それぞれの詳細情報を独立したページにすると、サーバー側のコンテンツ管理のコスト増と、新たなリクエスト発生はサーバー側負荷増加とユーザーレスポンスの悪化の原因ともなります。

そこで、全ての詳細情報を1つのページ内にHTMLで記載しますが、全ての情報を同時に表示するのでは無く、 JavaScriptを使いユーザーの操作に応じて詳細情報の表示/非表示の切り替えを行います。

利点
  • 表示サイズの問題はあるが、構造に縛られない自由な構成
    表示エリアの制限はありますが、どの項目も基本的に自由なHTML構文が可能なので、デザイン面での自由度と各項目間の独立性を優先したい場合に有効な手法です。
  • HTML文章構造をそのまま取り込み可能
    デザイン作成と実装、表示結果の検証が容易となります。
  • HTMLとして記述されている為、各種ブラウザやサーチエンジンとの親和性が高い
    JavaScriptやCSSをサポートしていないブラウザでも、(想定したデザインとは異なるが)文章内容を確認出来る可能性が高くなります。
  • JavaScriptコードの独立性
    基本的に項目の内部データの操作は行わずに、単に表示切替だけなので、項目の更新/追加時にJavaScript側の変更は殆どの場合必要ありません。
欠点
  • HTMLソースの肥大化
    各項目はそれぞれ独立したHTML構文で書かれる為、項目内の情報や項目数が増えるに従い、当然のように全体のサイズも増加します。
  • 動的生成ページで使用する場合のコスト
    多くの場合、動的ページはサーバー側でHTMLをテンプレートデータとして保持し、更新が必要な個所を置き換えるような処理を行いますが、テンプレートサイズが大きくなる場合の処理/容量コストの増加と、HTMLをテンプレートにフォーマットする手間がさらに増えます。

PC画像下の商品説明とスペックをクリックすると、同一エリアに異なる構造の項目を表示します。

またhash(Fragment-id: URLの#以降の文字列)を指定する事により、表示する項目を選択出来ますので、リンク先としてURLを記載する場合に便利です。

pc image

UltraLegacy486-25/8

価格: ￥129,800 (税込)

商品番号: 286386

  • 商品説明
  • スペック
過去のアプリケーション資産との高い互換性

エミュレーション時に問題となる不安定な動作の発生が無く、特にDOS Extender利用アプリケーションに最適な環境を提供します。

FPU搭載の高性能CPU i486DX

同一動作周波数のi486SXと比較した場合、浮動小数点演算処理に関して圧倒的な性能を発揮します。

大容量メモリ搭載

8MB大容量メモリ搭載により、SmartDriveなどのディスクキャッシュプログラムも積極的に利用して頂けますので、アプリケーションのパフォーマンスの大幅上昇が期待出来ます。

高精彩LCDモニタ

640x480と320x200の解像度に最適な14インチSTN-LCDモニタ。

  • CPU: Intel i486DX 25Mhz
  • Memory: 8MB 30Pin SIMM (1MBx8)
  • Graphics: WesternDigital WD90C30 ISA
  • HDD: Conner CP30121 120MB
  • SoundCard: Gravis UltraSound
  • FDD: TEAC 3.5inch 2HD/2DD
  • CDROM: MITSUMI FX001DE IDE
  • OS: DR-DOS 6.0/V
Copyright © 2006-2007 distraid Inc. All rights reserved.