前に同じタスクランナーのGruntを導入してみましたが、gulpというのも結構話題に見るのでこちらも導入し試してみました。 エラーがでてインストールできない人は、ページの下の方に自分がとった解決策が書いてあります。 gulpとは gulpとはnode.jsを使ったタスクランナーです。機能的にはGruntと一緒です。設定を記すgulpfile.jsの書き方が少し違うのと、処理スピードがGruntより速いようです。 公式サイトはこちらから gulp.js – the streaming build system インストール 基本的なインストール方法はGruntと一緒です。 こちらのコマンドをコマンドプロンプトに入力します。 npm install -g gulp 次にそのプロジェクトフォルダの階層まで移動します。 cd 階層へのパス ここで試しにgulpのバージョンを確認してみます。 gul

ウェブサイトを閲覧するユーザーの環境は多岐に渡ります。したがって、ウェブ制作者は多くの環境の動作確認をしなければなりません。その時の手間を大きく省いてくれるBrowsersyncというツールを紹介します。 Browsersyncとはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。ローカルサーバーも起動できたり、複数のブラウザで操作の同期が可能といった便利機能も満載です。 Browsersyncのデモ動画 Browsersyncのデモ動画を紹介します。デスクトップブラウザとスマートフォン（iPhone）のブラウザが同期しており、ファイルの編集後に自動リロードしています。CSSでハリネズミを走らせるアニメーションです。HTMLやCSSのファイル編集がリアルタイムに反映されていることがわかります。 Browsersyncは何を便利にしてくれるのか ファイルの編集後に複数ブラ

ヘッダ、フッタ、ナビゲーション、見出しなど、Webページでよく使う各コンポーネントやエレメントごとに国内・海外の素晴らしいデザインを集めているギャラリーサイトを紹介します。 眺めているだけで、さまざまなインスピレーションをもらうことができます！ ヘッダのデザイン フッタのデザイン ナビゲーションのデザイン 見出しのデザイン いろいろなパーツのデザイン ヘッダのデザイン

現状あるサイトのページ一覧を取得したいとき、どのようにしていますか？手元にファイルがある場合はコマンドなどで取得可能ですが、CMSなど動的なコンテンツが組み込まれている場合、どうすればよいでしょうか。wget や W3C Link Checker などさまざまなソフトがありますが、ページ一覧だけが欲しいという時に限ってはいまいち使い勝手がよくありません。 そこで、URLを入力するとそのページの同ドメイン以下のリンク一覧を取得するプログラムを開発しましたのでシェアします。たとえば、URLに「http://shinobu.tumblr.com/」と入力して、「Get」ボタンを押してみてください。 http://tshinobu.com/lab/get-page-link/ Depthに1以上を設定すると、同ドメイン以下のリンクをたどって更にリンク一覧を取得します。これを繰り返すことによって、同

Webサイトの作成・運用に必要な機能を低価格で。 デザインやプログラミングの知識不要で、どなたでもカンタンにお使いいただけます。

ボーナスが高い職種ランキング2025！ 年間ボーナス平均額は「120.7万円」に急上昇【パーソルキャリア調べ】 11月17日 8:00 「推しアーティストランキング2025」発表！ 男性部門はSnow Man、女性部門はME:Iが1位に【エクシング調べ】 11月11日 8:00

PVが見られないサイトの情報を可視化するサイト『SimilarWeb』の紹介です。こちらのサイトでは、知らないサイトのPVや流入元などを大雑把ですが、可視化することが可能です。 以前までだったらGoogle Adplannerなどを使っていましたが、このSimilar Webというサイトは、精度が高い気がします。 Alexaは、データがイマイチな気がするので使ってません。 自分のサイトノデータを出してみたのですが、Google アナリティクスのデータに非常に近いデータが表示されました。 http://www.similarweb.com/website/attrip.jp 公式のサイトのTwitterからお礼のつぶやきが来た。@attrip 感謝 — SimilarWebさん (@SimilarWeb) 2013年6月12日

Home Blog Web Design The Secret to Building Large Websites: Website Architecture The Secret to Building Large Websites: Website Architecture Abbey is a digital marketer, copywriter, and lead editor. She has worked on over 200 client campaigns and WebFX, and she specializes in marketing strategy analysis and industry-specific digital marketing plans. Outside of writing and editing, you’ll likely fi

Loaded

18 Comments Nice post, I like more “UI Wireframe Sketches” when designers do work on paper and after created on computer. Thank you for sharing these inspirational clean websites. I totally agree that a clean website uses just the necessary design elements to get its point across and naturally attracts the website visitors eye to the most important area(s) on screen. The examples you provide perfe

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ワイヤーフレームを手軽に作れる、 というWebサービス。ユーザー登録 も不要です。URLが発行されるので 教えるのも丁度いいかも。ただ、 凄く高機能、というものではない のでイメージを伝える、みたいな 用途になりそうです。 個人的には軽量でユーザー登録不要、直感で作成出来る点、URLが発行される、という点が気に入りました。

One of the latest major trends across the web industry is the increase in responsive web design – where websites were designed to respond to the size of the browser and change their layout accordingly. Responsive design requires designers to write code that inspects the physical characters of whatever device is displaying the content, using things like media queries. This gives users across differ

What happened? The web server reported a bad gateway error.

Tools 13 Super Useful UI Wireframe Tools Gisele MullerOctober 9, 20127 Comments06.2k When you begin to work on a project, it’s always important to begin creating your ideas as a wireframe. It is the step you take to put your ideas in action to see if what you have in mind will work properly. We recently posted an article showcasing Inspiring UI Wireframe Sketches and we received some inquiries abo

レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ（Responsive）は、「よく反応して」「敏感な」という意味があるようです。 レスポンシブWebデザインを確認するには、複数のデバイスを用いるか、極端な話、PCでブラウザの幅を変更すればいいのですが、Firefoxの「レスポンシブデザインビュー」を利用すれば、より効率的に確認作業が行えます。 ２．「レスポンシブデザインビュー」の使い方 レスポンシブWebデザインのサンプルサイトとして「NHKスタジオパーク」を利用させて頂きます。 N