━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
レンタル掲示板とクイズ投稿サイトを開発した櫻井文人の
プログラムの考え方が身につくメルマガ『プログラムは考え方です』
───────────────────────────────────
メルマガ発行人
櫻井文人のプロフィール ⇒ http://www.bunzin.net/program/prof.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
こんにちは、メルマガ発行人の櫻井文人です。
最近、鉄道関連のことが気になりはじめてきました。
詳しくは編集後記で。
前回のメルマガでは、とりあえず宇宙戦艦の絵を描いてみましたが、
今回は、その宇宙戦艦に絵を表示したページの中身について
説明していこうと思います。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【おすすめ】今回も『初音ミク』特集です。
クリプトン VOCALOID2 キャラクター ボーカル シリーズ01 初音ミク HATSUNE MIKU
http://hb.afl.rakuten.co.jp/hgc/0c61938e.9ee9532e.0c61938f.d28ac561/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fakibakan%2f10007365%2f%3fscid%3daf_ich_link_mail&m=http%3a%2f%2fm.rakuten.co.jp%2fakibakan%2fi%2f10007365%2f
SEGA VOCALOID 初音ミク オルゴールフィギュアVer.1.5 全2種セット(セガ)
http://hb.afl.rakuten.co.jp/hgc/0c6195dc.183371ba.0c6195dd.f7b65a2d/?pc=http%3a%2f%2fitem.rakuten.co.jp%2frobotrobot%2f20453%2f%3fscid%3daf_ich_link_mail&m=http%3a%2f%2fm.rakuten.co.jp%2frobotrobot%2fi%2f10016680%2f
できる初音ミク&鏡音リン・レン
http://hb.afl.rakuten.co.jp/hgc/0c84838c.f5745ff8.0c84838d.9e70e911/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fbook%2f5335382%2f%3fscid%3daf_ich_link_mail&m=http%3a%2f%2fm.rakuten.co.jp%2fbook%2fi%2f12728419%2f
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■■ 宇宙戦艦の絵を表示したページの中身を説明します
───────────────────────────────────
今回のメルマガでは、前回のメルマガで公開した宇宙戦艦の絵を表示した
ページの中身について説明したいと思います。
宇宙戦艦の絵を表示したページ
⇒ http://www.bunzin.net/program/mailmaga/backnumber/20101129/
■ ページを構成する3つのファイル
これから進めていくゲーム作りでは、
JavaScript、HTML、そしてスタイルシートの3つを使います。
JavaScriptでプログラム、HTMLで画面の構造を、そしてスタイルシートでは
画面のデザインを作っていくことになります。
宇宙戦艦の絵を表示したページも、JavaScript、HTML、そしてスタイルシートを
使用していくため、以下のようなファイル構成になっています。
index.html ・・・HTMLを記述するためのファイル
style.css ・・・スタイルシートを記述するためのファイル
battleship.js ・・・JavaScriptを記述するためのファイル
index.htmlがブラウザに表示されると、style.cssとbattleship.jsも
読み込まれるようになっています。
現時点ではHTMLでの画面の構造だけしかできていないので、
style.cssとbattleship.jsの中身は空っぽです。
■ index.htmlの中身
index.htmlの中身は以下のようになっています。
1行目:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
2行目:<head>
3行目:<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
4行目:<title>宇宙戦艦SAR</title>
5行目:<link rel="stylesheet" href="style.css" type="text/css" />
6行目:<script type="text/javascript" src="battleship.js"></script>
7行目:</head>
8行目:
9行目:<body>
10行目:
11行目:<h1>宇宙戦艦SAR</h1>
12行目:
13行目:<span id="my_battleship" style="position: absolute; top: 100; left: 100;"><img src="usr_bs_001.gif"></span>
14行目:
15行目:</span>
16行目:
17行目:</body>
18行目:
19行目:</html>
2行目から7行目がヘッダー部分、そして9行目から17行目が
実際にブラウザの画面に表示される部分になります。
5行目はスタイルシートのファイル「style.css」を読み込むための記述です。
読み込まれたスタイルシートに定義されたデザインがindex.htmlに反映されるようになります。
6行目はJavaScriptのファイル「battleship.js」を読み込むための記述です。
読み込まれたJavaScriptのプログラムがindex.htmlから使えるようになります
13行目では宇宙戦艦の画像「usr_bs_001.gif」を読み込んで表示しています。
画像を表示するだけであれば「<img src="usr_bs_001.gif">」だけで事足りるのですが、
今後、画像を動かすことを想定して「<span 省略>」「</span>」で囲っています。
この部分の詳細は、実際に画像を動かす時に説明します。
■ 次回のメルマガでは・・・
次回は、battleship.jsの中に少しJavaScriptのコードを記述して
宇宙戦艦の画像を動かしてみたいと思います。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■■ 編集後記
───────────────────────────────────
最近、鉄道関係が気になり出してきました。
実は、昔から鉄道模型(Nゲージ)で遊んだりなどして、
鉄道に関する趣味は広く浅くあったのですが、
また、最近鉄道に関することが気になりだぢてきたのです。
ということで、突然ですが鉄道に関するブログをはじめることにしました。
鉄道に関するブログ「BUNZIN railroad 」
⇒ http://bunzin.net/railroad/blog/
主に鉄道模型に関することや、出先で撮影した鉄道関係の写真を
ブログに掲載していこうと思いますので、もし興味があれば
たまに見に来ていただければと嬉しいです。
最後までお読みいただき、ありがとうございました。
───────────────────────────────────
メルマガに関してのご意見・ご要望は、以下の受付フォームから
常時受け付けております。
ご意見・ご要望 受付フォーム
⇒ http://www.bunzin.net/program/mailmaga/demand/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【おすすめ】今回も『初音ミク』特集です。
クリプトン VOCALOID2 キャラクター ボーカル シリーズ01 初音ミク HATSUNE MIKU
http://hb.afl.rakuten.co.jp/hgc/0c61938e.9ee9532e.0c61938f.d28ac561/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fakibakan%2f10007365%2f%3fscid%3daf_ich_link_mail&m=http%3a%2f%2fm.rakuten.co.jp%2fakibakan%2fi%2f10007365%2f
SEGA VOCALOID 初音ミク オルゴールフィギュアVer.1.5 全2種セット(セガ)
http://hb.afl.rakuten.co.jp/hgc/0c6195dc.183371ba.0c6195dd.f7b65a2d/?pc=http%3a%2f%2fitem.rakuten.co.jp%2frobotrobot%2f20453%2f%3fscid%3daf_ich_link_mail&m=http%3a%2f%2fm.rakuten.co.jp%2frobotrobot%2fi%2f10016680%2f
できる初音ミク&鏡音リン・レン
http://hb.afl.rakuten.co.jp/hgc/0c84838c.f5745ff8.0c84838d.9e70e911/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fbook%2f5335382%2f%3fscid%3daf_ich_link_mail&m=http%3a%2f%2fm.rakuten.co.jp%2fbook%2fi%2f12728419%2f
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
●櫻井が開発したレンタル掲示板は
コチラ ⇒ http://www.bunzin.gr.jp/m_board/
画像のアップロードも可能なレンタル掲示板です。
無料ですのでお気軽にどうぞ。
●櫻井が開発したクイズ投稿サイトは
コチラ ⇒ http://www.bunzin.gr.jp/quiz/
あなたが考えたクイズを投稿することができます。
投稿されたクイズに回答することもできます。
無料ですのでお気軽にどうぞ。
●BUNZIN NET アプリ
コチラ ⇒ http://www.bunzin.net/app/
●プログラム用語辞典
コチラ ⇒ http://www.bunzin.net/program/dictionary/
●お手軽!VBScriptを使ってみよう
コチラ ⇒ http://www.bunzin.net/program/vbscript/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
メルマガ発行人 櫻井文人
メルマガ発行責任者情報は
コチラ ⇒ http://www.bunzin.net/program/mghsinfo.html
アドレス変更と登録解除はコチラ ⇒ http://www.mag2.com/m/0000293166.html
メルマガバックナンバーは
コチラ ⇒ http://www.bunzin.net/program/mailmaga/backnumber/
櫻井文人のプロフィール ⇒ http://www.bunzin.net/program/prof.html
ご意見・ご感想はコチラ ⇒ bunzin●bunzin.gr.jp
(メール送信の際は、●を@に置き換えてください。)
(櫻井が確実に読みますが、返信は保障できません。)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|