Yanor.net/
Wiki
Blog
GitHub
Sandbox
開始行:
* セマンティックなHTMLとプログラム処理 [#yaa69db4]
** セマンティックではないHTML [#leb8b5c0]
以下はウェブアプリでよくあるHTMLをモデル化したものである...
2,3,5行目のTDタグが空になっているのに注目すると、このHTML...
<html>
<head>
<style type="text/css">
table, td {
border: 1px solid #555;
}
</style>
</head>
<body>
<table>
<tr>
<td>果物</td>
<td>りんご</td>
<td>100円</td>
</tr>
<tr>
<td></td>
<td>みかん</td>
<td>150円</td>
</tr>
<tr>
<td></td>
<td>バナナ</td>
<td>80円</td>
</tr>
<tr>
<td>野菜</td>
<td>大根</td>
<td>150円</td>
</tr>
<tr>
<td></td>
<td>たまねぎ</td>
<td>120円</td>
</tr>
</table>
</body>
</html>
** セマンティックなHTML [#w310f497]
これをセマンティックに書き換えたものが以下である。
<html>
<head>
<style type="text/css">
table, td {
border: 1px solid #555;
}
h2 {
margin: 0;
width: 3em;
font-weight: normal;
float: left;
}
</style>
</head>
<body>
<h2>果物</h2>
<table>
<tr>
<td>りんご</td>
<td>100円</td>
</tr>
<tr>
<td>みかん</td>
<td>150円</td>
</tr>
<tr>
<td>バナナ</td>
<td>80円</td>
</tr>
</table>
<h2>野菜</h2>
<table>
<tr>
<td>大根</td>
<td>150円</td>
</tr>
<tr>
<td>たまねぎ</td>
<td>120円</td>
</tr>
</table>
</body>
</html>
種別をTABLEから外し、見出しタグに入れた。これは最初のHTML...
** プログラム処理 [#q7fc1b06]
以下が上の2つのHTMLをPHPで出力するためのコード。最初のHTM...
<?php
$arr = array(
"果物" =>
array(
array("りんご",100),
array("みかん",100),
array("バナナ",100),
),
"野菜" =>
array(
array("大根",150),
array("たまねぎ",120),
),
);
print "<table>\n";
foreach ($arr as $k => $v) {
$first = true;
foreach ($v as $v2) {
if ($first) {
printf("<tr><td>%s</td><td>%s</td><td>%s</td></tr>...
$first = false;
} else {
printf("<tr><td></td><td>%s</td><td>%s</td></tr>\n...
}
}
}
print "</table>\n";
foreach ($arr as $k => $v) {
printf("<h2>%s</h2>\n",$k);
print "<table>\n";
foreach ($v as $v2) {
printf("<tr><td>%s</td><td>%s</td></tr>\n", $v2[0],$...
}
print "</table>\n";
}
?>
** まとめ [#d13b74dd]
セマンティックなHTMLとは、無駄や例外が少ないHTMLと言える...
** 付記 [#u72132f6]
なお、今回のHTMLを実現するためにCSSのfloatを使ってあるが...
したがって、トータルで判断して効率を追求するのが重要。
終了行:
* セマンティックなHTMLとプログラム処理 [#yaa69db4]
** セマンティックではないHTML [#leb8b5c0]
以下はウェブアプリでよくあるHTMLをモデル化したものである...
2,3,5行目のTDタグが空になっているのに注目すると、このHTML...
<html>
<head>
<style type="text/css">
table, td {
border: 1px solid #555;
}
</style>
</head>
<body>
<table>
<tr>
<td>果物</td>
<td>りんご</td>
<td>100円</td>
</tr>
<tr>
<td></td>
<td>みかん</td>
<td>150円</td>
</tr>
<tr>
<td></td>
<td>バナナ</td>
<td>80円</td>
</tr>
<tr>
<td>野菜</td>
<td>大根</td>
<td>150円</td>
</tr>
<tr>
<td></td>
<td>たまねぎ</td>
<td>120円</td>
</tr>
</table>
</body>
</html>
** セマンティックなHTML [#w310f497]
これをセマンティックに書き換えたものが以下である。
<html>
<head>
<style type="text/css">
table, td {
border: 1px solid #555;
}
h2 {
margin: 0;
width: 3em;
font-weight: normal;
float: left;
}
</style>
</head>
<body>
<h2>果物</h2>
<table>
<tr>
<td>りんご</td>
<td>100円</td>
</tr>
<tr>
<td>みかん</td>
<td>150円</td>
</tr>
<tr>
<td>バナナ</td>
<td>80円</td>
</tr>
</table>
<h2>野菜</h2>
<table>
<tr>
<td>大根</td>
<td>150円</td>
</tr>
<tr>
<td>たまねぎ</td>
<td>120円</td>
</tr>
</table>
</body>
</html>
種別をTABLEから外し、見出しタグに入れた。これは最初のHTML...
** プログラム処理 [#q7fc1b06]
以下が上の2つのHTMLをPHPで出力するためのコード。最初のHTM...
<?php
$arr = array(
"果物" =>
array(
array("りんご",100),
array("みかん",100),
array("バナナ",100),
),
"野菜" =>
array(
array("大根",150),
array("たまねぎ",120),
),
);
print "<table>\n";
foreach ($arr as $k => $v) {
$first = true;
foreach ($v as $v2) {
if ($first) {
printf("<tr><td>%s</td><td>%s</td><td>%s</td></tr>...
$first = false;
} else {
printf("<tr><td></td><td>%s</td><td>%s</td></tr>\n...
}
}
}
print "</table>\n";
foreach ($arr as $k => $v) {
printf("<h2>%s</h2>\n",$k);
print "<table>\n";
foreach ($v as $v2) {
printf("<tr><td>%s</td><td>%s</td></tr>\n", $v2[0],$...
}
print "</table>\n";
}
?>
** まとめ [#d13b74dd]
セマンティックなHTMLとは、無駄や例外が少ないHTMLと言える...
** 付記 [#u72132f6]
なお、今回のHTMLを実現するためにCSSのfloatを使ってあるが...
したがって、トータルで判断して効率を追求するのが重要。
ページ名: