地図などをIllustratorで作るとき、ひとつのオブジェクトに複数の線を加えて作業することがよくあります。しかし、線の設定では一度にひとつの線しか操作できず、すべての線幅を変えるには線の数だけ繰り返し作業しなければなりません。これがすごくストレスだったので、すべての線幅を一気に変更するスクリプトを作りました。現在の線幅に対する割合（パーセント）を指定すると、オブジェクトが持っている線すべての幅を一気に変更します。地味に便利だと思いますので、ぜひ使ってみてください。
すべての線幅を一気に変更するIllustratorのスクリプトを作りました（CS5以降対応） - saucer
地図などをIllustratorで作るとき、ひとつのオブジェクトに複数の線を加えて作業することがよくあります。しかし、線の設定では一度にひとつの線しか操作できず、すべての線幅を変えるには線の数だけ繰り返し作業しなければなりません。これがすごくストレスだったので、すべての線幅を一気に変更するスクリプトを作りました。現在の線幅に対する割合（パーセント）を指定すると、オブジェクトが持っている線すべての幅を一気に変更します。地味に便利だと思いますので、ぜひ使ってみてください。
ドラッグアンドドロップも可能な軽量カレンダーピッカー
日付を選択するとき、様々な方法があると思いますけど、カレンダーからダイレクトに選ぶのが最も簡単な方法ですよね。 そんなユーザー体験を実装するのが今回ご紹介するjQueryプラグインです。 日付入力をもっとフレンドリーに カレンダー選ぶ、日付クリックする、日付が入力される。 とっても軽量で、シンプルなプラグインだけど、いい仕事をしてくれます。 ショッピングサイトでも使えますし、日付の指定、開始日、締め日、あらゆるところで需要の高い日付の選択を簡単ピッカーで入力出来ます。 実際は、出力形式を「20 Dec 2015」ってなっているように、日本語にローカライズする必要があるけど、この設置方法がとにかく簡単なので、ローカライズしてまで使いたい人も多いんじゃないだろうか。 ヘッダー部分 <script src="path/to/jquery.js"> </script> <script src="p
Illustratorのオブジェクトをシンボルに置き換えるスクリプトを作りました（CS5以降対応） - saucer
IllustratorでウェブデザインやUIデザインをするときなどは、繰り返し使うパーツをシンボルにしておくのが基本です。しかし、作業に集中していると、シンボル化をつい忘れて、同じオブジェクトを複製して使ってしまうことがあります。こうなると、あとから置き換えるのが結構大変です。そこで、選択したオブジェクトやグループなどを、一括してシンボルに置き換えするスクリプトを作ってみました。シンボル化をつい忘れることが多い方は、ぜひ使ってみてください。 更新履歴GitHubのリポジトリをご確認ください対応バージョンIllustrator CS5 〜 CC 2017ダウンロードスクリプトをダウンロードする（object-to-symbol-master.zip／zip形式）GitHubのリポジトリからもダウンロードできますインストール方法以下の場所に、「シンボルに置き換え.jsx」をコピーします。Win
レスポンシブサイトに使える！画面サイズで読み込むJavascriptを切り替えるjs
レスポンシブウェブデザインでサイト作成をする際に、場合によっては使うことになるかも知れないJavascriptで画面サイズ指定に応じたjavascriptを読み込む条件分岐です。 <script type="text/javascript"> jQuery(document).ready(function($) { //PC環境の場合 if (window.matchMedia( '(min-width: 769px)' ).matches) { //切り替える画面サイズ $.ajax({ url: 'js/pc.js', dataType: 'script', cache: false }); //モバイル環境の場合 } else { $.ajax({ url: 'js/sp.js', dataType: 'script', cache: false }); }; }); </scrip
【24h_aiまとめ】Illustratorがもっと便利になるスクリプト6選 - hamfactory
あらためまして、24時間Illustratorスペシャルイベント「愛（Ai）はクリエイティブを救う」にご参加＆配信をご覧くださった皆様、ありがとうございました！ 過去に例の無いタイプのイベントということでしたが、自分自身もとても楽しむことが出来ました。 アーカイブが観られるよ 公式サイトでは、現在すべてのアーカイブを観ることが出来ます。 （事前に「アーカイブなし」の告知があったセッションは除きます。） アーカイブの試聴も無料。Adobeさん太っ腹！ 深夜のセッションなど「起きてられなかった…」という方、 観てたけど「もう一回おさらいしたい」という方は是非公式サイトへどうぞ。 紹介スクリプトのおさらい イベント当日は普段から愛用させて頂いている、とても便利なスクリプトを使ったテクニックをご紹介させていただきました。 Twitterなどでも流したのですが、こちらでもまとめておきますね。 スクリ
動画もLightbox風に表示出来るColorbox 使い方 | Glow-Factory
今回は、画像や動画などをオーバーレイ表示出来るLightbox系jQueryプラグイン【Colorbox】の使い方のご紹介です。 こちらの【colorbox】は、画像だけではなく動画やinlineコンテンツなどのもオーバーレイで表示出来るので、大変便利なjQueryプラグインとなっています。 また、オーバーレイのスタイルも5種類ほど用意してあり対応したCSSを読み込めば対応しています。 実装のハードルも高くなく割と簡単に実装も出来ると思います。 実際に【Colorbox】を利用したデモサイトもありますので、ご参考下さい。 デモサイト 実装するのであれば、下記リンク先より必要ファイルをダウンロードして下さい。 Clorbox それでは、jQueryプラグイン【Colorbox】の使い方をご説明していきます。 実装するにあたりこちらより必要なファイルなどを事前にダウンロードしておいて下さい。
jQueryプラグインfancyBoxを使い方について | web-wizardry
インターネット・スマホ、そしてテレビにwebの魔法をWizardry
Appleの商品スライダーを再現したjQueryプラグイン「Kiwi-slider」
Posted: 2014.10.28 / Category: javascript / Tag: jQuery 「Kiwi-slider」はAppleの商品ページのスライダー動作を再現したjQueryプラグインです。 プラグインのダウンロードと準備 デモ＆ダウンロードは下記から Kiwi-slider html & css ダウンロードした「kiwi.css」「kiwi-slider.js」を読み込んだら、後述するidを「new KiwiSlider」で指定します。 html <link rel="stylesheet" type="text/css" href="stylesheets/kiwi.css"> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="javascrip
[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ：幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
![[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4b391a890221ac5696699ef145a5921c27e5824/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100601-01.png)
[Javascript] 非同期設定でレスポンス速度を改善させる | mkoba のお部屋 ： DREAMHIVE Staff Blog
この記事は2年以上前の投稿になります。 記載された情報が古くなっている可能性がございますので十分ご注意ください。 ウェブサイトのレスポンス速度を改善させる手法の1つとして、読み込む JavaScript ファイルの非同期化というものがあります。 通常、外部の JavaScript ファイルを呼び出す場合、特に何も指定しなければ同期設定で読み込まれます。 これを非同期にすることで待ち時間を減らしてレスポンス速度を改善させることができます。 先日ご紹介した「GTmetrix」や「PageSpeed Insights」でも非同期を推奨していますね。 設定の仕方も簡単です。 <script async src="//xxxxxxxxxxxxxxx.js"></script> や、こんな感じで設定します。 (function(){ var elm = document.createElement('
![[Javascript] 非同期設定でレスポンス速度を改善させる | mkoba のお部屋 ： DREAMHIVE Staff Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf9f20a6b7d49de5a75020648483027fb553aa5b/height=288;version=1;width=512/https%3A%2F%2Fblog.dreamhive.co.jp%2Fmkoba%2Fwp-content%2Fuploads%2Femblem-mkoba_200x200.png)
「今このときからプログラミングを始めたい」と思った方へのgoogle apps scriptのススメその1 | Project name
先日ドットインストールへ遊びにいってみた。を書いてみたら、なんとドットインストールさんのメルマガにご紹介して頂き、寝ている間に実質開設してから3日とは思えないアクセスがあった。 ありがたしありがたし。 このチャンスを逃すものかと(貧乏根性発揮して)初心者向けにおすすめのgoogle apps scriptの魅力と実際の作成過程を説明するブログを書いてみたい。 ちなみに私もようやく入門したといえる程度の初心者レベルですので、他により効率よい方法があるとは思います。 が、初心者が目にするリアルな工程や面白さをご紹介して、ぜひ4月の自分のような知識まっさらだけど興味があってどうしようと悩んでいる方のためになる記事にできればと思っております。 GASは文系必須スキル。 さて、まずはGASがオススメである理由をその便利さ・気軽さ・習得しやすさの3つの側面から説明してみる。 便利：下手なライフハック
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。 ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素（タグ）で固定したい場合に使ってみてはいかがでしょうか。 今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。 応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。 まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。 （今回はグローバルナビで説明） HTML記述例（HEAD部） <html> <head> ・ ・ <link href="style.css" type="text/css" rel="st
サイトでおしゃれに動画再生！オリジナルUIの全画面動画を実装！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、制作部デザイナーのぺちこです。 近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、 お恥ずかしながらvideo実装をしたことがなかったので、 ひたすら勉強三昧でした。 背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、 動画を1つのコンテンツとして、長めにしっかりと載せているサイトも増えてきましたね！ 動画を大事なコンテンツの一部とすると、 YouTubeやVimeoで簡易的に載せるだけではどうしても物足りず…。 せっかくなので<video>タグを使用してオリジナルのコントローラーやシークバーを作ってしまおう！というのが今回の記事の内容です。 では早速行きましょう！ オリジナルUIの全画面動画を<video>で実装する方法 JSを使用すればvideoをがっつりコントロールできるのですが、 これがまた調べてもスクリプトが出てくるばかりで、
מארי אוסטין
מארי אוסטין - free nudes, naked, photos, Olivia DeJonge - Baz Luhrmann Anna - 9
サイドバー表示が終わるまで下にスクロールしたら「おすすめ記事」を追尾させる - 太陽がまぶしかったから
「おすすめ記事」を追尾させたい 長文記事を書くとスクロールしていくうちに、サイドバーががら空きになってしまうので、このスペースを有効利用できないかと考えました。表示機能自体は『はてなブログの「最新記事」サイドバーを魔改造する - 太陽がまぶしかったから』の発展になります。 おすすめエントリ要素より下にスクロールしている場合はスクロールに追尾して、上側にいる場合はスクロールに追尾しません。表示するエントリははてなブックマークの人気エントリからランダムに4つ選択しています。サイドバーが下側に無限に伸びるイメージ。PC版だけで動作します。 スクリプト設置 サイドバーの最後に「HTML」モジュールを作成し、以下のスクリプトの変数部分を編集した上でコピペします。スタイルについては『はてなブログの「最新記事」サイドバーを魔改造する - 太陽がまぶしかったから』と同じ構造なのでそちらをご参考にカスタマイ
【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript ｜ KLUTCHE
最近ではページ内でリンクを飛ばす際には当然の仕様となっているスムーススクロールを簡単なタグで実現します。 どうだい？スムースだろ？ デモページ 個人的にこの動きが大好きです。 1時間くらいならずっとスクロールを見ていられます。 鬱の時なら半日はいけます！ HTML <a href="#bottom">下へスムース！</a> なにも工夫しなくて良いです。 ただ＃をつけてアンカーポイントへリンクを貼るだけです。 jQuery依存のスクリプトなので、head内でjQueryを呼び出しましょう。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> その後に以下のスクリプトを書きます。 <script type="text/java
2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link rel="stylesheet" href="slidebars.min.css"> <head> <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="slidebars.min.js"></script> </body> St
Tocify - Boostrap対応の目次生成ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました お。これはプロジェクトサイトのヘルプや説明ページに使えそうですね。 BootstrapをベースにWebサイトを構築するメリットとして、多彩なプラグイン/ウィジェットの存在があります。こんなこと実現できるかな、と思って調べてみれば大抵そういったソフトウェアが存在するのが強みです。 例えばメインコンテンツの左側に見出しを目次として並べたい、そう思ったならばTocifyを使ってみましょう。Bootstrap + jQueryで格好いい目次表示を行ってくれます。 使い方としてはまずスタイルシートとJavaScriptを読み込みます。 <link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> <link type="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2013年総まとめ：商用利用も無料、高品質な英語のフリーフォントのまとめ