タグ

*web制作に関するkurimaのブックマーク (136)

  • Dreamweaverの便利なコマンドや拡張機能のまとめ

    コーディングをするときに自分が主に使ってるのがDreamweaverです。そのままでもいろいろ機能があって便利ですが、コマンドや拡張機能を入れることによってさらに便利に使うことができます。 そこでDreamweaverのコマンドや拡張機能で見つけたものをまとめてみました。他にもこんな便利なものがあるよなど教えてもらえるとうれしいです。 使い方は、コマンドの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows → C:\Program Files\Adobe\Dreamweaver CS5.5\ja_JP\Configuration\Commands Mac → ライブラリ\Application Support\Adobe\DreamweaverCS5\ja_jp\Configuration\Commands 拡張機能はダウンロード

    Dreamweaverの便利なコマンドや拡張機能のまとめ
  • Adobe® BrowserLab

    Adobe BrowserLab requires Adobe Flash Player version 10.0.0 or higher and Javascript enabled in your browser. Click the button below to download and install the latest version of Flash Player now Adobe BrowserLab An easier, faster solution for cross-browser testing Preview and test your webpages on leading browsers and operating systems - on demand. Adobe BrowserLab makes it easier and faster t

  • Web制作関連記事の復習メモ

    今年も色々と情報が発信されました。 後で試そう、とか後で見よう、と思った まま何もしていない自分がいたので ちょっと復習用にメモ。来年の勉強用です。 個人的なメモですが参考になれば幸い。 内容はWeb制作に関わる記事ですが、まとまりがありません。単なるメモなのでご了承いただければと思います。順不同。 JPEG画像をより美しく、より軽量に最適化するテクニック 理屈に沿った軽量法でした。これは癖を付けてナンボのテクニックですね。頭に叩き込んでおきたい。PNGも合わせて。 JPEG画像をより美しく、より軽量に最適化するテクニック とっても使えるoverflowプロパティ。その使い方色々。 凄く便利。こんなに役に立ってくれるプロパティだとは知りませんでした。これも覚えておくと便利そう。 とっても使えるoverflowプロパティ。その使い方色々。 商用無料で使える写真素材サイトまとめ2009年度初版

    Web制作関連記事の復習メモ
  • テストを自動化できるWeb開発の必携アプリ「Fake」 【増田( @maskin)】 | TechWave(テックウェーブ)

    1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNSLINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア(スペイン)の元日編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。 from metamix.com Webサイト内での特定の作業を繰り返すなど、ルーチン化できる作業を自動で処理してくれるMac OS X用アプリケーション「Fake」が米国時間の7月6日に登場した。 例えば、「URLをオープン」→「検索」→「結果の中から特

    テストを自動化できるWeb開発の必携アプリ「Fake」 【増田( @maskin)】 | TechWave(テックウェーブ)
  • UIデザイン / モックアップ作成に使える素材集 – creamu

    UIデザインやモックアップ作成のための素材を探している。 そんなときにおすすめなのが、『A UI Design and Prototyping Treasure Chest』。UIデザイン / モックアップ作成に使える素材集です。 テンプレートやアイコンなど、いろいろと揃っていますね。 Browser Templates For The Website / Web Application Designer デザインラフの確認に使える、SafariやIE、Firefoxのブラウザテンプレート。800x600px、1024x768px、1280x1024pxの3サイズがPSDで用意されていて、レイヤーに分かれているので使いやすそうです Vector Pack: Browser Screens and Website Elements こちらもSafariのテンプレート。aiとepsが入っていて

  • IE 6とIE 7のためのCSSハック16選(1/3) - @IT

    有限会社タグパンダ 喜安 亮介 2009/11/17 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部) Webブラウザ別CSSハック一覧表 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer(以下、IE) 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。 IE 6をハック(IE 6のみに効く、もしくはIE 6のみに効かないハック) IE 6のみに効くハック スタ

  • メール送信時の「mailto」で、件名と本文を自動で挿入する方法 フリーソフトの樹

    ホームページをお持ちの方はHTMLタグに「<a href="mailto:xxxx@xxxx">メール送信</a>」とすることで、OutlookExpress などのメールソフトを起動するリンクを作成できることはご存じの方も多いことでしょう。 最近では主に迷惑メール防止などの観点からホームページ上にはメールアドレスの記述や上記のようなHTMLタグを利用せずに、メール送信フォームなどを設けることが一般的になってきました。 しかし、「mailto」でのメール送信の仕組みは入力フォームなどを設けずに容易に設置できることから、迷惑メールのメールアドレスを収集するロボットなどに旋回されない会員サイトなどでは重宝しそうです。 そこで今回は「mailto:」で宛先の他、あらかじめメールの「件名」「文」を挿入する方法を紹介します。 【メール送信リンクの作成方法】 ●宛先のみ指定する方法 「mailto:

  • jqueryでウェブサイトをリッチにするプラグインまとめ « vanillate

    jqueryのプラグインのまとめです。jqueryはjavascriptベースのライブラリのようなもの。画像やメニューに動的な操作を与えたりすることが可能です。また、HTMLソースも複雑になりにくく、デザインをCSSで操作可能なものが多く、ウェブデザインをより魅力的にすることができます。 フェードしながらスライドするjQueryプラグイン デモ jQuery ListMenu Plugin デモ 大量のアイテムもすっきりとリストにできます。 Sliding login panel with jQuery  デモ ログインフォームもおしゃれに。常に表示しておく必要はないですよね。アニメーション付きでぶらさがってくるこんなプラグインはいかがですか。 create a better jQuery stylesheet switcher デモ スタイルシートをjqueryで切り替えるプ

  • 携帯サイト(html)の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α

    「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ

    kurima
    kurima 2009/11/02
    「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをや
  • IE 6で泣かないための、9つのCSSハック (1/3) - @IT

    有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部) 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE(Internet Explore)のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー

  • ホームページ制作(webデザイナーやプログラマーなど)関連見積り総合検索サイト

    web職人は、webデザイナーやプログラマーなどの登録・検索や、ホームページ制作に関するお問い合わせ・見積り依頼を行う総合検索サイトです。webデザイナーやプログラマーをお探しなら、ホームページ制作関連見積り総合検索サイトのweb職人にお任せください。ホームページ制作に携わる人材の検索、見積り依頼が可能です。

  • サイト設計時のワイヤーフレームをサクッと作って画像も生成できる「MockFlow」

    サイトのモックアップ作成ツールと言えば、身近なところでFirefoxアドオンのPencilなどもありますが、それよりもパーツひとつひとつがリアルに再現されているところが特徴。しかし日語が通らないところはとても残念。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! サイトのワイヤーフレームを作成し、画像でエクスポートできる「MockFlow」「MockFlow」は、ウェブサイト設計時のワイヤーフレームをサクッと作成して共有できるオンラインソフト 日語は通らないものの、Firefoxアドオンと違って、どのブラウザでも対応できるところが便利です。 ワイヤーフレームの作り方 ↑これがワイヤーフレーム作成のUI。右メニューからパーツをドラッグで持ってくるだけで配置できます。 ↑文字が入っている部分をダブ

    サイト設計時のワイヤーフレームをサクッと作って画像も生成できる「MockFlow」
    kurima
    kurima 2009/09/08
    サイトのモックアップ作成ツールと言えば、身近なところでFirefoxアドオンのPencilなどもありますが、それよりもパーツひとつひとつがリアルに再現されているところが特徴。しかし日本語が通らないところはとても残念。
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • わずか2.5KBでテーブルにソート機能を提供する「TinyTable」:phpspot開発日誌

    TinyTable JavaScript Table Sorter - 2.5KB - Web Development Blog わずか2.5KBでテーブルにソート機能を提供する「TinyTable」。 シンプルだけど次のようなかっこいいソート可能テーブルを実現できる軽量ライブラリが公開。 デモページ 各種変数の設定でカスタマイズも可能みたい。 CSSのクラス名の指定なんかが出来るようです。 var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; //header class name sorter.asc = "asc"; //ascending header class name sorter.desc = "desc"; //descending header class name sorter.even

  • CSSのみで画像に違和感なく注釈を入れるサンプル:phpspot開発日誌

    CSS Image Maps, Redux - Flickr-like Technique? CSSのみで画像に違和感なく注釈を入れるサンプルが紹介されています。 次のサンプルを見れば、その利便性が分かるはずです。(JavaScriptは使っていません) 画像内の枠線にカーソルを合わせると説明表示

  • CSSのem指定のサイズが一発でわかっちゃう「EmChart」:phpspot開発日誌

    EmChart | Aloe Studios Blog Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser.CSSem指定のサイズが一発でわかっちゃう「EmChart」 基のサイズが24ピクセルで、9px にしたい場合、0.375emにすればよい、というのが簡単に分かるようになっています。 これはなかなか便利そうですね。チャートのダウンロードも可能です。 関連エントリ サイト上でCSSによるフォントスタイルを確認できる便利ツール サイトに使用するフォントCSSを選ぶ際に役立つ「CSSTYPE」

  • Google ウェブマスター向けガイドライン

    SEO fundamentals Introduction Search Essentials SEO Starter Guide How Google Search Works Do you need an SEO? Crawling and indexing Sitemaps robots.txt Meta tags Crawler management Removals Canonicalization Redirects JavaScript SEO Ranking and search appearance Visual Elements gallery Title links Snippets Images Videos Structured data Favicons Site-specific guides Ecommerce International and multi

    Google ウェブマスター向けガイドライン
  • Yahoo!ファイナンスがデザインリニューアルでやっちまった | パシのSEOブログ

    Yahoo!ファイナンスの一部ページデザインがリニューアルされましたが、昨年末からの流れを汲み完全に広告&自社有料サービスへの誘導重視となっているようです。 各指標がグラフと一体化した状態で見られるのがヤフーファイナンスの良い所だったのに、なんとも見づらくなってしまいました。とりあえずそこに用語とかいらないから。 Yahoo!ファイナンスVIP倶楽部に入会させるために良い位置に板気配なんかを表示していますが、月々2000円も払ってヤフーファイナンスで板情報を確認する個人投資家なんて0.1%もいないのではないでしょうか? 戻すという決断力 旧デザインとの比較やリニューアル後の利用者の反応はYahoo!ファイナンスの歩き方で確認できます。 リニューアル後のコメントにはポジティブな意見はほとんど無く、要するにこういう事です。 元に戻してください ただそれだけです チャート表示期間の追加だけして、

    kurima
    kurima 2009/02/05
    他山の石。
  • 複雑なWebサイトデザインを容易に実現するテンプレート·YAML MOONGIFT

    なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。 整ったデザインが簡単に手に入るのはすばらしい! Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり、メニューを横並びにしつつ、次の要素では違う表示など、複雑になればなるほど放棄したくなってくる。それがFirefox/IE/Safariなどのブラウザにも対応するとなれば尚更だ。そこで登場するのがYAMLだ。 今回紹介するフリーウェアはYAML、複雑なマルチカラムデザインテンプレートだ。 YAMLでは多数のサンプルが用意されている。単純な2または3カラムを基として、グリッド化されてページの幅に応

    複雑なWebサイトデザインを容易に実現するテンプレート·YAML MOONGIFT
  • 「サイトの横幅」再論:950px時代のウェブデザイン[絵文録ことのは]2009/01/14

    以前、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論[絵文録ことのは]2006/11/25で、「実際にサイトを閲覧している人のブラウザーの横幅と、ブラウザーによる印刷上の制約から、特に画像は左端から640ピクセルくらいに収まるようにした方がよさそうだ」という結論に落ち着いた。これには、一行字数が多すぎると読みづらい、という、紙媒体の扱いも多いわたしの経験的な見方もある。 もちろん、これにはリキッドデザイン主義者の方から「ページ幅を指定するようなデザインであること自体が悪」という反応があったり、「印刷用CSSを使おう」といった反応があったりしたのだが、「印刷時のことを考えれば640pxという制約がある」という結論は特に揺るがなかった。 その後、今まで約2年経った。閲覧者の環境も変わり、当時主流だったIE6にはなかった「用紙サイズに合わせて印刷」機能を備えたIE7ユーザーも増