codeなにがし: kuroponが投稿したソースコード・ノウハウッ！の一覧

携帯各社のメールアドレス・ドメイン一覧

2008-10-28T15:55:45+09:00

国内の携帯会社各社のメールアドレスに使われているドメインの一覧です。 J-PHONEのドメインもありますが、利用出来るかは不明です。。 # Fromは強制的に hoge.vodafone.ne.jp になりますが、jp-hoge.ne.jpでも受信はできるはずだったような？

[wiki] 3キャリア共通で「見た目」に差のない絵文字一覧

2008-01-25T19:09:59+09:00

画像の周りに1pxの破線を引く。

2007-10-01T17:35:39+09:00

画像の周りに破線を引く方法は非常に簡単で □html □CSS img { border: 1px dotted #c0c0c0; } なんて書けば実現できますが、ブラウザによっては見栄えが結構変わってしまいます。そこでimgの背景に破線画像を置くことで、どのブラウザでも同じような見栄えで破線を表示する方法を考えてみました。 ■Sampleはこちら http://code.twin-tail.biz/sample04.html

CSSで文字に影をつける。

2007-10-01T17:34:45+09:00

CSSの擬似要素を使って何かできないかなーと思い書いてみました。擬似要素 ":after" をうまく(?)活用することで、画像を使わずに文字列に影をつける事ができます。 ■Sample http://code.twin-tail.biz/sample03.html

JavaScriptを利用してdiv要素をクロスフェード表示させる。

2007-09-19T09:46:11+09:00

http://www.brandspankingnew.net/archive/2006/09/javascript_css_crossfader.html がおもしろそうなので、試してみました。配布されているjsファイルを読み込んで、指定したdiv要素をクロスフェード表示させるといった簡単なものです。なんとなくプレゼンみたいなページを作るときに利用できそうですね。 ■sample http://www.brandspankingnew.net/specials/crossfader/bsn.Crossfader.html

ボックスを画面の上下左右の中央に配置する。

2007-09-04T13:48:02+09:00

画面の上下左右の中心にボックスを配置するCSS、HTMLです。 404Errorのページなどに利用すると見栄えもよくいいかもしれません。サンプル…というか、実際に動いてるもの。 http://twin-tail.biz/

角丸の背景を最低限のタグで実現する

2007-08-30T10:35:41+09:00

角丸の背景を最低限のタグで実現するCSSです。 CSSのwidthやmargin、画像へのパスは適時変更してください。 # Sampleは後ほど。

dl,dt,ddタグを利用して表組みもどきを作成する

2007-09-15T15:51:31+09:00

HTMLタグの dl dt dd を利用して表組み(table)もどきを作成します。 tableよりも最近はこの書き方が流行のような気がします。

CSSで擬似フレームを作成。

2007-08-23T19:05:39+09:00

CSSを使ってframeタグを利用したかのような画面を作成する方法です。現在主流となっているXHTMLではframeタグは非推奨要素となっており、代替手段も存在しません。固定表示を行いたい header にpositonを二回指定する部分がポイントです。これはクロスブラウザ対策のためで fixed !important;ではFirefox,Opera向けに要素の位置を固定。 absolute;ではIE向けに絶対位置を指定しています。実際の表示サンプルは↓からどうぞ。 http://twin-tail.biz/code/sample02.html

ステッカーの様な飾り付けを行うCSS

2007-08-23T15:31:29+09:00

最近、参考サイトのように左上に飾り付けをしたサイトを見かけるので実装方法を考えてみました。参考サイト：http://saladbowl.org/ 主にBlogで注目して欲しい記事を紹介したり、キャンペーンへのリンクなどに使う用途が多い様です。手順は 1) 飾りの画像を作成(背景を透過させたgif画像が望ましい) 2) htmlに表示させるためのタグを追加 3) CSSに左上固定させる指定を追加です。

[IE] imgなど置換要素を含む場合、line-heightで指定した値より実際の表示がおかしくなる

2007-09-14T15:44:43+09:00

WindowsのIEでは行間を指定していても画像(img)などの置き換え要素を含む場合、line-heightで値を指定しているにも関わらず、その値よりも小さくなってしまうそうです。サンプルを作成したので、IEとそれ以外のブラウザで見比べて頂けばわかりやすいかと思います。 http://twin-tail.biz/code/sample01.html 対策として、下記のCSSを指定することで回避できますので、同様の問題でお悩みの方がいましたらご活用ください。

親要素から画像がはみ出る場合の対処方法

2007-08-22T15:24:06+09:00

clearfix以外の方法だとこんな風に書くこともできます。 // 親要素"hoge"のdivの中に画像とテキストが入っていると仮定します。

親要素から画像がはみ出る場合の対処方法

2007-08-22T15:25:16+09:00

floatさせた画像やボックスを何らかでclearするか、親要素をfloatさせないと画像などがはみ出してしまう問題に対応したCSSです。 # 通称(?) Clearfix と呼ばれるものです。ちなみに当方、何故これで解決できるのか理解できていません…。

Firefoxでスクロールバーの有無によりセンタリング位置がズレる問題の解決方法

2007-08-29T17:17:45+09:00

Firefoxで中央配置のレイアウトのページを開いたとき、コンテンツの量によってはスクロールバーが出ますが、これが原因でセンタリング位置がずれる問題があります。「気にならない」という人もいれば、「気になってご飯を食べられない」ってくらい気にしちゃう人もいるので解決方法を書いてみます。 # 僕は後者です。気になってご飯食べ損ねました。もの凄く簡単なので、とりあえず追記してみては？

ブラウザスタイルの初期化を行う

2007-12-21T23:54:42+09:00

IEやFirefoxなどではCSSの解釈やデフォルトのフォントサイズに違いがあります。これが原因でクロスブラウザなレイアウトに障害を及ぼすことがありますが、以下のCSSを記述することで回避できます。

target="_blank"を使わずに別窓にリンクを開く

2007-12-22T16:33:29+09:00

タグのtarget属性が非推奨要素になったので、それの代用手段としてjavascriptを使う方法です。 …非推奨になったのはかなり前の話だったような？いつ頃でしたっけ。以下、手順。 1)ソースコード欄のJavaScript部分(*1以下)をコピペして「external.js」と名前をつけて保存 2)HTMLの

内にソースコード欄の(*2以下)をコピペ (jsファイルへのパスは適時変更してくださいね。) 3)タグの書き方サンプル。

phpでファイル名を取得する

2007-08-08T17:53:10+09:00

拡張子が不明な場合 basename() では拡張子を除いたファイル名を取得することが出来ません。これはそれに対応したソースコードです。

Intel P35 + ICH9 環境にWindowsXPがインストールできない問題

2008-02-16T13:21:26+09:00

Intel P35+ICH9を搭載したM/BにWindowsXPをインストールすると、インストール中にHDDが検出できない・青画面になる問題があります。これはM/BのS-ATAの設定が、XPでは標準でサポートしていない"AHCI"に設定されている事により引き起こされる問題です。以下、ソースコード欄にBIOSでの設定項目・値を記載します。

Intel P965 Chipset 搭載M/BにLinuxをインストールする。

2008-01-24T16:14:57+09:00

IntelのChipset P965/G965 のサウスブリッジ ICH8 はIDEコントローラーが内蔵されていません。代用としてJMicron製のIDEコントローラを利用していますが、Kernel 2.6.17以前ではこのチップに対応していないため、インストール中にドライブを認識できない問題があります。インストール時のカーネルオプションを以下にすることでこの問題を回避することができます。また、私が利用したディストリビューションは debian/GNU Linux 3.1r0 です。 # Kernel 2.6.18 以降ではこの問題に対応しています。

floatで配置した画像にborderとpaddingを設定した際にpadding-bottomがおかしくなる問題の解決方法

2007-08-02T18:31:01+09:00

画像をfloatで配置し、周りにborderを設定、画像とborderの間にpaddingを設定すると、下の余白だけ値がおかしくなります。 # 要するにこんなCSSを書いた場合 # img.photo { # float: left; # border: 1px solid #000; # padding: 2px; # } 以下をCSSを追加することで正しく表示することができます。