ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
自社ロゴのデザインを依頼して完成するまでのストーリーと全ての内部資料を公開します | マーケティスト
個人事業主がロゴデザイナーに自身のブランドのロゴデザインを依頼し、実際に完成するまでの全ての情報をまとめ、全ての内部資料を公開します。本記事を読めばロゴデザイナーの考え方について理解が深まります。 ※記事のタイトルでは「自社ロゴ」としましたが、正確には個人事業のロゴとなることをご了承ください。 ツイート マーケティストの新しいロゴを作成 お客様にロゴの重要性を説明する仕事があります。しかし、そもそも私自身のブランドであるマーケティストのロゴが既製フォントを並べただけのもので独自性がなく、「ブランドを象徴的に示すものとしてロゴ」の重要性を説明をする説得力が欠けていました。 ちなみに以前までのロゴは以下のようなロゴです。 Zapfinoというフォントを使用 個人事業であるマーケティストを創業して約一年。おかげさまである程度の資金的な余裕ができ、仕事の方向性も固まってきました。マーケティストとし
「すごいGit楽しく学ぼう」を公開しました - mixi engineer blog
こんにちは、toma です。 つい先日、新卒エンジニア向けに Git 研修を行いました。 その時の研修資料「すごいGit楽しく学ぼう」を Speaker Deck にて公開しました！ 「すごいGit楽しく学ぼう」は、Git に触ったことがないという方でも、Git を使ったチーム開発に参加できることを目指して作成しています。 実際にミクシィでは、ほとんどの部署で GitHub や GHE を利用しており、Pull-Request を活用してチーム開発を進めています。 Git の習得は、ミクシィで開発を行っていく上で必須のスキルであるため、新卒研修として毎年実施されています。 資料の目次 とりあえず使ってみよう！ コミットとブランチについて正しく理解しよう 歴史を取り込む 落穂拾い Git のコマンドをひと通り使ってみた後、Gitの仕組みについてひとつずつ学んでいくという構成になっています！
[CSS]フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック
デモページ（コンテンツ量が多い時） 実装 HTML 最小限の構成はこんな感じです。 コンテンツはmain要素でなくても平気です。コンテンツとフッタだけあればOK。 <body> <main> メイン コンテンツ </main> <footer> フッタ </footer> </body> CSS デモではフッタの高さを5emに設定しており、それに合わせてbodyにマージンを設定します。 // STYLES - essential for sticky footer html { min-height: 100%; position: relative; } body { margin-bottom: 5em; } footer { bottom: 0; height: 5em; position: absolute; }
![[CSS]フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e55a7967f77bbcc88ed8e9e24c73a34c021f77e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051101.png)
使いやすさをデザインする上で心掛けていること - Mackerel ブログ #mackerelio
こんにちは。デザイナーの id:murata_s です。Mackerelのリリース当初からMackerelの画面設計やUX、ユーザビリティなどのデザイン業務全般を担当しています。 今回は、主にエンジニアさんのためのツールであるMackerelをデザインする際に id:murata_s が気をつけている点を紹介します。ユーザーにとって必要な情報を分かりやすく伝え、迷わないデザインを施すにはどういった配慮が必要か、製品の振る舞いのデザインについてMackerelの事例を交えながら考えてみたいと思います。 Mackerelは言わばソフトウェアであり管理画面ですから、一般に言われるウェブサービスよりもツールとしての側面が強いサービスだと思います。雑誌の誌面ではなく、車のダッシュボードをつくっているようなもので、グラフィックデザイン的な情報設計の考え方が前提となりつつも、それに加えてプロダクトデザイ
コーダーがおさえておきたいコーディングのツール8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル
CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応
Posted: 2015.05.07 / Category: HTML&CSS, javascript / Tag: CSS3, jQuery iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。 確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before,
ブラウザの幅全体をメイングラフィックにするスライドショーを作成する【jQuery連載11】 | HTML5でサイトをつくろう
前回は、クリックで開閉するスライドメニューを作成しましたが、今回はメイングラフィックスペースをグラフィカルにするスライダーを作成します。 ページ上部のメイングラフィックスペースに複数の情報を表示させるようにするスライドショーを作成する。今回は、メインの画像が中央に、その両側には前後のグラフィック画像に黒い半透明の画像が被さった状態で表示されるスライダーを作成します。 前後の画像が両側に表示されるため、ウィンドウサイズが変わっても横幅いっぱいに画像が表示され、よりグラフィカルなイメージを与えることができます。 今回作成したサンプル 【サンプル】ブラウザ一杯に広がったメイングラフィックに最適なスライドショーを作成する http://www.html5-memo.com/sample/jq-books/08 スライドショーのHTML ヘッダーエリアの上にスライドショーを設置するが、レイアウトによ
[コピペで使える！CSSだけでアニメーションつきハンバーガーメニューアイコンを作ろう] 他 海外のCSS情報 | WEBデザインすーぷ
アニメーションするCSSのみのハンバーガーメニューアイコン Animating CSS-Only Hamburger Menu Icons Hamburger menu icons have become a staple in many websites and web apps, and whether you like them or not, they are becoming a familiar and recognizable UI action button. Users are associating this icon with the showing and hiding of menus, and its compact, space-saving nature makes it a desirable style, particularly on smaller
![[コピペで使える！CSSだけでアニメーションつきハンバーガーメニューアイコンを作ろう] 他 海外のCSS情報 | WEBデザインすーぷ](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f2d61e0129fb5d5d02ed528b0f0d8f03fb010de/height=288;version=1;width=512/http%3A%2F%2Fi0.wp.com%2Fweb.html-css-javascript.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fi2.jpg%3Ffit%3D723%252C240)
游とMerriweather
少し前にこのサイトのデザインをちょっと変えて、「本文は明朝、ただし見出しや強調などはゴシック」というスタイルにしています。と言っても、本文が明朝で表示されるのは游明朝体かヒラギノ明朝体が使える場合だけで、それ以外の環境ではゴシックになるはずです。 欧文書体は和文の従属欧文ではなくMerriweatherです。セリフとサンセリフのファミリーがあることと、エックスハイトが高く和文との相性が良いことから選びました。ウェイトは和文とのバランスから400ではなく300を使っています。MerriweatherはGoogle FontsやTypekit、Font Squirrelなどで入手できます。 CSSの指定としては、まずデフォルトがMerriweather Sansとゴシック体の組み合わせ。そして游明朝体またはヒラギノ明朝体が使えるかどうかをJavaScriptで検出し、もし使えれば本文でMerr
【24h_aiまとめ】Illustratorがもっと便利になるスクリプト6選 - hamfactory
あらためまして、24時間Illustratorスペシャルイベント「愛（Ai）はクリエイティブを救う」にご参加＆配信をご覧くださった皆様、ありがとうございました！ 過去に例の無いタイプのイベントということでしたが、自分自身もとても楽しむことが出来ました。 アーカイブが観られるよ 公式サイトでは、現在すべてのアーカイブを観ることが出来ます。 （事前に「アーカイブなし」の告知があったセッションは除きます。） アーカイブの試聴も無料。Adobeさん太っ腹！ 深夜のセッションなど「起きてられなかった…」という方、 観てたけど「もう一回おさらいしたい」という方は是非公式サイトへどうぞ。 紹介スクリプトのおさらい イベント当日は普段から愛用させて頂いている、とても便利なスクリプトを使ったテクニックをご紹介させていただきました。 Twitterなどでも流したのですが、こちらでもまとめておきますね。 スクリ
エンジニアでもできる洒落たロゴを短時間で作成するコツ4つ
EasyRamble は、技術ネタや子育て、英語学習、アウトドアなどについて綴るブログです。Ruby on Rails や Swift などで、Webサービス/アプリを作っています。 少し前に ポップアップ辞書の Chrome 拡張機能 をリリースした際に、半日時間をとってロゴ作成の練習を行いまして、ちょっと綺麗なロゴを作れるようになったので、その時に掴めたロゴの作り方のコツを4つまとめておきます。 【追記 2015/05/05】 本職のデザイナーの166さんに、詳細なデザインのアドバイスのコメントを頂きました。エンジニア・プログラマーの方がロゴ作成・デザインに挑戦される際には、とても参考になると思います。ぜひコメント欄までご覧ください。 【追記ここまで】 自分の場合、WEB制作・開発の中でもデザインが一番苦手でして、ロゴ制作もそれほど得意ではありません。エンジニア・プログラマーの方だと、
オシャレなフルスクリーンスライダーが作れるjQueryプラグイン「Nex」:phpspot開発日誌
Nex - Api Documentation オシャレなフルスクリーンスライダーが作れるjQueryプラグイン「Nex」 フルスクリーンにすることで大きく迫力があるスライダーが作れます。画像切り替え用のアニメーションも複数ある模様。 デモページ 関連エントリ パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 ハッシュフラグメントでブックマークに対応できるスライダー「Hashslider v2」
真似したい!使いたい!オシャレなCSSテキストエフェクト31個 | 楽天ティップスRakutenTips
CSS 3 Transform Experiment CSS3トランスフォームを使ったpure CSSトリック。モダンブラウザ＆IE9＋みたいなので使うサイトは選ぶかなっと。 Animated Text Fill javascriptを使わずcssアニメーションでストライプを表現したテキストエフェクト Text Animation 見出しに追加して置きたいアニメーション Elastic Stroke CSS + SVG SVGを使ったカラフルなテキストアニメーション Fun With CSS Text-Shadow イベント時などに使いたいテキストシャドーを使ったインパクトあるポップなテキストエフェクト Box-bubble Cutout in CSS 写真にフィルターを掛けた背景に合わせた日付入りボックス Fly in, fly out JS &CSSで実装するアニメーション Maske
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
大量のjQueryプラグインと、その使い方等をコレクションしている・「jQueryScript.Net」
ごりゅご.com
Japont - 美しい日本語をウェブサイトに
[M]フリーランスWeb屋の私がiMacを購入してすぐにインストールしたおすすめMacアプリ30個＋2個 | miMemo(ミメモ)![[M]フリーランスWeb屋の私がiMacを購入してすぐにインストールしたおすすめMacアプリ30個＋2個 | miMemo(ミメモ)](https://cdn-ak-scissors.b.st-hatena.com/image/square/b73f13f0e221842610c4e2a65c38f571172b7b4b/height=288;version=1;width=512/https%3A%2F%2Fweb-mimemo.com%2Fwp-content%2Fuploads%2F2015%2F04%2Fimacapp_sum.jpg)
背景色をなめらかに変更できるjQueryプラグイン「Spectrum」:phpspot開発日誌