初心者の、初心者による、初心者のための、画像処理・イラスト作成便利サイト

  • HOME
  • 更新情報やお知らせなど

更新情報やお知らせなど

初めにお読みください

このサイトについて

このサイトは 2009/06/01 以降5日間(1人×80時間以下)でトップを含む7ページを、突貫作業で 原形を構築・作成したサンプルサイトです。 基本レイアウトはこの時点(6月5日)で完結してますが、手の掛かるコンテンツやサイト装飾などは、 21日現時点も未完状態のためインパクトに欠けた印象を持たれるかも知れません。

制作目的は xhtml + css とサイト作成力提示用であり、 内容(コンテンツ)の継続的更新と精査が今後無い可能性もありますが、今後のサイト作成の在るべき 方向性を意識し作成しております。
※XHTML1.1(厳密な文書構成) + CSS 仕様での構築サイトもあると存じますが、 XHTML1.0 strict / XHTML1.1 では、文書構成が厳密であるため一般向け(商用)サイト構築時に、 レイアウトや機能の制限が発生しますことから、XHTML 1.0 Transitional が当面主流で利用されると考えております。
※XHTML は、今だ HTML 4.0 及び、多少の CSS レイアウトにテーブルを多用したサイトが殆どの中、高い保守性と web 新技術の導入(特に XML との親和性)が今後容易になるというメリットがあると考えます。

このサイト着手以降、約80時間程度で作成された初期状態を「 2009.06.05 バックアップ 」より確認出来ます。
※ご注意:戻る際はブラウザの「戻る」または、url 再入力にてお戻りください。

サイト作成について

制作には (X)HTML / CSS w3c 勧告への準拠とし、テキストエディターによる手入力(タグ打ち)としています。 web オーサリングソフトとしては、HTML / CSS の直接編集可能なソフトなら何れのソフトも対応可能です。 このサイトはテキストエディタを用いた直接入力(タグ打ち)で作成致しております。

※具体的に sakura editor 使用。単なるテキストエディターですが「メモ帳」は機能的不足感よりさすがに使う気になれません。
※sakura editor 使用(愛用)の主な理由:矩形選択、マクロなど非常に優れた機能あり。
※オーサリングソフトは、現在市場にあるもので代表的なものが DoreemWaver(上級者向けコーディングソフト)、 ホームページビルダー(初心者向けワープロ感覚ソフト)などが上げられますが、特段こだわり無く 便利な機能があれば有用とし、機能不足と判断する場合ソース直接編集でいか様にも対応可能です。 特に、DreamWaver の場合 (X)HTML/CSS の知識の上に操作可能となる web 制作支援ソフトであるため 作業効率も上がるものと考えております。

サイト作成上「訪問者をサイト内で迷わせないレイアウト」や 「検索エンジン対策」「保守性の簡便性」を考慮し、 基本構造(レイアウト)に表組みを使用せず文書構造・レイアウトは xhtml / css で完全に分離。 これにより必要であればリニューアルも容易であるよう構築してあります。
※例1:色彩やヘッダー画像入れ替え他 全て CSS 操作のみで変更可能。
※例2:本文・左メニュー配置入れ替えも CSS 修正のみで一括変更可能。
※例3:左メニュー・本文コンテンツで現状2カラムですが、3カラムへの変更や表示幅変更も CSS にて比較的容易。

「ブックマーク」「お気に入り」ボタンについて

各ページ右上の「サイトマップ」左にある「お気に入り・ブックマーク」ボタンは、 閲覧者が利用している UserAgent(ブラウザ)を JavaScript により自動判別し動作を切り替えています。 IE6 / IE7 / FireFox3 / Opera9 での仕様の範囲で問題なく登録されます。
※FireFox / Opera のブックマーク仕様は特殊であることを予めご了承ください。

  • FireFox

    登録されたブックマークの「プロパティ」から「このブックマークは・・・」 のチェックを外さないとサイドバー内にページが表示されます。
    ※FF仕様であり、ブラウザ開発側で対応しない限り サイト提供側では対処出来ない問題。

  • Opera

    登録時に表示される「ブックマークに追加」ダイアログの「詳細」の 「パーソナルバー・・・」「パネルに表示」のチェックを外してあげる必要が有ります。
    ※「パーソナルバーに・・・」のチェックがあると上記 FF と同じ表示となります。
    ※「パネルに表示」は、FF同様 Opera開発元で対応しないと回避出来ない問題。チェックがあると サイドバーへもサイトアイコンが登録されてしまいますが後で削除することが可能です。

  • Google Chorome

    念のため確認したのですが、 Mojila 系として多分 FF用「ブックマーク」を表示しているようですが、正常に機能しません。 ie / ff / opera 以外は別処理としたつもりなのですがちょっとバグってる様子。 時間があれば修正したいと思います。loop は一切ないので使用上問題が発生することもありません。

2008年9月時点でのブラウザ利用率が ie6/7 合わせ既に60% を割り込んでいる状態。 ie に替わり FireFox 3/2 が4割に迫り google chorome の今後の拡大も想定すると microsoft 製ブラウザ利用の寡占状態は今後無いと思われる。より閲覧者利用 環境を意識し、ストレスを与えないサイト構築が必要と思われます。
※ちなみに私は Opera が使いやすいと思うのですが、歴史が古い割に6割弱なのがさびしい限りです。
※Apple 系での safari は4割弱。環境が無いので表示検証のしようがないですが・・・。

更新情報


▲ページ・トップ

その他お知らせなど・・・

~ 2009/06/21 までの更新概要

  • サイトマップ追加
  • ブラウザ判定型(JavaScript) bookmark(ブックマーク・お気に入り)ボタンを追加

    Ie6 / ie7 - > 「お気に入り」ボタン正常動作確認済み

    FireFox 3.0 / Opera 9.64 - > 「ブックマーク」表示:ブラウザ判定別処理。
    ブラウザ仕様範囲で正常動作確認済み。

  • ヘッター部サンプル表示用「ArtWaver」・・・などの7ボタンを、フラッシュへ置き換え。

    検索エンジン対策としてマイナス要因のため方法模索、フレーム化?フラッシュ化?の選択岐より フラッシュボタンへ取り合えず変更して見ました。

    改善点:
    コードが非常にシンプルになり管理も容易になり動作も軽くなった気がする。 XHTML/CSS で複雑なスタイル定義を行うよりこの程度なら swf化した方が管理も楽。 ボタンアニメーションも入れるとインパクト有り?

    問題点:
    セキュリティが高いと当然表示されない。 Opera 固有の問題でページ遷移後毎回「このコントロール・・・」メッセージを含め2クリックを要す。

▲ページ・トップ

(X)HTML4.0/CSS2.1 完全準拠への取り組み

xhtml4.0 / css W3C勧告準拠について

w3c XHTML 1.0 Transitional / CSS2.1 へ完全対応。 以降更新時も誤りの無い正しい文法を使用し質の高さを維持する努力を惜しまないようにしています。

▲ページ・トップ

SVG ファイルのブラウザ表示について

Scalable Vector Graphics (SVG) とは、簡単に言えば flash や PDF のように、 古いバージョンのプラウザ単独では出来ない表現を提供可能な 注目の新機能(標準化された基準)です。

svg の仕様については「 SVG実習マニュアル(PDF) 」に非常に詳しく載っています。

各ブラウザの svg 対応状況
  • FireFox , Opera は標準対応ですが、svg 全機能サポートではない様です。
  • IE6 , IE7 は未対応です。SVG Viewer プラグインが必要です。
  • IE8 , mac 等については未確認です。
MS IE の SVG アドインについて

Microsoft IE6,7 は、Scalable Vector Graphics(SVG) をサポートしていないため、 サードパーティ提供の SVG Viewer をインストールする必要が有ります。

IE用 svg サードパーティアドイン

  • Adobe(R) SVG Viewer (日本語)

    容易なダウンロードとインストールで手間無く利用開始可能です。

  • Corel SVG Viewer (英語)

    ユーザー登録などが必要と思われます。面倒なので動作チェックしていません。

アドインを追加しても表示されない場合

Adobe SVG Viewer 利用の場合にチェックする項目

  1. IE7 上部に表示される Active X ・・・ を有効にしないと表示不能です。
  2. Adobe(R) ダウンロードページにある 「プラグインの動作確認・・・」を試します。
  3. Adobe のサンプル時計が表示されるにも関らず当サイト埋め込み svg が表示 出来ない場合、次に進んでみます。

Adobe サンプル svg が表示可能な場合

  1. 左側 .png ファイルをクリックし別ウィンドウで表示出来る場合があります。
  2. 〔ツール〕->〔閲覧履歴の削除〕から〔インターネット一時ファイル〕を削除すると 表示される場合があります。
  3. 〔ツール〕->〔アドオンの管理〕->〔アドオンを有効または無効にする〕 の状態を確認してみましょう。

セキュリティソフト・ファイヤーウォールによる干渉の可能性も有ります。 但し安易なセキュリティソフトの停止はお勧めしません。


▲ページ・トップ

inserted by FC2 system