ウェブ制作
JVW 03の追加仕様

JVW基本仕様に追加するJVW 03の仕様です。

JVW 03は、JVW 01・02の基本思想を受け継ぎながら、より洗練された完成度の高いものに改善しました。
使用クラスの選択と組み換え・カスタム背景でカスタマイズができるようになりました。
モバイル機器への対応を強化しました。

特長

モバイル対応・スタイルテーマ

レスポンシブの概要

レスポンシブ技術により、一つのHTMLファイルで、PCをはじめタブレット・スマートフォンなどのモバイル端末のブラウザーまで対応しています。

テーマをデザイン・設定した共通仕様のCSSファイルのうち使用する1つを選択するだけで、簡単に見た目の変更ができます。

レスポンシブのサイズ

画面幅(px) レイアウト
769以上 固定幅レイアウト
960px以上で横スクロールなしで表示される設定です。
569〜768 変動幅レイアウト
装飾を維持し、画面のサイズに合わせて伸縮します。
568以下 変動幅レイアウト
装飾を簡略化し、画面のサイズに合わせて伸縮します。

Google Search Consoleのモバイル ユーザビリティでエラーはありません。

フォルダ・ファイル構成

  • フレームワークのファイルはルートにフレームワーク名をつけたフォルダ内に配置する。
  • 画像ファイル(GIF・JPEG・PNG)・スクリプト(JavaScript)・スタイルシート(CSS)は、sourceフォルダ内に配置する。
  • sourceフォルダ内のファイルの使用は、そのフォルダと同じフォルダ内のHTMLファイルとサブフォルダ内のHTMLファイルに限定する。
    それ以外のHTMLファイルで、使用する場合は、ファイルをコピーするか、上位のsourceフォルダ内に配置する。
  • CGIとその関連ファイルは、ホームフォルダのcgi-binフォルダにHTMLファイルと同じ階層構成で配置する。
  • source以外のフォルダ内には、「xxxx.jp/xxxx/」のようにファイル名を省略してもアクセスできるように、基本的に1つのHTMLファイルと必要に応じた数のサブフォルダを配置し、HTMLファイル名は、サーバーの省略時設定に合わせてindex.htmlなどとする。

構造化データ

  • schema.org JSON-LDを使用する。

JVW 02との比較

JVW 03との比較

ページレイアウトのネスト構成
JVW 02では最初に幅の制限をして、その次にパート分けをしていましたが、JVW 03では最初にパート分けをしてその次に幅の制限をするように変更したことで、PCでフルスクリーン時の圧迫感を解消しました。
幅制限のないクラスも使用できます。
ボディーツール(サイドバー)の移動
JVW 02ではボディーパートの左または右にあったボディーツールは、JVW 03ではヘッダーパート内にヘッダーガジェットとして移動したことで、ボディーコンテンツの表示エリアが広くなり、レスポンシブでのPCモード以外でも表示されるようになりました。
ボディーツールは、クラスとして残してあるため、同様に使用できます。
テーマの画像ファイルの効率化
各テーマで使用する画像ファイルは、レイアウト調整とスタイルシートのみでの指定に変更することで数を減らし、軽量化とともにテーマの生産性が向上しました。
その他
JVW 02ではテーマごとに1つ定められていたbody要素・一部のdiv要素の背景は、CSSの更新なしで変更できる仕組みを追加しました。
JVW 02では瞬時スプライト式だったリンクのマウスオーバーは、アニメーション式に変更し、別ファイルとなった背景画像のプリロード機能を追加しました。
スクロール・カーソル移動に合わせたフェードイン・フェードアウト・視差効果(パララックス)などの表現を指定できるようにました。
テーマ用固定部分以外でも、コンテンツパート内で使用するタグのスタイルを細部まで調整しました。

配色

JVW 03の各テーマで使用している配色の一覧です。
※以下の画像の色は、JPEGに変換する際に多少変化している可能性があります。

Atelier

青緑をアクセントとした中性的な配色です。

Atelier(アトリエ)の配色

Universe

宇宙・星空をイメージにした配色です。

Universe(ユニバース)の配色

Peace

平和・中立をイメージにした配色です。

Peace(ピース)の配色

Wa

和風をイメージにした配色です。

Wa(和)の配色

関連情報

ページトップ

inserted by FC2 system