月別表示 :: webデザイナーの為のブログ

自分も最近まで知らなかったんだけど、ルート要素（HTMLでいう「HTML」タグ）はルートノードではないとのこと。

ではルートノードとは何ぞや？という話になるわけで。
どうやらドキュメントオブジェクトというものがルートノードでその子ノードに対応するのがルート要素とのこと。なるほどねぇ～

PHPではDOMでノードの操作ができます（XMLやXHTMLのタグに直接アクセスできる）。

まず、馴染みの深い（あくまでも自分はだけど）Flash(as2.0)でのDOMの指定例。

var myXML = new XML(); //XMLインスタンスを作成
myXML.load("sample.xml"); //XML文書よみこみ

/* onLoadイベント発生後… */
trace(myXML.firstChild.nodeName); //ルート要素ノード名を出力

続いてPHP4での例

$dom = domxml_open_file("sample.xml");　//DOMドキュメントインスタンス生成
$root = $dom->first_child();　//ルート要素ノードを返す
echo $root->node_name();　//ルート要素ノード名を出力

続いてPHP5での例（テスト環境が無いので未チェック）

$dom = new DOMDocument(); //DOMドキュメントインスタンスを生成
$dom->load("sample.xml"); //XML読込
echo $dom->firstChild->nodeName;　//ルート要素ノード名を出力

FlashとPHP5は構文がほとんど同じなので、FlashでDOMを習得していれば移行が容易かと。

問題はPHP4。いくつか大きな違いがある。
まず、first_child、node_nameなどネーミングが独自のもの。（規則性はあるので難しくは無い。）
次に、first_child、node_nameなどがDOMの規格ではプロパティであるのに、PHP4ではメソッドとして扱われている。これが厄介。$dom->first_child->node_name;という具合に連続してノードを辿れない。つまり、$node=$dom->first_child();というように変数に代入してやる必要がある。（もしかしたら他にも記述方があるのかも知れないけど。。。）

追記：

$dom = domxml_open_file("sample.xml");　//DOMドキュメントインスタンス生成
$root = $dom->first_child();　//ルート要素ノードを返す
echo $root->node_name();　//ルート要素ノード名を出力

とするよりも

$dom = domxml_open_file("sample.xml");　//DOMドキュメントインスタンス生成
$root = $dom->document_element();　//ルート要素ノードを返す
echo $root->node_name();　//ルート要素ノード名を出力

のほうが確実。
$dom->first_child();だとファイル構成によっては上手くルート要素を取得できないみたい。

FlashでXMLを処理する時、空白ノードを取り除く場合「XML.ignoreWhite」を使用するが、PHPでそれに対応するものを発見。どうやらPHP4とPHP5では指定方法が違うようだ。（そもそもPHP4のDOMは標準規格ではない）

PHP4では
domxml_open_file("test.xml",DOMXML_LOAD_DONT_KEEP_BLANKS)
とこのようにdomxml_open_file関数に「DOMXML_LOAD_DONT_KEEP_BLANKS」オプションを指定し、

PHP5では
$DOMObject->preserveWhiteSpace = FALSE;
とすることで空白ノードを削除できる。

Flashユーザーからすると、PHP5のほうが馴染みやすいなぁ。PHP5に移行したいけど、こればっかりはサーバーの問題だしな。。。

Flash+XMLでアフィリエイト支援ツール的なものを作ってみた。
トップページのFlash部分です。

ソースファイル(.fla)も配布しているので、改変したりあなたのページに貼り付けたり、ご自由にご利用下さい。
http://ks-product.com/c_enter/flash/index.html

機能はいたってシンプル。ランダムで登録された商品を読み込み、クリックするとその商品の購入ページに飛ぶというもの。もしかしたらバージョンアップするかも。一覧機能つけたいかも。

以前からFlashとの連動でPHPをちょくちょくいじっていたんだけど、HTMLでPHPを利用するのは実は初めてだったり。

動作チェックという意味合いも込めてechoで文字列を書き出すテストをしてみると早速エラーが。。。構文は合っているのに何故？よくみると1行目に問題があるらしい。

<?xml version="1.0" encoding="utf-8"?>

どうやらこのXML宣言が悪さをしている模様。調べてみると、「<? ～　?>」はPHPのショートカットにも使われているらしいので、XMLと混同してしまう模様。

XML宣言をPHPのechoで書き出すことで解決可能です。

Flashが吐き出すHTMLソースはstrictでは無いので、どうすればstrictなソースが書けるか悩む人も多いはず。そこでこんなサイトを見つけたので紹介。
http://www.onflow.jp/blog/archives/2005/09/flashxhtmlembed.html

上記サイトでも説明されている通り、Flashを動かすのに最低限必要なコードはたったこれだけ。

<object data="sample.swf" width="300" height="300"
type="application/x-shockwave-flash">
<param name="movie" value="sample.swf" />
</object>

ただし、この書き方だとIEでFlashPlayerの自動更新ができないとのこと。現在のFlashPlayerの普及率を考えると無視してもよさげ。

プルダウンメニューの表示不具合を修正しました。

IE7になって、PNG24の対応や、CSSの解釈が大幅に改善されたので、表現の幅が広がり嬉しい反面、従来のサイトの動作チェックで頭を抱えることになるだろう。

自分の場合、今までは属性セレクタを使いCSSハックを行って、各ブラウザと互換をとっていたわけだが、この場合、IE6以前のバグが修正されていないとIE７では表示に不具合を生じてしまう。属性セレクタハックがIE７では使えない為だ（逆に属性セレクタが正式にサポートされたわけだが…）。

こうなると、IE7用のハックを適用するか、HTMLに余分にタグを追加するか、もしくは今まで以上にCSSレイアウトを考慮してデザインをする必要が出てくる。

そろそろIE5.xは切っちゃっていいかな。。。

ちなみにa要素にvertical-alignをmiddle,top,bottomのいずれかを指定することで、ハックしなくても解決できました。（汗

最近（昔からあるのかもしれないけど）よくスーパーなどで、○○詰め放題ってのがやっているけど、その特集がテレビでやってて…

ニンジン5本分ほどしか入らない袋に40本も入れたり、揚げ物を原形をとどめないほどに詰め込んだりと、凄まじいですなｗ

一番驚いたのがパンの詰め放題。かたーく押し詰められていてなえ～（´Д｀；）でした。

詰め込んだ本人いわく「後で膨らませるから大丈夫！」と。

ま、まじでぇ～～！？

先日IE７が正式リリースされた。
過去のブラウザのこともあるので、WEBデザイナーや趣味でWEB制作をしている人は、バージョンアップしにくかったが、IE7とIE6を共存させることが可能であることが判明。方法は簡単下記サイトでIE6のスタンドアローン版をダウンロードし、普通にIE7にアップグレードすればOK。
http://coliss.com/articles/build-websites/verification/69.html
http://tools.veloc-it.com/tabid/58/grm2id/4/Default.aspx

また、macでブラウザチェックしたいけど、winしか持ってないって人に朗報。下記サイトでサファリのキャプチャを撮ってくれます。
http://www.danvine.com/icapture/

さっそくIE7でチェックしてみたら、プルダウン式ナビゲーションが微妙おかしなことになっていた。。。やっぱCSSハックが悪さしてるんだろうな。許容範囲だけど。

--追記--
IE5.5やIE5.01で検索してくる人が多かったので付け加えます。下記サイトでIE5.xのスタンドアローン版も入手できます。
http://browsers.evolt.org/?ie/32bit/standalone
IE6スタンドアローン版を薦めましたが、制作者はIE7スタンドアローン版を入れて、IE6はこれまでどおり使ったほうがいいかも。IE6スタンドアローン版の調子があまりよくなかったので…

ちなみにWinとMac両方でブラウザチェックをする人にはインテルMacがオススメ。インテルMacでは仮想的にWindowsを動かすことが可能です。いままではブラウザのシェア上windowsで作業をするwebデザイナーが多かったと思いますが、あえてwindowsを使う必要もなくなりますね。というか普通にMac上でwindowsが動きますからね～。

RESN Design Studio

このWEB制作会社おそらくニュージーランドなんだろうけど、制作実績の一つに中国語を使ったflashゲーム（写真右）が。。。と思いきや実は日本語。しかも、片言。というよりは、翻訳ソフトで訳した感じ？雰囲気が安っぽいけど、独特のテイストがいい感じ。

かわって写真左は、パナソニックオキシライドの宣伝サイト。か？
最初の例とはかわって、かなりカッコいい動きをするFlashサイト。スピード感といい光の表現といいセンスがいい。

ちなみにこのサイトここで見つけました。各国の優れたデザインのサイトを紹介してるサイト。オススメ！
http://www.websitedesignawards.com/
こちらもオススメ
http://www.thefwa.com/

オーストラリアのマクドナルドのイメージカラーは黄色と黒らしい。
http://www.makeupyourownmind.com.au/

赤と黄の日本よりこっちのほうが、カッコいいし、商品が映えてるような気がする。

xbox360用ゲームロスト プラネットの店頭体験版やってみた。

一言で言えばFPSなんだけど、FPSにありがちなゲーム酔いっていうのが全くない。その理由は、
完全な主観視点ではなく、操作キャラクターの斜め後ろから見た視点である（バイオ４的な視点）。
キャラの進行方向に合わせて視点が移動しない（進行方向ではなく照準に合わせて視点が移動する）。
ゲーム酔いでFPSを断念していた人にとっては嬉しい配慮。

照準合わせが手動（右スティックで操作）なので、自由度の高いアクションが可能。これにより移動・ジャンプしながらも攻撃可能。コアなFPSプレイヤーも納得の出来かも。操作が複雑かなと思ったけど、15分ほどでだいぶ慣れた（酔いと操作の難しさでFPSが苦手な自分でも遊べた）。

難易度も理不尽に高くなく、初心者でも入りやすいかなと。

あとやっぱ特筆すべきは次世代機ならではのグラフィックでしょう。ハイスペックなPCには及ばないとは思うけど、雪上の雰囲気や爆発の演出、銃器等の重厚感、オブジェクトの破壊など…次世代機だなぁと思わせる演出が多々あり没頭できます。

プレステ3の方が、高品質なゲームがでるかと思っていたけど、当面はXbox 360の方が良さそう。ブルードラゴンも発売するしね。

っていうか、イ・ビョンホンをゲームのキャラクターに起用する必要ない気が。。

ユニクロのオフィシャルサイト。yugop.comでおなじみの中村勇吾氏が手がけている。
http://www.uniqlo.com

画面右の「UNIQLO EXPLORER」が斬新。 画面推移が特徴的なので、見てて楽しい。
しかし、コンテンツの性質上、目的の物を探しにくい。別途カタログサイトが用意されているので、あくまで雰囲気を楽しむというコンセプトで作られているのであろう。

ただ、現段階では明らかに設計ミスかと思われる部分もある。
「UNIQLO EXPLORER」内の画面左のメニューで、カテゴリ別表示が可能である。 その中の商品を選ぶことで、その商品の読み込みが始まるが、その間も他の商品が選べてしまう。一つ前の読み込みをキャンセルして読み込むのであれば問題ないのだが、そうではなく同時に読み込まれてしまう。
つまり、商品を次々とクリックしてしまうと、いくつもの商品が読み込まれてしまい、動作が極端に重くなってしまう。
ユーザーが多いサイトなので、こういった脆弱性は早急に修正したほうがよいかも。

鍋が恋しい季節になってきましたね。（´ω｀*）

昔やってたテレビ番組「電波少年」で、有名になったドロンズ（その企画中だけだったけど、人気があったのは。。。）の大島がプロデュースした飲食店「ちりとり鍋　大島」。

この店、テレビ等にも最近取り上げられていて、評判もいいらしい。芸能人もちょくちょく顔を見せる模様。オラが好きな眞鍋かをりも来てるそうな（´ω｀*）
是非是非機会があれば行ってみたい。。。

actionscriptではイベントハンドラメソッドを使う時以下のように記述できるが、

data.onLoad=function(){

	/*データが読み込まれたときの処理*/

}

javascriptでは、

window.onload=function(){

	/*画面が読み込まれたときの処理*/

}

と「onLoad」→「onload」と全て小文字で表記しなければならない。 ただし、ＨＴＭＬに直接イベントハンドラを埋め込む場合は前者のように指定する。
actionscriptに慣れているとハマりやすい落とし穴。

googleマップやgoogleサジェストの登場で、ajaxがされ始めていますが、サーバーサイドの言語とは違い、ajaxではjavascriptを使うので、ブラウザの互換性を意識して制作しなければなりません。
スクリプト言語なので初心者にも受け入れ易い言語ではありますが、多くのブラウザに対応させるとなると、相当なスキルを要する言語でもあります。

そこで登場するのが「prototype.js」というjavascriptライブラリです。
prototype.jsを使うことで、ソースの簡略化、ブラウザの互換など様々な恩恵を受けることが可能です。
邦訳された解説サイトもあるので、利用してみてはいかがでしょうか？

prototype.js http://prototype.conio.net/
解説サイト http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html

ちなみに、書籍「 Ajax実践テクニック」では、prototype.jsの他、yahoo!UI、Dojo、script.aculo.us、Ricoの解説も行っています。主要ブラウザの検証もされているのでとても便利です。また、サンプルも極力簡単なものを扱っているので解り易いのでオススメ。ただ、情報量は少ないので辞典として使うにはオススメできないかも。

prototype.js ver1.5　ではCSSのような方法でノードの指定ができるので、かなり使い勝手が向上しそうです。リリースが楽しみ。

TOPページのに記事本文表示させないように変更し、デザインも変更しました。

WEBサイト管理者中級者くらいになると、サーバー側の設定もしてみたいなんて人が出てくるかと思います。しかし「自前でサーバーを用意する余裕も無いし、簡単な設定だけできればいいんだよね」と思っている人も多いでしょう。

そこで、.htaccessファイルをサーバーにアップロードして、クライアント側でサーバーの簡易的な設定を行うわけです。でも、.htaccessの記述の仕方が分からない人も多いかと思います。
そこで、おすすめなのがこれ！
.htaccess Editor http://www.htaccesseditor.com/

.htaccessの記述の仕方が分からなくても、必要な項目を入力していくだけで、.htaccessのソースが出力されます。登録の必要もなく無料で使えるのでオススメです！

世の中には様々な会社があるが、面白い会社がテレビで取り上げられていたので紹介。

みんめいネット（株式会社ウィード）　http://minmei.net/
その会社の業務内容というのが、ゲームのキャラクターのレベルアップ。他にも、レアアイテムの販売なども行っている。

その料金がまた高額で、数千～数十万円とかなり高額（と思う）。だがしかし、それでも毎月200万円ほどの売り上げがあるらしいから、世の中分からない。
ゲーム好きにはたまらない職業なんだろうな。多分。

ただいまメンテナンス中のため一部ページの表示に不具合があります。ご了承下さい。

プロフィール、リンク、メール、サイトマップのページを作成しました。
BBSはまだ未実装です。いずれ自作した物を公開する予定です。

ブラウザがデスクトップになるという代物。Ajax(html+css+js+xml)で動いているんだけど、かなり再現度が高くて驚いた。特に、msnメッセンジャーをアプリケーション内部で動作させたり。
http://www.startforce.jp/

Ajaxの可能性を感じさせるアプリケーションだけど、実用性はゼロに近いかも。
ネット上にデスクトップ作っても、通信上の不具合で中断されたり、html+css+jsで駆動しているわけだから、操作にも制限が出てくるわけで。
せめて、こういうコンテンツはflashで作るべきだろうな。新しい表現ができそう。

今日までその存在を知らなかったんだけど、 この人の歌いいね～。

深夜の歌番組で知ったんだけど、昼ドラの主題歌だったな確か。 顔見る前までは、男が歌ってるかと思ってたんだけど、女だったんだね～。 なんか性同一性障害ということで、各方面から注目されているみたいだけど、そんなこと関係無しにカッコいい歌なので聴いてみてね～。
私の中の「いい女」(DVD付)

ちなみに、前作「友達の詩(DVD付)」とは全然雰囲気が違う。同一人物が歌ってるとは思えないくらい。でも、詞の良さは同じなので是非聞いてみてね。

中村中　公式サイト

先日発売されたプレステ３ですが、１台売れるごとに300ドルの赤字が出るとのこと。

昔から、ゲーム機は売れるたびに赤字と聞いてはいたけど、そこまでとは。。。

プレステ３の製造原価が約800ドルで販売価格が約500ドルなので、約300ドルの赤字になる。

赤字覚悟で数多くゲーム機を売り、ソフトウェアの販売で元を取るという手法をとっているけど、そのソフトウェアの出来があまり良くないとの噂が。。。
ハードのスペックが高くても、製作スタッフのスキルが足りてないのかね～。やっぱ。
それに、今まで以上にリアル指向になるわけだから、美的センスも今まで以上に問われるんだろうな。

プレステ３の特長の一つの、上位互換性に色々問題があるそうで。。。それに、初期不良とかもありそうだし。。。XBOX買ったほうがいいか。海外では売れ行きいいし。

flash player 9が公開されて数ヶ月。
flash player 9から使用可能になったactionscript3.0を使ったコンテンツも増えてきました。
http://www.flash-jp.com/modules/newbb/viewtopic.php?viewmode=flat&topic_id=5204&forum=20

上記Flashではas2.0とas3.0の比較がされていますが、as3.0になることで動作速度が最大１０倍とのこと。つまり、いままでスペック上諦めていた表現も可能になるわけです。

パーフォーマンスが大幅に向上したのはいいけど、それなりにリスクもある模様。。。
as1.0/as2.0とas3.0は互換性が無いとのこと。
as1.0/as2.0はAVM1、as3.0はAVM2という仮想マシンで実行されている。
flash player 9にはAVM1、AVM2両方が内蔵されているので、今までのコンテンツも再生することは可能だが、稼動する仮想マシンは一つだけなので、as2.0で書かれたコードにas3.0のコードを追記する（その逆も）ことはできないらしい。

互換性が無いと言う事で想像できたかと思うが、as3.0は使用できるメソッドやプロパティもだいぶ変わる模様。例えば...

• MCインスタンスに直接イベントハンドラメソッドを設定できない。(イベントリスナーを使う)
• _global、eval()、LoadVarsクラス等、使用頻度が高かったメソッド、プロパティ、クラスの廃止。それに伴い新たなメソッド、プロパティ、クラスの追加。
• 数値型の追加。（int、uint）

などなど。。。詳しくは下記サイトを参考にしてください。
http://web.mac.com/ymori.com/iWeb/AS3/AS3Blog/AS3Blog.html
http://www.flash-jp.com/modules/newbb/viewtopic.php?topic_id=5225&forum=20

今回のバージョンアップで、より本格的な言語になったので、初心者お断りって感じですね。。。
幸い、次期flash playerでもas2.0のサポートはしていくらしいので、必要に応じてas3.0にシフトしてけばいいかなと。

そんなことより、金がなくて未だに、flash 2004 MXからバージョンアップできてない。。。どうしてくれようか。。。

中村勇吾氏が手がけたサイト。
http://www.nagaoka-id.ac.jp/gallery/gallery.html
個性的なインターフェイスだけど、マウスホイールでぐりぐり直感的に操作可能。
flashサイトってマウスホイールに対応してないサイトが多いから、こういうのはとても便利。

このサイトはamazonのAPI？を利用したflash。ベータ版なのか、一部機能しない部分があるが面白い。
Flash player 9以上対応で、actionscript3.0を利用している。
http://amaznode.fladdict.net/

去年の１２月にＧクレスタっていうサービスが開始されたんだけど、すごく画期的なんだけど、おしい内容。
http://www.clubit-gc.net/portal/

通常、ＰＣゲーム（ネットゲー含む）はＰＣにダウンロード・インストールして遊ぶ必要があり、ユーザー側でゲームの処理を行うため、マシンのスペックによって動作が遅かったりするのが当たり前だった。

しかし、Ｇクレスタではブロードバンド環境が整っていれば、インストールの必要もなく、さらにマシンのスペックも気にすることもなくゲームができる。

何故そんなことが可能なのかというと、ゲームの処理から画像の出力までサーバー側で全て処理するから。
ユーザ側は出力された画像をストリーミングで受信して表示するだけ。
つまり、ユーザー側はストリーミング動画を再生しているのと同じぐらいの負荷しかかからないわけです。

でも、このサービスあまり利用されていない模様。
こんな、画期的なサービスが何故流行らないのか。
おそらく、こういった原因が挙げられるかと。

1. 圧縮された画像を受信するので、画像が荒い。
2. マシンスペックを気にする必要がないという、最大のメリットを全く生かせてない。（古いゲームが多い）

1.はストリーミングの性質上仕方がないと思うが、2.は致命的。
マシンスペックを気にする必要がないのであれば、極端な話プレステ３並のゲームを出すべき。そうすれば、ヒット間違いなしかと。（ただし、大量の投資が必要だから、相当大きな会社じゃないと無理だと思うけど。）
古いゲームを出すなら、普通にダウンロードして遊んだ方が快適。

でも、これって、動画を受信できる環境があればいいわけだから、携帯とかでサービス展開すれば流行るかもね。
回線速度が上がれば、携帯でプレステ３のゲームが遊べるようになるかも。

shadeを使ってキューブ状のオブジェクトのレンダリング比較してみた。

左から、
１．「手法：パストレーシング、大域照明：なし」
２．「手法：パストレーシング、大域照明：パストレーシング」
３．「手法：レイトレーシング、大域照明：なし」

１番目が一番納得のいくできかなと。本来は２番目がフォトリアルな物になるはずが、間接光が適用されるため、他の物にくらべ光度が高くなってしまった。また、キューブの隙間から光が漏れてしまうのも不自然かも（本来漏れたほうが正しいのかも知れないが）。３番目は影がシャープだけどこれはこれでありかも。ライティングむずいなぁ。。。

レンダリング手法について簡単に説明。

パストレーシング

高品質なレンダリングが可能。影のぼかしや、材質の荒さを反映できる（擦りガラスのような表現が可能）。ただし、レンダリングに時間がかかるのと、ノイズが目立つという欠点を持つ。

レイトレーシング

影のぼかしや、荒さは反映されないがそこそこ高品質。その分高速。

スキャンライン

高速だが、品質は良くない。枚数を必要とするアニメーション向き。

大域照明

大域照明にパストレーシングやラジオシティを設定することで、間接光を適用できるため、フォトリアルなレンダリングが可能になる。

ちょこっとだけ記事を復活させました。ほんの１割程度だけど。。。残りは多分復活の予定はありません。多分。

Ｑ１.デートの時、相手が理由もなく１時間遅刻したら？

理由無く遅刻って。。。寝坊でもなく？？
そんなわけ分からないことする人とは付き合いませぬ。

Ｑ２.デートの時、相手がありえない服装だったら？

女の子で「ありえない」服装してる人って、 あんまいないような。。
アキバにいそうな、ゴスロリとかメイド服だったら、むしろ萌えるかとｗ

Ｑ３.デートの時、相手が携帯ばかりいじってて、あまり相手にしてもらえません。その時のあなたの一言は？

無言でガン見するｗ
てか、そういう人とはデートしませぬ。

Ｑ４.ご飯を食べてて、会計に行こうとした時に、相手が「ちょっとトイレ行ってくるから、先行ってて」どうします？

そんなことせんでも、最初から自分が払うかと。
というか、わざわざそんなことされたら引くなぁ。

Ｑ５.相手の人とお揃いの携帯にしたい!!とか思ったことありますか？

あんまそういうことに興味ないなぁ。 ペアリングはあったほうがいいけど。

Ｑ６.付き合ってまだ１ヶ月。親に紹介してほしいと相手に言われたらどうする？

紹介するかと。
「今日彼女つれてくるね～」的なノリで。

Ｑ７.大好きな人から結婚を申し込まれました！！即返事がほしいって。あなたはなんて答える？

そりゃモチロン「うん」だね～ｗ
好きな人と一緒になれれば、他なんもいらないね～ｗ

Ｑ８.次にバトンをまわす人。

とりあえず、これ見た人よろしく～（・ω・）

あぁ～、そろそろ彼女ほすぃなぁ。（´・ω・｀）

簡単な作例の前に、HTMLとXHTMLの違いについて説明します。

前回の記事に書いたように、両者とも文書構造を定義するという点では同じです。というか、基本的に構文はほとんど一緒です。

違いといえば、（XHTMLの場合は）<br>を始めとする対になっていないタグを<br />と書き換える必要があることと、タグは小文字で書く、閉じタグを省略してはいけないことぐらいです。細かい違いは他にもありますが、とりあえず はこのくらいで十分でしょう。
一言でいうと、XHTMLのほうが厳格な記述が求められるということです。

当ブログでは将来性を見据えてXHTMLを使った作例を紹介していきます。

それでは、作例を紹介しましょう。初めてということもあるので、簡単な例で。

<html>
<head>
     <title>HTMLサンプル</title>
</head>

<body>
     <h1>WEBデザインとは</h1>
     <p>印刷物デザインとはまた違ったデザインスキルが問われます。</p>
</body>
</html>

タグの簡単な説明。
まず<html>。これは、これからHTMLを書き始めるよと宣言するためのタグです。基本的にHTMLはこのタグで始まり、このタグで終わります。

このタグに限らず、（特別なタグを除き）全てのタグはこのように入れ子状になってなくてはなりません。

<head>はHTMLの補足情報などを指定するためのタグで、直接表示に影響は出ません。

<title>はページのタイトルを指定するためのタグで、その内容はブラウザの上部に表示されます。また、<title>は<head>内に記述します。

<body>は、画面に反映される部分でHTMLの肝となる部分です。基本的にこのタグ内にコーディングをしていくこととなります。

<h1>は見出しを表します。見出しはh1～h6まであり、h1は大見出し、h2はh1に対する小見出し…
というように、h1から順に使っていきます。

<p>は段落を表すためのタグです。

と、今回はここまで。次回は文書タイプの指定方法です。

CSSを使うにはいくつか方法があるのですが、外部ファイルとして扱う方法が一番です。

なぜ外部ファイルとして扱うのが一番かというと、複数のHTMLファイルで一つのスタイルシートを共有できるからです。

スタイルシートを共有すると、一つのスタイルシートを変更するだけで、読み込み元のHTMLファイル全てのデザインの変更できるので、数十、数百ページある大規模なサイトなどでは、その効果が実感できるかと思います。また、CSSファイルがキャッシュに残るので同じスタイルを何度も読み込む手間が省けます。

外部スタイルシートを読み込むにはHTMLの<head></head>内に以下のタグを埋め込むだけです。

<link rel="stylesheet" type="text/css" href="css/sample.css" />

この一行だけで完了です。
ちなみにこれは「css」フォルダ内の[sample.css]ファイルを読み込む場合です。

これだけでは読み込めたか分からないので、実際にスタイルを指定してみます。CSSファイルに下記のコードを書き込んでみてください。

@charset "shift_jis";

body{
     background-color:#0000FF;
}

背景が青くなっていれば読み込み成功です。

「@charset "shift_jis";」は必ず1行目に書きます。これは使用する文字コードを宣言するもので、これを指定せずに日本語を使用すると、文字化けが起こるので注意！！
ちなみに「body{background-color:#0000FF;}」はbody要素に背景色を指定しています。

次回は、スタイルシート構文についてです。（おそらく。

CSSはカスケーディングスタイルシートの略で、(X)HTML文書の見栄えを指定する技術のことです。（CSSは(X)HTMLをある程度知らないと理解できないと思うので、まずは(X)HTML講座を読んでみてください。）

CSSは便利ですが使用するブラウザによって、対応状況が異なるので、様々なブラウザに対する知識が必要になります。
表示の安定性を重視する場合、ハイブリッドレイアウト（大まかなレイアウトのみ、HTMLのテーブルを利用するテクニック）にすることもありますが、基本的にデザインは全てCSSで行う必要があります（デザインと文書の分離）。

CSSを効率よく使用するには、構造化されたHTML文書が必要不可欠です。

次回は、CSSファイルの読み込み方と記述方法です。（予定。

HTMLとは文書構造を指定するための言語です。

通常のテキストファイルは、どの部分が見出しで、どこが本文か等、人間が見れば構造を理解することが可能ですが、コンピュータにとっては単なる文字のカタマリであって、どの部分が重要なのかは理解できません。
そのテキストをHTML化することでコンピュータが、文書に対して重み付けすることが可能になります。（ただし、正しくマークアップしなければ元も子もありません。）

HTMLには様々なバージョンがあり、2006年8月現在、HTMLは4.01、XHTMLは1.1（ブラウザの都合上1.0を薦めます）まで勧告されています。

HTML4.01やXHTMLでは、非推奨要素（タグ）、非推奨属性が多数存在していて、これらの要素・属性のほとんどは見栄えを指定するものです。
基本的にHTMLやXHTMLで見栄えを指定することは、好ましくないとされているのでそれらはスタイルシート（CSS）で指定します。

当サイトはXHTML1.0で作成されているので、XHTML1.0をベースに解説していきます。（HTML、XHTML両方とも記述の違いは微々たるものなので、XHTMLから学習しても全く問題ありません。）

今回はここまで。次回は簡単な作例を紹介します。（たぶん。

日本ではもう何十年も前に、廃止されている徴兵制ですが、韓国、台湾など多くの国で今も施行されている。（アメリカも徴兵制はあるが、停止中のため志願制になっているらしい。）

この間テレビで韓国の徴兵制の特番をやっていたのでそれでなんとなく書いてみた。

約2年間という期間ではあるが、その間は誰もが（イスラエルは女性も対象らしい）正真正銘、軍人になるのである。

過酷な訓練や、実戦への投入で最悪死んでしまうこともあるので、何とか兵役を免れようとする人が後を立たないらしい。
病気と偽ったり、脱走したりして兵役を免れようとした場合、殺人や放火と同じくらい重い罪になるらしいです。
ただし、大きな功績を残した人や、跡取りが一人しかいない場合（死んでしまって子孫がたたれる場合がある為）は免除されるらしいです。

韓国は日本と街並みも人種も比較的似ているため、 パラレルワールドを見ているようだ。。。

徴兵制があることが正しいのか悪いのかはわからないけど、 日本にこの制度が無いがゆえ、いい加減に生きている人が多い気がする。

今までshadeを使って使った作品は、トップ絵のような直方体で構成されたものばかりだったので、今回は「携帯」っぽいものを作成。

きちんと角を丸めているので、そこそこ良い質感が出ているはず。ただ、光源がちょっとクドすぎたかも。

ちなみにレンダリング手法はレイトレーシングで、大域照明は無し。 レンダリング時間は5分ほど、パストレーシングとか、ラジオシティでレンダリングできるパソコンほしいなぁ。。。

ちなみに今だに角を丸められる条件がよく分からない。。。 自由自在にモデリングできる人は神ですな。