サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは本日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。
スライダー、タブ、ページネーション、ツールチップなど、ウェブページでよく使用するコンテンツをシンプルにより少ないコードで実装できるよう開発されたjQueryのプラグインを紹介します。 vanity jquery toolset [ad#ad-2] vanityは7種類のツールがあり、それぞれ8kbと超軽量のスクリプトとなっています。 機能はシンプルで、より少ないコードで簡単に実装できるように設計されています。 以下、7つのツールとそのコードを紹介します。 ※外部ファイル・スタイルシートは省略 スライダーのデモページ div要素やリスト要素で実装するスライダーです、スライドのエフェクトやスピードも調整できます。 HTML <!-- the slider content holder --> <div class="slider"> <!-- the elements inside the s
AIデータからPDFファイルをつくるとき、容量を落とすために、色々と設定をいじったりして格闘していませんか。 簡単に容量を落とせる方法があったなと思い出したのでエントリです。 PDFで保存するとき、Adobe PDF プリセット(A): から「最小ファイルサイズ」を選ぶだけ。 すると自動的にオプションを「Web表示用に最適化」のみにしてくれたり 圧縮で画像をダウンサンプルしてくれます。 もちろんきちんときれいに容量を落とすには、細かい調整が必要だと思いますが、個人的には確認用やWeb用には十分だと感じているので、いつもこの方法でPDFを作成しています。 お手軽につかえて時間短縮にもなるので、もし知らなかった方がいましたら、お役に立てば幸いです。
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
Webページ上でカーソル位置やクリックされた位置によって ポップアップを出したりモーダル位置を調整したりツールチップを出したり いろいろと処理を加えることがあると思います。 そんな際のページ上のポイント位置の座標(X座標/Y座標)を取得して 位置を調整する処理方法を簡単に紹介してみたいと思います。 jQueryでページ上の座標(X座標/Y座標)を取得する方法【ページ全体の場合】 ページ上のX座標・Y座標を取得するには —————————– X座標 = e.pageX Y座標 = e.pageY —————————– を使って値を取得することができます。 各座標の値を取得するサンプルとして ページ上のクリックされた位置のX座標/Y座標を取得してみると。 ページ上のクリックされたポイントのX座標/Y座標を取得(別枠で表示されます)※別枠で表示される画面内をクリックしてみてください。 クリックさ
2013年3月25日 Photoshop 暗い場所や室内で取った写真はノイズが入りやすいですよね。画像を補正する際、意外とやっかいだったりします。Photoshopには「ノイズを軽減」機能もありますが、なんだかあまり変化がなかったり…。そんなノイズを簡単に軽減する方法をいくつか紹介します。ビフォー・アフターの差にびっくりしちゃうと思いますよ! ↑私が10年以上利用している会計ソフト! Neat Image Neat Imageは画像のノイズ除去を自動で行なってくれるソフトです。Windows、Mac、Linuxで利用でき、Photoshop用のプラグインも使うことができます。無料版と有料版があり、無料版では大きなサイズと商用利用は不可です。今回は無料版を試してみました!
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います!以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています! ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
属性セレクタを使って、デバッグ用に空のリンクを目立たせたり、外部リンクのみアイコンをつけたり、head内のscriptやstyleのデータを明示するなど、ちょっと面白いスタイルシートのテクニックを紹介します。 The amazing powers of CSS [ad#ad-2] 空のリンクを目立たせる 外部リンクを目立たせる 外部リンクのみアイコンを付与する PNG画像を裏返しにする head内の要素を可視化 デモ表示に使用している「Jsfiddle」はResultのタブをクリックすると結果が表示されます。 対応ブラウザはモダンブラウザで、一部Webkit系(Chrome, Safari)のみです。 空のリンクを目立たせる 空のリンクのみ背景:レッド、カラー:ホワイト、サイズ:大で、目立たせます。 外部リンクを目立たせる httpで始まる外部リンクのみ180度回転させます。 ※回転はWe
商用でも無料で利用できる、ざらっとした布地のテクスチャ素材を紹介します。 Free Stained Canvas Backgrounds [ad#ad-2] ダウンロードできる素材は全部で12種類あり
Thunderbirdで返信メールのスレッドを切る方法を紹介します。 この方法は、大人数にメールを送信したいけど、MLを作ったりThunderbirdのアドレス帳を作るほどではない、ワンポイント的なメール送信の場合に威力を発揮します。 1.利用シーンと問題点 文章だけではうまく説明できないので、下の図を使って説明します。 ある日、Fさんが友人のA~Eさん宛にメール「用件A」を送信しました。 別の日に、AさんがB~Fさん宛に別のメール「用件B」を送信しようとしていました。 Aさんは、送信先にB~Fさんのメールアドレスを入力するのが面倒なので、以前送られたFさんのメールに返信すれば、アドレスを入力する手間が省けると思いました。 ただし、この方法ではFさんのメールと同じスレッドに含まれてしまいます(下)。 Aさんとしてはできれば元メールと別スレッド(=新しいメール)になるようにしたいのですが、ど
As an old saying, “less is more” has applied to website design. It is so trendy that minimal websites earn higher popularity and loyalty as well. You can count all their elements by fingers but cannot deny that they are pretty awesome. It is crowned as “minimalism” which emphasizes on clean, easy and light design. Designers for minimal websites are the greatest person in the world. It sounds clich
多様化するwebサイト、増加するデバイスに適応していくために今までのWeb制作のワークフローも見直す必要があるのではないでしょうか。またその一つの手法としてDesigning in Browserについて書きました。 現在ではWebサイトも、インタラクティブなサイト、アプリのようなサイト、可変するサイトなど様々なスタイルが見られるようになってます。 また、Webを閲覧できる環境もPCからスマートフォン、タブレット、テレビ、カーナビなど増加し続けてます。 それに伴い今まで以上にテストケースが増えてきてます。 今までのような静的なデザインを作ってから開発、テストというWeb制作のワークフローでこの変化の流れに対応できてるのでしょうか。 まず静的なデザインはあくまでこのように見えるという仮説であり、 解像度やスクリーンサイズが異なれば見え方も変わってきます。 更にどのように動くのかまでは表現でき
最近リリースされたものを中心に、高品質なフリーのデザインフォント・タイプフェイスを紹介します。 Bariol Regular 個人・商用利用無料。 Foobar Pro Regular 個人・商用利用
お絵かき感覚で、ピクセルベースのパターンを作成できるオンラインサービス -Generate Pattern
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く