タグ

Web制作とこれはすごいに関するyoshi_zoのブックマーク (14)

  • Web ブラウザに表示されている画面を直接編集する方法

    これはすごい。Web ブラウザのアドレスバーに以下を入力し Enter すると、 今表示されている内容を直接編集できる。Firefox 3.0.14 と IE8 で出来 ることを確認した。 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 WEBブラウザーに表示されている画面を直接編集する方法 - sanonosa システム管理コラム集 追記(2009-10-04): 戻す方法はないものかなあ。‘false’ と ‘off’ では出来なかった。 追記(2009-10-17): 「戻す方法」というのは、「編集モードから閲覧モードに戻す方法」のこ とです。端折った書き方ですみませんでした。もう少し楽な方法が見つかっ たので、以下に追記します。 IE では、以下を入力し Enter

    Web ブラウザに表示されている画面を直接編集する方法
  • これ以上ないというぐらいに詳しい「動画の作り方」まとめ|blogs.com

    はてブ これ以上ないというぐらいに詳しい「動画の作り方」まとめ delicious livedoor クリップ Tumblr Instapaper メールで送信 IT・Web 2009.10.15 0 ニコニコ動画やYouTubeを中心に動画全盛期を迎えている今、見るだけでなく自分でも実際に動画を作ってみたい――そう思っている方も多いのではないかと思います。 「でもそんな知識はないし......」 「そもそもどこで作り方を学べばいいのかわからない」 そんな風に悩んでいるあなたのために、これ以上ないというぐらいに詳しい動画の作り方マニュアルが、「酔拳の王 だんげの方」でまとめられていました。 こういった実際の画面のキャプチャ画像付きで、クリックする場所の一つ一つまで丁寧に解説してくれるので、どんな初心者でも問題なく動画制作ができるようになるはず。 記事は2年前以上前のものですが、動画制作の

  • 国内の商用利用可能なWeb制作に使えるフリー素材配布サイトまとめ - かちびと.net

    Webデザインってあまりトレンド というのは無いような気がします。なんと言うか 見易さとか実用性メインでデザインは結構 シンプルだったりしますし、日人に合ってる のかもしれないですね。そんな訳で日人の 感性で作られた商用利用もOKの国内の Web素材配布サイトをまとめてメモしておきます。 僕自身がいいと思ったサイトを厳選してご紹介します。順不同。 サイトごとに利用規約が若干違うので重要な部分はメモしますが、ご利用の際は必ずご自身の目で利用規約ページをご確認下さい。問題が起きても当方は責任負いかねます。利用規約ページがある場合はそのページにもリンクを貼っておきます。 デザイン素材.com アイコンがメインでファイルはPNG。ネットショップ素材が中心で使いやすいデザインが沢山あります。 加工、商用OK、印刷物、ソフトウェアでも可能、Webデザイナーも利用可能。再配布、2次配布は不可。

  • 実用的なユーザビリティの10のポイント:ガイドライン編 | コリス

    ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント(ガイドライン編)をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか? 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.

  • 商用可!5000を超えるシルエットベクターデータ配布サイト「All Silhouettes」

    TOP  >  Design , vector  >  商用可!5000を超えるシルエットベクターデータ配布サイト「All Silhouettes」 様々なデザインシーンに使えるシルエット素材。単純で、曖昧なので、どんなデザインにも合わせる事ができますし、背景だったりアクセントだったり使い勝手も非常に良い素材の一つですが、今回紹介するのはそんなシルエット素材を集めたWEBサイト「All Silhouettes」です。 全部で5000を超えるシルエットが88にも及ぶパックで公開されています。種類は様々で、動物から人間、機械、矢印と様々なシーンのシルエットが公開されています。 詳しくは以下 上記は今最も人気のシルエット素材。人物のシルエットがやはり人気が高いみたいですね。デザイナーだけでなく、企画書を書いている方にも良い素材なのでは無いでしょうか!? ライセンスは「You are free t

    商用可!5000を超えるシルエットベクターデータ配布サイト「All Silhouettes」
  • レンタルサーバー完全ガイド | 共用・専用・VPSホスティングを比較検索

    インプレスR&Dが運営。激安・格安サーバーから高機能サービスまで国内サーバーホスティング1600件以上からレンタルサーバーを比較・検索お詫びと訂正 8月30日発売『レンタルサーバー完全ガイドVol.14』の「レンタルサーバーニュース Pick Up」において掲載内容に誤りがございましたのでお知らせいたします。 32ページ下段左「サイバートラスト、年次分割購入可能な有効期限3年のサーバー証明書を発売」におきまして、証明書の名称を「SuperServer3年割」としておりますが、正しくは「SureServer3年割」です。ご迷惑をおかけした読者の皆様ならびに関係各位には深くお詫び申し上げます。 >> 続きを読む

  • WEBデザイナーはヘビーユース間違い無しのカラーパレットジェネレーター「Color Scheme Designer」 | ライフハッカー・ジャパン

    今まで色々とWEBベースのカラーパレットジェネレーターを使ってみたけど、どれもいまいちピンと来なかったという人は、何も言わずに「Color Scheme Designer 」を試してみてください。特にWEBデザイナーにとっては、かなり使える機能が満載です。 一見、何の変哲もない普通のカラーパレットジェネレーターに見えますよね。でも、ちょっといじってみれば、そんじょそこらのジェネレーターとは全然違うのが分かります。 まず、画面左でパレットのキーカラーとなる色を選びます。選んだキーカラーを元に、6つのモードでカラーパレットを作成します。モードは左から「mono=同系色」「complement=補色」「triad=三色組」「tetrad=四色組」「analogic=類似色」「accented analogic=補色+類似色」となっています。 百聞は一見に如かずですので、まずは試してみてください。

    WEBデザイナーはヘビーユース間違い無しのカラーパレットジェネレーター「Color Scheme Designer」 | ライフハッカー・ジャパン
  • 【配色 - デザイン ★★★★★】 - Color Scheme Designer 3

    Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty

  • ブラウザを選ばずWebテストを自動化するSelenium

    Webアプリケーションのファンクションテストを行うツールとして注目されている「Selenium」のバージョン1.0が6月20日にリリースされました。安定性が向上するとともに、Firefox 3.0、3.5(Selenium IDEは1.0.2から、Firefox 3.5に対応)や、Internat Explorer(以下、IE) 8などの最新のWebブラウザにも対応しました。 稿では、Selenium 1.0をベースとしたSelenium IDEとSelenium RCを利用した効果的なSeleniumの利用方法を紹介します。 Webアプリのテストで誰もがイラつく大きな課題 Webアプリケーションテストを手で行うと、非常に煩雑です。Selenium登場以前の従来のやり方では、次のような問題がありました。 回帰テストに時間がかかる バグ修正や仕様変更などで、Webアプリケーションを変更した

    ブラウザを選ばずWebテストを自動化するSelenium
  • 【全部無料】 Web制作に役立つオンラインサービスやツール300+ - かちびと.net

    Web制作に使えるWebサービスやツールなどが様々なサイトでかなり 紹介されています。便利なものですが、多すぎて混乱するので、 備忘録的にローカルサーバーに入れたWPでリンク集を作っていました。 そろそろ数が落ち着いて来たので多くの方とシェアしたいと思い、公開してみます。 現在330ありますが、追加していく可能性があります。 リンク集は全て無料で使える事を条件に集めていました。英語が苦手な方もいらっしゃいますのでTwitterサービスのまとめ同様、日語で使い方などを説明してくれているサイトにリンクしています。無い場合は海外サイトにリンクしていますが、その場合はアメリカの国旗をつけてあります。サイトがアメリカのものかは知りませぬ。分かりゃいいんだ、分かりゃ。 無料といえどもライセンスの縛りもありますので自己責任でご利用下さい。 使えるかどうかは個人差が生じますので何とも言えませんが、お役に

  • マウスオーバーをデザインする | DesignWalker

    マウスオーバーをデザインする | DesignWalker
  • 拡大しても画像をキレイに保ってくれる『SmillaEnlarger』 | ライフハッカー・ジャパン

    写真データを拡大すると、どうしても画像が粗くなってしまいます。特に、解像度が低い画像を拡大し過ぎると、昔のテレビゲームのドット絵みたいになりますよね。そんな時は、画像を拡大してもエッジを滑らかに見せてくれる『SmillaEnlarger』がオススメです。 『SmillaEnlarge』rは、拡大した時にギザギザになってしまう部分を人工的に補完して、拡大しても画像のイメージをそのままに、それっぽい感じで表示してくれるのです。 画像の拡大したい部分を選択ボックスで囲んだら、あとはズームスライダを使ってどれくらい拡大するかを決めるだけです。選択部分には、シャープやディザ加工やノイズなど、様々な画像補正をすることもできます。補正適用後の状態はプレビュー画面で随時確認できますので、ためらわず直感でどんどん補正してみましょう。おかしなことになったら、また元に戻せばいいのです。 補正し終わったら「Cal

    拡大しても画像をキレイに保ってくれる『SmillaEnlarger』 | ライフハッカー・ジャパン
  • これは絶対覚えておいた方がよいシルエットの素材集:phpspot開発日誌

    これは絶対覚えておいた方がよいシルエットの素材集。 85サイトのフリーかつハイクオリティなシルエット素材集が物凄い勢いでまとまっています。 覚えておくと色々な場面で使えることは間違いなさそう。 人型だけじゃなくて、動物や昆虫・植物などそろってます。 リンク先は以下のURLから参照してください 85 Free High Quality Silhouette Sets | Graphics

  • 続:PNG画像をより美しく、より軽量に最適化するテクニック | コリス

    上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。 グレースケールモード:[イメージ]-[モード]-[グレースケール] 2. 色数はより少なく 画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。 この方法は256色限定で、カラーを最適化できます。 半透明の画像からイメージ箇所のみを抽出し(半透明は削除)、インデックスカラーに変換しマスクを適用します。 詳しい手順は下記の通り。 画像を開き、[イメージ]-[複製]で画像を複製します。 複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。 ※「PhotoWiz」はRemove Transparencyを参照ください。 [イメージ]-[モード]-[インデックスカラー]を選択し、イン

  • 1