コリス※本ページは、アフィリエイト広告を利用しています。 🙏ソシム社大感謝祭🙏 Kindle特大セールが開催しています！！ このセールを待っていた人も多いと思います！ 今年発売された新刊をはじめ、ベストセラーのデザイン書も55％オフ。当ブログで紹介した書籍も多数あり、どれもお勧めです。 セール期間は7/31まで。 ソシム社のセールは貴重なので、気になっていた書籍は迷わず買いです！
あなたは何点？Webデザイナーのためのクイズサイト12
2014年9月29日 便利ツール Webサイト制作や色彩感覚、タイポグラフィの知識をクイズ感覚で勉強できるサイトをまとめてみました。どれも短時間で楽しみながらできるものばかりなので、気軽に挑戦できますよ！Webデザインや制作の勉強中のあなたも、ベテランさんのあなたも、ぜひ試してみてください :) ↑私が10年以上利用している会計ソフト！ 休憩時間にサクッと挑戦！ 選択問題やドラッグ＆ドロップでできるゲーム感覚な問題いろいろ！ 1. HTML/CSS HTML5実力テスト HTML/CSSコース 「実力テスト」という名のクイズサイト。HTML/CSSコースではHTML5とCSSの基本問題がクイズ形式で出題されます。制限時間は15分。「HTMLやCSSを見てどのように表示されるか？」「smallタグは何を意味するか？」などなど、問題を解きながら勉強になります！
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider
jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaScript 「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプト
Web-kreation
Web Kreation Ltd. is now Morphosis Ltd.. You can still view this site but comments are closed and contact form disabled. If you want to see our latest work or contact us, please visit our new site www.morphos.is. Web-kreation Online Portfolio of Jeremie Tisseau UI/UX Designer, Event Organizer, Web Entrepreneur
プルダウンメニューに動きを与えるJavaScript - Good Sleep｜Webデザイナーの日々のスキマ
Flashのような滑らかなアニメーション｜MenuMatic このブログでも何回かプルダウンメニューのサンプルを紹介しましたが、web creators 2009年1月号の「Web Design Style-UP Tips」に載っていた「MenuMatic」というライブラリが面白かったので、紹介してみます。 ちなみにサンプルは下記のページ。 →horizontal（水平）のサンプル →vertical（垂直）のサンプル メニューの仕組みは単純です。Spryを使ったプルダウンメニューと同じようにul要素を入れ子にするコトで多重階層が実現できます。 …で、このライブラリが面白のは、Flashのような滑らかなアニメーションが加わるトコロ！JavaScriptだけでこれだけの動きが付くのなら、Flashで作る必要はなくなりますね。 サンプルはこちら。 ↑このデータはこちらからダウンロードできます。
小粋空間: RSS Feed（フィード）を表示する
RSS Feed（フィード）をブログのサイドバー等に表示するテクニックです。方法は色々あるみたいですが、ここでは「Feed2JS」を利用した方法を紹介します。 Feed2JS はフリーのツールです。RSS フィードを HTML として表示させる仕組みは、まずこの Feed2JS に対し、ブログに表示したい RSS フィードのURLを入力して、それに対応する JavaScript を生成します。そしてこの JavaScript をブログに貼り付けまておきます。あとはページを表示することで、JavaScript から Feed2JS のPHPを起動し、さらにPHPのプログラムから RSS フィードを取得し、HTML に変換して表示する、という訳です。 異なるドメインのRSSも利用することができ、表示方法もきめ細かい設定が可能で、単純なテキストとして取得することも可能です。 Feed2JS はサ
switchHat.js のサンプル - CSS HappyLife
使いたいHTMLファイルのhead要素内でjavascriptを読み込みます。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript" src="./js/jquery.switchHat.js"></script> 特に設定を変えない場合、開閉用のボタンにクラスswitchHatを付け、初期状態は非表示にしたい要素にクラスswitchDetailを付けます。example02 が初期状態のままのサンプルです。 <p><span class="switchHat">表示する</span></p> <
背景画像をランダムに変える（方法編）
直リンクをお断りした代わりに、記事として公開しよう と思ったわけではありませんが やり方を知りたがっている人が多いようなので書いておきます いえね、「背景画像をランダムに変える」というキーワード検索で 3年前に書いた記事がよくヒットするんですよ ところがあの記事には「JavaScriptを使えば造作もないことです」としか書いてない しかも、もともとエキサイトブログに書いた記事を転載しているから話がトンチンカン エキサイトブログではJavaScriptを使えない せっかく訪ねて来てくださった人に気の毒なので、いまさらですが公開します ranimg = new Array(); ranimg[0]="001.jpg"; ranimg[1]="002.jpg"; ranimg[2]="003.jpg"; ranimg[3]="004.jpg"; ranimg[4]="005.jpg"; rani
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
ランダムに背景色(画像)を変更する - JavaScript
サンプルと機能 → Sample 1：ランダムに背景色を変更する → Sample 2：ランダムに背景画像を変更する ページを読み込んだ時にランダムで背景画像に変更します。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 → Sample 1：ランダムに背景色を変更する <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-- // ランダムに背景色を変更する bgc = new Array(); bgc[0] = "#999999"; bgc[1] = "#ff9999"; bgc[2] = "#ff0000";
twitter の JavaScript Badge を改造
しつこく twitter ネタでまいります。 前回の記事で JavaScript の Badge がちゃんと動くようになりました。これで CSS を使えば自由にレイアウトできるようにはなったんだけど、もうちょっと詳しくコードを分析する事でより柔軟なカスタマイズができるようになりたいところ。 ってか、自分で使うにはもう一つなので本気で自分が作るようのカスタマイズをしてみます。 １）まずは、標準の JavaScript Badge ＋日付バグの修正の内容をおさらい Badge は twitter にログインしたあと、上メニューの Badge にあります。 http://twitter.com/account/badge それを改造したのが前回の記事です。 <script type="text/javascript"> function relative_time(time_value) { t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Coding assessment test - jsdo.it - Share JavaScript, HTML5 and CSS
http://www.near-mint.com/blog/353
IDEA * IDEA
mixi(ミクシィ)
スムーズかつクールにアニメーションする「MenuMatic」:phpspot開発日誌
solidstate.jp
EC-CUBE工房