Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements〔ラジオボタン、チェックボックス、セレクトメニューの見た目をカスタマイズ〕 Custom Select boxes with jquery〔アイコン入りのプルダウンメニュー〕 File Style〔参照ボタンを指定したボタン画像にする〕 jCombox: jQuery HTML Select Tag Plugin〔Select要素の拡張プラグイン〕 jQuery Custom Check Box and Radio Buttons 〔チェックボックとラジオボタンを画像化〕 jQuery Dropdown Check List〔複数選択型プルダウンメニューをチェックボックス付きのドロップダウンメニューに〕 JQuery Geogoer VChecks Plugi
スポンサードリンク jQuery フォームのセレクトボックスで 複数選択するときに、 標準のままだと Ctrlキーを押しながら選択しなければいけないのと 選択したものがわかりにくいと感じたため 2つの窓を使って選択できるものが欲しかったのです。 今回、ちょうどいいプラグインがあったので使ってみました。 スポンサードリンク 1.本家サイトに行ってプラグインをダウンロード jQuery multiselect jQuery multiselect 上記のURLのサイトへ行って ヘッダーにあるダウンロードからプラグインをダウンロードします。 2.ダウンロードしたファイルをアップロード ダウンロードしたフォルダの中で使うのは css/multi-select.css img/switch.png js/jquery.multi-select.js の3つのファイルです。 各ファイルを使うサイトの
HTML標準のリストボックスで複数選択可能とする場合にはmultiple属性を指定して実装しますが、HTML標準のままでは複数選択する場合にctrlキーを押下したまま選択する必要があるので慣れていない方には操作しにくい面があります。こういう場合はjQueryプラグインの「jQuery UI MultiSelect Widget」を使用すると操作性が劇的に向上します。 「jQuery UI MultiSelect Widget」の特徴 複数選択式のリストボックス（ドロップダウン）をチェックボックス＋リストボックス（ドロップダウン）形式に変換して操作性を劇的に向上してくれます。 jQuery UIと組み合わせて利用するプラグインです。 「jQuery UI MultiSelect Widget」の導入手順 jQuery UIのダウンロードページにアクセスします。 ⇒http://jqueryu
$(function () { // 親メニュー処理 $('span').click(function() { // メニュー表示/非表示 $(this).next('ul').slideToggle('fast'); }); // 子メニュー処理 $('li').click(function(e) { // メニュー表示/非表示 $(this).children('ul').slideToggle('fast'); e.stopPropagation(); }); }); <span>メニュー 1</span> <ul> <li>メニュー 1-1 <ul> <li>メニュー 1-1-1 <ul> <li><a href="#">メニュー 1-1-1-1</a></li> <li><a href="#">メニュー 1-1-1-2</a></li> <li><a href="#">メニュー
JavaScript jQueryとBootstrapを読み込んだ後、bootstrapSlideInMenu-1.0.0.min.jsを読み込んでください。 <script type="text/javascript" charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" charset="UTF-8" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> <script type="text/javascript" charset="UTF-8" src="bo
画像やテキストなど、コンテンツのデザインで重要なのは縦のリズム。 ページ上の指定した要素を文字のベースラインにツラをあわせて配置し、縦のリズムを簡単にデザインできるスクリプトを紹介します。 デモのように罫線を背景にした時には、画像・文字ともに罫線に揃えることも簡単です。
株式会社オンズ 開発ブログ 【jQuery】レティナ・ディスプレイ（Retina Display）に対応するための解決策［Retina-Srcset.js］を開発しました。 【jQuery】レティナ・ディスプレイ（Retina Display）に対応するための解決策［Retina-Srcset.js］を開発しました。 Retina Display - レティナ・ディスプレイ もう聞き馴れた名称かと思います。 もともとは Apple が開発した高精細ディスプレイで、初めて採用されたのは iPhone 4 のときでした。 レティナ（Retina）とは英語で「網膜」を意味します。 それまで一般的だった解像度の4倍の密度で、肉眼では画素・ピクセルを認識できない水準になっており、文字通り「常識を覆した」素晴らしいディスプレイです。 ウェブサイトを制作するとき、この「Retina Display」に対
HTML、CSSの勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー！ jQueryを身につけるための最短ステップ ステップ１ Progateで手を動かしながら学ぶ ステップ２ 平行してWebデザインレシピの記事を読む ステップ３ ドットインストールで総復習&補完 ステップ４ 書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書
Fully responsive CSS markup that was created for our slider takes care of handling display on all possible devices One to one swipe movement Unlike most sliders, it supports one to one swipe movement representation on changed slides Twitter bootstrap integration You can use responsive slider independently but it shows full potencial when coupled with bootstrap
サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示できるスライダー。 今回は無料で利用できるバリエーション豊富なスライダー用jQueryプラグインをご紹介します。 画像のスライダーから、レスポンシブ対応、フルスクリーン対応のほか、目を引くアニメーションによる画像の切り替えやコンテンツそのもののスライダーなど、多くのプラグインを集めてみました。 今後のコンテンツ制作にお役立ていただければ幸いです。 Swiper レスポンシブ対応で、スマホなどのタッチデバイスでのフリッカブル（スワイプ）にも対応したコンテンツスライダー。 オートプレイのほか、縦スライドや3Dエフェクト、ネスト構造（コンテンツにさらにスライダーを設置できる）対応と、幅広い表現が可能な、使い勝手のよいスライダーです。 設置も簡単、スワイプの反応もよい。 本当にオススメのスライダーです
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
ここではエフェクト関連のjQueryプラグインを紹介します。デモとそのソースコードとともにプラグインを紹介しています。
VPN What is VPN and why do you need it?VPN, or Virtual Private Network, is a technology that allows you to create a secure and private connection to the internet. With VPN, you can protect your online activities from prying eyes and access the internet with greater freedom and privacy. Learn more about VPN and why it’s essential in today’s digital world. Get Secure Now: The Honest VPN Rating Site
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
Camera slideshow 「Camera slideshow」は細かいところまであらゆる設定ができる高機能のjQueryスライドショーです。 デフォルトの状態でも十分に機能しますが、スキンやエフェクト、メーターの種類やナビゲーション、画像別に見せる時間を変えるなど様々な設定が可能です。 また、レスポンシブ対応しています。設定によってはフルスクリーンでのスライドショーを背景に設定することもできます。動画を組み込むことも可能です。 サンプルを作ってみました。 →「高機能過ぎるjQueryスライドショー『Camera slideshow』サンプル」 （追加記事：jQueryスライドショー「Camera slideshow」をフルスクリーンで背景にする方法） 軽くて使いやすいですので、どの画像ギャラリースライダーを使おうか迷った時の選択肢のひとつに良いと思います。 【使用方法】 まずはこち
Bootstrapで作成したページに、外部ファイルと数行のコードを加えるだけで、さまざまな便利な機能を追加できるjQueryのプラグインを紹介します。 Bootstrapの対応バージョンは、3.xです。 Smoke Smoke -GitHub Smokeの使い方 Smokeのデモ Smokeの使い方 Smokeの使い方は、簡単です。 Bootstarpでつくったページに、外部スクリプト・スタイルシートを加えます。 Bootstapのコードをベースにした最小構成は、こんな感じです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く