忍者ブログ
2024.03│ 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
シングルママ(memi)と、発達障碍と診断された(セブン)の日常を綴るブログです。 中身が盛りだくさんのブログなので、細かくカテゴリ分けしてあります。 興味があるカテゴリから拾って読んでくださいね。
カレンダー
02 2024/03 04
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
ランキング
ブログ内検索
広告
2024年03月19日 (Tue)
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2011年05月25日 (Wed)
サイトデザインをしていて、正しいHTMLの記述がわからなくなることがあります。

例えば、テーブルタグ。


<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> で囲むべきなのか?
テーブル①②は、どちらが正しいのでしょう?


調べてみたところ、
私と同じ疑問を持ってる方は、わりといるらしく、いくつか事例が載っていましたが、
それぞれに解釈(?)の仕方が違うようなんですよね。


以下、検索結果。
  1. インライン要素はブロック要素で囲むべき。
    よって、<th><td>は、インライン要素なので<p>で囲む。
  2. <p>は、段落に用いるタグなので、<th><td>内が「文章」であるならば、<p>で囲むべき。
    「文章」ではない「単語」ならば、囲まなくて良い。
     
検索結果、1.ならば、テーブル②が正しい。
検索結果、2.ならば、テーブル①が正しい。

ただし、検索結果1.について、厳密に考えると、
<table>自体がブロック要素で、その中にインライン要素の<th><td>が入っているのだから、
さらにブロック要素の<p>で囲まなくてもいいのでは?とも思う。

それからもう1つ。

「body直下に文字やインライン要素を記述することはできない」

これ ↑ が前提にあるから、イメージタグ<img src="" alt="">は、<p>で囲んで記述していますが、
レイアウトで使う大きなくくり(ヘッダー・サイドメニュー・メイン・フッダーなど)を
<div>で囲っているのだから、<p>で囲む必要はないのかな?

それに、検索結果2.にあるように、本来<p>は、段落に用いるタグなので、
段落以外のイメージタグを囲むのは、よくないのではないか?とも思うわけです。




この疑問・・・・

わかる方がいたら、

是非教えてくださいませ m(_ _)m





ランキング参加中、励みになります。
一押し、よろしくお願いします。


別途、ブログ村のランキングを見る。 ブログランキング・にほんブログ村へ


拍手[0回]

PR
2011年05月19日 (Thu)
スタイルシート(CSS)は、外部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回]

2011年05月17日 (Tue)
リストタグを使い、メニューを横並びにし、区切り線(|)を入れる方法。
____________________________________
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回]

プロフィール
HN:
memi
性別:
女性
自己紹介:
【私:memi】
結婚→離婚→再婚(ステップファミリー)→再離婚を経て、現在シングルママ
Webクリエイターの資格を持ち、Web担当の職についています。
前向きで楽天家、「何とかなる」精神で、今まで何とかなってる(笑)

【子:セブン】
1999年11月産♂ 軽度発達障碍(ADHD)有

波乱万丈の人生ですが、今まで後悔はありません。
前向きに人生楽しんでます^^
最新CM
[06/06 ゆりと]
[04/13 mint]
[03/24 よっし]
[03/22 管理人]
[03/22 管理人]
人気記事
バーコード