2014/11/03(月)

擬似要素で生成された画像を縦方向にセンタリングするソリューション このエントリをはてなブックマークに追加 

Filed under: CSS,WEB制作 — KAY @ 11:58:06


以下のサンプルをご覧ください。

TWECOCaq_normalサンプル1
サンプル2

こちらは以下のようなコードになっています。

CSS
#my_sample1 {
display:block;
width:300px;
text-align:center;
border:1px solid #00b;
}
#my_sample1 img {
vertical-align:middle;
}
#my_sample2 {
display:block;
width:300px;
text-align:center;
border:1px solid #00b;
}
#my_sample2:before {
content:url(http://blog.chisyamori.com/kay/wp-content/files/2014/11/TWECOCaq_normal.jpeg);
vertical-align:middle;
}

HTML
<span id="my_sample1"><img src="http://blog.chisyamori.com/kay/wp-content/files/2014/11/TWECOCaq_normal.jpeg" alt="TWECOCaq_normal" width="48" height="48">サンプル1</span>
<span id="my_sample2">サンプル2</span>

サンプル1はimg要素、サンプル2は::beforeによって生成された画像です。
どうも、擬似要素の画像はimg要素と違ってvertical-align:middle;じゃセンタリングされないみたいですね。しかも、なんか下に空白ができてるし……。この空白は恐らく縦の揃え位置がbaselineになっているためでしょう。

結論から申し上げますと、CSSでこのように指定してやると、縦にセンタリングされます。

#my_sample3 {
display:block;
width:300px;
text-align:center;
border:1px solid #00b;
}
#my_sample3:before {
content:url(http://blog.chisyamori.com/kay/wp-content/files/2014/11/TWECOCaq_normal.jpeg);
line-height:0;
vertical-align:-16px;
}

サンプル3

まず、line-height:0;で下の空白を消します。そして、vertical-alignにマイナスの値をいい感じに指定してやります。
いい感じというのは具体的に言うと、

(画像の高さ – フォントの高さ) / 2

です。このサンプルの場合だと、画像の高さが48pxでフォントが16pxなので、

(48 – 16) / 2 = 16

というわけで-16pxを指定しているわけですね。

ちなみに、このような形で擬似要素を使わなければならないケースは稀だと思います。
タグで表現して問題ない場合はそれこそサンプル1のように記述すればいいだけですし、そうでなくても通常はbackgroundで事足りるでしょう。
今回の場合、ポイントは実はtext-align:center;の部分で、「センタリングされた任意の長さの内容テキストの直前に画像を配置したい!」というケースでした。
backgoundだとちょっと難しいですよね。

さて、解決したはいいものの、どうやら擬似要素による生成画像はimg要素とは違ったレンダリング規則が適用されてるみたいですが、どういったアレでこんな事態になってるのかは未だ謎です。

2014/10/10(金)

Janetterプラグイン「絵文字対応」「サムネイル順修正」公開 このエントリをはてなブックマークに追加 

Filed under: JavaScript — KAY @ 21:46:37

何を思ったか、Janetterのプラグインなんぞを作ってみたので公開します。
というか、Twitterでは既に公開してたんですけど。
以下からどうぞ。

http://kay.chisyamori.com/janetter_plugin/

2010/01/16(土)

ニコニコ動画のユーザーをニコニコチャートで検索するブックマークレット このエントリをはてなブックマークに追加 

Filed under: JavaScript,WEB制作,ブックマークレット — KAY @ 15:40:51

ニコニコブックマークレット第4弾。

↓をブックマーク!
ニコニコユーザーをニコニコチャートで検索

ニコニコ動画のうp主の中には、全ての情報を非公開にしてる方も少なくありません。
自分のウォッチリストを眺めてて「あれ? この人はどんな動画を作ってる人だったっけ?」と思う事が多々あったので作ってみました。
本当はユーザーIDから動画を検索出来るのが望ましいのですが、そのようなサービスをやってるとこを知らないので……。
ウォッチリストにちょっとしたメモでも書けるように、公式で対応して欲しいところなんですけどねー。まあいいや。

使い方ですが、2通りあります。
まず、マイページのウォッチリストを開いている状態で使った場合。
各ユーザーの名前の横に「ニコニコチャートでニックネーム検索」というリンクが現れますので、そこからニコニコチャートにジャンプして下さい。
また、ユーザー個別のプロフィールを開いている状態で使うと、直でニコニコチャートへ跳びます。
そんだけ。

あっ、もしもニコニコチャート以外で、このブックマークレットの用途に合いそうなサービスを知ってる方がいらっしゃったら教えて下さいっ!

では~。

2009/12/16(水)

マイリストコメントページから公開マイリスト一覧ページへジャンプするブックマークレット このエントリをはてなブックマークに追加 

Filed under: JavaScript,WEB制作,ブックマークレット — KAY @ 19:49:59

はい、ニコニコブックマークレット第3弾。

↓をブックマーク!
マイリストコメント→公開マイリスト

いつの間にか動画を開かないと公開マイリスト一覧が見られなくなっていたので。
最近、この程度の簡単なやつならちょくちょく作っていきたいなーとか思ってるんですが、あんまりネタも無いので、もしこういうのが欲しいってのがありましたら、ブログのコメントかTwitterでリプライ下さい。
実際に作るかどうかは判りませんが。
外部jsを読み込んでやらないと動作しないようなめんどくさいのはパス。

2009/12/01(火)

ニコニコミュニティ動画から元動画へジャンプするブックマークレット このエントリをはてなブックマークに追加 

Filed under: JavaScript,WEB制作,ブックマークレット — KAY @ 17:00:22

またブックマークレット作ってみた。

↓をブックマーク!
ニコニコミュ動画から元動画へジャンプ

記事のタイトルだけで全容を説明してしまっているので書く事が無いです。
とりあえず、起動するとジャンプする前に確認ダイアログが出るので、動画IDだけ確認したい場合にも使えます。

なんか以前にそういったニーズをTwitterのTLで見掛けた気がしたので作ってみました。

2009/10/26(月)

ニコニコ動画で現在視聴している動画のサムネイルを表示するブックマークレット このエントリをはてなブックマークに追加 

Filed under: JavaScript,WEB制作,ブックマークレット — KAY @ 13:20:29

昨日ふと思い付いてtwitterでも書いたんだけど、作ってみたので~。

↓をブックマーク!
ニコニコサムネイル確認

ニコニコ動画で、今現在視聴している動画のサムネイルが開きます。
ブラウザの設定によってはポップアップブロックとかが働くかも知れません。
サムネイル以外から動画にジャンプして、コメントで「ちょwwwサムネwwwwww」とか書かれていたり「サムネ一本釣り」とかのタグが付いてて意味が判らんかった時とかに便利。

2009/06/28(日)

はてブ関連機能の追加 このエントリをはてなブックマークに追加 

Filed under: WEB制作,ワードプレス,雑記 — KAY @ 15:58:27

各記事にはてなブックマークのボタンを設置し、被ブクマ数が出るようにしてみました。
被ブクマ数は、なんかOperaだと画像が出てこない場合が……。widthとheightを指定していないのが原因だとは思うんだけど、これ無理だよねー。横幅は取得する画像によって変わるので。
まあ、間にスクリプトをかませばどうにかなりそうだけど……。
そーゆーのはまた今度。

2009/01/23(金)

固定幅でセンタリングされた要素の横にタブ風メニューをくっ付けるCSS このエントリをはてなブックマークに追加 

Filed under: CSS,WEB制作 — KAY @ 00:38:24

個人的にはリキッドデザインの方が好きなんですけどね。

ウィンドウをリサイズした時、ウィンドウではなく固定幅でセンタリングされたコンテンツに追随するようにメニューだのバナーだのをくっ付ける方法をば。

とりあえず以下の3点、

  • validなCSSである事
  • CSSハックを使わない
  • IE6にも対応させる

これを前提で。
↓サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タブメニューサンプル</title>
<style type="text/css">
    div#main_contents {
        width:600px;
        height:1000px;
        margin:0 auto;
        background-color:#ddd;
    }
    div#menu {
        height:0;
        position:relative;
    }
    div#menu ul {
        margin:0;
        padding:0;
        width:3em;
        position:absolute;
        left:-3em;
    }
    div#menu ul li {
        list-style-type:none;
        background-color:#ddf;
        margin:2px 0;
        padding:0;
    }
</style>
</head>
<body>
<div id="main_contents">
    <div id="menu">
        <ul>
            <li>いち</li>
            <li>にぃ</li>
            <li>さん</li>
            <li>よん</li>
        </ul>
    </div>
    ほにゃららら。
</div>
</body>
</html>

強調部分がポイント。応用利かせれば右側に引っ付ける事も出来ますね。IE6を無視すればもうちょい簡単に出来ますが……。

タブメニューサンプル

2008/10/26(日)

WordPressアップデートしました。 このエントリをはてなブックマークに追加 

Filed under: WEB制作,ワードプレス,雑記 — KAY @ 22:50:38

WordPress2.6.3日本語版にアップデートしてみました。
何か不具合があれば教えていただけるとありがたいです。

今のところ、管理画面のjavascript周りで文字化けが……。^^;

2006/10/28(土)

object要素による代替インラインフレームにjavascriptでアクセスしてみる このエントリをはてなブックマークに追加 

Filed under: JavaScript,WEB制作 — KAY @ 04:46:08

各ブラウザで、documentオブジェクトへは、以下のような感じでアクセスできる。

※インラインフレームを「name=”child” id=”iframe_object”」で定義したとする。

■Opera9.02
document.getElementById(“iframe_object”).documentでアクセス可能。

■Firefox2.0
child.documentでアクセス可能。

■IE6
document.getElementById(“iframe_object”).document、child.documentのどちらでもアクセス可能。(===の比較で同定出来る)

ここで問題になるのがOperaの場合。IE、Firefoxはchildがグローバル(インラインフレームのwindowオブジェクト)という事になりますが、じゃあOperaの時のグローバルはどこよ? という話で。

実はOperaでも、iframe要素によるインラインフレームの場合だと、要素のname属性で指定した名前で親のスクリプトからインラインフレームのwindowオブジェクトへアクセス可能なんですね。
しかも、object要素の場合でも親の方のwindowオブジェクトのメンバでちゃんと名前空間が確保されてる。
「window.(name属性で指定した値)」を参照するとundefindではなくnullを返します。
これはなんなんですかねー。あえてこういう仕様にしてるとも取れるなあ……。

まあ実際、object要素でHTML文書を指定した場合はあくまで文書を埋め込むんであって、ウィンドウを埋め込むわけじゃないですからねえ……。
とはいえ、親のスクリプトから見た時にフレーム内のグローバルが行方不明になるというのもどーかと……。

でまあ、苦肉の策で、インラインフレーム側のスクリプトにこんな感じの記述を入れておく事で親のスクリプトからインラインフレームのグローバルへアクセスする事は出来ます。

parent[window.name] = window;

実際は、場合や環境によってインラインフレーム側のスクリプトが先に読み込まれるかも知れないので、各フレーム間でもうちょい厳密な同期処理を入れといた方がいいのかも知れない。(いらないのかも知れない)
事実、簡単なテストをしたところ、Operaの場合は親のスクリプトが先に実行され、Firefoxの場合は子のスクリプトが先に実行されるという現象を確認しました。これが上記の記述に影響するかどうかは未検証ですが。(そんくらい検証しとけよという話も)

んでまあ、最終的に何が言いたいかというと、もっとスマートに子フレームのグローバルにアクセスできる方法があれば誰か教えて下さい。orz

2006/08/16(水)

IEでウィンドウをフラットにする このエントリをはてなブックマークに追加 

Filed under: CSS,JavaScript,WEB制作 — KAY @ 05:34:15

winIEのhtml要素は、デフォルトでボーダーを持っています。
なので、

html {border:0;}

などとしてやると、閲覧領域の凹みが無くなり、フラットな表示になります。

……とここまでならなんて事の無い小技ですが、javascriptでイベントを扱ったりすると、これが思わぬ動作に繋がる事があります。
というのも、IEではdocument.documentElement.clientWidth(clientHeight)は内容領域(CSSのwidth、height)の値を返しますが、event.clientX(clientY)はボーダーまでを含めた座標を返します。ぶっちゃけ、html要素に何も指定しない場合だと2pxほどずれます。
clientWidthをoffsetWidthとかに変えても無駄です。スクロールバーは幅に含まれますが、相変わらずボーダーは含まれません。
しかもIEは、標準準拠モードと互換モードでdocumentElement周りの挙動が変わるらしく、加えて他のブラウザへの対応も考えると、もう何がなんだかわかりません。誰か助けて下さい。(←エントリの趣旨が変わってきている)

2006/06/03(土)

javascriptの俺様用メモ このエントリをはてなブックマークに追加 

Filed under: JavaScript,WEB制作 — KAY @ 02:58:18

IEで

obj.style.backgroundColor = “transparent”;

が効かね。

obj.style.backgroundColor = “”;

だと透明色になるみたい。

2006/05/05(金)

pukiwikiのスパム対策 このエントリをはてなブックマークに追加 

Filed under: PHP,WEB制作 — KAY @ 18:39:35

最近OekakiBBS Wikiの方でスパム投稿がひどくて困ってたんですが、このほどスパム対策を施してみました。
なんか、マルチバイト文字を含まない投稿を弾くというのが結構効くらしい、という事で、trackerプラグインを改造して実装してみる事に。
trackerプラグインから投稿があった時に、以下の処理を実行します。

(more…)

2006/04/30(日)

テンプレートクラス このエントリをはてなブックマークに追加 

Filed under: PHP,WEB制作 — KAY @ 17:06:39

簡素なPHPのテンプレートクラス。置換、ループ、ifが使えます。

(more…)