HTMLとCSSだけでドラクエ、FFっぽいウィンドウを作る方法 1/2

最近、このブログで2つの箇所を見直しました。

　・1つ目は、丸い青いウィンドウでショートカットメニューを作ったこと。 → （参考）
　・2つ目は、記事のタイトルに陰をつけたこと。

　
これら2つはどちらも、CSS（スタイルシート）をいじるだけで実現できました。
その最中に、ふと思ったのです。

「あれ・・・？このテクを使えば、ドラゴンクエストっぽいウィンドウが作れるんじゃ・・・？」

なぜなら、前者に白枠を追加するだけでドラクエっぽくなりそうだし、
後者を使えばDQ8、9の戦闘中、画面下に出るテキストを再現できそう・・・。

　
・・・というわけで、今回はその成果発表です。
Internet Explorerは、最新版のIE8でもCSS3をサポートしていないため、まだ完全には表示できません。
バージョンアップされ、正式にサポートされるのを待ちましょう。
それまでは、IEで表示が崩れてもそれなりに読めるように、気を付けて使いましょう。

　

HTMLとCSSだけで作るメリットは、こんな感じです。

・背景画像が必要ないので、ページの読み込みが軽くなる。
・ウィンドウのサイズが変わっても、新たに画像を作る必要がない。
・マウスでテキスト部分を選択できる。
・「うぉ・・・！？画像使ってないの？かっけーー！！」と思ってもらえる（かもしれない）。

　
今回の記事を書くために、以下のサイトを参考にさせて頂きました。
ありがとうございました。
　・画像を使わずにCSSだけで角を丸くする方法 – ［ホームページ作成］All About
　・hail2u.net – Weblog – CSSグラデーションのちょっとしたテクニック #1
　・CSS（スタイルシート）だけでグラデーションを表現する方法のまとめ｜web bibo

　

★ DQ1っぽい

まずは、元祖ドラクエのウィンドウです。
全てはここから始まった！
（「いや、Wizardryのまんまだろ・・・」とか言わない）
　
・サンプル画像

Vista IE8	XP Firefox3.6	MacOSX Chrome（たぶんSafariでも）

・サンプルコード

sample.html	sample.css
<div class="dq1">     <table>         <tr>             <td>                 ●●●●             </td>             <td>                 ■■■■             </td>         </tr>     </table> </div>	div.dq1 {     margin: 10px 10px 10px 10px;     padding: 5px 10px 5px 10px;     width: 150px;       background-color: #000000;     border: 2px solid #FFFFFF;     border-radius: 5px;     -moz-border-radius: 5px;     -webkit-border-radius: 5px;       text-align: left;     color: #FFFFFF;     font-size: 80%; }

・デモ

　

★ DQ5っぽい

項目を分割する横棒が加わりました。
さらに、フォントをメイリオで滑らかにしました。
フォントサイズも、スーファミらしくちょっと大きく・・・。
　
・サンプル画像

Vista IE8	XP Firefox3.6	MacOSX Chrome（たぶんSafariでも）

・サンプルコード

sample.html

sample.css

<div class="dq5">     ●●●●     <hr/>     ■■■■ </div>

div.dq5 {     margin: 10px 10px 10px 10px;     padding: 10px 10px 10px 10px;     width: 150px;       background-color: #000000;     border: 2px solid #FFFFFF;     border-radius: 10px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;       text-align: center;     color: #FFFFFF;     font-size: 100%;     font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; }   div.dq5 hr {     margin: 0px -10px 10px -10px;     border: 1px solid #FFFFFF; }

・デモ

　

★ DQ7っぽい

背景を半透明にし、文字に陰を付けました。
これは、かなり見栄えするのでオススメです。
ただ、位置指定が絶対座標になり、高さも固定になるなど、やや複雑です。
　
・サンプル画像

Vista IE8	XP Firefox3.6	MacOSX Chrome（たぶんSafariでも）

・サンプルコード

sample.html

sample.css

<div class="dq7_1">     &nbsp; </div> <div class="dq7_2">     ●●●● </div>

div.dq7_1 {     position: absolute;     margin: 10px 10px 10px 10px;     padding: 10px 10px 10px 10px;     width: 160px;     height: 70px;       background-color: #000000;     filter: alpha(opacity=30);     -moz-opacity: 0.3;     opacity: 0.3;       border: 2px solid #FFFFFF;     border-radius: 20px;     -moz-border-radius: 20px;     -webkit-border-radius: 20px; }   div.dq7_2 {     position: absolute;     margin: 10px 10px 10px 10px;     padding: 10px 10px 10px 10px;     width: 160px;     height: 70px;       border: 2px solid #FFFFFF;     border-radius: 20px;     -moz-border-radius: 20px;     -webkit-border-radius: 20px;       text-align: center;     color: #FFFFFF;     font-size: 100%;     font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;       filter: dropshadow(color=#000000, offx=1, offy=1, positive=1);     text-shadow: 1px 1px 0px #000000; }

・デモ

　

★ DQ8、9っぽい

戦闘中に表示されるテキストっぽくしました。
枠を無くして、文字の後ろにぼかした陰を入れて完成。
これは、ブラウザによって見かけがだいぶ変わってきますね。

　
・サンプル画像

Vista IE8	XP Firefox3.6	MacOSX Chrome（たぶんSafariでも）

・サンプルコード

sample.html	sample.css
<div class="dq8">     ●●●● </div>	div.dq8 {     margin: 0px 0px 0px 0px;     padding: 10px 10px 10px 10px;       border: 0px;     text-align: left;     color: #FFFFFF;     font-size: 90%;     font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;     font-weight: bold;       filter: glow(color=#000000, strength=2);     text-shadow: 0px 0px 8px #000000; }

・デモ

　

あ”ー、早くIE8が丸い角に対応してくれないかなー・・・
（時間の問題とは思いますけど）

とにかく、こんな簡単にドラクエ風ウィンドウが作れるなんて、時代は進んだものです。
今までドラクエそっくりの画像を用意して、ウィンドウ背景にしていたのに比べて、とてもスマートな表現方法です。

　
次回は、ファイナルファンタジーの青いウィンドウを作ります・・・！
FF6のグラデーション再現が熱いぜ。

　→HTMLとCSSだけでドラクエ、FFっぽいウィンドウを作る方法 2/2

関連する（かもしれない）エントリー

• HTMLとCSSだけでドラクエ、FFっぽいウィンドウを作る方法 2/2
• モンスターバトルロード、衛藤ヒロユキ総合スレッドの過去ログを保管完了
• ドラクエIXとモンスターバトルロードの過去ログを収集スタートしました
• ゲーマーの視点から正々堂々と、にほんブログ村を攻略しよう 2/3
• 休止していたサイトを再開する時には、休止の理由を書かない方が良い