tableの膨張を防ぐ【css tips】
tableの膨張を防ぐ【css tips】 table要素の中に、半角スペースなどの区切り文字が存在しない英数字を入れると、td要素やth要素に設定しているwidthプロパティの長さ以上に、tableが膨張されてしまいます。 サンプル 特に、Firefoxは記号を区切り文字として認識しない為、長いURLなどを入力するとすぐに発生します。 サンプル これについていくつか解決方法があります。 table要素ではなく、div要素で書く まず、最初にためすべき方法です。 table要素に固執する必要がなければ、このようなことで頭を悩ませる必要はありません。 改行したい所にbr要素やスペース 抜本的な解決方法になります。 しかし、当然表示をコントロールする為に構造をいじることは、web標準の考えからは反します。 word-break:break-all; IEの場合はword-break:break
「Web Intents」でTwitterの機能をサイトに埋め込む
「Web Intents」でTwitterの機能をサイトに埋め込む 先日、AmazonがTwitterやFacebookによるシェア機能に対応したので、どうやって実装しているかを見ているとTwitterは「Web Intents」という機能を利用して実装していました。 ノーチェックだったのですがWeb Intentsは4月1日に公開された機能らしくすごく便利です。今までサイトにTwitterの機能を埋め込む際にはOAuth認証を利用しなくてはいけなかったのですが「Web Intents」を利用すれば簡単に埋め込めるようになっています。 Tweet機能の実装 つぎのようなシェアボタンを簡単に埋め込めます。 このページをシェア ソースコードは次のような感じになります。 <script type="text/javascript" src="http://twitter.com/intent/t
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
IE8における拡大縮小バグ
IE8における拡大縮小バグ 先日リリースされたIE8だが、多くのバグを含んでおり、まだまだWEB製作者を悩ませそうです。 (追記)Firefox3でも発生しますね。検証不足でした。 例えば、私が見つけたのは拡大縮小に関するバグ。(文字ではなくズームによる) ul{ margin:10px; width:600px; border:1px blue solid; } ul li{ list-style-type:none; margin:2px; border:1px red solid; width:194px; height:194px; float:left; display:inline; } サンプル などのようにリスト要素を利用して表状の形態を表現した際、通常は以下のように表示される。 IE8 100%で表示。 これを95%に変更すると以下のようになる。 IE8 95%で表示。
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
