『こぶたのラッパ』はサイトを移動しました!
今後はこちらをどうぞ
カテゴリ:Webデザイン( 20 )

2008年 01月 26日
HTML5でもframeを使おう!<解決編>
HTML5でframeが使えなくなったらJavadocはどうなるの?のエントリーで、HTML5になったらframeタグが使えなくなるので困るという話を書きましたが、ハテブでは「HTML4.01」を使い続ければいいじゃんという誠に非賛同的な意見ばかりでした。。

しかし2日たった今、解決策を思いつきましたよ!
w3c乙wwwwwww
HTML4.01厨涙目wwwwwwwwwwwwww

・・と煽るのはこれくらいにして。



<HTML5でもframeを使う方法>
1. HTML4.01でframeset/frame/noframesタグを使い、これまで通りのframe分割を行う。
top.html(HTML4.01)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head><title>フレームトップ(このページがユーザーからリクエストされる)</title></head>
<frameset cols="200,*">
  <frame src="left.html" name="left">←左フレーム(HTML5)を読み込む
  <frame src="mail.html" name="mail">←右フレーム(HTML5)を読み込む
  <noframes>
    すみませんがフレームに対応したブラウザをお使いください。
  </noframes>
</frameset>
</html>


2. フレームに読み込まれるHTMLはHTML5で作る。
left.html(HTML5)
<!DOCTYPE html>
<html>
<head><title>左フレーム(直接ユーザーからはリクエストされない)</title></head>
<body>

<aside>
  <ul>
    <li><a href="menu1.html" title="メニュー1" target="main">メニュー1</a></li>
    <li><a href="menu2.html" title="メニュー2" target="main">メニュー2</a></li>
    <li><a href="menu3.html" title="メニュー3" target="main">メニュー3</a></li>
  </ul>
</aside>

</body>
</html>


main.html(HTML5)
<!DOCTYPE html>
<html>
<head><title>メインフレーム(直接ユーザーからはリクエストされない)</title></head>
<body>

<h1>成績表</h1>

<datagrid>
  <table>
    <tr><td>田中</td><td>3</td><td>5</td><td>4</td></tr>
    <tr><td>鈴木</td><td>5</td><td>4</td><td>3</td></tr>
    <tr><td>山本</td><td>4-</td><td>5</td><td>3</td></tr>
  </table>
</datagrid>

</body>
</html>





うーん。当たり前すぎる。
もしかして突っ込みいれてくれた人はこれの事を言ってたの?
だとしたらごめん。

この方法で問題があるとしたら、HTML4.01とHTML5でフレーム間のセキュリティポリシーに違いがある場合でしょうか。
子フレーム(HTML5)から親フレーム(HTML4.01)に対してJavaScriptやCookieでのデータのやり取りを行う場合、ポリシーの違いでおかしな動きになるということは考えられそうです。

まあでもこれで無事HTML5に移行できそうです。
frame使ったサイトは作ったこと無いけど(^^
[PR]
by smilkobuta | 2008-01-26 12:39 | Webデザイン

2008年 01月 24日
HTML5でframeが使えなくなったらJavadocはどうなるの?
現在のJavadoc画面(これはJDK1.5のAPI
c0007274_1158586.jpg


あとBloglines
c0007274_11591444.jpg


いずれもフレーム分割することで実現されているサイト/HTML文書の好例だと思います。
iframe要素で同じものを作ろうとすると意外に手間がかかりそうなのですが、なぜ無くしてしまうのでしょうか。
W3C草案ではframeを無くす理由を次のように定義しています。

HTML 5 における HTML 4 からの変更点
2008 年 1 月 22 付け W3C 草案 (Working Draft)

次に挙げる要素もまた HTML 5 に存在しません。これらの要素はユーザビリティやアクセシビリティに影響し、エンドユーザに良くない結果をもたらすからです。
* frame
* frameset
* noframes


アクセシビリティについては確かにそういうケースがあるかもしれないけれど(フレームに対応していないブラウザを使うとアクセスできない)、ユーザビリティは悪くないと思うのですが・・・

以前のエントリー「高齢者対応サイト」でも書きましたが、高齢者にとってはフレーム分割されたサイトは見やすいもののようですし、Javadocは現在のようにフレーム分割されていないと使いようがない気もします。

代用としては、
  • iframe
  • cssのoverflow:scroll

のいずれかでしょうか。

<iframeで代用する場合の問題点>
ブラウザ標準の機能では、iframeのサイズを変更することができません。
がんばって自前でサイズ変更機能を作るにしても、複数のiframeを利用する場合に相互にサイズを増減させるのは面倒な話です。

これまでのframeでは、自由にサイズを変更できます。
c0007274_12114549.jpg


<cssのoverflow:scroll>
たいていframeを使用するときは、同じ情報(サイトメニューなど)を何度もHTTPリクエスト/レスポンスしたくない時に使います。
cssのoverflow:scrollを使って擬似的にフレームを表現したとしても、表示するコンテンツは(共通情報を含めて)丸ごとHTTPリクエスト/レスポンスする必要があり、大いに無駄です。

共通部分をSSIやプログラムを使って共通管理することも可能ですが、そういうつくりのWebサイトを作成できない作成者、もしくは運用環境の場合には、共通部分を全てのページに埋め込んでいかないといけません。

したがって、frameの代替としてcssのoverflow:scrollを使用するということは、現実的ではないでしょう。




後方互換性にあるにせよ、frame不遇の風潮が加速するのはいやなのです。
「HTML」の名前を語るのであれば、これまでのHTMLコンテンツ資産をないがしろにするような仕様を決めて欲しくないです。

単に私が何かを見落としているだけで、すでに解決案が存在するのでしょうか・・・

2008/1/26追記
→「HTML5でもframeを使おう!<解決編>」もどうぞ
[PR]
by smilkobuta | 2008-01-24 12:30 | Webデザイン

2007年 12月 03日
Webサイト作成のお仕事:White Cross
White Cross - ホワイトクロス
c0007274_151440.jpg


先日新規リリースしたWebサイトです。
素敵なクリスタルとオーラソーマについて紹介しています。
ご本人も素敵なオーラソーマ・プラクティショナーの方で、このブログを見てくださっている方の中にも実は見知っている人がいるかもしれません。

c0007274_1575876.jpg


オーラソーマのページはグリーン系のデザインにしました。
素材の写真をいろいろ加工していますので、オリジナルの素材がよくわからなくなってしまいましたが、ちょっと面白い感じになりました。
一番上にあるメニューのつるのようなデザインは、最近自分自身が凝っているものですが、素材の写真と方向的に似ていた(ナチュラル・オーガニックな感じ)気がして採用しました。

c0007274_15141478.jpg


クリスタル関連のページは最初の予定の色合いではなくなったのですが、黒を入れておいたほうがクリスタルがきれいに見えるかなと思い、一番上は真っ黒にしています。

c0007274_1516470.jpg


それ以外のお知らせ関連ページでは、これも空の写真をベースにしましたが、半自然・半人工の感じになっています。

全体としてグリッドをはっきりしているので、「完全天然」の雰囲気にはならないですが、グリッドが決まっていないと見る人が迷っちゃうからこればっかりは外せません。

デザインは詰まるところおまけなので、見る人が情報を知るのに邪魔にならないように、でもご本人の雰囲気は伝えたい、そのちょうどいいところを外さないデザインができるようになりたいです。
[PR]
by smilkobuta | 2007-12-03 15:24 | Webデザイン

2007年 08月 16日
Webサイト作成のお仕事:サンプルサイト用デザイン
Webアプリケーション開発学習用のサンプルサイト用デザインですが、こういう時に使われるデザインって結構さびしいつくりになっていることが多いので、少し小ぎれいなデザインで作ってみました。

c0007274_19325375.jpg


アイコンを作ってる時間があったら、さっさと仕事を仕上げろという話ですが。
[PR]
by smilkobuta | 2007-08-16 19:35 | Webデザイン

2007年 08月 08日
Blueprintcss - Google様作成のCSSフレームワーク
私みたいに、CSSハックで自らの手を汚したくない人が使うのは良いかもしれません。

blueprintcss - Google Code
BlueprintはCSSフレームワークです。あなたのCSS開発時間の削減をお手伝い。 使いやすいグリッドレイアウト、素敵なタイポグラフィ、印刷用のCSSなど、あなたのプロジェクトをうまく作り上げるのに必要な、しっかりとした基本のCSSを提供します。
smilkobuta意訳


ブラウザ間でCSSの解釈が違うのは仕方がなく、今後100年は統一されないでしょうから、こういうツールは必須ですね。
普通はデザイン会社ごとにこういうのを用意していたのを、Google様がオープンにしちゃったという感じでしょうか。

ただ、
まだ重要なプロジェクトでは利用しないで

といっていますので、お仕事での使用は差し控えたほうが良いでしょう。
それでも、reset.cssは便利そうなので、今度ちょっと使ってみよ~。
[PR]
by smilkobuta | 2007-08-08 11:54 | Webデザイン

2007年 07月 18日
Webサイト作成のお仕事:Fleurs Soleil
デザイン作成&CMSセットアップのお仕事をしました。

Fleurs Soleil フラール ソレイユ
c0007274_20222344.jpg


知り合いの、とってもすてきなヒーラーさんのホームページです。
場所は福岡ですので、お近くに住んでいらっしゃる方はどうぞ~。

サイトの名前の通り(Fleurs はフランス語で「お花」)、全体的にお花をちりばめたようなデザインにしました。
お花は写真を使うかどうかでちょっと迷ったのですが、写真だと本当にお花屋さんのサイトみたいになりそうだったので、すべてイラストレーションで統一しています。

今回のこだわり(?)はてんとう虫。
上の方にちょろちょろと飛んだりお花に止まったりしていますが、ページを表示するたびに位置が変わるようにしています。
さらに2匹が近い位置にくると・・・・ちょっとしたシークレットを入れています。

c0007274_22172522.jpg
小さすぎてよく見えない彼らですが、せっかくなので拡大しておきます。




なんでこんなにてんとう虫にこだわったかというと、お花の絵を描いている真っ最中に、お部屋の中にてんとう虫が飛んできたから。
これは・・・!と思い、つい力が入ってしまいました。
[PR]
by smilkobuta | 2007-07-18 22:21 | Webデザイン

2007年 04月 12日
『正しくHTMLを書こうと心がけている人に5つの質問』の回答 by こぶたのラッパ
正しくHTMLを書こうと心がけている人に5つの質問
こんなものがありましたので、私も混ぜていただこうと思います。

  1. HTML文書を制作する際に使用しているプログラムをお答えください。(Webプログラムも含む)
    MKEditorというテキストエディタをずっと使っています。エディタを変えるのって難しいですよね。

  2. 採用しているDTDとその理由をお答えください。
    HTML 4.01 Transitionalを使っています。XHTML回答率が異常に高いので驚いていますが、

    • 不恰好な閉じタグが苦手(テキストエディタを使っているからかな)
    • DTDに対してvalidなら、普通のHTMLでもスクレイピングするには問題ないと思うから。
      XHTMLならXMLパーサが使えるじゃないかという声もありそうですが、パーサを使ってほしいようなデータはRSSフォーマットにして別においておけばよいじゃないかと思っています。
    • XML嫌い。データ構造としてはまあ嫌いではないですが、ドキュメントを作るのには使いたくない。
      データ構造はJSONがあればいいと思っているので、もう本当にXMLいらないと思っています。

    という感情的な理由でXHTMLは自分からは選択しません(Webデザインを仕事にしている人間がこんなことを言っていいのか・・)。

  3. 何故正しくHTMLを書いているのですか?
    自分がスクレイピングできないHTMLが嫌いだから。
    メンテナンスを他人にお願いするときに引継ぎしやすいように。
    Google様によく見てもらえますように(願望)

  4. W3CとWHATWG、どちらに期待してますか?
    W3Cは引き際を覚えてほしいな。
    CSSのこれ以上のバージョンアップと複雑化は、次のスタイル修飾言語を生み出すきっかけになりそう(それはそれでありかな?)。

    WHATWGはよく知りませんでしたが、普及すれば面白くなりそうだと感じました。

  5. あなたにとってHTMLとは何ですか?
    「Webデザインとは何ですか?」という質問なら「ユーザーへの愛です」なんて答えられますが、HTMLはツールでもないのでなんとも言えないです(ツールはエディタなど)。
    小説家であれば原稿を縦書きするか横書きするか、縦横罫線に書くか横罫線に書くかといった規則でしかないですからねえ。

    あえて答えるなら、従うべき規則。


他の方の回答一覧
[PR]
by smilkobuta | 2007-04-12 07:51 | Webデザイン

2006年 10月 25日
逆ボーダーデザイン
Lucサイトの商品注文フローのデザインをリニューアル。
逆ボーダーデザイン(自分で勝手につけた名前ですが)を実践してみました。

c0007274_15394595.jpg


逆ボーダーデザインとは、通常領域をはっきりさせるために使うボーダーラインを、逆に薄いカラーを使って背景に馴染ませるというものです。

↓こんな感じ。
c0007274_15405128.jpg
c0007274_15405830.jpg



ボーダーを太くし、薄い色を使うことでグラデーションぽく見えませんか?
[PR]
by smilkobuta | 2006-10-25 15:43 | Webデザイン

2006年 10月 11日
Illustrator Tips:ハートの作り方
たまたまハートマークの作り方を見つけたので、忘れないうちに書いておきます。
この方法を使えばすごく簡単にハートを描くことができます。



1. 面に色を塗らない正方形を一つ描きます。
c0007274_1132429.jpg



2. アンカーポイントの削除ツールとはさみツールを使って、不要なパスを削除します。
c0007274_11335644.jpg
c0007274_11343939.jpg




3. 要するに四角の半分を消し去ります。
c0007274_1135588.jpg




4. 線幅を太めにして(最初に作った正方形の大きさにも合わせて調整)、線端を「丸型線端」にします。
c0007274_11361268.jpg




完成:回転ツールで45度傾けてあげれば、ハートの出来上がり。
c0007274_11374478.jpg

[PR]
by smilkobuta | 2006-10-11 11:41 | Webデザイン

2006年 08月 20日
Validator(検証ツール)へのリンクつきホームページ
"cresk™ studios : illustrative design & web development"
http://cresk.nl/

こちらのデザイン製作会社のWebサイト。
すごく丁寧な感じに作られているなあと見ていたら、HTMLとCSSのValidatorへのリンクが堂々と張られていました。
c0007274_2312203.jpg

自信あるから試してみてねっていう感じですが、HTML/CSSを作ることを商売にしているサイトなら、これは必須ですな。
[PR]
by smilkobuta | 2006-08-20 23:11 | Webデザイン