(C)MIX-iのブログ -3ページ目
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 1 | 2 | 3 | 4 | 5 | 最初次のページへ >>

ごくたまにのプログラミング講座？考察？－ＣＳＳ編－

編とかついてるけどとくにこれが続いていくわけでもなんでもない。
とりあえずソースはります。

========
index.html
========

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="index.css">
<title>SAMPLE BLOG</title>
<meta content="ブログサンプル" name="keywords" />
<meta content="SAMPLEブログ" name="description" />
</head>
<body>

<table style="width: 100%" align="center"><!-- 全体のズレ防止　保険 -->
<tr>
<td>
<div id="center"><!-- 全コンテンツをセンター寄せ -->

<table style="width: 100%" align="center"><!-- フッター部分がメインコンテンツに組み込まないよう　保険 -->
<tr>
<td>



<div id="all"><!-- 表示ズレ防止のため一番外から全てのコンテンツをラップ -->
<div id="all"><!-- ヘッダーからフッターを含まない変動部分のみラップ -->
<div id="td_main"><!-- Blog Title & infomation -->
<div id="top"><a href="../">SAMPLE BLOG</a></div>
<div id="font-14px">サンプルです。</div>
</div>
<div id="sub1"><!-- サブメニュー（左）のソース -->
<div id="sub1_menu1"><!-- 新着記事一覧 -->
<div id="menu_back">記事一覧</div>
<ul>
<li>消費税引き上げ問題</li>
<li>NHK改革</li>
</ul>
</div>
<div id="sub1_menu1"><!-- NEWS取得 -->
<div id="menu_back">NEWS取得元</div>
<ul>
<li>Yahoo JAPAN</li>
</ul>
</div>
<div id="sub1_menu1"><!-- リンク集 -->
<div id="menu_back">関連サイトリンク</div>
<ul>
<li><a href="http://yahoo.co.jp/" target="_blank">Yahoo!</a></li>
<li><a href="http://www.47news.jp/" target="_blank">47News</a></li>
<li><a href="http://google.co.jp//" target="_blank">Google</a></li>
</ul>
</div>
<div id="sub1_menu1"><!-- RSS -->
<div id="menu_back">RSS購読</div>
<ul>
<li>RSS受信登録</li>
</ul>
</div>
<div id="sub1_menu1"><!-- PR -->
<div id="menu_back">PR</div>
<ul>
<li>○○が○○で１０００円！</li>
</ul>
</div>
</div><!-- ここで左サブメニューを終了 -->

<!-- ====================================以下右ブロック部分==================================== -->

<div id="sub2"><!-- サブメニュー（右）のソース -->
<div id="sub2_menu1"><!-- 管理人 -->
<div id="menu_back">管理人情報</div>
<img src="monar_10.gif" width="140px" height="140px" alt="管理人アバター" />
<ul>
<li>xx/xx/xx</li>
<li>男</li>
</ul>
※引用元<br />
<a href="http://matsucon.net/material/mona/bigsize.html">ここから借りました。</a>
</div>
<div id="sub2_menu1"><!-- ランキング -->
<div id="menu_back">ランキング</div>
<ul>
<li>現在不参加</li>
</ul>
</div>
<div id="sub2_menu1"><!-- 管理用 -->
<div id="menu_back">管理用</div>
<ul>
<li>管理者ログイン</li>
</ul>
</div>
</div><!-- ここで右サブメニューを終了 -->

<!-- ====================================以下メインブロック部分==================================== -->

<div id="main">
<div id="main_o"><!-- 記事１ -->
<div id="menu_back_main">消費税引き上げ問題</div>
<div id="kiji">
０８年度第２次補正予算案を衆院通過させた麻生政権に、早くも次のハードルが立ちはだかった。１４日の自民党政調全体会議で、政府が近く閣議決定する「経済財政の中長期方針と１０年展望」に対し、１１年度からの消費税増税を前提にしていることに批判が噴出したのだ。１５日に始まる０９年度税制改正関連法案の党内審議も、消費税率引き上げを明記した「中期プログラム」との関係を巡って紛糾は必至。定額給付金に続き、消費税増税を巡る党内の異論が早くも表面化し、政府・与党の国会対応も厳しさを増すことになりそうだ。(毎日新聞)
</div>
</div>
<div id="main_o"><!-- 記事２-->
<div id="menu_back_main">NHK改革</div>
<div id="kiji">
ＮＨＫは１４日、ＮＨＫの０９年度予算と事業計画を発表した。事業収入が前年度比１２４億円増の６６９９億円に対し、事業支出は同２５６億円増の６７２８億円で、２９億円の赤字予算となった。(毎日新聞)
</div>
</div>
</div>


</div><!-- allでラップ化 -->
</td>
</tr>
</table>
<table style="width: 100%" align="center"><!-- Footerズレ防止　保険 -->
<tr>
<td>

<!-- ====================================以下フッター部分==================================== -->

<div id="footer">

(C)MIX-i

</div>
</div><!-- allで2重ラップ化 -->

</td>
</tr>
</table>


</div><!-- 全コンテンツをセンター寄せ終わり -->
</td>
</tr>
</table>

</body>
</html>

=========
ここまでがindex.htmlのファイルです。
=========

これだけで表示した場合すごいことになります。
とりあえずこれをメモ帳かなんかにコピペして「index.html」というファイル名で保存。


次にＣＳＳ部分です。

=========
ここからＣＳＳ
=========

/*

CSS作成　(C)MIX-i

*/

a {
color: #008000;
}
a:visited {
color: #008000;
}
a:active {
color: #FFFF00;
}
a:hover {
color: #FFFF00;
}
body {
background-color:black
}

#top {
color:orange;
font-size:30px;
margin:10px;
}

#td_main {
width:794px;
border-style:solid;
border-color:orange;
border-width:3px
font-family:"ＭＳ Ｐゴシック", Arial, sans-serif;
text-align:left;
margin-left:0px;
margin-right:0px;
margin-top:2px;
margin-bottom:8px;
float:none;
}

#center{
text-align:center;
}

#font-14px {
font-size:14px;
color:orange;
margin-top:0px;
margin-left:10px;
margin-bottom:10px;
}
#all {
text-align:center;
width:800px;
margin:0px;
}

/* ↓メインコンテンツ */
#main {
width:498px;
margin-right:1px;
margin-left:1px;
float:right;
color:orange;
}

/* ↓左サブメニュー */
#sub1 {
width:150px;
float:left;
color:orange;
}
/* ↓右サブメニュー */
#sub2 {
width:150px;
float:right;
color:orange;
}

#menu_back {
background-color:orange;
color:green;
font-weight:bold;
font-size:18px;
}

#menu_back_main {
background-color:orange;
color:green;
font-weight:bold;
font-size:30px;
}


li {
text-align:left;
}

#sub1_menu1 {
border-style:solid;
border-color:orange;
font-family:"ＭＳ Ｐゴシック", Arial, sans-serif;
color:orange;
margin-top:2px;
margin-bottom:6px;
margin-left:0px;
margin-right:0px;
}

#sub2_menu1 {
border-style:solid;
border-color:orange;
font-family:"ＭＳ Ｐゴシック", Arial, sans-serif;
color:orange;
margin-top:2px;
margin-bottom:6px;
margin-left:0px;
margin-right:0px;
}

#main_o {
border-style:solod;
border-color:orange;
font-family:"ＭＳ Ｐゴシック", Arial, sans-serif;
color:orange;
margin-top:3px;
margin-bottom:10px;
margin-left:2px;
margin-right:2px;
}

#kiji {
font-family:"ＭＳ Ｐゴシック", Arial, sans-serif;
font-size:medium;
font-style:normal;
margin:10px;
}

#footer {
width:794px;
border-style:solid;
border-color:orange;
font-family:"ＭＳ Ｐゴシック", Arial, sans-serif;
color:orange;
margin-top:5px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:center;


========
ここまでCSSファイルです。index.cssというファイル名で保存してください。
========

これで手元にindex.html index.cssの２つのファイルができたと思います。
次にｈｔｍｌファイル中の画像なんですが、よくわからない人は「monar_10.gif」という画像を用意してください。
おおきかれちいさからＨＴＭＬ内で縮小or拡大する処理があるので関係ないです。
おおきいと重いです。


これで完成です。
表示してみたら暗い画面に目がチカチカなる色でなんか手抜きのものがでてくると思います。


あとながくなりすぎるので解説はおもにしてませんが、ＨＴＭＬファイル中にでてくるテーブルタグ「<table>～</table>」がなんであるのかって思う人いるかもしれません。
それがわかった人はＣＳＳ結構勉強してる人です。

なんでテーブルタグを３箇所設置しているかというと、いわゆる保険です。
ブラウザは世界にかなりの種類があります。
日本だけでもIE Firefox safari opera mozira ...etcなどなどかなりあり、エンジンも基本的に独自のものを搭載しています。
同じエンジンでも作るひとが改造してたり・・・


つまりＣＳＳだけで不十分な部分はタグで補うのです。
CSSが標準化したのはHtml ver4.01からなのでそれ以前はテーブルタグしかつかえない！ってことになるかもしれません。

CSSの<div id="all"></div>でずれる場合はテーブルタグでむりにくっつけたりしてます。


今回こっちで用意したhtmlとcssはかなり適当につくったものですが、初めてやる人～少しかじったことがあるっていう人には理解できると思います。

Pythonプログラム

＝＝＝＝＝＝＝＝＝＝＝＝＝
ソース
＝＝＝＝＝＝＝＝＝＝＝＝＝
#!/usr/bin/python
# -*- coding: utf-8 -*-
'''
ファイルをアップロードする
'''
html = '''Content-Type: text/html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<title>ファイルをアップロードする</title>
</head>
<body>
<h1>ファイルをアップロードする</h1>
<p>%s</p>
<form action="test15.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" />
</form>
</body>
</html>
'''

import cgi
import os, sys

try:
import msvcrt
msvcrt.setmode(0, os.O_BINARY)
msvcrt.setmode(1, os.O_BINARY)
except ImportError:
pass

result = ''
form = cgi.FieldStorage()
if form.has_key('file'):
item = form['file']
if item.file:
fout = file(os.path.join('/tmp', item.filename), 'wb')
while True:
chunk = item.file.read(1000000)
if not chunk:
break
fout.write(chunk)
fout.close()
result = 'アップロードしました。'

print html % result

＝＝＝＝＝＝＝＝＝＝＝
http://www.gesource.jp/programming/python/cgi/0115.html
↑こちらから引用させていただきました。


Perlにかわる新しい開発言語がPythonです。
いままで携帯電話ではCGIはPerl言語で記述していました。
しかし、こっちを利用したモバイル機がでてます。

しかしドコモではこの言語はまだ理解できないみたい･･･

オレのもってる端末で一番新しい機種がSH903iなんで無理なだけかもしれないけど・・・

最新FOMAでは対応しているかもしれません。

最新機種がほしいんですけどデザインがよいのは機能がないし・・・

機能優先するとデザインが劣るし・・・




次のがでるのをまつか。。。


PS3もほしいんですよね。。。。


Xbox360もほしい・・・
XANAでXbox用のゲームつくってみたい・・・


ということで今日はこれでおしまい。

東京レポ更新

少しずつ更新しています。
http://mix-i.com/blog_tokyo/

あとアプリ新作出す前にすこし大学のことでやることがいっきに増えたのと後期レポートや試験が重なった為２月上旬から中旬まで待ちうけ画像程度の更新になると思います。


自分はエヴァンゲリオンがすきなんでパロディ的な待受けをつくったりするようです←

明けまして

おめっとさん


今年はアプリ新作だせるはずです…きっとラブラブ

更新情報とお知らせ

更新情報からです。
・東京レポート総まとめ　２日目・３日目のページをPC向けに公開開始。
・動作確認用ページ（携帯）にDocomo用テストプログラムを配置。
※テストプログラムといっても実機でうまく描写されているかどうかよくゲームのLOAD画面などである右上とかにむかっておなじような画面が延々とながれていくようなあれです。

おしらせ

すごい眠いので先にいっておきます！

あけおめことよろ！


ってことで寝ます　おやすみｗ
<< 前のページへ最新 | 1 | 2 | 3 | 4 | 5 | 最初次のページへ >>

ブログ画像一覧を見る

このブログをフォローする