【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 | DevelopersIO
はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って？ 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの
初心者でも簡単に人物補正する3つのテクニック-Photoshop-
ちょっと前に雑誌作りをしていて(全200ページくらいorz) 大量な人物補正をしなくてはいけませんでした。 その時に学んだPhotoshopの人物補正テクを分かりやすくご紹介したいと思います。 by：dancing+bambi 補正とは？ 画像劣化について 人物補正3つのテクニック step1.明るさ・コントラスト step2.トーンカーブ step3.部分補正 -応用編-色黒美人を色白美人に 補正とは？ 意味としては”足りないところを補って、誤っている部分を正す”みたいな感じです。 せっかくとった写真、もうちょっとこうだったらなぁ〜っていうのを直していきます。 そしてまず初めに画像劣化についてかるく知っておきましょう。 画像劣化について JPEGデータは補正をすればするほど劣化していってしまいます。 つまり今からやろうとしていることは画像を劣化させてしまう行為なんです。 といっても補正し
ここまで教えてくれていいの？！WEB屋のテンションと底力を上げる厳選チュートリアル色々！ | バンクーバーのうぇぶ屋
WEB制作のチュートリアルって本当に多いですよね。 でも、本当に役に立っている、制作に生かせてるチュートリアルって少なくないですか？チュートリアルの過程が中途半端だったり、途中からついていけなくなったり。はたまた、続きは有料なんて物も今までありました。 しかし！僕の短いWEB屋人生ですが、年に2、3は『お、おぉぉ！マジテンション上がるWA！』と叫びたくなるチュートリアルに出会うことが稀にあります。そんな感銘を受けたチュートリアルは速攻でFacebookにアップしているのですが、今回は今日まで見てきた中で、余りにクオリティが高かったり、確実に自分や周りのスキル、そしてテンションを上げたチュートリアルを厳選してご紹介！ 英語記事メインですが、デザインよりならステップbyステップなのでなんとかなります！コードなら、Demoとか多いので見ながらついていけば理解できます！是非参考までに流し読みして見
プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集:phpspot開発日誌
25 Excellent Photoshop Web Design Layout Tutorials プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集。 かなりクオリティが高くて、１つの仕事としてうけちゃったほうがよいぐらいのチュートリアルが沢山です。 本などでこうしたチュートリアル集を買うと千円以上したりしますから、なんとも有り難いですね。 英語で書かれていますが、英語力も同時に向上させちゃえるという意味では本当にいい教材です。 関連エントリ 立体感がうまく出たWEBサイトデザイン作成Photoshopチュートリアル スタイリッシュなWEBレイアウト作成Photoshopチュートリアル フレッシュなPhotoshop用WEBレイアウトチュートリアル２５ 3Dエフェクトを使った綺麗なグラフィックを作るPhotoshopチュートリアル集
細部までしっかりこだわったヴィンテージデザインの6種類のエレメント
人気のデザイントレンドの一つに、ヴィンテージ・レトロスタイルがあります。デザインにこれらを取り入れるために使いこなしたい6種類のエレメントを紹介します。 The Elements of Retro Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 元記事にはサンプルやチュートリアルなど豊富に掲載されています。 はじめに 1. サークルを使った形状 2. ツートンカラー、限定されたカラースキーム 3. タイポグラフィエレメントとトレンド 4. ブレンディングスタイル 5. テクスチャとノイズ 6. イメージクロップとレイヤーマスク はじめに ヴィンテージ、レトロといったスタイルは今日のデジタルアートワークにおいて、日々人気が高くなっています。社会が完全にデジタル化した後、デザインにおけるヴィンテージ、レトロをテーマにしたものはトレンドの一つと言えるでしょう。 こ
ディテールの作りこみも丁寧に解説された、ウェブデザインを作成するPhotoshopのチュートリアル集
最近のトレンドを踏襲した、ディテールの作りこみも丁寧に解説されたウェブデザインを作成するPhotoshopのチュートリアルを紹介します。 ここ半年くらいに公開されたものから厳選しました。
知っておきたい使えるCSSテクニック25 – creamu
Web Developer plusで、知っておきたい使えるCSSテクニックが紹介されています。 いくつかご紹介しますね。 ・テキストハイライト時の色を変更する SafariやFirefoxでテキストを選択した時の色を変更できる。コードサンプルは以下 ::selection{ /* Safari and Opera */ background:#c3effd; color:#000; } ::-moz-selection{ /* Firefox */ background:#c3effd; color:#000; } ・プリント時にページを指定箇所で分割する 以下のクラスを指定することで印刷時のページを分割できる .page-break{ page-break-before:always; } ・テキストの代わりに画像を表示する よく見られるSEOテクニック。ユーザーには画像を見せ、検索エ
[CSS]ネガティブマージンの理解を深め、活用するテクニック集
スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。
Twitterをサイトに組み込むチュートリアル＆サンプル集:phpspot開発日誌
Twitterをサイトに組み込むチュートリアル＆サンプル集。 当サイトにて、色々とTwitterの機能を実装する仕組みを色々と紹介しましたが、それらをまとめてみました。 JavaScript によるTwitterメッセージの埋め込み Twitterのメッセージをページに載せられるJavaScript「Twitter.js」 JavaScript 単体でTwitterのメッセージをサイトに簡単に埋め込み可能 サイトにリアルタイム更新＆検索機能付きTwitter窓を設置できるjQueryプラグイン「Juitter」 画面遷移なしにTwitterステータス表示＆検索ができるウィジェットを設置可能。 PHP製のウィジェットや投稿用サンプルコード等 Twitterのメッセージ表示などができるPHP＆AJAXなブログパーツ実装が可能な「Ptwix」 Twitterのメッセージ表示用のリロード機能付きウ
ナビゲーションやボタンなどのパーツを作成するPhotoshopのチュートリアル集 | コリス
ヘッダー、ナビゲーション、ボタン、アイコンなどウェブページで使用するパーツを作成するためのPhotoshopのチュートリアルの紹介です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://handywebdesign.net/2012/09/how-to-move-path-and-layer-from-ai-to-ps/
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://www.designwalker.com/2009/11/corporate-tutorial.html
ウープスデザインブログ
http://www.designwalker.com/2009/04/wireframe-2.html
http://www.designwalker.com/2009/02/clone-webdesign.html