jQuery で複数行対応の自動省略三点リーダー「...」付与修正版 - Qiita
はじめに jQuery で複数行対応の自動省略３点リーダーを付与します。わざわざプラグイン使うまでもないので、書いておきます。CSS でも可能ですが、:before や :after を使って右端に余白を設けて固定で「...」を書くなど、ちょっと見た目がださかったのでやめました。参考リンクを貼っておきますが、参考リンクの内容はウィンドウサイズを縮めたときにしか使えないですし、拡大したときに文章が枠内に収まったとしても「...」が残るなど、いろいろ未完成だったので修正しました。 参考 文字列を省略して「...」を付与する方法 意外と需要がある（泣）文字数を省略して「...」にしたい。複数行のとき！ 準備 jQuery を入れてください。 コード <script type="text/javascript"> $(function () { $(document).ready(function
jQueryで文章を指定の文字数でカットする方法
一覧画面やトップページに表示する記事タイトルやお知らせテキストなど、レイアウトの都合上特定の文字数分だけ表示するようにレイアウトされたデザインのコーディングが必要なことがあると思います。 そういったときはjQueryで文字数を指定してカットする方法があります。今回は文字数制限と合わせて文末に”…”を追加し、視覚的に続きがあることがわかりやすい状態で実装する方法を紹介します。 jQueryの記述 文字数制限をしていない状態が下記です。liそれぞれに40文字づつテキストが入っています。 See the Pen mjjmrR by hoshu_t (@hoshu_t) on CodePen. ここに以下のjQueryを加え、20文字で文字数制限を行いました。 See the Pen YjjVGW by hoshu_t (@hoshu_t) on CodePen. 最初のcountで文字数を指定し
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
画像の色から背景色を決定！jquery.adaptive-backgrounds.js
「jquery.adaptive-backgrounds.js」は、指定した画像のドミナントカラーを抽出し、親要素の背景色として適用するjQueryプラグインです。 ドミナントカラーとは配色全体の印象を支配する色のことで、主調色とも呼ばれます。ドミナントカラーを背景に使う手法で有名なのはiTunesですね。下記の画像を見てわかる通り、CDジャケットのドミナントカラーを背景色に指定することで、アルバムの印象を視覚的により強めることができます。 jquery.adaptive-backgrounds.jsプラグインはCanvas 要素を使うので、Google ChromeなどのモダンブラウザーとInternet Explorer 9以降、スマートフォンではiOS 7.1のSafari、Android 4以降の「ブラウザ」に対応しています。 ライセンスはMITです。ライセンスに従って著作権表示は
こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。
魅力ある動きを可能にしてくれる フリーjQueryプラグイン「14 Free Frontend jQuery Plugins」
TOP > plugin > 魅力ある動きを可能にしてくれる フリーjQueryプラグイン「14 Free Frontend jQuery Plugins」 webサイトを構築する際に、印象的に、サイトを魅力的に見せてくれるjQueryは非常に便利なツール。よく利用されている方はとても多いのではないでしょうか？今回はそんなjQueryプラグインをフリーで使用できる「14 Free Frontend jQuery Plugins」を紹介したいと思います。 fullPage.js One Page Scroll Site Plugin 14種の、独特な動きを見せるjQueryプラグインが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 jquery.matchHeight Tests ディスプレイサイズによって可変するボックスレイアウトの
レスポンシブデザインでクリッカブルマップ（イメージマップ）対応にするjQueryプラグイン - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
レスポンシブデザインでクリッカブルマップ（イメージマップ）対応にするjQueryプラグイン レスポンシブにすると画像の大きさが変わってしまって、クリッカブルマップ（イメージマップ）の座標がズレるってことになりますよね。 少し古いプラグインですが、そんな時に使えるレスポンシブに対応するクリッカブルマップjQueryプラグインをご紹介します。 Responsive Image Maps jQuery Plugin まず、stowball/jQuery-rwdImageMaps ・ GitHubにアクセスして、該当ファイルをダウンロードしてきます。 下図の丸印「ZIP」をクリックすると「jQuery-rwdImageMaps-master.zip」というフォルダがダウンロード出来ると思います。 で、フォルダを開いた中に「jquery.rwdImageMaps.min.js」ファイルがありますので
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する | 独学Webデザイナーの覚書
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する jQuery2011年9月29日 MovableTypeやWordPressなどのCMSツールを使用せず、ニュースリリースなどが静的HTMLで構築されているサイトの場合、HTMLを直接修正して更新する必要があります。 そこで、ニュースリリースなどの情報をひとつのXMLファイルで管理し、HTMLを触らずともあたかもデータベースのようにXMLを扱うことで、XMLファイルの更新のみでサイトの管理が可能になり、メンテナンス性が向上します。 jQueryを使用すると実装が比較的容易なので、今回サンプルを作成してみました。 jQueryはこちらからダウンロード 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width
jQuery入門講座 使い方
索引 ├ 使い方 目次 └ バグノート(1) 1章：jQuery入門 ├ jQueryのメリット ├ readyイベント ├ オブジェクトについて ├ メソッドについて ├ 情報の取得 ├ イベント(1) ├ イベント(2) └ 初歩なサンプル 2章：jQuery基礎 ├ thisについて(1) ├ thisについて(2) ├ jQueryとDOM要素 ├ 簡単な演出 ├ thisから辿る ├ 汎用的なアニメ(1) ├ 汎用的なアニメ(2) ├ アニメの停止 ├ アニメを管理する仕組み └ 汎用的なアニメ(3) 3章：jQuery発展 ├ イベントフロー(1) ├ イベントフロー(2) ├ イベントフロー(3) ├ 画像のプリロード ├ jQueryの高速化 └ メソッドチェーン 番外編：研究 ├ イベントを外す ├ cssアニメとの連携(1) ├ cssアニメとの連携(2) ├ cssア
シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
Create a Path-like Menu Button with WheelMenu.js
About a year and a half ago, Path released the new revamp version that was equipped with a unique menu button located at the bottom left of the app. This button contains all the necessary action buttons and I thought it was an awesome idea to be able to group these multiple buttons into one without eating up all the space. Today, I have decided to build a little jQuery plugin that will bring this
小粋空間さんの作った「ノンプログラマーのためのjQuery生成ツール」が初心者の勉強用にうってつけでスゴイ便利
365.18 1 chapter down, 2 books to go / remysharp Webに関するものなど様々な情報を扱っていらっしゃるブログ小粋空間さんが作られたノンプログラマーのためのjQuery生成ツールがjQueryの勉強に便利そうでしたのでシェア。 このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 via: ノンプログラマーのためのjQuery生成ツール: 小粋空間 なんと、ありがたいことに先日書いた「jQueryが全く分からない人のため」の超初級者向け入門講座をインスパイアして作っていただいたとのこと…嬉ション5ガロンです。ありがとうござい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
06.GRASSHOPPER