横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵
高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plugin for jquery 動き 簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。 デモページ 使い方 使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、 [html] <head> <script type="text/javascript" src="http://ajax.googleapis
頭良さそうに全く内容のないエントリーをアップする方法
以上はWikipediaなどで適当に拾ってきた単語にただリンクを貼り付けてテーブルにしたものです。何か含みを持たせていたりすることはありませんし、この無秩序な単語の列に意味合いを探してもWaste of Time＝時間の無駄でしょう。 こんな突然の英語も記事をそれっぽく仕立て上げます。 先程はリストでランダムな単語を並べてみましたが、同様の手法は他にもあります。それが引用です。 準同型（じゅんどうけい、homomorphic）とは、複数の対象（おもに代数系）に対して、それらの特定の数学的構造に関する類似性を表す概念で、構造を保つ写像である準同型写像（じゅんどうけいしゃぞう、homomorphism) を持つことを意味する。構造がまったく同じであることを表すときは、準同型・準同型写像の代わりに同型（どうけい、isomorphic）および同型写像（どうけいしゃぞう、isomorphism）とい
HTML／CSS、PHP、jQueryの基礎を学ぶなら超オススメ！プログラミング学習サービス「Progate」
まずはProgateへアクセスしてアカウントを作成。私はTwitterで認証しました。 現在学べる言語は HTML & CSS PHP jQuery の3言語の基礎部分。 とりあえずHTML & CSSをやってみましょう。 学習の流れ 学習の流れは3ステップ。 スライドで基礎知識を学習 ブラウザ上のエディタにコードを書いて実際に学習 プレビュー画面で実際に挙動を確認→答え合わせ といった感じです。 スライド スライドは非常に丁寧な作りとなっておりますので、よく読みこめば初心者でもしっかりと理解をしながら学習することが出来ます。 矢印キーでページ送りができるのがCool。 1レッスンにつき数枚のスライドが表示されますので、見終わったらエディタ画面へとGO！ エディタ画面 こちらがブラウザ上で動作するエディタ画面。左側が問題文、真ん中がエディタ、右側がプレビュー画面となります。 もう一度スライ
超簡単に書類のスキャン＆多彩な共有機能！Evernoteのスキャンアプリ「Scannable」を試してみた
Scannableの特徴 Scannable は、手元にあるレシートや書類をカメラロールに溜めるのではなく、素早くスキャンして共有できるように設計されています。 via: Scannable: Evernote の新しいモバイル用スキャンアプリ – Evernote日本語版ブログ 素早くスキャンが取れて、共有も簡単で、ScanSnapのEvernote Editionとの連携も可能なスキャンアプリ、それがScannable。手持ちのiX500じゃ連携してくれないよな…だよな… 早速起動してみました。スプラッシュ画面で動くロゴがｶｺｲｲ。 最初の起動時はチュートリアルのムービーが自動で流れます。シンプルな使い勝手のご様子。 とりあえずお昼を食べた蕎麦屋さんのお品書きをスキャンしてみました。 自動的に原稿を読み取ってくれ、シャッターボタンを押さなくてもスキャンできます（手動も可能）。 スピーデ
よく使うアイコン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 デモページがカッコイイス
Evernoteのinboxを超簡単に整理できるアプリ「Zen」がリリース記念で100円にて販売中！
Zenでできること ZenはEvernoteのインボックスを整理することに特化したiOSアプリ。そう、私の好きな機能が尖った系のアプリ。 このアプリでは 右スワイプしてあらかじめ指定したノートブックにアーカイブ 右に長くスワイプして削除 左にスワイプして他のノートブックへ移動 ができます。それだけ。だが、それがいい。 使ってみた まずはEvernoteとアカウント連携。 すると、Inboxとして使用するノートブックがデフォルトのノートブックで良いか尋ねてきます。OKなら「はい」を選択。 次にアーカイブのノートブックを尋ねてきます。 アーカイブのノートブックを変更したい場合は先の画面で「いいえ」を選択、任意のノートブックをチェックすればOKです。 そこまで終わるとアプリのチュートリアル画面に。とは言えやることは3つしかありませんのでさくっと終わらせちゃいましょう。 チュートリアルが終了すると
私が最近どうやってブログを書いているのか、手順と使用ツールを公開してみる
Markdownを覚えて以来、ちょっとした心境の変化と、Sublime Textでブログを書き始めたら結構これが快適だったので、MarsEditを使うのを試験的にやめてみました。 そんなわけで本日は、最近私がどうやってブログを書いているのかと、使っているアプリ・ツールを晒してみたいと思います。（環境はOS X 10.9です） ブログ執筆の順序 まずはブログをどうやって書いているのか、その手順から。 アプリのダウンロード用html用意（アプリ紹介の場合） 画像用意→加工（リネームまで） 画像をまとめてアップロード Sublime Textで執筆 WordPress管理画面にてアップロード アプリのhtmlコード取得 アプリのコードはAppStoreHelperを使って取得しています。テンプレートを自分好みに簡単にカスタマイズできるのが嬉しいポイント。
Webデザイナーな私のEvernoteの使い方（現状）
Webコーダーとなって2年ちょい、最近ではデザイン業務もやらせていただいております@OZPA でございます。 本日は、私がコーディング等のネタ帳として使用しているEvernoteのノートブックについて簡単にご紹介。 Evernoteにクリップしている情報 私が「業務に役立ちそうだな」とEvernoteに放り込んでいるのは jQueryプラグイン、テクニック CSSのテクニック アイコン・背景などの素材を紹介しているWebサイト といったところでございます。 それを全て1つのノート、「3001_ネタ帳（CSS,jQuery etc）」にまとめておるわけです。 Evernoteの名付け方に関してはこちらの記事をどうぞ こんな風にいつか業務で使えそうだな、と思ったスライダーなどのjQueryプラグインをメモったり… form周りで使えそうなjQueryに関する記事を取っておいたり… CSSのテク
Evernoteの使用時に知っておくと超便利な、私が良く使っている検索用テクニック
今日も今日とてEvernoteのダイエットを敢行中なのですが、本日はそんな際に役立つEvernoteの検索テクニックから、私がよく使っているものをピックアップしてみたいと思います。 参考：検索構文 – Evernote Developers Evernoteには強力な検索機能が付いており、それを利用すれば事細かな整理をしていなくとも何となくの検索で目的のノートまで到達することが出来ます。 ノートブック・タグ・タイトルの検索 まずはノートブックやタグに関する検索方法から。ちなみに大前提として、検索時の英単語は大文字小文字を問いません。 ノートブック 特定のノートブック内を検索する時は notebook:ノートブック名とすれば大丈夫です。もしノートブック名の間に半角スペースが有る場合は「”（ダブルクォート）」で囲えばOK。 例 notebook:food notebook:"web site
Sublime TextでMarkdownを快適に書くためのプラグインと設定
メモ書きやらブログの下書きにMarkdownを使い始めたわけなんですが、まぁこれが快適でして。さっくり下書きできて後で簡単にhtmlに起こせると言うのが嬉しいです。学習コストも大した事ないし。 Markdown使うためにMac、iPhone、iPadに導入したエディタアプリ で、↑の記事ではMacでMarkdownを書く時にMouを利用し、ときたまSublime Textを使っていると書いたのですがメインエディタをやっぱりST2にしました。 キャレットが増やせなかったり、やっぱりビジュアルが我慢できなかったり、Mouを使ってると「もう〜」ってなる瞬間が多かったので。Mouだけに。Mouと感嘆詞の「もう〜」がかかってます。すごい。 そんなわけで今回はSublime TextでMarkdownを快適に書くために導入したプラグインと設定を書いておこうかと思います。（なお、私の環境はMac + S
Webページ上のフォント名がチョー簡単にわかるChrome機能拡張「WhatFont」
Webページ閲覧中に「あれ…このフォントなんてフォントだろう…」ということがよくあるのですが、それをチョー簡単に調べられるChrome機能拡張がありましたのでご紹介。 その名も「WhatFont」。名前の直球具合に好感が持てます。 WhatFont WhatFontの使い方 まずはなにはともあれDLしましょう。ダウンロードはこちらから。 DLしたら機能拡張メニューバーにご覧のアイコンが現れます。あとはフォントを調べたいサイト上でこのアイコンをクリックするだけ。 マウスオーバーするとそのフォントが表示されます。 クリックすればこのようにfont-sizeやline-height、colorなどの詳しい情報も知ることができます（色が赤になっているのはhover時の色を表示しちゃってるっぽい） 複数指定している日本語フォントでもこの通り。バッチリです。
コードスニペット管理ツール「GistBox」が良いね！とっても良いね！
コードのスニペット管理にSnippiを利用していたのですが、何故かTwitterアカウント連携ができなくなってしまい、こつこつ貯めていたコードが見られなくなってしまいました。 バックアップでNotefileに取ってあったため事なきは得たのですが、コードスニペット管理の方法としてはいかんせん使いにくい。 なんかいい方法あんめえかと思って探したところ、GitHubアカウントがあれば無料で使用できるスニペット管理ツールGistBoxが良さげだったので試してみたところ非常に快適でしたのでシェア。 参考：GistをメーラーのようなUIで管理する「GistBox」がいい感じ | REFLECTDESIGN メーラーのようなUI 使用はGistBoxでログインするか、Chromeアプリから。UIは一緒です。 私はChromeアプリを使用することにしました。 GistBox – Chrome ウェブストア
コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順
なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。 なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が
Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ
プロフィールに記しておりますとおり、私は現在デザイン会社にて働いております。 昨年の3月、5年ほどやっていた「DTP・グラフィックのデザイン・レイアウト業務」から「Web担当」に相なり、日々勉強しながら仕事に臨んでおると言う状況です。 そのちょっと前までHTMLは妖精が書いていると思っていた私にとって、あまりに勝手の違う作業内容。最初は途方に暮れておりましたが、Twitter等で知り合うことのできた先輩Webデザイナーさん達のおかげもあり、現在では自分でWordPressのテーマを作成できるまでに成長することができました。頭を叩くと「ｾﾏﾝﾃｨｯｸ!」と音が鳴るまでになりました。 そんなわけでここいらで一度、自分がDTP→WEB担当になるにあたって勉強したこととか使っているツールとかをデロッとまとめておきたいと思います。 まずは業務をする上で必要不可欠になった言語や、作業効率を上げるために
パクリサイトに記事を全文無断転載されたのでGoogleに著作権侵害を報告しつつ差し替え画像を用意して対策を講じてみた
人の心を盗むことはあっても、記事を盗むことはありません。おつぱ（ @OZPA ）です。ｸﾗﾘｽｩｰ!!ｸﾗﾘｽｩｰ!! さて先日、Twitterで@25kei12 さんより「とあるサイトで記事が全文パクられてますよ」と教えて頂きました。 参考：全文パクリブログ発見! – ま鉄系 よくよく考えたら全文まるまる無断転載されたのは初めてのこと（把握する範囲で）。しかもサイトを見てみたら画像まで直リンクしてくださっているご様子。 うーん殴りたい。 そんなわけでどんな制裁をくわえてやろうかと高鳴る鼓動を抑えつつ、当該パクリサイトにいろいろと対策を講じることにしました。（パクリサイトへのリンクはしておりませんので悪しからず） Googleに著作権侵害で報告 まずはじめにやるべきはGoogleへの著作権侵害を申告することでしょう。以下のサイトを参考にさせて頂きました:) 無断コピーされたコンテンツをGo
[Webデザイン]サイトのスクリーンキャプチャ管理に「Clipular」を使い始めてみたけどいいですねこれ
カッコイイなぁーと思ったWebサイトのスクリーンショットやURLをまとめるためにEvernoteのクリップを使用していたのですが、ちょっとEvernoteのダイエットをしようと思い立ち他のサービスを探していた私。 そんなおりに知った、スクリーンキャプチャ管理ができるChromeエクステンション、Clipularを使い始めてみたのでご紹介。 まずはChromeエクステンションをChromeストアよりダウンロードしましょう。 ツールバーにClipularのアイコンが追加されたらOKです。 エクステンションを使用するためにはまずログインから。 facebookかGoogle+アカウントでログインできます。しましょう。 使い方はいたって簡単。スクリーンショットを保存したいなと思ったサイトを開いたら、ツールバーにあるボタンをクリックしてカメラアイコン（全画面キャプチャ）かハサミのアイコン（範囲を指定
![[Webデザイン]サイトのスクリーンキャプチャ管理に「Clipular」を使い始めてみたけどいいですねこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a158e4e37120df962747bcc7271200cb74df2d3/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20130916-225456.jpg)
Webデザイナーになりたい全ての人が読むべき本「プロになるためのWebデザイン入門講座」
内容 Webデザインのプロを目指す方に、Photoshop、Illustratorを使った制作テクニックを解説します。第一線で働くプロの多くは、Photoshopを使用してWeb制作を行っています。本書は、Photoshopでいかに美しく、かつ制作効率を上げてWebデザインを作るかを重視した解説、実際に手を動かしながらの演習というスタイルを採っています。バナー制作による演習を経てから、Webサイトのデザインカンプ制作にステップアップ。制作物を実際にWebで表示できるよう、HTML/CSSコーディングの初歩まで学習できます。 via: Amazon.co.jp： プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド: 庄崎 大祐: 本 Fireworksが開発終了を発表した今、WebデザインはそのほとんどがAdove PhotoshopとI
abrAsusさんの新商品「旅行財布」レビュー｜かさばらないのに使いやすい！旅行にはこれだ！この財布なんだ！
はじめて訪れた海外旅行先でのショッピング。慣れない外貨でもスムーズに支払い、受け取りができる財布はないだろうか。そこで誕生したのがabrAsusの「旅行財布」。 財布を開けば、お札も小銭もカードも一目瞭然。 大きな「かぶせ」が周りの人の視界を遮り、財布の中身を覗かせません。セキュリティ効果の高いつくりになっています。 via: 旅行財布 abrAsus〜海外旅行先での安全性も考えた二つ折り革財布〜 アブラサス SUPER CLASSIC もはやおなじみの黒いシックな外箱。 そうだね。不織布だね。もういいね。 色はネイビーをチョイスいたしました。あとはチョコとキャメルがございますことよ:) 外装、内装、ステッチは、国旗に多く見られる三色旗がモチーフとなっており、ネイビーの場合は綺麗な赤色とのコントラストが目に鮮やか…。 ちなみにこのかぶせは財布の中身が対面から見えないような仕組みになってお
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「デートの断り方」まであるとは…！日本郵便公式サイトの「お手紙文例集」がすこぶる便利な件
