webディレクターだけど、初心者に役立つサイト教える:無題のドキュメント
webディレクターだけど、初心者に役立つサイト教える 【沈黙のWebマーケティング】 1： 以下、＼(^o^)／でVIPがお送りします ：2015/02/06(金) 17:41:24.70 ID:flJZIImcH.net 最近クソみたいなデザインとグッチャグチャのソースコード書いてる ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、 これからサイト作る初心者用にサイトを紹介していく これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ 2： 以下、＼(^o^)／でVIPがお送りします ：2015/02/06(金) 17:42:31.08 ID:flJZIImcH.net まずはドットインストール http://dotinstall.com/ 開発環境の構築方法からプログラミング言語の基礎の基礎を教えてくれる 一回の動画の時間が短く区切られているので使いやすい。 プロからはあまり評判
【 Photoshop小技！】ホワイトバランスが狂っている商品写真（白背景）を一発でなおす方法
豪快にホワイトバランスが狂いまくっとりますなぁ・・・・。でも、WB狂っている通販の商品写真は巷でよくみかけますよね・・・。 白の背景を使った商品写真であれば、Photoshopを使って一発で直す方法をお教えしたいとおもいます。 ①まずは下準備、、「スポイトツール」を選択し、「選択の範囲」を「５ピクセル四方の平均」を選択。（次回からは、この設定を変えない限りこの作業は不要） ②「トーンカーブ（イメージ → 色調補正 → トーンカーブ）」を選択。白スポイトをダブルクリック！ このような画面が表示。 ③R=245 G=245 B=247と打ち込む。→OKをクリック この画面に戻ります。そのままカーソル（スポイト）を、写真の白であろう部分に持っていきます。 白背景のこのあたりにカーソルを持ってくると、 ④「情報」ウィンドウを見ながら、RGBいずれかのチャンネルの上限が240を超えない（240は最適
アドビ公式ブログ、“なんとなくPhotoshop使ってる人”向けに解説動画を紹介 - はてなニュース
画像編集ソフト「Photoshop」の基本機能を紹介する動画をまとめた「なんとなくPhotoshop使ってる方のための基礎講座」というタイトルの記事が、アドビシステムズ・仲尾毅さんの「Creative Cloud 道場ブログ」で公開されています。公式ブログらしからぬ“ゆるい”タイトルと役立つ内容から、はてなブックマークで話題を集めています。 ▽ http://blogs.adobe.com/tnakao/photoshop-cc-basic-on-ccdojo ▽ USTREAM: Adobe Creative Station この記事では、「Photoshop CC Basic」と題して2015年1月にUstreamで放送された「Creative Cloud 道場」のアーカイブ動画の中から、特に初心者向けのものを3つ紹介しています。合成処理を行う際の要となる「レイヤーマスク」と「切り抜き
Microsoft R Server now available for Academics and Students via DreamSpark - big data statistics, predictive modeling and machine learning capabilities - Microsoft UK Faculty Connection - Site Home - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
【3ヶ月編】プログラミング完全初心者が最初にやったことまとめ【その1】 | Project name
どうもこんにちは。年の瀬の寒さとカードの請求額に打ち震えながらこの記事を書いてます(^q^) どうもvsannaです。 年末なので1年間の振り返りでもしようと思い、 完全にずぶの素人が半年強プログラミングの学習をしてきた経緯をまとめてみました。 期間別に複数回記事を書きます。 それぞれのタイミングごとにお役に立てれば幸いです。 【3ヶ月編】プログラミング完全初心者が最初にやったことまとめ <= この記事 【6ヶ月編】プログラミング完全初心者が最初にやったことまとめ ※今書いてる 【9ヶ月編】プログラミング完全初心者が最初にやったことまとめ ※今書いてる 今回はその3ヶ月編です。 まずは3ヶ月でどこまで出来るようになるのか、そのために何をしたのかをざざっとまとめています。 「プログラミングやってみたいけど何からやればいいのかわからない」 「どれだけ時間かけたら、どの程度のことが出来
Git入門：Git初学習者のための効率的な学習方法を考えてみた
本記事は，Git Advent Calendar 2014の13日目に投稿させて頂いた記事です． モチベーション 自分を成長させながらいかに効率的に技術を伝承するかが自分の中で課題になっており模索中なこの頃．試しに，社内でGitを使ったことのないエンジニアに1週間(合計7時間)で開発に必要なGitの知識を講義したので，その時に使用した教材や効率的な学習方法を初心者向けに共有する． 背景 一昔前はイケてるエンジニアはGitを使ってプログラムを管理してるみたいな感じだったが，今となってはGitはエンジニアにとって必要不可欠なツールになった．Gitがあるからコードの2重管理はなくなり，Gitがあるから継続的インテグレーションや継続的デリバリーが活きる，Gitがあるから変更に対してコメントを残せる．Gitが無いと開発が成り立たなくなって来ているのだ．特に，Githubのヒット以降，その流れは加速し
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版！
おはようございます。CD藤本です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ！！ さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト（以下ブクマサイト）だ！という5サイトを紹介します。 （今回はパソコンサイトを扱うブクマサイトに限らせて
冬休みにおすすめの8冊 | Supership
Supership Supership株式会社は、正確なデータとデータ利活用の知見、国内屈指の広告配信技術を基にした企業のデジタルマーケティングを支援する「マーケティングソリューション事業」と、顧客企業の生活者への接点に対して、データを用いたCX向上や新しいマネタイズ機会の創出を支援する「データソリューション事業」を展開するデータテクノロジーカンパニーです。 データとテクノロジーの力で世の中の解像度をあげ、新たな価値をパートナーとともに共創していきます。 《設立経緯》 Supershipは、KDDIのオープン領域における事業拡大の推進を目的として、数多くのベンチャー企業をM&Aしながら成長を続けているSupershipグループの中核を担う企業です。 スタートアップ企業のスピード感と高度なテクノロジーに加えて、大企業のアセットをもとにビジネスを展開する「ハイブリッドスタートアップ」という独自
2013年に開いて直感的に素敵だな、すげーとおもったWebサイト大賞
というわけで本年度、すごいなとおもったWebサイトをご紹介。 先に15サイトを紹介したのち、最後に大賞5つを紹介します（大賞が5つもあることに関しては気にしないでください） αブログならぬ、αサイト！レッツスタート！ ※サイトデザインは旬ものなので、時期を過ぎるとリンク切れ、デザインの変更があります。今すぐ楽しんでください。 ノミネート15作品 ゲスの極み乙女。 official website サイドバーから各種ページに移動した時に、地味に動くのがなんかむかつく（いい意味で）。とくにMEDIAページね。 そんなわけで、このサイト、デザインというよりインパクトで受賞。 胸やけ・吞酸劇場〜胸屋家の酸っぱい１日 このFlashの死んだ時代に、あえてオールFLASHに挑むその度胸。 さらにそれぞれのコンテンツが微妙に面白くてやばい。やばいというかヤヴァイ。FLASHヤヴァイ賞。 STAGEWOR
TechCrunch | Startup and Technology News
Yellow, an asset financier for solar energy and digital devices in Africa has raised $14 million series B funding in a round led by Convergence Partners with participation from the Energy Entrepreneur Fisker, the electric carmaker founded by the Danish auto designer Henrik Fisker, is gearing up to enter the Chinese market where competition is increasingly cut-throat, following in the footsteps of
WEBデザインが短期間で上達した方法
この記事は、Webデザインが短期間で上達した2つの方法として、新たに書き直しました。 WEBデザイナーとして10年ちょっと経過。 未だにデザイナーとして足りないものは多いですが、 どうにかクライアントにも満足してもらえる デザインが提供できるようになったと思います。 これは、自分が新米デザイナーだった頃にやっていた、デザインの上達方法です。 「上手くデザインができない！」「上手くなるにはどうすればいいの？」など、 どうすればデザインが上達するのかわかならい人の参考になれば幸いです。 新米デザイナーの頃、ダメなデザインをして先輩からよく叱られていました。 クライアントからデザイナーを交代してくれと言われ、 激しく落ち込んだこともあります。 いまになると恥ずかしいですが、 その頃の自分には、 プロのデザイナーとして最低限の能力がなかったのです。 クライアントの満足するクオリティのデザインを 期
[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)
先日擬似要素のまとめを書きましたが、用途の説明に留まり不完全燃焼だったので…今回それを使った表現のコツなんかを突き詰めてみました。サンプルコード付きですー！★ 擬似要素で出来ることを考えていて、先日[CSS]擬似要素の実用的な使用用途のまとめ – WEBCRE8.jpというまとめを書きましたが、やっぱり自分で作ったりしたかったですｗ 今回は実際に擬似要素などを使ってCSSのみでどんな表現が出来るのか、どこが難しいのか、どんなことなら出来るのかを掘り下げてみました。その過程で出来たサンプルも公開しますー。 まずは枠線の作り方。通常枠線はCSSのborderプロパティを使い、値にdoubleを設定する事で二重線が出来ます。ここではそれにバリエーションをつける方法を解説します。 デモ：box-shadowによる実線のボーダー box-shadowで実線を作れる borderで枠線をつけるところ、
![[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d32ad08c42abf3adf6023a2cf5a9740723afbdb/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fcss-design-sample-02-150x150.png)
なんと！JavaScriptだけでテキスト読み上げ·Speak.js MOONGIFT
Speak.jsはJavaScriptだけでテキストを読み上げるソフトウェアです。 Webブラウザで音声ファイルを指定してJavaScriptで解析、なんてソフトウェアもありますが今回は一から“音声”を生み出してしまう驚きのソフトウェア、Speak.jsを紹介します。 ボタンを押すとHello Worldと話します。 こんな感じで任意の言葉を話させることもできます。 Speak.jsはジェネレータを通じて音声を動的に生み出します。対応しているのは英数字のみとなっており、日本語には対応していません。常に動的に生成しているので自由なテキストを読み上げさせることができます。 Speak.jsはJavaScript製のオープンソース・ソフトウェア（GPL）です。 MOONGIFTはこう見る テキストを外部サーバに送って、それを音声ファイルにして返すAPIも世の中にはあります。当然、こちらの方が英語
『スマートフォン向けJavaScriptライブラリchikuwa.js』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは！スマートフォン版Ameba（通称：デカグラフ）でフロントエンドの開発をしている2012年度新卒入社のオオシモと申します。 デカグラフでは、主にSNS機能（サークル・掲示板・メッセージ・写真など）のNode.jsからフロントエンドのJavaScriptを担当しています。ちなみにエディタはSublime Text 2を使用しています。とっても軽くて高機能でオススメです。jQueryを使用しているのではないでしょうか。 デカグラフでは、chikuwa.jsと呼ばれるスマートフォンに特化した軽量ライブラリを使用しています。このライブラリは弊社の首
デザイン時に注意したい角丸の使いかた - Design Color
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は？ 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう！と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元：少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
独学でフロントエンド・エンジニアを目指す人のための基礎カリキュラム - DESIGNMAP
本記事は2013年に書いた記事で内容がだいぶ古くなっております。 フロンドエンドは3年間で大きく状況がかわりました。下記の2016年に書いた改訂版の新しい記事をおすすめします。 「フロントエンドエンジニアとは／Webアプリケーションの歴史／フロントエンドの勉強が難しくみえる理由 － まったくのゼロからフロントエンドエンジニアを目指すための独学カリキュラム vol.1」 2011年に『まったくのゼロから、独学でWebデザイナーになる方法』、2012年に『19のステップで、まったくのゼロから、独学でWebデザイナーになる方法』を書いて、独学でWebデザイナーを目指す人向けの具体的な独学方法を書いた。今回は、Webデザイナーという大まかなくくりではなく、フロントエンドエンジニアにしぼって独学方法をまとめてゆきたい。 フロントエンド・エンジニアとは フロントエンドとはWebブラウザ側（クライアント
SassとCompassでSprite画像を作る
やっべぇ、これ便利！って思ったので即共有！これまでSprite画像作る時って皆さんはどうしてましたか？僕はCSS Sprite Generatorというサイトを使って画像を生成していました！ しかし、さっき見てた記事でなんと、Compassを使ってSprite画像を生成する方法が紹介されていて、今さっき試したら結構ツボにハマったので、まずはこの興奮のまま皆さんともシェアさせて貰えれば嬉しいです！ 参考にさせて頂いた記事は以下なんですが、結構詳しくCompassで作るCSS Sprite画像の作り方が紹介されています。まずは僕も試してみた簡単な概要部分をちょっとご紹介させて頂きましょう！SassとCompassの基本的な使い方はググって頂ければ嬉しいです＞＜ How to automatically generate CSS sprites with Sass and Compass | C
スタイルシートの内容はそのままで、可読性・保守性を高めるオンラインサービス -CSS Trashman
サイトやブログで使用しているスタイルシートをリファクタリングし、可読性・保守性を高めたCSS（Sassも）に変換してくれるオンラインサービスを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
