小技: 2009年6月アーカイブ

ホームページ制作ではよく使う「角丸」。
通常は角丸の画像を用意したりで、なかなか手間のかかる作業ですが、
今回はjavascriptで角丸を作る方法、「DD_roundies」をご紹介です。


使用方法は簡単。

まずwebからライブラリをダウンロード。
ヘッダで読み込ませます。

そして普通にHTMLとCSSで四角形を用意します。

<div id="box">
<p class="test" align="center">メールフォーム</p>
</div>

<style type="text/css">
<!--
#box {
    position:absolute;
    left:17px;
    top:21px;
    width:198px;
    height:53px;
    z-index:1;
}
.test {
    border:2px solid #7CBF4D;
    background:#AFF32A;
    }
-->
</style>


続いてライブラリの組み込み。

<script type="text/javascript">
         DD_roundies.addRule('.test', '10px', true);
</script>

のように指定すると出来上がりです。



このライブラリはCSS3でサポートされる予定の「border-radius」プロパティを使用しているようで、
6以降のIE、Firefox3、Cromeなどで使用可能です。

画像で作る角丸に飽き飽きしてきた方はぜひお試しを。

インラインフレーム<iframe>タグで新着情報などを表示するとき、
<iframe src="news.html" width="440" height="100">代替えテキスト</iframe>

などのように記述しますが、
このままだと枠線が出てしまいます。
情報量が多い場合はスクロールバーも出ます。

制作するページによってはデザインを崩すので、
そういったものを出したくない時がありますよね。

そんなときは、"frameborder" "scrolling"属性を使います。

<iframe src="news.html" height="100" width="440" frameborder="0">代替えテキスト</iframe>
これで枠線が消えます

<iframe src="news.html" height="100" width="440" frameborder="0" scrolling="no">代替えテキスト</iframe>
こうするとスクロールバーも消えます。

状況に応じて使い分けてみてください。

ホームページ制作のお手伝いにはちょっとなりにくいですが、
先日、息抜きになりそうなjavascriptを見つけました。

「HTML崩壊」です。

制作に行き詰っている方、気分転換したい方、etc、
お好きなHPで良いので、以下のソースをアドレスバーへ貼り付けてみてください。

javascript:(function(d,s){s=d.createElement('script');
s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp
/~kazumix/d/javascript/meltdown2.js?'+(new Date)
.getTime();s.charset='UTF-8';d.body.appendChild(s);})(document)



どうでしたか？

これはページを構成している要素が崩れ落ちていき、
また再生するというスクリプトです。

ちなみに「崩壊しっぱなし」もあるようです。
以下がそれです。

javascript:(function(){var s=document.createElement("script");
s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp
/~kazumix/d/javascript/meltdown/meltdown.js?
"+da.getTime(); document.body.appendChild(s)})();

こうしてみるとjavascript、
いろいろ可能性大だと改めて思います。