[B! technique] sstのブックマーク

sst id:sst

techniqueに関するsstのブックマーク (213)

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

technique

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

technique

tool
リンク
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
sst 2011/12/18
photo

technique
リンク
暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]
2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より﹁みんなで作る暮らしのレシピ﹂という考えのもと、ユーザーの皆さまに生活に関する様々な﹁ハウツー﹂を投稿していただく投稿型ハウツーサービスとして運営してまいりました。約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。長きに渡りnanapiを応援してくださり、本当にありがとうございました。
sst 2010/11/13
photo

technique

summary
リンク
metaタグを追加してFacebookに対応する方法とハマりやすいポイント
Facebook使ってますか？こんにちわ、ME課の渕上です。ミーハーなぼくはもうすっかりFacebook中毒です。 Facebookといえば、﹁いいね！﹂や﹁シェア﹂といった仕組みで、面白いものを友達に共有できる仕組みが特徴的です。この仕組をうまく使えば、プロモーションやキャンペーンに有効活用できそうですね。今回は、いつものhtmlに一手間加えて﹁いいね！﹂や﹁シェア﹂で効果的に露出できるような方法をまとめてみたいと思います。それでは続きからどうぞ！﹁いいね！﹂﹁シェア﹂をするとFacebook上に何がどう表示されるのか﹁いいね！﹂や﹁シェア﹂をすると自分の掲示板やニュースフィードにアクティビティが表示されます。自分の掲示板﹁いいね！﹂したものは﹁最近のアクティビティ﹂という項目にまとめられて表示されます。よくよく見てみると、記事のタイトルだけのものと、サイト名が入って
sst 2010/10/27
facebook

web

html

technique
リンク
DESIGNプロセスの高速動画10本立て – TechDoll.
デザインプロセスを超高速動画で見せてくれる動画をまとめた記事を発見したのでご紹介。ご紹介も何も、実際の動画を見て！って感じなのですが、サイトのデザインからロゴデザインまで10本立てです。ここではピックアップした動画をご紹介しますが、残りはMashableでどうぞ。 ■ロゴデザイン︵by Mason Roberts︶スケッチからツールを使ったロゴの完成まで ■サイトのデザイン　HTML5で作られたサイトの完成まで
sst 2010/10/12
design

web

technique

summary
リンク
KPIづくり実践術徹底解説（1） - ゴールが明確でないサイトでも大丈夫! | 実践編 | Web担当者Forum
sst 2010/05/12
スピードメーターとガソリン警告灯は、典型的な「インジケーター」。ただ状態を示すだけでなく、行動を喚起する。

web

analysis

technique
リンク
ITエンジニアに送る「はじめての時間管理術」
仕事をする際、基本となる﹁時間管理﹂。しかし、﹁自分には向かない﹂﹁スケジュールどおりにいかないから面倒くさい﹂と思っている人はいないだろうか？しかし、時間管理とは、実に﹁簡単﹂で﹁フレキシブル﹂なものなのだ。時間管理術のプロが、すぐに始められる﹁時間管理術﹂を紹介する。納期の前日に﹁バタバタ﹂と慌てて仕事を片付ける……。あなたはそんな﹁バタ男﹂︵もしくはバタ子︶になっていないだろうか？バタバタしたいわけでは決してない。なのに、いつもバタバタしてしまう。だとしたら﹁タイムマネジメント﹂︵時間管理︶を試してみてはいかがだろうか。タイムマネジメントとは、文字どおり﹁時間をどう使うか﹂を考えて行動することだ。つまり、﹁事前に時間の使い方を計画して行動すること﹂である。このタイムマネジメント次第で﹁バタ男﹂状態は大きく改善できる。﹁計画どおり？無理むり﹂――タイムマネジメントにまつわる
sst 2010/01/28
management

technique
リンク
[CSS]主要ブラウザの特定ブラウザのみに有効なCSSハック集
Internet Explorer、Firefox、Safari、Chrome、Operaなど主要ブラウザの中の特定ブラウザのみに有効なCSSハックをbradKELLETTから紹介します。 Documenting the Hacks: CSS Browser Targeting CSSハックは使用しないに越したことはありませんが、必要がある場合には最小限簡潔に記述しておくようにします。各ブラウザの新しいバージョンがリリースされた際、これらのハックが無意味なものになることも念頭においてください。 Internet Explorer 6 IE6のみに適用します。 <textarea name="code" class="css" cols="60" rows="5"> #selector { _property: value; } </textarea>
sst 2010/01/28
css

IE

firefox

safari

technique

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

summary

design
リンク
「Fireworks」で絞り込み　バシャログ。
結果の表示ができません: <MTInclude>タグでエラーが発生しました: 読み込むファイル「inc/header.php」が見つかりません
sst 2009/07/24
design

technique

summary
リンク
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
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.
sst 2009/06/08
css

technique

design
リンク
CSS Nite in Ginza, Vol.35フォローアップ（2）鷹野のセッション｜CSS Nite公式サイト
CSSNite in Ginza, Vol.35フォローアップ︵2︶鷹野のセッション記事公開日‥2009年5月25日︵月︶ 2009年5月21日にアップルストア銀座で開催したCSSNite in Ginza, Vol.35﹃私がPhotoshopじゃなくてFireworksを使う17の理由﹄／鷹野雅弘︵スイッチ︶のフォローアップです。なお、配布資料は会場で配布したものをリファインしています。配付資料︵PDF、2ページ、0.7MB︶音声︵MP3、52:58、15.16MB︶ムービー︵FLV︶デモデータ︵16.12MB︶確かに少し重めのFireworksですが、今回、同時に裏でアプリケーションを走らせて録画していたために、かなり重くなってしまっていたため、デモがスムーズにいかない点があり、残念です。︵その分、ぜひムービーをご利用ください︶また、じっくりご紹介できる機会があれば
sst 2009/05/28
design

technique

summary

presentation
リンク
「脳の右側で描け」の合理性/人は統合（編集）作業に創作感をおぼえる - モノーキー
◆まとめ絵を描くというのは、岡持ちを手に持って口笛を吹きながら一輪車をこぐようなものだ。だから、見たものを見たまま書く練習として、最初から実物をデッサンさせたり人体の内部のデッサンとか練習させても、才能がなきゃ上達しない。だって、最初から﹃岡持ちをもって﹄﹃口笛吹きながら﹄﹃一輪車をこぐ﹄という三つの作業を同時にさせようとするから。この絵を描くという複合作業の要素を分解して、一つ一つ鍛えるのが﹁脳の右側で描け﹂のコンセプトなのかなと思った。って話。絵が複数の情報を統合する作業であるように、人は情報の統合と峻別によって創作感をおぼえる。自分の趣味や部屋のインテリアや、自分で︵情報を調節して︶エンコしたアニメ画像なんかに創作感をおぼえるのも、複数の素材を自分なりに頭を使って統合したからなのかもしれない。関連‥﹁脳の右側で描け﹂のワークショップで自画像を描いたよ‥
sst 2009/05/28
art

design

technique
リンク
WCAN x CSS Nite 2009 SPRING レポート – VERSIONFIVE
先週末にWCAN x CSSNite 2009 SPRINGがありました。今回はCSSNiteとの共催セミナーということでセッション数も多めです。テクニックから仕事効率化、ブランディングまで幅広いレイヤーのお話を聴くことができました。毎度のごとく名古屋国際会議場で。今回も過去最多の200名超の参加があったらしいです。前回が160名程度といことでしたので、どんどん大規模になっていってますね。 [SESSION-1] CSS3＋jQueryで行こう！ [SESSION-2] CSSレイアウト‥IE 6対応のかんどころ Lightning Talks [SESSION-3] デザインビュー派？コードビュー派？ Dreamweaverでのコーディング再点検 [SESSION-4] ブランディングの正体懇親会関連記事 [SESSION-1] CSS3＋jQueryで行こう！益子貴寛　
sst 2009/04/22
IE6対応「6つのド定番」/ブランディングの正体//MI(Mind Identity) /BI(Behavior Identity) /VI(Visual Identity) //ドメイン/コアコンセプト/バリュープロミス/ステートメント/デザインコンセプト/ロゴ

css

IE

technique
リンク
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun WithCSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
sst 2009/04/07
border-widthを大きくしたときの四隅の斜線部分でふきだしの角を作成/border-widthの大きさで角度を調整できる

design

css

technique
リンク
「1枚でなければ、5枚！」良い企画書の条件 (1/4)
- 45 users
- ascii.jp
- 学び
本連載では、﹁1枚企画書﹂に続いて竹島愼一郎氏が提唱する﹁5枚プレゼン﹂をPowerPointで実践する手順を全5回で紹介します。即断即決を可能にするのが先週までに紹介した﹁1枚企画書﹂ですが、プランニングの王道はやはり複数枚の企画書です。ただし枚数は5枚に限定するというのが秘中の秘策です。初回は、5枚プレゼンのコンセプトと複数枚の企画書特有のレイアウトについてレクチャーします。 ※本記事は﹁ビジネス極意シリーズパワポで極める5枚プレゼン﹂から一部抜粋し、編集・再構成したものです。﹁企画書の枚数が増えて困る﹂という意見をよく聞きます。たしかに企画で考えたことを網羅すると、際限なく長いものになってしまいます。なかには大企画だと主張したいがために数十枚もの企画書を上げてくる人もいます。このページに掲載したのは﹁ビジネス極意シリーズパワポで極める5枚プレゼン﹂の事例のひとつですが、5
sst 2009/04/06
business

writing

presentation

technique

book
リンク
長文日記
sst 2009/04/05
presentation

design

technique
リンク
髪の毛切り抜き / Photoshopを使って背景をきれいに切り抜く方法まとめ | DesignWalker
sst 2009/04/03
design

technique
リンク
アナリティクスアソシエーション (a2i) ｜アナリティクスの協議会
セミナーオンラインオンラインセミナー「GA4エキスパートのイチオシ分析手法解説～小川さん直伝サイトの俯瞰分析～」｜2024/6/5(水) GA4への移行後、「GA4がわかりにくい」「なかなか改善に結びつかない」という声を聞きます。そこでGA4のエキスパートにイチバンのお勧め分析 …
sst 2009/04/02
analysis

summary

technique

technology
リンク
1 2 3 4 5 6 7 8 9 10 次のページ