mippe | Shared With: Everyone - Sep 02 2008 | CSS, javascript
コンテンツの内部リンクを利用すると、ページが長い場合など見出しを設けたりして、ユーザーが簡単に目的の文章にたどり着くことが出来る。しかし、アンカータグをクリックした場合、瞬間的に移動が行われるためページ遷移した場合との差別化が難しい。そこで利用される手法がスムーススクロール。
df Smooth Scrollの優れた点は、すでにコンテンツで利用されているアンカータグでもスムーススクロールを実装できる点。HTMLヘッダ部分で下記のようにJavaScriptライブラリを呼び出しておくだけで、既存のアンカータグがスムーススクロール用のリンクとして動作するようになる。
<script type="text/javascript" src="smooth.pack.js"></script>
アンカータグの記述
アンカータグをHTMLで記述する際<a name= として記述する。しかし、XHTML、XHTML Basicではname属性が利用できない。id属性ではdf Smooth Scrollが動作しないので、注意する必要がある。<a name="middle" href="#top">GO TO TOP</a>
アンカータグに対してスムーススクロールを実装することが出来るため、非常に便利。しかし、前述したname属性での利用に限定される点や、他のページから遷移してくる場合はスムーススクロールされない。簡単に導入できるので、試しに導入してみてはいかがだろうか？最新記事をRSSでお知らせします
ITニュース
df Smooth Scroll - アンカータグを利用してスムーススクロールを実装する
Yahoo!のレンタルサーバーが月額980円で使える！関連する記事
マウス操作で写真にズームするギャラリーswf（PostcardViewer）
CSSとCanvasで描写するWeb用のUIフレームワーク（Mocha UI）
透明感のあるデザインをJavaScriptで実装する（glassbox.js）
MP4、FLVなど再生するFlashプレーヤーswf （JW FLV MEDIA PLAYER）
FlashやFLV、MediaPlayerに対応したスライドショーJavaScript（shadowbox）
デザインが魅力的なスライドショーJavaScript (Lightview)
楽にフォーム入力チェックを実装するJavaScript （JSValidate）
CSSデザインレイアウトをオンラインで簡単に作成する （YAML）
ユーザーが再配置可能なWedgetを実装するJavaScript （Prototype Portal Class）
フォームボタンCSSデザインするテクニック （Rediscovering Button Element）
半透明の角まるツールチップを表示するJavaScript （CoolTips）
JavaScriptでプログレスバーを簡単に実装する （jsProgressBarHandler）
JavaScriptコード圧縮して盗用から守る （packer）
iTuneのようにカバーアートを表示するFlash （iTunes Coverflow）
画像をサムネイルのサイズで表示するJavaScript （jQuery Thumbs）
Ajaxでサクサク動くWebファイルマネージャ （Relay）
アンカータグを利用してスムーススクロールを実装する （df Smooth Scroll）
MacでもFlashでホイール操作が出来るようにする （SWFMacMouseWheel）
HTMLなどタグ編集を楽にするエディタ機能JavaScript （jTagEditor）
使いやすいYUIライブラリのWYSIWYGエディタ （Rich Text Editor）ShareViewed: 27 Times- mippe | Shared With: Everyone - Jun 28 2008 | javascript, css, flash
Quoted: 売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ
ShareViewed: 27 Times - mippe | Shared With: Everyone - Jun 28 2008 | javascript, css, design
動作環境は以下のとおり
・Internet Explorer 6 & 7
・Firefox 2.0
・Safari 2.0
・Opera 9.0導入は比較的簡単です。
ダウンロードしたファイルのうち、index.htmlを開いてみるとわかると思います。<link rel="stylesheet" href="bubbles.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/JavaScript" src="rounded_corners.inc.js"></script>
<script type="text/JavaScript">
window.onload = function() {
settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: true
}
var myBoxObject = new curvyCorners(settings, "rounded");
myBoxObject.applyCornersToAll();
}
</script>呼び出しはこれ。
これを<head>～</head>の中にいれる。後は表示したい部分で呼び出せばOK。
灰色背景の場合
<div class="bubble">
<blockquote>
<p>Works great for blog comments!</p>
</blockquote>
<cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite>
</div>バック灰色、淵が白の場合
<div class="bubble">
<div class="rounded">
<blockquote>
<p>Customize colors and styling to your taste from within the CSS, then simply edit the pointer tip image. Works on any background to fit with your design.</p>
</blockquote>
</div>
<cite class="rounded"><strong>Rounded Bubble</strong> using <a href="http://www.curvycorners.net/">curvy corners</a></cite>
</div>バック黒、淵白の場合
<div id="pimped" class="bubble">
<div class="rounded">
<blockquote>
<p>Expands to fit any layout and scales nicely with big and small font sizes.</p>
</blockquote>
</div>
<cite class="rounded"><strong>Dark Bubble</strong></cite>
</div>お試しあれ。
http://www.willmayo.com/2007/02/10/css-speech-bubbles/ShareViewed: 42 Times - mippe | Shared With: Everyone - Jun 28 2008 | CSS, Javascript, IE6, behavior
InternetExplorer 6.xでmin-width、max-heightをCSSプロパティで指定しても適用されません。過去に紹介したCSSとJavaScriptを利用して対応する方法を、今回はさらに使いやすい方法に変更してみます。
スタイルシートのセレクタでBehaviorプロパティ指定するだけで有効になります。min-width等のプロパティを変更する必要はありません。Behavior（ビヘイビア）とは、JavaScript等によって構成されるHTC（HTML Component）を使用するIE独自の機能です。
CSSへBehaviorプロパティの追加
ieFixed HTCの最新版をダウンロードします。下記のコードのようにCSSへBehaviorプロパティの追加してください。また、ご利用の環境に合わせてURLパスは変更してください。<style type="text/css">
#sample{
behavior:url(iefixed.htc);
margin:0 auto;
min-width:400px;
max-width:760px;
}
</style>
min-heigh、max-heightも同様に利用することが出来ます。サイズ指定には必ずpx単位で指定してください。HTCファイル内のJavaScriptではstyle.setExpressionを利用して、widthプロパティにexpressionを設定しています。IE7が主流になった場合に簡単に削除できる方法なので、是非試してみてください。
ShareViewed: 28 Times - mippe | Shared With: Everyone - Jun 09 2008 | Movable Type, CSS, Javascript, Lightbox JS
サムネールをクリックすると同一ウィンドウ上に画像を表示するという Lightbox JS です。ご質問を頂いて知ったのですが結構広まっているようです。
ということでこのエントリーにてご紹介したいと思います。ShareViewed: 17 Times - mippe | Shared With: Everyone - Jun 09 2008 | Movable Type, CSS, Javascript
とりあえず loading.gif のパスにドメインを追加することでOKになりました。具体的には、当サイトの場合であれば、lightbox.js の36行目辺り
var loadingImage = 'loading.gif';
var closeButton = 'close.gif';
をvar loadingImage = 'http://www.koikikukan.com/loading.gif';
var closeButton = 'http://www.koikikukan.com/close.gif';
に変更します。なお試験サイトではドキュメントルートからのパス設定でも大丈夫でした。またIEでは overlay.png のパスもきちんと設定しないと正常に読み込めないため、lightbox.css の14行目と20行目にある overlay.png にドメインを追加します。当サイトの例は下記の通りです。
#overlay{ background-image: url(http://www.koikikukan.com/overlay.png); }
* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.koikikukan.com/overlay.png", sizingMethod="scale");
}
lightbox.css の内容を styles-site.css に転記している場合（かつ普通に再構築対象にしている場合）や、ligjtbox.css をインデックステンプレートとして登録している場合は、<$MTBlogURL$>overlay.png とすればOKです。こちらも試験サイトではドキュメントルートからの設定で正常に読み込めました。２．エントリー・アーカイブの修正
エントリー・アーカイブは１項の他に、onloadイベントハンドラとの競合で正常に動作しないという報告を下記のサイトで頂いています。ありがとうございました。CEFA::Blog：Lightbox JSを組み込んだのだけれど
caramel*vanilla：lightbox.jsでサムネイルをCOOLに拡大表示してみる
対処は、安直ですがエントリーアーカイブの onload イベントハンドラ（赤色部分）<body class="…" onload="individualArchivesOnLoad(commenter_name);>
を一旦削除して、<body class="…">
とし、エントリー・アーカイブの一番最後に<script type="text/javascript">
<!--
individualArchivesOnLoad(commenter_name);
//-->
</script>
を追加しています。この individualArchivesOnLoad は、サイン・イン中であれば名前とメール欄を非表示にし、各フォームにCookie情報を埋め込む動作を行っているだけですので、この対処で問題ない筈です。ちなみに onload イベントハンドラに2行書いたりしてみましたがNGでした。
３．ローディング画像・背景画像が表示されない場合
１項で修正した loading.gif のURL、および overlay.png のURLをブラウザのアドレス欄に直接入力してください。画像が表示されない場合、設定したURLが誤っていますので、１項で設定したURLを修正してください。2006.03.21 追記
１項の close.gif の設定、および３項を追記しました。ShareViewed: 4 Times - mippe | Shared With: Everyone - May 20 2008 | css, Javascript, jQuery, web design
Quoted: Noupe is a design weblog created to inspire creativity by sharing innovative resources and websites to bloggers, freelancers and web designers.
ShareViewed: 70 Times - mippe | Shared With: Everyone - May 20 2008 | css, web design, Javascript
Quoted: 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS.
ShareViewed: 1 Time - mippe | Shared With: Everyone - Apr 24 2008 | photoshop, Javascript, css, jQuery
売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ
ShareViewed: 51 Times - mippe | Shared With: Everyone - Mar 10 2008 | css, Javascript, jQuery
![[JS]角丸を簡単な記述で実装するスクリプト -Roundcorners Canvas | コリス](http://i.faves.com/01/f5/14ec/92ee7783/05661662f05ed0a25d_5.jpg)
Roundcorners Canvasは、タブ・ボタン・テーブルなどの矩形に、簡単な記述で角丸を実装できるスクリプトです。
Roundcorners Canvas
デモページ上記のキャプチャ画像のように、divの矩形(赤の箇所)と、リストのタブ(Lookの箇所)を角丸にするには、下記のコードを使用します。
view plaincopy to clipboardprint?$(document).ready(function() { $(”#mainblock”).corner(”30px”); $(”#menu ul li”).corner(”8px top”); }); $(document).ready(function() {
$(”#mainblock”).corner(”30px”);
$(”#menu ul li”).corner(”8px top”);
});
Roundcorners Canvasは、ほかにも多様な角丸を実装することができます。
デモページ 21pxの角丸のサンプル
border colorのサンプル
背景色のサンプル
背景画像のサンプル
ネストされたdivのサンプル
lineのサンプル
四辺で異なる角丸のサンプル
tableのサンプル
インライン要素のサンプル
エフェクトのサンプル
Roundcorners CanvasはjQueryのプラグインのため、実装にはjquery.jsが必要です。
ShareViewed: 34 Times
;){kind=link}
Send mippe a friend request or a personal message instead.