XHTML

CSSで天地左右を中央揃えに  2008年04月20日
mp3ファイルをXHTMLに埋め込む  2008年04月18日
サイトの引越し  2007年11月28日
Devas  2007年11月19日
xhtmlでのjavascriptの書き方  2007年11月13日
youtube を valid に  2007年11月04日
動画をobjectで  2007年10月30日
Google Blog内検索  2007年08月01日
別窓の開き方  2007年07月27日
タイトルに画像  2007年07月24日
記事を中央揃えにする  2007年07月23日
カテゴリ別アーカイブ  2007年07月11日
アイコン  2007年07月04日
動画ファイルをobjectで  2007年02月10日
FLASHをXHTMLに  2006年08月09日
10進、16進文字コードin HTMLユニコード  2006年05月22日
概念図をul要素で作成する  2005年08月22日
HTMLのメモ  2005年06月18日

2008年04月20日

CSSで天地左右を中央揃えに


<body>
<div id="container">
コンテンツ  
</div>
</body>
---------------------------------------------
#container {
    position: absolute;
    width: 500px;
    height: 250px;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -125px;
}


2008年04月18日

mp3ファイルをXHTMLに埋め込む

呼吸法>トピックス>忘年会に使用

<p><object id="MediaPlayer" type="audio/mpeg" data="xyz.mp3" height="28" width="220">object
  <param name="enabled" value="true" />
  <param name="src" value="xyz.mp3" />
  <param name="autostart" value="false" />
  <param name="uimode" value="full" />
  <param name="bgcolor" value="#000000" />
</object></p>

その日はこれで大丈夫のはずだったけど――、
後日チェックしたらIEが駄目だった (;_;)
今は以下の方法を採用しています。

<p><object type="application/x-shockwave-flash" data="http://www.musicparts.jp/audio/player.swf" id="audioplayer1" height="24" width="290">object
  <param name="movie" value="http://www.musicparts.jp/audio/player.swf" /
  <param name="FlashVars" value="playerID=1&soundFile=http://biomasa22.sakura.ne.jp/……/xyz.mp3" />
  <param name="quality" value="high" />
  <param name="menu" value="false" />
  <param name="wmode" value="transparent" />
</object></p>


2007年11月28日

サイトの引越し

引越し用のHTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="refresh" content="3;url=http://biomasa.sakura.ne.jp/">
<title>お薦め海外ミステリー</title>
</head>
<body>
<p>引越しのご案内</p>
<p>このサイトページは次の URL に移転しました。 3秒後に新 URL に転送します。<br>
自動で移動しない場合は恐れ入りますが下記をクリックしてください。<br>
<a href="http://biomasa.sakura.ne.jp/">http://biomasa.sakura.ne.jp/</a></p>
</body>
</html>


2007年11月19日

Devas

複数フォルダから文字列を検索、置換してくれるソフト。
正規表現にも対応!
Devas

<div class="clear-both"><hr class="none" /></div>
置換して ↓↓↓ に
<br class="clear-both" />

2007年11月13日

xhtmlでのjavascriptの書き方

memo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<script type="text/javascript">
// <![CDATA[
function ok(f) {
return confirm("OK?");
}
// ]]>
</script>

</head>
<body>

<form method="post" action="foo.cgi" onsubmit="return ok(this.form);">

αoff

2007年11月04日

youtube を valid に

youtubeの動画は貼り付けてもすぐに見られなくなることが多い。
特に面白いやつは (笑)
youtube が吐き出す貼り付けタグ
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/a11blNPha4g"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/a11blNPha4g" type="application/x-shockwave-flash" wmode="transparent" width="425" height="344"></embed>
</object>

XHTML valid なタグ
<object data="URL" type="application/x-shockwave-flash" width="425" height="344">
<param name="movie" value="URL" />
<param name="wmode" value="transparent" />
<a href="URL">オブジェクト</a>
</object>


2007年10月30日

動画をobjectで


  <h1></h1>
  <p class="memo1">動画が始まらない場合はスタートボタンを押してください</p>
  <p class="memo2">動画が表示されない場合は下記のリンクをクリックしてください</p>
  <p><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">
    <param name="src" value="URL" />
    <param name="autostart" value="false" />
    <param name="controller" value="true" />
    <a href="URL" target="NewWindow">動画</a>
  </object></p>

p.memo1 {
    visibility: hidden;
}
/* ----- ob_win_ie6.css ----- */
p.memo1 {
    visibility: visible;
}
p.memo2 {
    display: none;
}



2007年08月01日

Google Blog内検索

livedoorblogについているBlog内検索の機能がうまく働かない。
タイトル以外の記事で検索すると該当する記事がないと表示される。
これじゃ意味がないので、Googleのサイト内検索を利用することにした。
うまくいくか心配だったけど――、うまくいきました (^_^.)

<!-- SiteSearch Google -->
<p><form method="get" action="http://www.google.co.jp/search">
  <input type="text" name="q" size="18" maxlength="25" value="">
  <input type="hidden" name="ie" value="EUC-JP">
  <input type="hidden" name="oe" value="EUC-JP">
  <input type="hidden" name="hl" value="ja">
  <input type="submit" name="btnG" value="検索">
  <input type="hidden" name="sitesearch" value="My URL">
</form></p>
<!-- /SiteSearch Google -->


なぜ検索が必要かと言うと、過去記事を探すのが楽だということ。
過去記事を知っているのは自分です、でもどこにあるかは覚えてない。
要するに耄碌したって言うことです (笑)

2007年07月27日

別窓の開き方

ホームページで自分のサイトから外部のサイトへのリンクは一般的には別窓を開く。
最近は別窓を開くのは閲覧者に任せたほうがいいという意見も多数見うけられる。
その場合、IEならShift+クリック、FirefoxならAlt+クリックで別窓が開く。
SleipnirはIEベースだからIEの方法を選択すればいい。
で、私はというと、あらかじめ外部リンクは別窓を開くように設定している。
それぞれのリンクのアンカータグに「target="_blank"」を追加している。
もしくはJava Scriptで開くように設定してある。
しかし、それぞれのアンカータグ毎にtarget指定をするのは面倒というかきたなくなる。
そこで「<base target="_blank" />」を<head>の下に書き込むのだ。
これでこのページのリンクはすべて別窓で開くようになる。
しかしサイト内の移動、例えばトップページに戻る等はこれでは不都合を生じる。
サイト内移動のアンカータグに「target="_self"」を加えれば別窓は開かない。
これはリンク集とかの外部サイトの紹介ページには有効です。
*別窓とは、新しくブラウザを立ち上げてウィンドウを開くことで、一番下のタスクバーにIEの表示がどんどん追加されます。

今日は昼間はあそさんとこまさんだけ、みいちゃんは今朝も点滴をしたそうです。
夜の稽古は誰も来なかった。それにしても外は蒸し風呂のようです。
9時ごろ教室から帰るとき府内五番街は人であふれていました。
給料日の後の花金だからでしょうかね。

2007年07月24日

タイトルに画像

タイトルに画像を使いたいがSEO的な意味も含めてテキストにもしたい場合は?

#logo span {
    position: absolute;
    top: 69px;
    left: 46px;
    width: 360px;
    height: 65px;
    background: url(../top/acdmy-2.gif) no-repeat;
}
#logo h1 {
    height: 65px;
}

<div id="logo">
    <span> </span><h1 title="大分ダンスアカデミー">大分ダンス・アカデミー</h1>
</div>


2007年07月23日

記事を中央揃えにする

livedoor Blogで記事を中央揃えにするのにてこずった。
試行錯誤の末、以下の方法で出来た。

<div align="center">記事</div>
これじゃないと中央揃えにならないが、マジにいいのか? これで (笑)


2007年07月11日

カテゴリ別アーカイブ

カテゴリ別アーカイブのタイトル一覧表示
<div id="blogcontainer" class="clearfix">
<div id="content">
<div id="contentin">
<div id="categorytitlebody"><h3 id="categorytitle"><$CategoryName ESCAPE$></h3></div>

<!-- タイトル一覧 -->
<div class="main">
<CategorizedArticlesLoop>・<a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a>&nbsp;&nbsp;<span class="small"><$ArticleDate$></span><br />
</CategorizedArticlesLoop>
</div>
<div class="nextpage"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">前のページへ</a></IfPrevPage><IfNextPage>&nbsp;&nbsp;&nbsp;<a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ</a></IfNextPage></div>


<CategorizedArticlesLoop>
<$TrackBackAutoDiscovery$>
<div class="datetop"></div>
<div class="fullbody">


2007年07月04日

アイコン

niko
<img src="http://livedoor.blogimg.jp/biomasa/imgs/6/a/6a7fc90a.gif?blog_id=2417346" width="16" height="16" alt="" />

ex
<img src="http://livedoor.blogimg.jp/biomasa/imgs/a/a/aaa72d87.gif?blog_id=2417346" width="16" height="16" alt="" />

kira
<img src="http://livedoor.blogimg.jp/biomasa/imgs/b/d/bdc7c87a.gif?blog_id=2417346" width="16" height="16" alt="" />


2007年02月10日

動画ファイルをobjectで


<p><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">
    <param name="src" value="相対パス" />
    <param name="autoplay" value="true" />
    <param name="controller" value="true" />
  <embed pluginspage="http://www.apple.com/quicktime/download/"
  src="相対パス" type="video/quicktime"
  width="320" height="256" controller="true" autoplay="true" />
</object></p>


2006年08月09日

FLASHをXHTMLに

FLASHをXHTMLに埋め込むには今までのタグは使えない。
<object>タグにするにはどうしたらいいかわからなかった。
最近、いろいろ情報が見つかるようになった。

<object data="./flash/xxx.swf" width="350" height="300"
    type="application/x-shockwave-flash">オブジェクト
    <param name="movie" value="./flash/xxx.swf" />
    <param name="wmode" value="transparent" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#5f8abd" />
    <param name="loop" value="true" />
</object>

こんなのもあった
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="260">
<param name="movie" value="./flash/hbday1.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="./flash/hbday1.swf" width="160" height="260" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>


2006年05月22日

10進、16進文字コードin HTMLユニコード

調べてみるもんですねぇ――! こんなページがありましたよ (^_^.)
場合によっては役に立つんです。
10進、16進文字コードin HTMLユニコード
今日、調べたのは「荀」と「程─廚任垢
このようになります。「荀&#24423;」と「程&#26161;」です。
ただし、リンクを開くにはIEベースにすること。


2005年08月22日

概念図をul要素で作成する


  • html要素
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="ja">

    • head要素
      <head>
      <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
      <meta http-equiv="content-language" content="ja">
      <meta http-equiv="content-style-type" content="text/css">
      <meta http-equiv="content-script-type" content="text/javascript">
      <title>概念図をul要素で作成する</title>
      <style type="text/css">
      body {
          margin: 30px;
          padding: 0;
          background: #fff;
          font-family: Verdana, Arial, sans-serif;
          line-height: 2;
      }

      ul.docstr { margin: 0 0 2em; padding: 0; }
      ul.docstr li {
          list-style-type: none;
          margin: 0.5em 0.5em 0.5em 0;
          padding: 0.5em;
          border: 1px solid gray;
          background-color: #eee;
      }
      ul.docstr li ul li { background-color: #ddd; }
      ul.docstr li ul li ul li { background-color: #ccc; }
      ul.docstr li ul li ul li ul li {
          display: inline;
          background-color: #bbb;
      }
      </style>
      </head>

    • body要素
      <body>

      <ul class="docstr">
          <li>html要素
              <ul>
                  <li>head要素<p>(文書の基本情報)</p></li>
                  <li>body要素<p>(文書の本文)</p></li>
              </ul>
          </li>
      </ul>

      <ul class="docstr">
          <li>文書型宣言</li>
          <li>html要素
              <ul>
                  <li>head要素<p>(文書の基本情報)</p></li>
                  <li>body要素
                      <ul>
                          <li>ブロックレベル要素</li>
                          <li>ブロックレベル要素
                              <ul>
                                  <li>テキスト</li>
                                  <li>インライン要素</li>
                                  <li>テキスト</li>
                              </ul>
                          </li>
                          <li>ブロックレベル要素</li>
                      </ul>
                  </li>
              </ul>
          </li>
      </ul>

      </body>

    </html>



2005年06月18日

HTMLのメモ


<script language="JavaScript">
<!--
function CloseWin(){
window.close();
}
// -->
</script>

<div align="right"><form>
<input type="button" value="ウィンドウを閉じる" onClick="CloseWin()" />
</form></div>

<a href='jAVAScript:window.close();'>

< <  > >  & &

<a href="javascript:history.back()">もとに戻る</a>

<form>
<input type="button" name="win1" value="お正月" onClick="window.open('7gods/shougatsu.htm','win1');">
</form>

<a href="" target="_blank"><img src="" alt="" align="right" class="imglink" /></a>

<a href="" target="_blank">こちら >>></a>

$FILE1_r

background-image: url("../../img/back_line.gif")
style="letter-spacing: 1px"

alt="クリックして 演奏が聴かれます"

target="_blank"を
オンクリック="window.オープン(this.href,'_blank');return false;"

セレクトボックス
<select style=background-color:lightcoral;color:green;font:10;>
<option selected>セレクトボックス</option>
<option>ケロロ軍曹</option>
<option>ギロロ伍長</option>
<option>タママ二等兵</option>
<option>クルル曹長</option>
<option>ドロロ兵長</option></select>

フラッシュ
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="***" height="***">
  <param name="movie" value="--1--.swf"><param name=wmode value=transparent>
  <param name="quality" value="high"><param name="BGCOLOR" value="#5f8abd">
  <param name="LOOP" value="false">
  <embed src="--1--.swf" wmode=transparent width="***" height="***" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#5f8abd"></embed></object>
XHTMLには以下のサイトを参考にする
cyano

<blockquote><cite><a href="URL"></a></cite>
<h1></h1>
<p></p></blockquote>


Profile
しぇんしぇい
西野流呼吸法とソシアルダンスと海外ミステリをこよなく愛しているおいさんの Diaryです。
記事検索
過去記事
Recent Comments
訪問者数

    天気情報
    Google Sitemaps用XML自動生成ツール
    livedoor Readerに登録
    RSS
    livedoor Blog(ブログ)