back

GUI部品とイベント処理の基本をマスターしよう (4/5)

■main.cssをチェックしよう

これでmain.js（onclickの処理を記述したスクリプト）、index.htmlと２つのファイルの内容がだいたいつかめてきました。残るは、スタイルシートのファイルである「main.css」です。ここに、作成したWebページに関するスタイル情報が記述されています。

下のリスト欄に、main.cssのソースコードを掲載しておきました。けっこう長いのですが、まぁ基本的にはスタイルの属性情報がずらずらと書かれているだけなので、複雑で難しいというわけではありません。

ここでは、いくつかのパートとしてスタイルが用意されていることがわかります。整理するとこんな感じです。

ボディ――<body>の設定です。画面全般の基本となる設定になります。
フッター――#footerの設定です。これは、ページの最後に表示されているフッター情報の設定です。
コンテンツ――#contentの設定です。これが、具体的なコンテンツ表示部分の基本設定となります。
テキスト関係――___#text___と.selected ___#text___により、テキストに関する基本設定がされています。
GUI部品関係――#text1、#field1、#button1は、それぞれ画面に配置した３つのGUI部品に関する設定となります。

これらを見れば、例えばGUI部品の表示を調整したければ、#text1、#field1、#button1のスタイルを調整すれば良いことがわかるでしょう。また画面全体のグレーな背景は、bodyのbackground-imageで変更できることもわかります。

これらは、Dashcodeのインスペクタに用意されている設定によって生成されています。つまり、Dashcodeのデザインというのは、「作成したHTMLのタグに割り当てるスタイルシートを自動生成する」ことで行われていたのです。こうしたDashcodeの仕組みが分かってくると、Dashcodeに縛られない開発ができるようになってきます。

基本はDashcodeで作る。そしてある程度の概要ができあがったら、細かい調整などは、いちいちDashcodeなど使わずエディタで直接編集して行う。そんな開発スタイルも可能となりますね。


(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

body {
	margin: 0px;
	min-height: 356px;
	font-family: Helvetica;
	background-image: url(../Images/backgroundStripes.png);
	background-repeat: repeat repeat;
}
	
#footer {
	position: relative;
	font-family: Helvetica;
	font-size: 10pt;
	text-overflow: ellipsis;
	overflow: hidden;
	color: rgb(76, 86, 108);
	text-shadow: rgb(255, 255, 255) 0px 1px 0px;
	-webkit-margin-top-collapse: separate;
	margin-top: 10px;
	width: 156px;
	margin-left: auto;
	margin-right: auto;
}
	
#content {
	position: relative;
	-webkit-margin-top-collapse: separate;
	-webkit-margin-bottom-collapse: separate;
	width: auto;
	min-height: 326px;
	height: auto;
	margin-right: 0px;
	margin-top: 0px;
	margin-left: 0px;
}
	
___#text___ {
	color: black;
	font-family: Helvetica;
	font-size: 17px;
	text-overflow: ellipsis;
	overflow: hidden;
}
	
.selected ___#text___ {
	color: white;
}
	
#text1 {
	position: relative;
	-webkit-margin-top-collapse: separate;
	-webkit-margin-bottom-collapse: separate;
	text-shadow: rgb(135, 139, 135) 1px 2px 2px;
	width: 320px;
	font-size: 20px;
	margin-left: auto;
	margin-right: auto;
	min-height: 54px;
	height: auto;
}
	
#field1 {
	color: black;
	font-family: HelveticaNeue;
	-webkit-margin-top-collapse: separate;
	-webkit-margin-bottom-collapse: separate;
	position: relative;
	display: block;
	margin-top: 16px;
	width: 284px;
	font-size: 16pt;
	margin-left: auto;
	margin-right: auto;
}
	
#button1 {
	font-family: Helvetica;
	font-weight: bold;
	font-size: 12px;
	color: rgb(255, 255, 255);
	text-align: center;
	text-shadow: rgba(0, 0, 0, 0.589844) 0px -1px 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	-webkit-dashboard-region: dashboard-region(control rectangle);
	cursor: default;
	-webkit-user-select: none;
	position: relative;
	-webkit-margin-top-collapse: separate;
	-webkit-margin-bottom-collapse: separate;
	margin-left: 104px;
	margin-top: 21px;
	width: auto;
	margin-right: 92px;
	height: 30px;
}



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.