今日の研究：Movable Typeで便利なスタイルシート第３の指定方法
9月 7, 2005 in Movable Type
XHTML 1.0 TransitionalはHTML4.0に比べると、レイアウトは、さらにスタイルシートで定義されるようになっきた。
このスタイルシートは外部ファイルにまとめて記述するか、<head>と</head>の間に記述して、タグにクラス名等を指定して使用するのが一般的だ。
ただ、この方法、Movble Typeや他のBlogツールを利用する方が、エントリー画面でちょっとした指定しようと思うときでも、スタイルシートのテンプレートに、まずクラスを記述せねばならないのが面倒だ。
そんな時に便利なのが、body内の任意のタグにスタイルを指定する方法だ。
使い方は簡単で、スタイルを指定したいタグにstyle=”"を記述して、“”の間に通常クラスで書くような属性を追加してあげるだけ。
例として罫線１ピクセルの表を作ってみたので、下記をごらんいただきたい。
◆XHTMLのソース例
<table style=”width: 379px; border-top: solid 1px #79ADD3; border-left: solid 1px #79ADD3“ cellspacing=”0″ cellpading=”0″>
<tr>
<td style=”width: 175px; border-right: solid 1px #79ADD3; border-bottom: solid 1px #79ADD3; margin: 0px; padding: 2px“>書籍名</td>
<td style=”width: 195px; border-right: solid 1px #79ADD3; border-bottom: solid 1px #79ADD3; margin: 0px; padding: 2px“>週間スタイルシート</td>
</tr>
<tr>
<td style=”width: 175px; border-right: solid 1px #79ADD3; border-bottom: solid 1px #79ADD3; margin: 0px; padding: 2px“>価格</td>
<td style=”width: 195px; border-right: solid 1px #79ADD3; border-bottom: solid 1px #79ADD3; margin: 0px; padding: 2px“>780円（税込）</td>
</tr>
</table>
◆上記XHTMLを表示したもの
| 書籍名 | 週間スタイルシート |
| 価格 | 780円（税込） |
上記方法は先日紹介した、Movble Typeに組み込んで使用するWYSIWYGエディター、HTMLArea3.0rc-1の記述するソースを見て気がついた。
調べてみると、確かにタグの属性にstyleが指定できる。
この方法はMovable Typeユーザーは覚えておいても損はない。
＃ただし、使いすぎはXHTMLが煩雑になるので、ご利用は計画的に…:-p
Facebookフィード購読のおすすめ
僕はFacebookのウォールでブログ記事に書いた以外にも、ソーシャルメディアや、Web制作に関する情報、ライフハック情報などをつぶやいてます。フィード購読を希望の方は、下記の「フィード購読」をクリックするか、Facebookの蒲生 トシヒロのページからお願いします。
ブログの最新投稿はFacebookページ「Hoppos.JP」を購読すれば、あなたのウォールにお知らせが届きます。ブログ記事以外にも、Web制作、ソーシャルメディアに役立つ情報を1日2～3通程度流してます。よろしければ「いいね！」をクリックして購読してください。
