softie note: 2月 2011

2011年2月23日水曜日

分単位で実行するための項目を crontab に追加

5分毎に /etc/cron.5minsly/* を root で実行する

/etc/crontab

 :
 :
*/5 * * * * root run-parts /etc/cron.5minsly
 :
 :

ディレクトリの作成とサービスの再起動

bash

# mkdir /etc/cron.5minsly
# service crond stop
# service crond start

tidy コマンドラインオプション(とりあえず用)

tidy -<charcode> -asxml -i -w 0 -o <output> <input>

-<charcode> { iso2022 | shiftjis | utf8 }
-asxml : convert html to xhtml
-w 0 : wrap なし
-o <output> : 出力ファイル
<input> : 入力ファイル

参照

(w3.org) HTML TIDY で Web ページをお掃除する
→ http://www.w3.org/People/asada/tidy/

ヘルプ

bash

$ tidy --help
tidy: file1 file2 ...
HTML 整形ユーティリティ
http://www.w3.org/People/Raggett/tidy/ を参照

tidy (1998 年 9 月 1 日版) のオプション
  -indent または -i  エレメントの内容をインデントする
  -omit   または -o  省略可能な終了タグを省く
  -wrap 72           テキストを 72 文字目で改行 (デフォルトは 68)
  -upper  または -u  タグを大文字にする
  -clean  または -c  font, nobr, center タグを削除
  -raw               128 以上の文字を出力時に変換しない
  -ascii             入力に Latin-1、出力に ASCII を使用
  -latin1            入出力に Latin-1 を使用
  -iso2022           入出力に ISO-2022 ベースのエンコードを使用
  -utf8              入出力に UTF-8 を使用
  -modify または -m  元のファイルを修正
  -errors または -e  エラー表示のみ
  -f <file>          エラーを <file> に出力
  -xml               入力が XML の場合に使用
  -asxml             HTML を XML に変換
  -help   または -h  オプション一覧
デフォルトでは入出力にそれぞれ標準入出力を使用
以下のように-f 以外の一文字オプションは組合せ可能:
   tidy -f errs.txt -imu foo.html

HTML に関する詳しい情報は "Raggett on HTML" 参照,
(c) 1998, Addison Wesley Longman, ISBN 0-201-17805-2

2011年2月21日月曜日

css で気をつけること - display:inline-block

メモ

Gecko 1.9(Firefox 3) からサポート。
※ 参照: (mozilla.org) display - MDC Doc Center
→ https://developer.mozilla.org/en/CSS/display
IE7 (以下?)は、インライン要素への適用をサポート(block 要素へ適用しても効かない)。
※ 確認 IE7/Windows XP
IE7 (以下?)は、ブロック要素へ display:inline;zoom:1; を適用することで代用。
(yomotsu.net) 「書籍などに紹介されていない display : inline-block について」
→ http://www.understandard.net/css/css008.html
※ スタイルシートを使用しない方が読みやすいかも (2011.02.22 追記)
IE7 (以下?)で display:inline;zoom:1; を適用することで逆に起こる問題について。
(webtech-walker.com)「hasLayoutプロパティがtrueで発生するバグ - Webtech Walker」
→ http://webtech-walker.com/archive/2007/11/27033016.html
※ (2011.02.22 追記)

検証用

iframe

iframe 文書の HTML

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>display:inline-block</title>
 <style type="text/css">
  * { font-size:100%; }
  body { font-family:arial; sans-serif; }
  body>div { margin-bottom:0.5em; }
  .div, .span {
   display:inline-block;
   padding:0.2em 0.5em;
   border:solid 1px gray;
   font-weight:bold;
  }
  div.block { border:solid 1px gray; padding:1em; }
 </style>
 <!--[if lte ie 6]><style type="text/css">
  body div { margin-bottom:0.5em; }
  body * div { margin-bottom:0; }
 </style><![endif]-->
 <!--[if lte ie 7]><style type="text/css">
  .div, .span { vertical-align:middle; }
 </style><![endif]-->
</head>
<body>
 <h1>display:inline-block</h1>
 <div class="block">text element<div class="div">div style="display:inline-block;"</div>text element</div>
 <div class="block">text element<span class="span">span style="display:inline-block;"</span>text element</div>
</body>
</html>

XSLT - テンプレート

XSLT

Source

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml">

<xsl:output
  method="html"
  encoding="utf-8"
  omit-xml-declaration="no"
  doctype-public="-//W3C//DTD XHTML 1.1//EN" 
  doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>

<xsl:template match="/">
  <xsl:apply-templates select="html"/>
</xsl:template>

<xsl:template match="@*">
  <xsl:copy/>
</xsl:template>

<xsl:template match="node()">
  <xsl:copy>
    <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
</xsl:template>

</xsl:stylesheet>

Preview

iframe

XSLT Capsulized XHTML

XSLT でカプセル化した XHTML

source

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="#"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml">
<xsl:output
  method="html"
  encoding="utf-8"
  omit-xml-declaration="yes"
  doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
  doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

<xsl:template match="xsl:stylesheet">

<html xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>xslt capsulized xhtml</title>
  <style type="text/css">
    /*@import url(style.css);*/
    body { font-family:arial, sans-serif; }
  </style>
</head>
<body>

<h1>xslt capsulized xhtml</h1>

</body>
</html>

</xsl:template>
</xsl:stylesheet>

Preview

iframe

XHTML 1.0 Strict - テンプレート

XHTML 1.0 Strict

source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>XHTML 1.0 Strict</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">/* @import url(""); */</style>
</head>
<body>
<h1>XHTML 1.0 Strict</h1>
</body>
</html>

Preview

iframe

XHTML 1.1 - テンプレート

XHTML 1.1

source

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>XHTML 1.1</title>
  <style type="text/css">/* @import url(""); */</style>
</head>
<body>
<h1>XHTML 1.1</h1>
</body>
</html>

Preview

iframe

2011年2月17日木曜日

a 要素を button 要素の代わりに使う

注意点

ポインターが a.button の上にあるときのセレクタ a.button:hover は効かないけれど a#button:hover は Ok
※ 確認: ie7, firefox3.6.13

検証

iframe

iframe の contentWindow.document

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>a element button</title>
 <style id="button" type="text/css">
  a.button, span.button, #button, #class { display:inline-block; }
  .button a, a.button { text-decoration:none; }
  a.button span, span.button a { display:block; }
  a.button span, span.button a, a#button, a#class {
   font-size:80%;
   font-weight:bold;
   padding:0.2em 0.5em;
   cursor:default;

   border:solid 1px gray;
   background-color:#ccc;
   color:gray;
  }
  a.button span:hover, span.button a:hover, a#button:hover, a.button:hover {
   border-color:#444;
   background-color:white;
   color:black;
  }
 </style>
 <style type="text/css">
  body { font-family:arial,sans-serif; }
  h1 { font-size:100%; }
  ul li { margin-bottom:1px; }
 </style>
</head>
<body>
 <h1>a element button</h1>
 <ul>
  <li><span class="button"><a onclick="this.parentNode.parentNode.innerHTML+='!';">span.button&gt;a</a></span></li>
  <li><a class="button" onclick="this.parentNode.innerHTML+='!';"><span>a.button&gt;span</span></a></li>
  <li><a class="button" id="button" onclick="this.parentNode.innerHTML+='!';">a#button</a></li>
  <li><a class="button" id="class" onclick="this.parentNode.innerHTML+='!';">a.button</a></li>
 </ul>
</body>
</html>

2011年2月15日火曜日

ブックマックレット

RequestPolicy で google.com 検索結果のリンクからリダイレクトできないとき

javascript:var d=document,u=d.getElementsByTagName('noscript').item(0).innerHTML.split("'")[1];d.body.innerHTML='<p style="text-align:center;"><a href="'+u+'">'+u+'</a></p>';

2011年2月14日月曜日

css で注意すること

そのつど更新

display:inline-block は inline 要素なので、既定の vertical-align:baseline だと、要素の下のほうに英文字の g のように線がベースラインの下まで出るためのスペースが確保されるので vertical-align:top で対処する。

iframe
object

block 要素の中の block 要素を position:absolute や float:left すると親 block 要素の高さが 0 になるので、height を指定して対処する。

登録: 投稿 (Atom)