コードを書く際の指針として見返すサイトまとめ - Qiita
お勧めの記事がありましたらコメントなどで教えて頂けると幸いです。 Guidelines プログラマが知るべき97のこと 技術的負債 不慣れなコードベースで短期間に生産性を高めるための7つの方法 何も知らない人を育てるために(新人教育情報キュレーション) 保守開発に開発者として入って困ることのまとめ(実体験) 技術系の名言まとめ++ 真似をする前にバッドプラクティスかどうかを調べてみよう 読まれない名著「人月の神話」を本気で読み込んでみた（まとめ） 技術的負債とどうやって戦うか 楽しいコーディングのための CUPID - SOLID 原則に対するアンチテーゼ エンジニア基礎(新人研修資料) Coding Style モデルやメソッドに名前を付けるときは英語の品詞に気をつけよう 関数名や変数名に使えそうな動詞・名詞・形容詞のメモ Naming -名前付け- DRY原則をもう一度 -コンカレント
プロが実践するモダン CSS の書き方入門テクニック20選まとめ
海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー
資料作成スピード3倍？本当に使えるパワポ＆ワードの厳選高速化テクまとめ - リクナビNEXTジャーナル
あれ？フォトショいらなくない？意外なほど優秀なパワポの画像加工・切り抜き機能 画像の加工といえばPhotoshop！で、まぁ間違いは無いんですが、やっぱ重いんですよね。 で、意外と知られていないのが『PowerPointの画像加工機能が結構なレベルまでパワーアップしている』という事実。ちょっとした加工ならパワポにお任せ！だったりするんですよ実は。（※PowerPoint2010以降推奨） 背景透過で邪魔な要素をキレイにカット 2つの画像やイラストを重ねた際に、余白や背景が邪魔！という場合も、PowerPointで簡単に消すことができます。 背景を透過させたい図を選択したら、図ツール＞書式タブを開く 調整＞色を選択したら、表示メニューから「透明色を指定」を選択する 透明にしたい部分をクリックする ※このとき、透明にする色は一色のみ指定可能です。 PowerPoint2010以降ならもっと細か
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
独学に最適！初心者が短期間でプログラミングを学べるサービス11選 - paiza times
Photo by ITU Pictures こんにちは。谷口です。 プログラミング初心者の方々、プログラミングを学びたい方々は、普段どのような方法で学習をしていますか？ 最近は、Web上でコーディングができるサイトや、プログラミングを学習できる動画コンテンツなど、独学での勉強に役立つサービスが増えてきました。そこで今回は、初心者でも独学でプログラミングの基礎を楽しく学べるサービスを11件ご紹介いたします。 ■初心者でもプログラミングして実行できる！学習サイト ◆1.Codecademy http://www.codecademy.com/learn 学習可能言語：HTML/CSS、Ruby、Python、PHP、JavaScript、jQuery 対応言語：英語（一部日本語） 料金：無料 Codecademyは、実行環境を構築しなくても、書いたコードを実行できます。サインインすると実際にW
2年目PHPerが、1年目PHPerはこれやっとけと思うこと : Strings of Life
inspired by PHPを勉強するならこれだけは言いたい！PHPのオススメ勉強法 私は、職業プログラマーとしては今年で2年目のペーペーです。それでも上記記事はちょっとなあ、という部分があるので、流れをなぞりつつ、自分なりの考えを書いてみます。 ちなみに、私が参考にしたPHP学習法記事は、WebデザイナーやノンプログラマーにおすすめしたいPHPの勉強法です。 まず、「これやっとけ」メニューを先回りして紹介しておきます（これらを勧める理由は後述）。 プログラミング経験なし：ドットインストールを活用しよう。 プログラミング経験あり：『パーフェクトPHP』を読もう。勉強会に参加しよう。アウトプットをしよう。 PHPは簡単か？ 「PHPは簡単」というとき、それはおおよそ、以下のいずれかの意味でしょう。 PHPには、C言語のポインタのような難所はなく、Java言語に比べて覚えることが少ない。した
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
【バナーデザインの教科書】訴求したいイメージ別｜王道デザイン8選！ | LISKUL
「どうすればこの商材の魅力を最大限に伝えるバナーができるの？」 このような悩みを持つデザイナーさんはたくさんいらっしゃると思います。 よくある「バナーデザインまとめ」のようなサイトを閲覧してもイメージ別のデザイン（配色やフォント）の特徴が見えず、毎回まとめサイトを参考にしていると作業がなかなか進まず、イライラすることもあるでしょう。 そんな方のために今回は訴求したいイメージ別のバナーデザインの特徴をお教えます。 「安心感や信頼感」「誠実さ」「かわいい」「お得感」「先進性」など訴求したいイメージごとに最適なフォントや配色、その他の特徴をまとめて紹介していますので、ご自身が制作したいバナーのイメージに合わせてご覧下さい。 コンバージョンする！高品質なバナー作成方法 【はじめに】デザインイメージ図今回は日本カラーデザイン研究所の配色イメージスケール図をベースとしてイメージ別のバナーデザインをまと
Webデザイナーのスキルアップに役立つ便利なチートシートのまとめ
先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。 Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。 Adobe Photoshop Keyboard Shortcuts Photoshop 5-7, CS1-4, CCまで、Win/Mac用のキーボードショートカットがそれぞれPDFでダウンロードできます。 また、ショートカットがない便利な操作にショートカットを割り当てたショートカットファイルもダウンロードできます（チートシートでは「c」がついています）。
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
Webデザインをパーツで参考にできるサイトまとめ
こんにちは、工藤です。 Webデザインの際、パーツで悩んでしまうことがよくあります・・。 今回はパーツ毎にまとめてくださっているサイトをご紹介します。日本語サイトが多めです。 パーツ全般を集めているサイト ブブンデザインアーカイブ http://bubundesignarchive.jp/ Croppy http://croppy.org/ MephoBox http://box.mepholio.com/ メインビジュアル関連 WEBデザインのメインビジュアルまとめ http://mainvisual.net-king.com/ MAIN VISUAL collection http://mvisual-collection.dslrs-journal.info/ 見出し関連 見出しデザイン.com http://midashi-design.com/ Typography For He
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ
2014年3月19日 Illustrator, Webサイト制作 これまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 ↑私が10年以上利用している会計ソフト！ Illustrator初心者さんへ Illustratorはベクター形式の画像を作成できるAdobe社のアプリです。ロゴやイラストを作る時にはかかせません。Adobeの公式チュートリアルサイト、Adobe TVではIllustratorの概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustratorは
ブックマーク必須！ iPhoneからチェックしたい便利ウェブサイト・ウェブアプリまとめ | カミアプ
どうもハンサムクロジです。 iPhoneといえばアプリ！ アプリをダウンロードしてしまえばなんでもできる……のですが、それでも足りない部分、不便な部分が出てくるかと思います。 そんな時に便利なのが、Safariなどのブラウザアプリで閲覧できるウェブサイト・ウェブアプリです。様々なサービスをブラウザをとおして利用できるのでアプリとはまた違った魅力がありますよね！ 今回はそんな便利サイトから、オススメしたいものをいくつかまとめてご紹介したいと思います。どれもすぐに使える便利なものばかりですよ！！ 各社のスマートフォンやiPhoneのスペックを比較したい時に便利なサイトです。スペックが非常に詳細に掲載されているので、端末を乗り換える時にとっても重宝しますよ！ サイト：スマートフォンデータベース 紹介記事：国内キャリアが扱うほとんどの機種を網羅した『スマートフォンデータベース』がすごい！ iPho
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CSSでよく使うコードのまとめ、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・ユーティリティなど -Corpus
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
日本の伝統的なデザインは美しい、和の柄や文様・和紙・折り紙・千代紙などの癒やし系素材のまとめ
新着記事
新着記事
Flipsblog.jp
