パスツールで描いた線に、ブラシやペンなどの描画系ツールで色や太さを与えることができるのが「パスの境界線を描く」という機能です。通常はパスパレットのメニューから「パスの境界線を描く」(複数のパスから一部のパスを選択した場合は「サブパスの境界線を描く」)をクリックすることで操作しますが、ショートカットキーを覚えておけば毎回パレットを開くことなく操作ができます。 まずショートカットキー「P」でパスツールを選択し、パスを描きます。その後、「B」でブラシツールに切り替えて線の色やサイズを設定します。ここで選んだブラシの色・サイズ・不透明度・ストロークなどがそのままパスの境界線として表現されます。ブラシ・鉛筆ツールだけでなく、消しゴムツール(ショートカットキー「E」)やぼかしツール、覆い焼きツール(ショートカットキー「O」)などを選択することも可能です。 使用する描画ツールの設定が完了したら、後は「E

以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。 今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。 ※追記（09/07/24） 若干修正し、2.1にバージョンアップしました。 （今までのでも問題なく動作します。） ダウンロード プラグインはjQueryと下記プラグインを一緒に使ってください。 opacity-rollover2.1.js 透明度を利用したロールオーバー これは以前と同じ通常の使い方。マウスが画像の上にのると、画像の色が薄くなるロールオーバー。 ■使い方 $('#over1').opOver(); 適応させたいセレクタを指定し、opOver()で適応させる。 ■サンプルプレビュー これだけでも十分使えると思われます。画像を複数用意しなくとも、色の濃い画像を用意するだけで画像が変わ

JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連のjQueryプラグインを紹介しています。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。 jQueryプラグインのdcdeiv/jsonslider · GitHubを利用することでその手間が少し軽減できるかもしれません。 via：dcdeiv/jsonslider

CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか？え、無いの・・じゃあいらないかｎ Sample まぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックすると回転するんですがこれはcss3のkeyframeとanimateでうごかｓ、あ、どうでもいいですよね。 IE6/7 IEで

記号やイラストなどを収録しているフォントをお探しの方用のエントリ。 自力で無料のものを探すのは難しいという方は参考にどうぞ。 Kaomoji Holiday illust Garabata - dingbats The Scrappin Cop SocialIcons font by ptocheia - FontSpace Irresistible Free Dingbat Fonts | Part II - StarSunflower Studio このページにはかなりの量がまとまっています。キャプチャーは全て、このページのリンクへつながっています。 Was Woodcuts Griffin Bats Zooland My 70's Ding Squares Font Medieval Dingbats Kaloscai Flowers Jade Dingbats Font 001 M

2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・

今さらながら、Webページ内の要素に対して、要素の透明度／透過度をCSSのみで指定する方法について。 久々にCSSのみで透明度の指定が必要になる場面があったのですが、記述方法をすっかり忘れていたのでここにメモとして残しておきます。 CSSで透明度を指定するには「opacity」というプロパティを使用しますが、ブラウザによって記述が変わるので下記の様な形になります。 ◆CSS div { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } 『filter:alpha(opacity=50);』 これはIE向けの指定。 “50”というのは透明度が“50%”ということ。 透過無しの状態“100%”を指定する際は「filter:alpha(opacity=100);」。 『-moz-opacity: 0.5;』 これはFiref