シングルママ（memi）と、発達障碍と診断された（セブン）の日常を綴るブログです。
中身が盛りだくさんのブログなので、細かくカテゴリ分けしてあります。
興味があるカテゴリから拾って読んでくださいね。
カテゴリー
カレンダー
| 04 | 2025/05 | 06 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
ブログ内検索
広告
サイトデザインをしていて、正しいHTMLの記述がわからなくなることがあります。
例えば、テーブルタグ。
<th>～</th>・<td>～</td>内は、<p>～</p> で囲むべきなのか？
テーブル①②は、どちらが正しいのでしょう？
調べてみたところ、
私と同じ疑問を持ってる方は、わりといるらしく、いくつか事例が載っていましたが、
それぞれに解釈（？）の仕方が違うようなんですよね。
以下、検索結果。
検索結果、2.ならば、テーブル①が正しい。
ただし、検索結果1.について、厳密に考えると、
<table>自体がブロック要素で、その中にインライン要素の<th><td>が入っているのだから、
さらにブロック要素の<p>で囲まなくてもいいのでは？とも思う。
それからもう1つ。
「body直下に文字やインライン要素を記述することはできない」
これ ↑ が前提にあるから、イメージタグ<img src="" alt="">は、<p>で囲んで記述していますが、
レイアウトで使う大きなくくり（ヘッダー・サイドメニュー・メイン・フッダーなど）を
<div>で囲っているのだから、<p>で囲む必要はないのかな？
それに、検索結果2.にあるように、本来<p>は、段落に用いるタグなので、
段落以外のイメージタグを囲むのは、よくないのではないか？とも思うわけです。
この疑問・・・・
わかる方がいたら、
是非教えてくださいませ m(_ _)m
ランキング参加中、励みになります。
一押し、よろしくお願いします。
別途、ブログ村のランキングを見る。
例えば、テーブルタグ。
①
<table>
<tr>
<th>食べ物</th>
<th>好み</th>
</tr>
<tr>
<td>りんご</td>
<td>好き</td>
</tr>
<tr>
<td>みかん</td>
<td>嫌い</td>
</tr>
</table>
②
<table>
<tr>
<th><p>食べ物</p></th>
<th><p>好み</p></th>
</tr>
<tr>
<td><p>りんご</p></td>
<td><p>好き</p></td>
</tr>
<tr>
<td><p>みかん</p></td>
<td><p>嫌い</p></td>
</tr>
</table>
<table>
<tr>
<th>食べ物</th>
<th>好み</th>
</tr>
<tr>
<td>りんご</td>
<td>好き</td>
</tr>
<tr>
<td>みかん</td>
<td>嫌い</td>
</tr>
</table>
②
<table>
<tr>
<th><p>食べ物</p></th>
<th><p>好み</p></th>
</tr>
<tr>
<td><p>りんご</p></td>
<td><p>好き</p></td>
</tr>
<tr>
<td><p>みかん</p></td>
<td><p>嫌い</p></td>
</tr>
</table>
<th>～</th>・<td>～</td>内は、<p>～</p> で囲むべきなのか？
テーブル①②は、どちらが正しいのでしょう？
調べてみたところ、
私と同じ疑問を持ってる方は、わりといるらしく、いくつか事例が載っていましたが、
それぞれに解釈（？）の仕方が違うようなんですよね。
以下、検索結果。
- インライン要素はブロック要素で囲むべき。
よって、<th><td>は、インライン要素なので<p>で囲む。 - <p>は、段落に用いるタグなので、<th><td>内が「文章」であるならば、<p>で囲むべき。
「文章」ではない「単語」ならば、囲まなくて良い。
検索結果、2.ならば、テーブル①が正しい。
ただし、検索結果1.について、厳密に考えると、
<table>自体がブロック要素で、その中にインライン要素の<th><td>が入っているのだから、
さらにブロック要素の<p>で囲まなくてもいいのでは？とも思う。
それからもう1つ。
「body直下に文字やインライン要素を記述することはできない」
これ ↑ が前提にあるから、イメージタグ<img src="" alt="">は、<p>で囲んで記述していますが、
レイアウトで使う大きなくくり（ヘッダー・サイドメニュー・メイン・フッダーなど）を
<div>で囲っているのだから、<p>で囲む必要はないのかな？
それに、検索結果2.にあるように、本来<p>は、段落に用いるタグなので、
段落以外のイメージタグを囲むのは、よくないのではないか？とも思うわけです。
この疑問・・・・
わかる方がいたら、
是非教えてくださいませ m(_ _)m
ランキング参加中、励みになります。
一押し、よろしくお願いします。
別途、ブログ村のランキングを見る。
[0回]
PR
スタイルシート（CSS）は、外部CSSで読み込ませるのが一般的です。
その際、複数のCSSファイルを1つづつ読み込ませるのではなく、
import.cssで一気に読み込ませるべきです。
※「import.css」名は決まってる名前、それ以外の名前は任意
ランキング参加中、励みになります。
一押し、よろしくお願いします。
別途、ブログ村のランキングを見る。
その際、複数のCSSファイルを1つづつ読み込ませるのではなく、
import.cssで一気に読み込ませるべきです。
※「import.css」名は決まってる名前、それ以外の名前は任意
簡単ですね【 import.cssの書き方 】
@charset "utf-8";
@import url("reset.css");
@import url("layout.css");
@import url("style.css");
@import url("sub.css");
（以下・・・いくらでも増やせます）
【 HTML 】
<head>～<head>内に・・・
<link rel="stylesheet" href="css/import.css" type="text/css" />
ランキング参加中、励みになります。
一押し、よろしくお願いします。
別途、ブログ村のランキングを見る。
[0回]
リストタグを使い、メニューを横並びにし、区切り線（｜）を入れる方法。
＿＿＿_______________＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
CSS
#headMenu li{
display: inline;
margin: 0;
padding: 0px 10px 0px 10px;
border-right: 1px solid #aaaaaa;
list-style-type: none;
}
#headMenu a{
margin: 0;
padding: 0;
color:#000000;
text-decoration: none;
}
#headMenu a:hover{
color:#AD0909;
text-decoration: underline;
}
#headMenu ul li.bnone{
border-right: none; /* 区切り線の非表示 */
}
＿＿＿_______________＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
HTML
<div id="headMenu">
<ul>
<li><a href="hoge.html">メニュー</a></li><!--
--><li><a href="hoge.html">メニュー</a></li><!--
--><li><a href=".hoge.html">メニュー</a></li><!--
--><li class="bnone"><a href="hoge.html>メニュー</a></li>
</ul>
</div>
＿＿＿_______________＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
ランキング参加中、励みになります。
一押し、よろしくお願いします。
別途、ブログ村のランキングを見る。
＿＿＿_______________＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
CSS
#headMenu li{
display: inline;
margin: 0;
padding: 0px 10px 0px 10px;
border-right: 1px solid #aaaaaa;
list-style-type: none;
}
#headMenu a{
margin: 0;
padding: 0;
color:#000000;
text-decoration: none;
}
#headMenu a:hover{
color:#AD0909;
text-decoration: underline;
}
#headMenu ul li.bnone{
border-right: none; /* 区切り線の非表示 */
}
＿＿＿_______________＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
HTML
<div id="headMenu">
<ul>
<li><a href="hoge.html">メニュー</a></li><!--
--><li><a href="hoge.html">メニュー</a></li><!--
--><li><a href=".hoge.html">メニュー</a></li><!--
--><li class="bnone"><a href="hoge.html>メニュー</a></li>
</ul>
</div>
＿＿＿_______________＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
- リンク色・文字装飾・paddingは、好きなように変更して問題なし。
- HTMLに、<!----> を入れているのは、小さな隙間をなくすため。
<!----> を入れたくない場合は、改行せずの横にズラっと並べても良い。 - 上記以外に float を使って横並びにする方法もある。
ランキング参加中、励みになります。
一押し、よろしくお願いします。
別途、ブログ村のランキングを見る。
[0回]
スポンサードリンク
プロフィール
ＨＮ：
memi
性別：
女性
自己紹介：
【私：memi】
結婚→離婚→再婚（ステップファミリー）→再離婚を経て、現在シングルママ
Webクリエイターの資格を持ち、Web担当の職についています。
前向きで楽天家、「何とかなる」精神で、今まで何とかなってる（笑）
【子：セブン】
1999年11月産♂ 軽度発達障碍（ADHD）有
波乱万丈の人生ですが、今まで後悔はありません。
前向きに人生楽しんでます^^
結婚→離婚→再婚（ステップファミリー）→再離婚を経て、現在シングルママ
Webクリエイターの資格を持ち、Web担当の職についています。
前向きで楽天家、「何とかなる」精神で、今まで何とかなってる（笑）
【子：セブン】
1999年11月産♂ 軽度発達障碍（ADHD）有
波乱万丈の人生ですが、今まで後悔はありません。
前向きに人生楽しんでます^^
最新CM
人気記事
トラフィック
バーコード