ドットインストール代表のライフハックブログ
ドットインストール代表のライフハックブログ
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 タブ・メニュー作ってみました。使いまわしを考慮してパッケージ化に挑戦。JavaScriptを切っているときは、ページ内リンクとなります。 HTML <ul id="tab"> <li class="present"><a href="#page1">Page_1</a></li> <li><a href="#page2">Page_2</a></li> <li><a href="#page3">Page_3</a></li> <li><a href="#page4">Page_4</a></li> <li><a href="#page5">Page_5</a></li
以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl
1. JavaScriptで日付(年)を自動更新する方法 まず、HTMLのhead要素内(<head>~</head>)に、次の6行を記述しておきます。 ※head要素に書けない場合は、body要素内でも構いません。 <script type="text/javascript"> function ShowNowYear() { var now = new Date(); var year = now.getFullYear(); document.write(year); } </script> 上記のコードで、現在の年を表示する関数「ShowNowYear」を作っています。 3行目で現在の日付を取得し、4行目で年だけを取り出しています。そして、5行目で表示させています。 ここでは、ただ「年を表示する関数」を作っただけなので、まだ何も表示されません。HTML中で、実際に年を表示させたい箇
CSS と JavaScript でタブ切り替えを実現しています。 なるべく CSS や JS の記述量を最小にするように努力しました。 もっとシンプルにできそうなアイディアがございましたらご教示下さい。 「無償・無保証・著作権放棄」 ですので、 このページのソースを適当にいじって自由に使って下さい。 全てのタブの中味は 1 つの HTML ファイル (このファイル) に書いてあります。 見出しのクリックにより、表示の ON/OFF を切り替えるだけ、という仕組みです。 タブの見出しをクリックするたびにサーバーを読みに行くのが 欝陶しく思えるときに、うってつけかと。 そう言えば、某サイトでは、クリックどころか、 タブの見出しにマウスカーソルを合わせるだけで、 フォーカスされていることを表す見出しの画像 (背景色が異なるだけ) を いちいち Web サーバーへ取りに
<form><input type="button" value="表示切替" onClick="checkExpand('text');"></form> <span id="text">あいうえお</span> <script language="JavaScript" type="text/JavaScript"> <!-- /**************************************************************** * 機 能: オブジェクトの表示非表示を制御する 1 * (表示している場合は非表示、非表示の場合は表示) * 引 数: ch 表示/非表示を切り替えるオブジェクト名 * 戻り値: なし ****************************************************************/ functio
アップロードフォームに画像のプレビューを出すことが可能です。 IE6では、動作確認が取れたけど、firefoxではできなかった。 <script type="text/javascript"> function preview_image(obj_image, image_id) { document.getElementById(image_id).src= obj_image.value; document.getElementById(image_id).style.display="inline"; } </script> <style type="text/css"> #preview_img_1{ display: none; width: 150px;/*サムネイルサイズ*/ } #preview_img_2{ display: none; width: 150px;/*サム
前記事で紹介した”FancyZoom”を、運営中の他のブログにも設置してみたところ、サムネイル画像をクリックしても別画面で元画像を表示するだけで、うまくズームアップ表示してくれません。 何か他のJavaScriptとバッティングしていないかと調べてみると、以前から設置していた日産キューブのブログシール(以下ブログシール)との相性が悪いようです。ブログシールを外すとFancyZoomはちゃんと動作します。でもお気に入りのブログシールを外すのは忍び難い。何とかならないものか・・・ ※対策後は両方ちゃんと動きます。(確認のためこちらにもブログシールを設置) ブログシールで読み込まれる外部スクリプトを開いてみると、バッティングの原因が見つかりました。 163行目からの記述に、window.onload = function(){ document.body.appendChild(cubeLaye
JavaScript で別ウィンドウを開くサンプルです。 ウインドウを開く悪い例 ———————————————————————- JavaScript でポップアップウインドウを開く時、下のように書いてしまうと、JavaScript がオフの場合、ウインドウが開けません。 開く ウインドウを開く良い例 ———————————————————————- こんな感じで書きます。 開く 利点 ———————————————————————- – JavaScript がオフでも何とかウインドウが開ける。 – 右クリックを使う事で、新規ウインドウや新規タブで開く事ができる。 – 右クリックを使う事で、リンク先のページをブックマークできる。 – ステータスバーでリンク先がわかる – 検索エンジンがクロールしてくれる ユーザがどうやって開くか選択できるのが良いですね。 ## window.open
HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
dtをfloatする場合の注意点 2008-05-12 0 0 XHTML/CSS CSS, dl, float dl の定義リストで,dt を float させることがよくあります。このとき注意したい点をまとめておきます。 新着情報のようなところで,更新日を dt で,更新内容を dd でマークアップした場合を想定してみましょう。 まず,XHTMLでのマークアップは次のような感じです。 <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキスト...。</dd> <dt>2008-05-06</
header このページはScuderiaWebのフッタ固定のサンプルです。(このメッセージはサンプルとして影響のない場所に表示しています。) footer
Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe logement tous les cas à par
HTML5 でマークアップされたルビを、CSS 第二水準第一改訂版(CSS 2.1)の範囲だけで実現する方法を考えてみましょう。 この記事では、最も単純なルビの振り方のみを解説しております。 HTML5 で上下に二つのルビを振ったり、一文字毎にルビを振るなどの複雑なルビを実現する方法はHTML5 でのルビのスタイルをご覧下さい。 まずはじめに。 HTML5 では、ルビを実現するため、以下のルビ関連要素を定義しております。 <ruby>要素…ルビ付きテキスト <rt>要素…ルビテキスト <rp>要素…ルビ非対応環境向けのルビを囲む括弧類 W3C が勧告している規格では、他にも幾つかの要素が定義されておりますが、最も単純なルビ付きテキストであれば、上記の三要素だけでマークアップが出来ます。 HTML5 以外でも、XHTML 1.1 にはルビモジュールが定義されており、最も単純なルビテキストであ
このブログのアクセス解析を見ると、キーワード「firefox 印刷」で検索してこのエントリに飛んでくる人がかなりいます。やっぱりみんな困っているんだなぁと。Firefoxの印刷はかなりやっかいで、完全FIXは無理かもしれないという結論に自分の中でも解決していたのですが、最近この方法をやっていて、普通に印刷できてます。 display:tableで印刷対応 まずは、普通にfloat:left left leftで左に詰めたレイアウト。 floatによる3カラムレイアウトのサンプル(印刷対応無) <div id="all"> <div id="header">header</div> <div id="body"> <div id="localNav">localNav</div> <div id="main">main</div> <div id="relatedNav">relatedNa
「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン
第 10 回 CSSで文字サイズを変更するボタンを設置する 第 10 回目は「CSSで文字サイズを変更するボタンを設置する」です。 今回の文字サイズの変更は「styleswitcher.js」を使います。 この「styleswitcher.js」は複数のスタイルシートファイルを切り替えて読み込むことができ、クッキーに保存できる優れもののライブラリです。 実装手順は以下の通りです。 1. styleswitcher.js をダウンロード 「styleswitcher.js」をサイトからダウンロードしてきます。 「A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets」のエントリーの中にある Download styleswitcher.js から Download できます。ファイル名 「s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く