レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」
業務メモ。 最近はかなり減りましたが、Webサイト作成時たまに使用せざるを得ないあいつ。そう、クリッカブルマップ。 画像の好きな場所にリンクを仕込めるのは便利ですが、レスポンシブの案件ですとリンクエリアが指定した座標からずれてしまうため困っちゃう。 jQuery RWD Image Mapsはそんな悩みを一発で解決してくれる便利なjQueryプラグインです。 使い方 使い方は非常に簡単。まずはstowball/jQuery-rwdImageMapsからjsファイルをDL。適宜アップロードします。 HTML [html] <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.rwdImageMaps.js"></script>
HTML／CSS、PHP、jQueryの基礎を学ぶなら超オススメ！プログラミング学習サービス「Progate」
まずはProgateへアクセスしてアカウントを作成。私はTwitterで認証しました。 現在学べる言語は HTML & CSS PHP jQuery の3言語の基礎部分。 とりあえずHTML & CSSをやってみましょう。 学習の流れ 学習の流れは3ステップ。 スライドで基礎知識を学習 ブラウザ上のエディタにコードを書いて実際に学習 プレビュー画面で実際に挙動を確認→答え合わせ といった感じです。 スライド スライドは非常に丁寧な作りとなっておりますので、よく読みこめば初心者でもしっかりと理解をしながら学習することが出来ます。 矢印キーでページ送りができるのがCool。 1レッスンにつき数枚のスライドが表示されますので、見終わったらエディタ画面へとGO！ エディタ画面 こちらがブラウザ上で動作するエディタ画面。左側が問題文、真ん中がエディタ、右側がプレビュー画面となります。 もう一度スライ
よく使うアイコンWebフォントのフォントセットとジェネレーターまとめ
Webページ上でベクターのアイコンを簡単に表示できる憎いアイツ。そう、アイコンWebフォント。 Retinaディスプレイでも綺麗に表示されるし導入は（そんなに）難しくないし至れりつくせり。 セマンティック？なにそれおいしいの？ そんなわけで今回はよく使っておりますアイコンWebフォントのセットと、ジェネレーターをまとめてみました。 ※紹介しているフォントを使用する際は、ライセンスを必ずご確認ください。 Font Awesome とっても有名なアイコンフォント、Font Awesome。600を超えるアイコンを使用できるのが特徴です。ソーシャル系のアイコンも揃っております。線のRは少し強めの印象。 個人・商用利用なのも嬉しい。 Font Awesome, the iconic font and CSS toolkit Entypo キリッとしたアイコンがエレガントなイメージなのがEntypo
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
Webデザイナー、コーダーならDLしとこう！あると地味に便利なGoogleChrome機能拡張4つ
今日は業務でよく使う、Webデザイナー・コーダーさんならあると地味に便利なGoogleChrome機能拡張をまとめてみました。私にとって、どのエクステンションも無いと「ちょっと困る」ものたちばかりです。 Image Properties Context Menu まずはImage Properties Context Menu。 画像を右クリックすると、パスやサイズ、altテキスト、ファイルサイズ等を別ウインドウで表示してくれます。 参考：[Google Chrome]右クリックで画像のプロパティを簡単に確認できるエクステンション「Image Properties Context Menu」 MeasureIt! 続いてはMeasureIt。 ブラウザ上に「ものさし」を表示してくれるエクステンション。ささっと画像サイズを調べたり、カラムの幅を測ったりするのに使用しています。 Show Ti
Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ
プロフィールに記しておりますとおり、私は現在デザイン会社にて働いております。 昨年の3月、5年ほどやっていた「DTP・グラフィックのデザイン・レイアウト業務」から「Web担当」に相なり、日々勉強しながら仕事に臨んでおると言う状況です。 そのちょっと前までHTMLは妖精が書いていると思っていた私にとって、あまりに勝手の違う作業内容。最初は途方に暮れておりましたが、Twitter等で知り合うことのできた先輩Webデザイナーさん達のおかげもあり、現在では自分でWordPressのテーマを作成できるまでに成長することができました。頭を叩くと「ｾﾏﾝﾃｨｯｸ!」と音が鳴るまでになりました。 そんなわけでここいらで一度、自分がDTP→WEB担当になるにあたって勉強したこととか使っているツールとかをデロッとまとめておきたいと思います。 まずは業務をする上で必要不可欠になった言語や、作業効率を上げるために
無料で超簡単に画像の背景を切り抜ける神ツール！Clipping Magicが凄かった
画像の切り抜き、面倒くさいですね。 Photoshopを持っている方なら色んな方法があるってもんですが、そうでない方はどうすればよいのでしょうか。そうです、「Clipping Magic」をつかえばいいのです！ そんなわけで、超簡単に画像の背景を切り抜ける神ツールClipping Magicのご紹介。 使い方 このClipping Magicはブラウザに画像をアップロードして、簡単操作で背景を切り抜くことができると言うツールです。（ブラウザはGoogle ChromeかFirefoxをお使い下さい） まずはClipping Magicにアクセスして、写真をブラウザ上へドロップ。画像をアップロードします。 写真をアップロードしたところ。左が作業スペース、右がプレビュー画面となります。いい写真ですね。 ツールはこんな感じ。 使い方は非常に簡単。このように切り出したい部分を緑色のツールでザックリ
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法！（Mac編）
どうも。生まれて初めて当たり付き自動販売機で当たりが出た@OZPA です。 さて、かねてより和洋風◎の@isloop くんより 「ブログのデザイン、テンプレートじゃなくて自分で作ったほうがいいよ」 とのアドバイスをうけていたのですが、phpやcssどころかhtmlすらろくに理解していなかった私。 プロフィールページを作るのに戸惑ったり、はたまたサーバを移転するのにしこたま苦労したりと本当に手のかかるお子様だったわけです。そんな私がWordPressのテーマですって・・・？汚らわしいっ！ [blackbirdpie url=http://twitter.com/#!/OZPA/statuses/64271506724757504] ですが今年の4月の終わりに上のようなつぶやきをしていることをふと思い出し、新しいことを覚える良いチャンスだなということで、WordPressのテーマを作るためにB
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
