HTMLのtdタグにてmin-heightを設定しつつvertical-align: middle;を適用させる方法

やり方

1. td内に見えないimgタグを配置する
2. imgのcssにvertical-align: middle;を適用する
3. コンテンツをdivタグまたはspanタグで囲ってdisplay: inline-block;とvertical-align: middle;を適用する

サンプルコード

<table style="width: 200px; background-color: azure;">
  <tbody>
    <tr>
      <td>
        <img style="min-height: 100px; vertical-align: middle; width: 0; border: none; padding: 0;" />
        <span style="display: inline-block; vertical-align: middle; background-color: aquamarine;">あかまきがみ、あおまきがみ、きまきがみ</span>
      </td>
    </tr>
  </tbody>
</table>

適用結果

あかまきがみ、あおまきがみ、きまきがみ

ツイート

Facebookの近況等でウェブサイトのURLが入力された際に画像や概要を表示させる方法

FacebookでウェブサイトのURLを入力した際にサイトの概要や画像が表示されるようにする方法を紹介します。
方法といってもheaderに必要なメタタグを記述するだけでokです。


こんな感じでメタタグをいれるだででFacebookでURLを入力するとメタタグの情報が表示されるはずです。

※気をつけること

1. 画像までのurlが長いと表示されない
2. 画像が200x200pxじゃないと表示されない

Facebookに対応されたかどうかはFacebookのデベロッパーズサイトで検証することができます。
http://developers.facebook.com/tools/debug

ツイート

fuelPHP環境でファビコンを表示する方法

fuelPHP環境でファビコンを表示する方法を紹介します。

ツイート

HTMLでtree構造を表現するサンプル

HTMLでツリー構造を表現するためのサンプルです。
.htmlファイルにコピペしてください。

a

	1

aa

	2

aaa

	3

aaaa

	4

aaa

	5

aa

	6

aa

ツイート

UIWebViewにJSONデータを渡す with jQuery

jQueryを使用すればUIWebViewにJSON形式のデータを読み込ませることが簡単にできます。
手順はこちら

1. NSString型のJSONデータを用意する。
2. UIWebViewのjavascript実行メッソッドを呼ぶ。
3. jQueryのパースメソッドを使用して文字列型のJSONデータをオブジェクトに変換する。

◎各ステップのサンプル

◎ポイント

1. 「NSString stringWithFormat:@"loadJSON('%@');",」の%@はシングルクォーテーションで囲む。

ツイート

WebGLリンク集

WebGLを勉強する為のリンク集

1. HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門
2. javascriptライブラリ「THREE」
3. WebGLのチュートリアル

ツイート

HTMLにおいてチェックボックスやラジオボタンを読み取り専用にするには

HTMLにおいてチェックボックス(checkbox)やラジオボタン(radio)を読み取り専用(readonly)にする方法を紹介します。disable属性は使用しません。
手順

◎checkboxの場合

1. onclickイベントにてfalseを返却する。
2. name属性を一意な物に変更する。

◎radioの場合

1. 未選択項目のonclickイベントにて$(this).remvoeAttr('checked');を実行する。(要jquery)
2. name属性を一意な物に変更する。

ツイート

SyntaxHighlighterを使ってるけれどhtmlがうまく表示されない

SyntaxHighlighterを使いはじめた頃から困っていたのですがpreタグ内部で<や&が使えないようですね。
解決方法はpreではなくscriptタグを使えばよいみたいです。

ツイート