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

HTMLとCSSだけでドラクエ、FFっぽいウィンドウを作る方法 1/2
の続きです。
今回は、ファイナルファンタジー風ウィンドウの作り方。

　

★ FF3っぽい

いかにもFFな感じの青いウィンドウです。
でも初登場はFF3。
FF2までは、ドラクエと同じ黒いウィンドウで代用できます。
　
・サンプル画像

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

・サンプルコード

sample.html	sample.css
<div class="ff3">     ●●●● </div>	div.ff3 {     margin: 10px 10px 10px 10px;     padding: 5px 10px 5px 10px;     width: 200px;       background-color: #0000FF;     border: 2px solid #FFFFFF;     border-radius: 5px;     -moz-border-radius: 5px;     -webkit-border-radius: 5px;       text-align: center;     color: #FFFFFF;     font-size: 80%; }

・デモ

　

★ FF6っぽい

当時、この階段グラデーションを見たときは感動しました。
画像を貼り付ければ、スロットも再現できそう。
ウィンドウの上のほうは、陰を付けないと読みにくいです。
　
・サンプル画像

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

・サンプルコード

sample.html

<div class="ff6">     ●●●● </div>

sample.css

div.ff6 {     margin: 10px 10px 10px 10px;     padding: 10px 0px 10px 0px;     width: 190px;       background-color: #3300FF;     filter: progid:DXImageTransform.Microsoft.Gradient(Enabled=1, GradientType=0,         StartColorStr=#FFECE7FF,         EndColorStr=  #FF3300FF);     background-image: linear-gradient(top,         #ECE7FF,         #3300FF);     background-image: -moz-linear-gradient(top,         #ECE7FF  0%, #ECE7FF   9%,         #DBCFFF 10%, #DBCFFF  19%,         #C6B8FF 20%, #C6B8FF  29%,         #B0A5FF 30%, #B0A5FF  39%,         #9692FF 40%, #9692FF  49%,         #7F78FF 50%, #7F78FF  59%,         #6C5AFF 60%, #6C5AFF  69%,         #593CFF 70%, #593CFF  79%,         #461EFF 80%, #461EFF  89%,         #3300FF 90%, #3300FF 100%);     background-image: -webkit-gradient(linear, left top, left bottom,         color-stop( 0%, #ECE7FF), color-stop(  9%, #ECE7FF),         color-stop(10%, #DBCFFF), color-stop( 19%, #DBCFFF),         color-stop(20%, #C6B8FF), color-stop( 29%, #C6B8FF),         color-stop(30%, #B0A5FF), color-stop( 39%, #B0A5FF),         color-stop(40%, #9692FF), color-stop( 49%, #9692FF),         color-stop(50%, #7F78FF), color-stop( 59%, #7F78FF),         color-stop(60%, #6C5AFF), color-stop( 69%, #6C5AFF),         color-stop(70%, #593CFF), color-stop( 79%, #593CFF),         color-stop(80%, #461EFF), color-stop( 89%, #461EFF),         color-stop(90%, #3300FF), color-stop(100%,#3300FF));       border: 2px solid #FFFFFF;     border-radius: 10px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;       text-align: left;     color: #FFFFFF;     font-size: 90%;     font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;       text-shadow: 1px 1px 0px #000000; }

・デモ

　

★ FF7っぽい

グラデーションを斜めにしました。（IE以外のみ可能）
4隅の色を指定することはできないみたいですが、楕円状のグラデーションを使って擬似的に再現できそうです。
興味ある方は「-moz-radial-gradient」を検索してください。
　
・サンプル画像

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

・サンプルコード

sample.html

<div class="ff7">     ●●●● </div>

sample.css

div.ff7 {     margin: 10px 10px 10px 10px;     padding: 10px 0px 10px 0px;     width: 190px;       background-color: #0000FF;     filter: progid:DXImageTransform.Microsoft.Gradient(Enabled=1, GradientType=0,         StartColorStr=#FF0000DD,         EndColorStr=  #FF000044);     background-image: linear-gradient(top,         #0000DD,         #000044);     background-image: -moz-linear-gradient(left top,         #0000DD   0%,         #0000AA  20%,         #000044 100%);     background-image: -webkit-gradient(linear, left top, right bottom,         color-stop(  0%, #0000DD),         color-stop( 20%, #0000AA),         color-stop(100%, #000044));       border: 2px solid #FFFFFF;     border-radius: 10px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;       text-align: left;     color: #FFFFFF;     font-size: 90%;     font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;       text-shadow: 1px 1px 1px #000000; }

・デモ

　

★ リミットブレイクっぽい

LIMIT BREAK！
赤いウィンドウがカッコイイ！
　
・サンプル画像

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

・サンプルコード

sample.html

<div class="limit_break">     ●●●● </div>

sample.css

div.limit_break {     margin: 10px 10px 10px 10px;     padding: 10px 10px 10px 10px;     width: 150px;       background-color: #FF0000;     filter: progid:DXImageTransform.Microsoft.Gradient(Enabled=1, GradientType=0,         StartColorStr=#FFDD0000,         EndColorStr=  #FF440000);     background-image: linear-gradient(top,         #DD0000,         #440000);     background-image: -moz-linear-gradient(left top,         #DD0000   0%,         #AA0000  20%,         #440000 100%);     background-image: -webkit-gradient(linear, left top, right bottom,         color-stop(  0%, #DD0000),         color-stop( 20%, #AA0000),         color-stop(100%, #440000));       border: 2px solid #FFFFFF;     border-radius: 10px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;       text-align: center;     color: #FFFFFF;     font-size: 110%;     font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;       text-shadow: 1px 1px 1px #000000; }

・デモ

　

以上、色んなウィンドウの作り方を紹介してみました。
注意点をいくつか・・・。

上のCSSファイルのサンプルの中には、特にフォントを指定していないものがありますが、それらにはより親要素のフォントが使用されます。
デフォルトとしてゴシック体が使用されるように、CSS内のbody部分の設定を見直すと良いと思います。
（例では、「ＭＳ Ｐゴシック」その他を使用）

あと、今回挙げたHTML、CSSが規約に100%準拠してるか・・・？
・・・というと、全然そんなことはないので、そのへんを気にする方は規約に沿った形に書き直してください。

　

まず、上記のコードをコピー＆ペーストし、今お使いのCSSファイルの末尾にでも追加しておきます。
そうやって環境を整えてしまえば、あとは自分のブログで使いたい場面があったとき、簡単にドラクエ、FF風ウィンドウを登場させることができます。
（セリフを「div」タグで囲むだけ！）

なにも力の入ったメニュー仕立てにする必要はありません。

こんな感じで文中に使っちゃえばいいんです。

日記の本文をまるごと、めちゃでっかいウィンドウに表示しても面白いかも・・・？

　
RPGのキャラになりきったブログ更新などにも、便利そうですね。

もし わしの みかたになれば せかいの はんぶんを おまえに やろう

いいですとも！

　
CSS3は強力な機能がたくさんあるので、もっとゲームっぽく近付けるかもしれません。
今回挙げたサンプルコードを元に、いろいろアレンジしてみてください。（DQとFFをフュージョンさせるとか・・・）
これからドラクエ、FFっぽいサイトが増えることを願って！

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

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