コーディングの際に役立つ AHK
愛用中の AHK ( AutoHotKey ) スクリプトで、コーディングに関するものをメモ。あるとないとでは、確実にコーディング速度が違う気がする。AHK GJ ! 内容：カラーピッカーと、HTML 実態参照変換。 [Ctrl] + [Alt] + [LClick] にカラーピッカー割り当て 元ネタ：AHK – 冬通りに消え行く制服ガールは、夢物語にリアルを求めない。 – subtech ホントこのカラーピッカーが便利。最高。 Ctrl ＋ Alt ＋ LClick でマウスカーソルの下の部分の色を取得できる。 元々の AHK では #000000 といった形でコピーされるようになっていたんですが、# がついてしまうとコーディングの時はいいけど Photoshop に色を入れるとき面倒なので、# はつかないようにして使ってます。 ;=-=-=-=-=-=-=-=-=-=-=-=-=-=-
コピペでOK！スムーススクロールでページ内リンクやトップへ移動！#なしで
記事が長い場合、目次やページ先頭「#」へのページ内リンクはとても便利です。しかもスムーズスクロールで移動すれば動きもわかりやすいし気持ち良い。今回はJavaScriptやjQueryのプラグインを使わずに実現する方法です。 最近は多くのブログ・サイトで右下に「ページ先頭へ」戻るボタンやリンクを見かけます。しかしクリックして一気に最上部までワープすると味気ないし自分の位置を見失いがちです。目次の場合も同様です。 ゆめぴょんです。こんちはっ(^^)/ ページ内リンクはSEO対策にもなると聞いたことがあります。しかし私はむしろ訪問者のためのナビゲーションの1つとして便利だと思っています。 ページ内部リンクのしくみと弊害 そのしくみはとても簡単です。現在のURLの後に「#」をつけるとページ先頭へ、「#pyon」などをつけると「id="pyon"」を設定してる位置へジャンプします。 だから見出しに「
動画や画像 サイトのURLをまとめてひとつのスライドショーにできる「slidestaxx」
スライドショーというと、複数の画像をスライドで紹介するものを思い浮かべるでしょう。あるいは、パワーポイントのプレゼン資料だったりするでしょうか。 どちらにせよ、画像をスライドにするというのがこれまでのスライドショーでしたが、今回は、そこに動画やウェブサイトも表示できるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! YouTube動画やウェブサイトもスライドにできる「slidestaxx」 「slidestaxx」は、画像だけでなく、動画やウェブサイト、Amazon.comのアフィリエイトなどもスライドショーに含められるサービス。 ウェブサイトはURLを追加すればプレビューのサムネイルを自動的にスライドショーへ表示してくれます。 サンプルスライドショー ↑スライドショーの上
wordpressのDBをpostgresを使ってインストールする方法 | デジタル料理人
当ブログも利用しているブログ/CMSツールのwordpressですが、利用環境がPHP + mysqlという環境でした。 まぁ確かにmysqlのほうが利用できるサーバーも多いですし・・・なんですが！一応postgresのほうをメインに触ってるし、ここはpostgresでインストールしてみたいな・・・ とおもったら、つい最近postgresでインストールできるようなプラグインを作った方が。。 wordpress.org – PostgreSQL for WordPress (PG4WP) BSDあれこれ – WordPress 2.8.2をPostgreSQL用のプラグインPG4WPで運用 使い方は結構簡単。BSDあれこれさんのほうで書かれているように、上のPG4WPをダウンロードして、wp-contentフォルダに展開するだけ。 すげー。中を見ると全部のSQL文をラッピングしている感じ
Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳
web制作で使えるWebサービスや、Webツールなどをご紹介。 小分けして紹介していた分もあわせてまとめています。定番の物からマニアックなものまでお楽しみください。 グラフィック・創作 10,000s Cool FREE Seamless Patterns-パターンファイルジェネレータ Web制作でもよく背景で利用するパターンファイルを作成する素晴らしいジェネレータ。様々な模様があり、色は決めれますので、組み合わせはほぼ無限です。 Pixlr Photo Editor-オンラインフォトエディタ 世界で最も人気とされるオンラインフォトエディタ。OSを選ばない。 photoshopに近いインターフェイスと、ブラウザさえあれば動くという使用が人気。ユーザー登録しなくても利用できる（したほうが便利）。 Vintage Effect-レトロ、ヴィンテージエフェクト 上のPixlr.comが運営するも
イラストやWeb制作に使えるフリー素材を紹介 | 9search
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ポスターなどで画像の縁がぼかしてあるのってどうやるのですか？
現在どのような手順で試していて上手くい出来ないのかわ かりませんので、同じ手順かもしれません。ｍ(＿＿)ｍ Pixiaで画像を開いた後、レイヤーを1枚追加します。 領域ツールを使用して、画像として残す部分を囲んで領域 を選択します。(円でも長方形でもどちらでも可) 「領域」→「領域の反転」と「領域」→「領域の外側をぼ かす」の2つの操作を実行します。(どちらが先でも大丈夫 です) 画像の外側に塗りたい色を選択した状態で塗りつぶしを実 行します。(画像を右クリックして、「塗りつぶし」また は「描画」→「塗りつぶし」) レイヤーを結合します。（「画像」→「レイヤの結合」を選択して、「透明色も結合する」にチェックを入れて「OK」） 回答No1の回答者さまからご紹介のあった「PictBear」の 後継バージョンの「PictBearSE」もお奨めです。 画像の縁をぼかす機能は、心なしかこちらのソフト
text-indentを使った画像置き換えはスパム判定の危険あり、“@font-face”の使用をGoogleは推奨 at SMX West 2011
今日のエントリもSMX West 2011のセッションからのレポートです。 text-indentによる画像置き換えの代替手段をGoogleが提示してくれました。 CSSのtext-indentで-999pxを指定し、文字テキストと画像を置き換えるテクニックは昔からあるごくありふれたテクニックです。 ところがGoogleは、現在この方法を推奨していません。 推奨していないというよりも使うべきでないと明言しています。 使ってもいいのか悪いのかは以前はGoogle社員によって答えがマチマチでした。 しかしここ1年ほどは画像置き換えに対するGoogleのスタンスは一貫して“NG”です。 今回のSMXでも、GoogleのMaile Ohye(マイリー・オイェ)さんが使用すべきでないことをあらためてクリアにしました。 理由は、画像置き換えはスパマーがよく使う手法だからです。 画像置き換えがすぐさまス
[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集
CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング
サイト作成に欠かせないサイトやサービスなどを20個｜Webpark
私がサイトを作る際によくお世話になっているサイトやサービス、フリーソフトを紹介します。個人的に見ているものだけなのでまだまだあると思いますが、ご参考になればうれしいです。 週間ウェブデザイン 次の「あんじょうできてはる」が更新停止になっているのでこちらを。1ページあたりの表示数が多いので探しやすいですね。 あんじょうできてはる Webデザインのギャラリーはたくさんありますが、見やすさ探しやすさでこちらをよく見ます。更新は止まっちゃってますが。。 MephoBox ヘッダーやフッターなど部分的なものにこだわった海外のギャラリーです。404やナビゲーションなんかもあり参考になります。 ロゴストック 日本を中心にかなりの数のロゴが集められています。管理人さんや訪問者の評価も見ることができて参考になります。 フリーの素材集です。「ロイヤリティフリーなフリーフォト、無料写真素材サイトのまとめ」もご参
PNGの画質を劣化せず極限までファイルサイズを落とす、たった1つの方法 | フリーソフトラボ.com
ウェブ上で使用される画像ファイルのフォーマットには、主にJPEG、GIF、PNGという3種類の圧縮形式があり、この中で可逆圧縮かつフルカラー、つまり元画像の画質を見た目上一切劣化させることなくファイルサイズを縮小できるのがPNGですが、欠点は高画質な分ファイルサイズが大きくなってしまいがちなこと。 このため、フルカラーのPNGをウェブ上で使用する場合は専用ツール（有名なものではAzConvPNGなど）を使用してファイルサイズの最適化を行い、画質を劣化せずにできる限りサイズを落とした上でサーバーにアップロードされることがよくありますが、それでも削減できるファイルサイズは良くて1割といったところでしょう。 実は、一般にはほとんど知られていませんが、この他にもフルカラーPNGを画質劣化なしに、さらに大幅にファイルサイズを削減できる裏技的な方法が存在します。やり方は少し面倒ですが、うまく使えば非常
私（Webデザイナー）が効率よく仕事するためにしているコーディング術や検索術
みなさんも仕事の効率化、時間短縮のためにしていることってありますよね？ 私ももちろんいろんな工夫をしているのですが、もっと効率よく仕事がしたいって思っています。 とりあえず、今、時間短縮の為に私がしていることをまとめてみました。 私は毎日 Webサイトを作るために、Photoshop を使ったり、コーディングしたり、調べものをしたり … とにかくいろんな作業をしています。そんな中、もっと時間短縮できないかなー、これって時間の無駄だなーと思うこともたくさんあります。1日は 24時間しかないし、決められた 24時間の中で自分の時間を作るためには、仕事の時間を圧縮するしかありません … X( できるだけ無駄をなくして、早く仕事が終われるように、時間短縮術をマスターしたいと思ってます。コーディングを早くできるようにしたりするものはもちろん、欲しい情報に素早くアクセスできるような工夫など、今私が時間
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
Web開発にお役立ちなチートシート集 | TRIVIAL TECHNOLOGIES on CLOUD
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー All The Cheat Sheets That A Web Developer Needsという記事を先日見つけて，割と知らないものが多く，また便利だったのでご紹介:-)。英文のチートシートだけど，仕様を短くまとめてあるチートシートは日本人のWeb開発者も便利に使えるはず。 HTML HTML/XTML in one page HTML5: The Evolution of Web Standards by James Sugrue (X)HTML Elements and Attributes Doctype Declarations (DTDs) XHTML Character
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI
concrete5
http://designaholic.cc/2011/03/webweb21.html
http://e0166nt.com/blog-entry-862.html
フォーム関連要素（2） HTML5でinput要素に追加された新しいタイプ13連発
http://essaysinidleness.net/www/sitereview/textmate%E3%81%AEwindows%E7%89%88%E3%81%A8%E3%82%82%E8%A8%80%E3%81%88%E3%82%8Bintype%E3%81%8C%E4%BE%BF%E5%88%A9%E3%81%99%E3%81%8E%E3%82%8B%E4%BB%B6.html