簡単にチュートリアルが設置できる JQuery Tutorial Plugin | JavaScript Journal
簡単にチュートリアルが設置できる JQuery Tutorial Plugin 説明 これはチュートリアルを実現するJQuery Pluginです。デモはこちらです。 使い方 まずはjquery.tutorial.jsをロードしてtutotialを呼び出します。 <link rel="stylesheet" href="./jquery.tutorial.css" > <script src="./jquery.tutorial.js" ></script> <script> $(function(){ $("#tutorial").tutorial({ speed: 300, color: "#000000", opacity: 0.6, message: "#message", message_text: [ "ステップ１<br />最初の要素です。", "ステップ２<br />2番目
ヘッダーやナビゲーション等、Webデザインをパーツ別に収集しているギャラリーサイトまとめ - かちびと.net
いくつか知っておいた方が、必要な時に 探しやすいと思ってメモします。Webサイト のデザインをヘッダーやフッターなど、 パーツ別に収集しているギャラリーサイトが いくつかあるのでまとめます。 そんな大量に有るわけではないですけど。パーツのデザインはいつも迷うのでこの手のギャラリーはいくつあっても結構重宝しますよね。 ブブンデザインアーカイブ 国内でおそらく唯一のパーツ別デザインギャラリーです。ナビゲーションやフッターなどで探せて、収集しているサイトも国内メインなので参考になるのでは。 ブブンデザインアーカイブ MephoBox ヘッダーやフッター、ナビゲーションやフォームデザインだけでなく、404やカレンダーなど全てのコンテンツをカテゴリにしてパーツデザインを収集しています。おすすめ。 MephoBox Pattern Tap こちらもナビゲーションやボタン、フォームデザインなどに分けてデ
背景画像を画面いっぱいにする方法CSS | Tech Blog Hibachiya
背景画像を画面いっぱいにする方法CSS CSSだけで背景の画像を画面いっぱいにする方法です。 ブラウザーの伸縮に合わせて画像を、縦横比は保ったまま伸縮させる方法です。 参考になるページがあったのですが、どこへ行ってしまった。 なのでコードだけ。 HTML部分 <img src=”images/bg.jpg” /> CSS部分 img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-
秀丸マクロでZen-Coding
概要 Zen-Coding とは、CSSセレクタ風の簡単な記述を、複雑なHTMLソースへ素早く変換することを軸にしたコーディング支援ツールです。 例えば、div h1 aが<div><h1><a href=""></a></h1></div>になります。 その Zen-Coding を秀丸エディタでも利用できるようにすることをめざした秀丸マクロです。 本家にある機能のうち、「HTML生成」「生成したHTMLで既存のソースをラッピング」のみを実装しています。 そのほかの機能は別項で紹介するいくつかの秀丸マクロに任せ、連携していただく方針です。 インストール 秀丸エディタ（ver 7.00 以降のみで確認）を入れてください。 マクロフォルダのパスを確認します。秀丸エディタの [その他] - [動作環境] - [パス] - [環境] - [マクロファイル用のフォルダ] で指定されているフォルダで
CSSアニメーションでアイコンを動かす
CSSアニメーションを使ってアイコンを動かしてみたいと思います。 以下、気をつけた点。 CSSアニメーションに非対応のブラウザでもアイコンとして成立している 過剰なマークアップをしない 現実的に使えそうな路線で頑張ってみました。 .iconNew{ width: 3em; text-align: center; background: #54bb00; color: #fff; font-weight: bold; text-shadow: 0 1px 0 #3f3f3f; margin: 0 25px 25px 0; letter-spacing: 2px; padding-left: 4px; } .iconNew.arrange01 span{ display: block; -webkit-animation-duration: 1.5s; -webkit-animation-ti
JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル:phpspot開発日誌
Harry Maugans How to Create a Collapsible DIV with Javascript and CSS One of the most handy (and cool) tricks a web developer could learn to use is collapsible DIVs. JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル。 次のように数行で行える簡単なサンプルが紹介されていてライブラリに依存しない＆軽い、簡単な実装を行いたい時に使えます。 <div id="mydiv" style="display:none"><h3>This is a test!<br>Can you see me?</h3></div> <a href="javascript:;" onmousedown="if(document
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Components · Twitter Bootstrap