BUNZIN NET ポータル / プログラムは考え方です / メルマガバックナンバーリスト
前のメルマガ / 次のメルマガ

2010/12/06発行 『【櫻井です】宇宙戦艦の絵を表示したページの中身を説明します』

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
レンタル掲示板とクイズ投稿サイトを開発した櫻井文人の
プログラムの考え方が身につくメルマガ『プログラムは考え方です』
───────────────────────────────────
メルマガ発行人
櫻井文人のプロフィール ⇒ 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
できる初音ミク&鏡音リン・レン

できる初音ミク&鏡音リン・レン

価格:1,680円(税込、送料別)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■■ 宇宙戦艦の絵を表示したページの中身を説明します ─────────────────────────────────── 今回のメルマガでは、前回のメルマガで公開した宇宙戦艦の絵を表示した ページの中身について説明したいと思います。  宇宙戦艦の絵を表示したページ  ⇒ 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
できる初音ミク&鏡音リン・レン

できる初音ミク&鏡音リン・レン

価格:1,680円(税込、送料別)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ●櫻井が開発したレンタル掲示板は   コチラ ⇒ 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 (メール送信の際は、●を@に置き換えてください。) (櫻井が確実に読みますが、返信は保障できません。) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
メルマガ登録・解除
 
前のメルマガ / 次のメルマガ
企画・運営・管理 BUNZIN NET