HTML5:sectionとh2の関係

<section>は入れ子に出来たっけ? とよく迷うのですが出来ます。
W3CのHTMLチェッカーで意外なエラーを出されてしまったのでメモ。
<dt>や<dd>の中に<h2>を入れてはいけないらしく、<dt><dd>を使わず普通に<section>で囲んだほうがいいらしい。

<h2>と<section>の関係で、

<body>
<h1>最高レベルの項目</h1>
<section><!-- 空のsection -->
	<section><h3>この場合ネストすると強制的に第3レベルの項目にされるらしい</h3></section>
</section>

という書き方にしないといけないらしいのですが、さすがに直すのが大変すぎて挫折・・・。
HTML5は複雑。

CSS:○番目の子要素、最初・最後の子要素だけ設定する方法

HTML5になってから随分と便利になったものだな〜と日々感心しているのですが、その中でも「これは便利!」と思ったCSSです。
以前ならJavaScriptでチマチマと書いていたのですが、今はCSSだけで書けるんですね〜、スゴいです。

指定した子要素だけに設定をしたいなら、

タグ:nth-child(n)

子要素のうち最初と最後だけに設定をしたいなら、

タグ:first-child
タグ:last-child

と書けば実現できます。

例えば動的サイトで<li>タグを使っていて、上下に区切り線を入れたい場合、しかもそのリストの数が可変だったりするとちょっと面倒くさいです。

(例)HTML

<ul>
	<li>あ</li>
	<li>い</li>
	<li>う</li>
</ul>
<ul>
	<li>hoge</li>
	<li>hage</li>
</ul>

スタイルシートをこんな風にしてしまうと、

<style>
ul{
	margin:0 0 20px 0;
	padding:0;
}

li{
	list-style-type:none;
	border-top:solid 1px;
}
</style>

CSS 子要素-1
一番下のラインだけなくなってしまうので一番下にだけ下線の設定を追加します。

li:last-child{
	border-bottom:solid 1px;
}

CSS 子要素-2
では、2番目の上の線だけ外してみると、

li:nth-child(2){
	border-top:none;
}

CSS 子要素-3
こんな感じになります。
CSSだけで出来るようになるとは! とても便利です。

HTML5の基本

HTMLを新規に作る度にいつも忘れるので自分用にメモです。
HTML5の基本構造部分のタグ。
HTML5から入った人は気にしなくていいので羨ましいのですが、長年この業界にいると使い分けが面倒でよく忘れます。

<section> : セクション(迷ったらこれ)
<nav> : ナビゲーション
<article> : 記事
<aside> : 余談・補足情報
<header> :ヘッダ
<footer> : フッタ

これらは必須ではないしdivでも構わない、らしいです。
だったらわざわざ分けるなよ、と言いたいのですが、作ったのは見やすいからくらいの理由でしょうかね。

以下、HTML5で省略型になったタグ。

<!DOCTYPE html>
<style>
<script>
<noscript>

以前は

<script type="text/javascript" src="js/common.js"></script>

とか書いていたくせに、JavaScriptの場合は

<script src="js/common.js"></script>

だけでよくなりました。
今更なのですが、混ぜこぜにする人が多いので、「ちゃんと書け!」というのが本音です・・・。

User-Agentをスマホに偽装してPCで表示するツール

あまり参考にならないと思いますが、自分があまりに頻繁に使うのでサーバーにのっけておくことにしました。

User Agent偽装ツール

レイアウトなどのデザインをチェックする用途には使えません。
スマホ用のHTMLを覗き見するのに使います。

仕組みとしてはUser-AgentをAndroidやiPhoneに偽装して、こちら側に読み込みます。
URLはmayer.jp.net配下に表示させるので、FrameやiFrameで表示させるのとあまり変わりません。

Twitterは一度読み込んでからスマホ用公式サイトにリダイレクトしていたりするので、サイトによって動作は違ってきます。

でもほとんどのサイトではCSSが相対パスで書かれているため、mayer.jp.net側にはそのCSSがないのでレイアウトが崩れると思います。

画像も、相手が絶対パスで書いていないと表示されません。
ですのでほぼ表示されませんw

自分がよく見るのはHTMLだけなので、HTMLが欲しいだけなら重宝すると思います。
 

CSSでTABLEタグのborderの一部を消す方法

複数の人間で一つのサイトを制作していて、他人の書いたHTMLファイルをいじっている場合、スタイルシートを勝手に書き換えるわけにもいかず、HTMLの中に直書きする機会が多くなります。
TABLEタグのborderをいじって、一部の線を消したくなった場合の書き方です。

例えばCSSファイルで予めTABLEタグにsolid 1pxの指定があって、特定の一部のセルで上下左右のborderを消したくなった時、tdタグの中に直書きしてしまいます。

<html>
<head>
<title>TABLE border てすと</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<!-- こんな↓CSSがどこかに潜んでいたと仮定して -->
<style type="text/css">
<!--
table{
	border-collapse: collapse;
}

td{
	border: solid 1px;
}
--> 
</style>
</head>
<body>

<table>
<tr>
	<td style="border-right-style: hidden;">ほ</td>
	<td>げ</td>
	<td>ほ</td>
</tr>
<tr>
	<td>u</td>
	<td style="border-left-style: hidden;">a</td>
	<td>n</td>
</tr>
<tr>
	<td>テ</td>
	<td style="border-top-style: hidden;">ス</td>
	<td>ト</td>
</tr>
<tr>
	<td>K</td>
	<td style="border-bottom-style: hidden;">Y</td>
	<td>M</td>
</tr>
</table>

</body>
</html>

結果はこんな↓感じです。
TABLE border test

以上、自分のためのひな形でした。