HTMLの基本から勉強してみる：So-netブログ

	ブログをはじめるログインキャシング、カードローンのことならウェッブキャッシングドットコム！

中央寄せ

前にも書きましたが中央寄せの方法です。

中央寄せするブロック要素、サイトの内容全体の場合は、divです。
幅を指定して、左右のmarginをautoに設定します。
サンプルソースはこんな感じです。

分かりやすくするためにHTML内にCSSを記述していますが分けたほうがいいです。
中央寄せサンプルです。
ほとんどのブラウザで中央寄せになっているはずです。

ですが、IE6ではこの方法では中央寄せになりません。(うそです、理由は下に書いてあるとおりです)
IE6なんて使っていないという人は
Adobe BrowserLabを使ってみてください。
いろんなブラウザでの表示テストができるので、重宝します。

擬似的なものなので実際のブラウザでの表示と同じになるとは限りませんし、Javascriptの動作チェックなどもできないのであくまで表示のみのチェックです。

ここでIE6では中央表示できませんという結果になるはずだったのですが、Windows7 64bit、Vistaで、Adobe BrowserLabを使って表示させましたが、中央寄せになってしまってました。

なんでだろうと調べると、xml宣言を付けてなかったからのようです。
xml宣言を外すと中央寄せになるみたいです。
そんな情報あったかなと思ってさらに調べてみると、xml宣言をつけたときに互換モードになるからmarginのautoがきかないということでした。

ちょっと予定してたのと違いますが、ie6を考慮する場合は、外したほうがいいということが改めて分かりました。
xml宣言をつけた物

付けてもできないことはないですが、やろうとすると労力が半端無くかかります。

2011-06-18 08:53 nice!(1) コメント(0) トラックバック(0) [編集]
共通テーマ：パソコン・インターネット

HTMLとXHTML

基本

久々の更新になります。
2カラム3カラム(列)などのレイアウトについて少しずつ解説したいと思いますが、その前にXHTMLについて書いてみます。

XHTMLは、HTMLに比べてコードの記述方法が厳しくなっています。
色々あるので代表的なところをいくつか書きます。

要素名、属性名は小文字で書く

HTMLでは、
<A HREF="xxxx">HTMLのリンク</A>
と書いてもいいのですが、XHTMLでは、
<a href="xxxx">HTMLのリンク</a>
と書かなければいけません。

開始タグ、終了タグをセットにする

これはHTMLでも普通にしていると思いますが、例えば
<div><p>HTML</p>
みたいに</div>を省略してはいけないということです。
また、空要素(開始タグのみで内容の記述がないもの)の場合、必ず/か終了タグをつけるようにします。
imgやbrといったものです。XHTMLで記述する場合は、
<img src="xx.jpg" />
<br />
というように書きます。

XML宣言をつける

XHTMLの先頭に
<?xml version="1.0" encoding="utf-8"?>
のような宣言文をつけなければいけないことになっていますが
IE6のバグの問題もあり、付けていないものが多いです。
なくてもW3Cの構文チェックではエラー無しと判定されるので、付ける必要がなければ今のところは付けないほうがいいかもしれません。

他にもありますが代表的なものだけ書きました。
次からレイアウトについて書いていきたいと思います。

タグ：HTML XHTML

2011-06-11 06:06 nice!(0) コメント(2) トラックバック(0) [編集]
共通テーマ：パソコン・インターネット

PHPでカレンダー作成

PHP

書くことが思いつかなかったので、1年ぐらい前に作ったPHPのカレンダーのソース公開です。

PHPを全く使ったことがなかったときに、変数の使い方を覚えるだけじゃ面白くないと思って
3時間ぐらいで大枠を作った記憶があります。
たぶん、全部コードを書いたわけじゃなくどっかから流用したものを変更したんだと思います。

コメントが多いのでソースの紹介だけです。

<?<a href="http://match.seesaa.jp/afr.pl?hid=25&sid=html-study-diary:000287314356&k=xml&ic=utf8" class="affiliate-link" target="_blank">xml</a> version="1.0" encoding="utf-8"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
	<head>
		<meta <a href="http://match.seesaa.jp/afr.pl?hid=25&sid=html-study-diary:000287314356&k=http&ic=utf8" class="affiliate-link" target="_blank">http</a>-equiv="Content-<a href="http://match.seesaa.jp/afr.pl?hid=25&sid=html-study-diary:000287314356&k=Type&ic=utf8" class="affiliate-link" target="_blank">Type</a>" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<link rel="stylesheet" type="text/css" href="../css/calendar.css">
<title>
			2011年3月のカレンダー
		</title>
	</head>
	<<a href="http://match.seesaa.jp/afr.pl?hid=25&sid=html-study-diary:000287314356&k=body&ic=utf8" class="affiliate-link" target="_blank">body</a>>
	<h1>2011年3月のカレンダー</h1>
	<table>
		<tr>
			<th class="sunday">日</th>
			<th>月</th>
			<th>火</th>
			<th>水</th>
			<th>木</th>
			<th>金</th>
			<th class="saturday">土</th>
		</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr><td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr><td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td class="todayColor">19</td>
</tr>
<tr><td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr><td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<form method="<a href="http://match.seesaa.jp/afr.pl?hid=25&sid=html-study-diary:000287314356&k=post&ic=utf8" class="affiliate-link" target="_blank">post</a>" action="calendar.php">
<input type="hidden" value="2011" name="year">
<input type="hidden" value="2" name="month">
<input type="submit" value="前月">
</form>
<form method="post" action="calendar.php">
<input type="hidden" value="" name="year">
<input type="hidden" value="" name="month">
<input type="submit" value="当月">
</form>
<form method="post" action="calendar.php">
<input type="hidden" value="2011" name="year">
<input type="hidden" value="4" name="month">
<input type="submit" value="来月">
</form>
 
</body>
</html>

CSSのソースです。

@charset "utf-8";
/* 基本設定 */
p {
	font:large;
}
/* <a href="http://match.seesaa.jp/afr.pl?hid=25&sid=html-study-diary:000287314356&k=%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB&ic=utf8" class="affiliate-link" target="_blank">テーブル</a>の設定 */
table {
	border-width:1px;
	border-collapse:collapse;
	font:large;
	text-align:<a href="http://match.seesaa.jp/afr.pl?hid=25&sid=html-study-diary:000287314356&k=center&ic=utf8" class="affiliate-link" target="_blank">center</a>;
}

td{
	border-width:1px;
	border-style:solid;
	border-color:#000000;
}

th {
	border-width:1px;
	border-style:solid;
	border-color:#000000;
	text-align:center;
	background-color:#0000ff;
	color:#ffffff;
}

th.saturday {
	border-width:1px;
	border-style:solid;
	border-color:#000000;
	text-align:center;
	background-color:#A9A9A9;
	color:#ffffff;
}

th.sunday {
	border-width:1px;
	border-style:solid;
	border-color:#000000;
	text-align:center;
	background-color:#ff0000;
	color:#ffffff;
}

td.todayColor {
	color:#f00;
}
form {
	padding:10px;
	float:left;
}

.clear {
	text-align:center;
	clear:left;
}

.float {
	text-align:center;
	padding:10px;
	float:left;
}

サンプルのPHPを使ったカレンダーです。

入力欄や、テキスト表示をさせればスケジュール表的なものが作れるかもしれません。
日付操作関連のサンプルにはなってるかもしれないです。

2011-03-19 10:41 nice!(0) コメント(0) トラックバック(1) [編集]
共通テーマ：パソコン・インターネット

HTMLの基本から勉強してみる

HTMLの基本から勉強してみる【新着記事】

中央寄せ

HTMLとXHTML

要素名、属性名は小文字で書く

開始タグ、終了タグをセットにする

XML宣言をつける

PHPでカレンダー作成

地域ビジネスネット集客のルール

マイカテゴリー

tomomosan さん

あし@