2015年12月16日

添付まがいのテスト

しばらく使っていないので テスト 妙心寺派宗制
posted by ふう at 21:26 | Comment(0) | TrackBack(0) | css

2010年09月29日

visited やら hover やら

いつの間にやら Opera でも
a:visited:hover
が解釈されるようになっていた。

こういう css を当ててあるサイトを見なかったのでまだかと思っていた。

見栄えが少し良くなるのかも

posted by ふう at 18:13 | Comment(0) | TrackBack(0) | css

2010年04月07日

table の 中の pre

このサイトは、今現在(2010/04)ではテストページと同じように

#container {
   width:95%;
   display:table;
   ......
}
#content {
   display:table-cell;
   ......
}
#links {
   display:table-cell;
   ......
}

としてある。#container/#content/#links は総て div である。最近のブラウザでは解釈されているようなので問題はない(?)。

ただ、div 内にも関わらず、pre のように改行のない長い文字列 (pre で無くとも切れ目のないアルファベットなど)があると、td と同様に問答無用で幅が長くなってしまう。 overflow:auto; も width:90% などでは無効だ。レイアウトが崩れないようにするには、pre などを % などではなく固定幅にしなければうまくいかなかった。

pre の 代わりにリストを使うことも考えた。

それでもせっかく可変幅で閲覧できるようにしたのに、そこだけがうまくいかないのは何とかならないものか。で、探してみると table の幅を固定すれば良いことに気がついた。一応 width:95%; とはなっているが元々 table は可変幅なのでこの書き方では不十分。table-layout: fixed; を付け加え、描画する前に幅を決めてしまえば、pre も可変幅で overflow:auto; も有効になった。

結局

#container {
   width:95%;
   display:table;
   table-layout: fixed;
   ......
}

で解決

posted by ふう at 16:30 | Comment(0) | TrackBack(0) | css

2010年04月05日

youtube を貼り付ける

youtube の動画を貼り付ける際に利用できる、埋め込みコードは、あまりきれいではない。

youtube から得られるコードは下記のようなもので実際は改行はない。見やすいように改行を施した。また object は inline なので body 直下には置けない。ここでは <p> で囲ったが実際はブログなどは div などで囲まれているだろうから、直接貼り付けても実害はない。

  • <p>
  • <object width="480" height="385">
    • <param name="movie" value="http://www.youtube.com/v/IcpsAOUh9YI&hl=ja_JP&fs=1&"></param>
    • <param name="allowFullScreen" value="true"></param>
    • <param name="allowscriptaccess" value="always"></param>
    • <embed src="http://www.youtube.com/v/IcpsAOUh9YI&hl=ja_JP&fs=1&" type="application/x-shockwave-flash"
    • allowscriptaccess="always" allowfullscreen="true" width="480" height="385">
    • </embed>
  • </object>
  • </p>

で、上記コードで貼り付けたものが下の動画。

& が直接書かれている・paramが </param> で閉じられているなど問題がある。

IE8/Firefox/Chrome/Opera が対象であれば、もう embed は必要ないだろう。 embed の代わりに youtube へのリンクを張っておけばよい。そこで下記のように書き直した。

  • <p>
  • <object width="480" height="385"
    • type="application/x-shockwave-flash"
    • data="http://www.youtube.com/v/IcpsAOUh9YI&amp;hl=ja_JP&amp;fs=1&amp;" >
    • <param name="movie"value="http://www.youtube.com/v/IcpsAOUh9YI&amp;hl=ja_JP&amp;fs=1&amp;" />
    • <param name="allowFullScreen" value="true" />
    • <param name="allowscriptaccess" value="always" />
    • <p>プラグインがインストールされていません</p>
    • <p><a href="http://www.youtube.com/watch?v=IcpsAOUh9YI"><img src="http://img.youtube.com/vi/IcpsAOUh9YI/default.jpg" width="120" height="90" alt="youtube 記念樹" /></a></p>
  • </object>
  • </p>

で、上記コードで貼り付けたものが下の動画。

   

プラグインがインストールされていません

youtube 記念樹

これでそれぞれのブラウザで確認できれば、youtube のものよりよほどすっきりしていると思いますが、いかがです?

posted by ふう at 00:30 | Comment(0) | TrackBack(0) | css

2010年03月14日

page-break-inside Opera

Opera10.5 が page-break-inside をちゃんと処理するようになった。具体的には改ページされると困るところを page-break-inside:avoid !important; としてやる。するとページに収まらないところは次のページに送られる。それでも収まらない場合は、改ページしながら印刷される。まだ100%意図したようにはできないが、それでも完全無視よりは良くなった。

データベースからの印刷を、HTMLの形で出力するようにしたから、非常にありがたい。

ほかの改良点よりありがたい。

posted by ふう at 14:23 | Comment(0) | css

2010年03月03日

角丸やらボックス影付けなど

Operaでも border-radius や box-shadow がサポートされた。Opera の場合 -o- などの Prefix が必要なく使える。

border-radius:左上 右上 右下 左下 とか border-radius:全ての角 など border などの設定の仕方と同じだ。

box-shadow : x 方向のずれ y 方向のずれ ボケ具合 色;

このページでもやってみた。-moz- や -webkit- 付きのものも書いておくと他のブラウザでも反映される。むやみに使うとみっともないかも。


.entry-body{
   border-radius:0 0 15px 15px;
   box-shadow:6px 6px 10px #999;
   -moz-border-radius:0 0 15px 15px;
   -moz-box-shadow:6px 6px 10px #999;
   -webkit-border-radius:0 0 15px 15px;
   -webkit-box-shadow:6px 6px 10px #999;
}

blockquote {
   border-radius:10px;
   box-shadow:6px 6px 10px #999;
   -moz-border-radius:10px;
   -moz-box-shadow:6px 6px 10px #999;
   -webkit-border-radius:10px;
   -webkit-box-shadow:6px 6px 10px #999;
}

Google Chrome は表示がちょっと変かな

posted by ふう at 13:00 | Comment(0) | css

2009年11月08日

外部 css での文字コード

文字コードが Shift_JIS では扱えない文字が出てきた。仕方がないのでそのページだけ UTF-8 にしたら表示できた。メデタシ・メデタシ。

それは解決したが、外部 css での after や before で content の中身の2バイト文字が文字化けした。そこで css に @charset 'utf-8'; としたら、解決。メデタシ・メデタシ。

そうしたら、既存のページで文字化け。Opera ではなんと言うことなく表示されるのだが、少なくとも Firefox と IE では化けた。css 冒頭の @charset を解釈していないようだ。

調べてみると割合と有名なバグらしく色々と出ていた。サイトに依っては"数値文字参照"で書けば解決する、などと書いてあった。冗談でしょう。なんせ可読性 0 ですもん。もっとスマートな方法はないのですか?????

で、結局

外部 CSS ファイルを読み込んでいる link 要素の charset 属性に CSS ファイルの文字コードを明示する

というわけで、例えば UTF-8 なページで Shift_JIS な css を使う時は(本体と css で文字コードが異なる場合は)

<link rel="stylesheet" href="main200907-3.css" type="text/css" charset="Shift_JIS" />

などとしましょう、という備忘。

link 要素は charset 属性をサポートしている
のでこれが一番スマートかと(a 要素もだが、これから参照する文書の charset をあらかじめユーザーエージェントに教えることになる)

とはいえ、ユーザーエージェントがcss 冒頭の @charset をちゃんと見れば済むことなのだ。結構悩んだ。

posted by ふう at 20:31 | Comment(0) | css

2009年08月25日

display table やら table-cell で Firefox のバグ

display : table を使えばレイアウトが簡単にできると書いたがFirefoxで表示が乱れることがある。

以前の例で示したものでローカルなファイルだと一部のdivに大量の中身があるとおかしな表示になる
アップロードするか、ローカルでもいったんスタイルシートを外し再度適用すると正常に表示できるが、ローカルファイルでは再読み込みをすると乱れてしまう。OperaやIE8ではそのようなことはなく、要するにバグ。

過去に作ったものをdisplay : tableを使って書き直していて気がついた。気がつくまでにこちらのミスではないかと、さんざんソースやcssを見直してしまった。

ちなみにFirefox/3.5.2 (.NET CLR 3.5.30729) XP でも Vista でも

posted by ふう at 21:19 | Comment(0) | css

2009年07月26日

display table やら table-cell

FirefoxやIE8がdisplay : table などを解釈するようになっていた。普通に表で表示するものはtableタグで書いた方がいいが、レイアウトなどのためにtableを使うのは、どうだかなあ、で、divでfloatなどを利用し、結構トリッキー(そこまでするかという意味で)な方法になっている。

display:table-cellなどを使えば、ヘッダ・フッタありの3カラムなどが簡単に書けるようになった。

HTML5で、ヘッダやカラムなどのタグが出来ると、こういう小技も必要なくなるのだろうか?

posted by ふう at 22:56 | Comment(0) | TrackBack(0) | css

2009年07月20日

引用をスマートに

以前は、利口な機能の付いたことを「インテリジェント」と言っていたような気がする。
乗用車の簡単便利なキーをインテリジェント・キーと言う風に。今時はそれをスマートというそうな。スマートフォンなんかがそうですか。


で、スマートな引用の仕方。blockquoteやqで引用した場合に、スマートに引用元にリンク付けしようというわけだ。cssだけを使って。


引用にcite属性が書いてあれば可視化しようというのは、前に書いたが、直接リンクを張ってしまおうという小技。ただしOpera限定


こんにちは。

> a要素のblock要素版

は、Opera限定ですがCSSで実現可能です。



blockquote[cite^="http://"],
q[cite^="http://"]
{
-o-link: attr(cite);
-o-link-source: current;
}


これで、引用部分をクリックすると引用元に飛ぶことができます。Operaもそれ以外のブラウザもこれを標準スタイルにすればいいのにと思います。


んん…頭のいい人もいるもんだ。というわけで、為備忘


Opera限定だからしかたがない。ではなく、Operaを使っているのであれば、user-css に上記を書き込んでおけば、どのサイトでもcite属性が書いてあればリンクが張られている状態になる。便利でッせ

posted by ふう at 20:16 | Comment(0) | css

2009年07月02日

:nth-child(n) のこと

Firefoxが3.5になった。いろいろ変わったらしいが、普段使っていないのでよくわからない。
そのわからない中で、セレクタに関してはnth-child(n)を解釈するようになったようだ。


表や一覧形式になったものを見やすくするのには、強力な手段だと思う。nth-childをセレクタに指定しても、IEには何の副作用もないので、適用してくるサイトも増えていくだろうと思う。そうすれば、なんだかんだといってもW3Cでの「標準」ということの「便利さ」(有効さ)を、IEでも独自性よりも優先しなければいけない方向になるだろうか。

posted by ふう at 11:05 | Comment(0) | css

2009年01月13日

iframeのこと

誰が見たかは判らないが、どこから見たかを調べるために、画像を呼び出した時画像を返すcgiにクエリーの文字を付け加えることがあるようだ。


hogehoge.cgi?1234という風に。広告効果がいくらかでもわかるのだろうか。

所が閲覧する方も、アドブロックなどで表示されないようにしてしまう。

これではいけないということで

height=1 width=1

などとしてしまう。目視では見えないけれども、あそこは良く見られているなあ、というわけだ。IPなども判りけっこうずくめ。


で、閲覧者は、

img[width="1px"][height="1px"],img[width="1"][height="1"]
{

display:none

}

として抵抗する。



このごろそれに加えて

<iframe width="1" height="1"

というのがあるのに気がついた。



なるほど。



でbrowser.cssの該当部分も

img[width="1px"][height="1px"],

img[width="1"][height="1"]

img[width="1px"][height="1px"],

iframe[width="1"],ifarame[width="1px"]

{

display:none

}

と訂正した。


imgでは横100縦1の画像もあるが、iframeではそんなものは意味がないので片方だけで十分だ。


こうなってくると、objectなども書かなければならないのだろうか。

posted by ふう at 22:49 | Comment(0) | TrackBack(0) | css

2008年11月11日

svgを背景にする

htmlでsvgが背景に使えれば、ギザギザのないきれいな画像になる。
表示されるのはOpera・Safari位しか思いつかないが、いずれほかのブラウザがもしサポートすれば、そのとたん表示されることになる。それもおもしろい。


svgの画像を作らなければならないが、Oooか花子しか手元にない。そこで花子を使ってsvgを作ることにした。

日本語文字をいれたいが、そうするとブラウザによってはうまく表示されないことがある。そこで文字をアウトライン化して図形として張り込むことにした。ついでに文字を変形させた。幅が1pxの線もギザギザがなく表示されている。


cssには


background-image: url("hoge.svg");

と書くだけだ。あとは普通の画像と一緒。


作った画像は何のひねりもないこれ

これを背景画像にしたページがここ


Operaで見ると背景に表示され、インラインフレーム扱いになっている。Firefoxで見ると背景は表示されないが、背景だけを表示するようにすると画像が見えるようになる。何か拡張があって導入すると見えるのかもしれない。IEでは背景はないことになっている。

posted by ふう at 22:33 | Comment(0) | TrackBack(0) | css

2008年02月24日

nth-child(n)を使う -2-

nth-child(n)を使って市松模様による錯視をつくった。

市松模様の錯視

ところで、このようにHTMLの中にHTMLを貼ることができるが、再帰的に自分自身をはるとどうなるのだろうか。メモリ食いつぶしてアウトになるような気がするが、試そうとは思わない。

posted by ふう at 21:29 | Comment(0) | TrackBack(0) | css

2008年02月23日

iframe の代わりに object を使う

HTMLを貼る:




市松模様を作る。


上記のソース



<p>HTMLを貼る:
<object data="http://jiji.typepad.jp/files/itima.html"
type="text/html"
height="200" width="400">
市松模様を作る。</object>
</p>


上記のようにcssの例を示すために、本体のcssが増殖してしまうのを避けたいこともある。
そういったときには便利かと。
posted by ふう at 00:00 | Comment(0) | TrackBack(0) | css

2008年01月23日

nth-child(n)を使う

nth-child(n)はcss3で策定中の疑似クラスです。
まだ対応しているUAは少ないようですが、Operaはその数少ないものの一つです。

ここのカレンダーは単に数字をテーブル組みしたものです。そのtdには何のクラスも設定されていません。

<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>


このテーブルにはクラスは設定してありませんが、<div class="module-calendar module">の中にあるので

div.module-calendar tr td:nth-child(1),div.module-calendar tr th:nth-child(1){
color:red;
}
div.module-calendar tr td:nth-child(7),div.module-calendar tr th:nth-child(7){
color:blue;
}


trの中にあるtdで1番目は赤(日曜)、7番目は青(土曜)というわけです。ついでにthも同じようにしました。

カレンダーの比較

左がOpera9.5α、右はIEとFirefox。

これが一般的になれば、大きな表の一行おきに背景を変えるとか、10行おきに太い線で区切るとかが簡単に表現できることになります。
nth-child(1)にはnth-child(even)とかnth-child(2n+1)とかnth-child(10n+1)といった事もできます。

cssのつまみ食いのようなものですが、使えるものは使えばいいのだ、と。続きを読む
posted by ふう at 18:00 | Comment(0) | TrackBack(0) | css

2008年01月08日

ページの最初へジャンプ

ページの最初へジャンプできるようにした。cssを使って実現する。

こんなやつ

Pagetop

クリックすると最上部に戻る。

ところが困ったことに、TypePadはこういうものを書き込む場所がないように見える。で仕方がないので、ページ上部のH2のところに書き込むことにした。
<h2 id="banner-description">無料で使える100M<br />
さぁ、何に使おうか? と言っていたら4Gになっていた。(2007/11/15)気がついたのは2007/11/23
<span class="gototop"><a href="#container">ページの最初</a></span></h2>


gototopは以下のよう
span.gototop{
position:fixed;
bottom:0px;
left:1em;
opacity: 0.75;
filter: alpha(opacity=75);
color:white;
background-color : #606d93;
border:1px gray solid;
font-size:1em;
font-weight:normal;
display:block;
_display:none;
width:7em;
margin:0px;
text-align:center;
border:1px solid black;
border-bottom:none;
z-index:100;
}

span.gototop a,span.gototop a:visited,span.gototop a:hover{
color:white;
background-color : transparent;
border:none !important;
}

spanp.gototop a:hover{
opacity: 1;
filter: alpha(opacity=100);
}


IE7はしらずIE6までは position:fixed; を上手に解釈しないので、_display:none; で非表示にしてしまった。IEが解釈できるようになれば _display:none; を外せばいい。(filter: alpha(opacity=100);
はそのため)

だからOpera・Firefox限定となる。(IE6以下には実害はない)
posted by ふう at 22:34 | Comment(0) | TrackBack(0) | css

2007年12月16日

結局IEがデファクトスタンダードでしょ

色々CSSで凝ったところで、結局はIEでは反映できない物も多い。
何のためにやってるの、という疑問は正しい。

Pdfのリンクに画像を付加する、などはbackground-imageでやれば良いのではないか、という疑問も正しい。

しかしブラウザにIEエンジン以外のOperaやFirefoxを使っている場合には、ユーザCSSを書くことによって、WEB上の他のドキュメントでもそういう小技の様な事が実現する。これが到って便利だ。
OperaではBrowser.cssに書いておけば、必ず適用される。

リンク先のURLを見てからクリックすればいい物を、うっかりクリックしてから、「何だよPDFかよ」ということがない。
blockquoteに必ずcite記入されている方もおられる。

その場合、ソースを見なくても引用元URLが目視できる。

「これ」、とか、「ここ」とか「link here」と書いてあっても、カーソルを当てなくともリンク先が判るというのは、精神衛生上すこぶる良い。
posted by ふう at 23:21 | Comment(0) | TrackBack(0) | css

2007年12月08日

引用元の表示など

為備忘


blockquoteでcite属性が記入してあると、その内容(URL)を表示する。

OperaやFirefoxだと有効になる。



/* blockquote での引用元の表示 */
blockquote[cite]:after {
display:block;
content: " from:[ " attr(cite) " ]";
text-decoration:none;
font-style:normal;
text-align:right;
}


display:block;は改行させるためである。


pdfファイルにリンクを張ってあるとアイコンを表示。


/* pdfに印を付ける */
a[href$=".pdf"]:after,a[href$=".PDF"]:after,a[href$=".Pdf"]:after {
content: url("data:image/gif;base64,R0lGODlhDAAMAMQAAAAAAP///+cxNOg8Puc+QelHSOdLTelTVeZWWehZW+ZcXuRkZuVsbuN9fuSEheKMjeGbnOGsreC0teK3uN/Ky97j4/8AAOcvL+ZFReNzcuG8vN7U1N3d3REREf///wAAACH5BAEAAB4ALAAAAAAMAAwAAAU/oCcCJNl1gDhyLNdZaCm7FgzUOMCVKF7rrZgMyOqogIIBBjExrjiSyGNRcHp0itZGYwUwDC1OpXsIF1WntDoEADs=") !important;
padding-left:3px;
padding-right:5px;
}



リンク先を表示


/*リンク先を表示*/
a:after { content: " (" attr(href) ") ";}


とすれば a 要素にすべてリンク先が表示される。


これだとたとえばmailto=""や単に/にも付いてしまう。また不要な場所(メューなど)にも付いてしまう。



このブログ内限定であれば下記の方が良いのではないかと。


/* リンク先を表示 */
div.entry-content a[href^="http"]:after /* 相対パス(#topなど)には付かない */ {
content: " (" attr(href) ") ";
color:black;
}
/* 内部のリンク先は表示しない */
/* 絶対パスも内部なら付けない */
a[href^="http://jiji.typepad.jp/"]:after {
content:"" !important;}
/* end of 内部のリンク先は表示しない */
posted by ふう at 08:21 | Comment(0) | css

2007年11月23日

疑獄事件 あるいは :target

この頃は「疑獄[1]」という言い方を余り見なくなってしまった。
「贈収賄」などというそうである。
それはいいが、疑獄が多発しているわけではない。以前から、おそらく古代から続いているのであって、権力(金)の集まるところ必ずと言っていいほど起こり得る。

疑獄は、権力の属性[2]なのだ。
そして疑獄の第一の意味の通り、真相のはっきりしない事件だ。権力の集まるところ必ず利権[3]が発生して、立場が行使する金銭を、自分が行使するものと勘違いする。

これもまた人間の属性なのかもしれない。

というわけで、operaがcss3で策定された疑似要素[4] :targetを解釈するようになったのでそのサンプルを作ってみた。Javascriptなしでこのようなことができる。Firefoxでも反映されるようだがIEは最新版でも未サポート[5]。(だそうだ。IE7は入れていない)

もう少し適当な文章であればいいが、何も思いつかなかった。

ちなみに


/* 脚注 */
ol.note{
border-top : solid 2px gray !important;
}
ol.note li{
color:#663300 !important;
font-size:0.8em !important;
padding:1em;
border-left:5px solid transparent !important;
line-height:1.2em;
}
ol.note li:target{
color:black !important;
border-left:5px solid #FF3366 !important;
}


と書いた。


  1. ぎ‐ごく【疑獄】
    (1)[礼記王制] 事情が入り組んで真相がはっきりしない裁判事件。折たく柴下「―一条をしるし出されたりけり」
    (2)俗に、政府高官などが関係した疑いのある大規模な贈収賄事件をいう。「昭電―」

  2. ぞく‐せい【属性】
    (attribute)
    (1)その物の有する特徴・性質。
    (2)〔哲〕物がそれなしには考えられないような性質。実体の本質をなす性質。例えばデカルトでは、精神の属性は思惟、物体の属性は延長。

  3. り‐けん【利権】
    利益を専有する権利。業者が公的機関などと結託して得る権益。「―がからむ」
    ―‐や【利権屋】

  4. 疑似要素・疑似クラスは要素が特定の状態にある場合にスタイルを指定するもので、疑似要素は要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができます。どちらもセレクタとなる要素名のあとにコロン(:)をつけて記述します。

  5. ここにcss3のサポート状況一覧表がある。

posted by ふう at 04:47 | Comment(0) | css

2007/02〜 ここに移動したのは 2010/04/02 by huu