CalorieMate to Programmer | 大塚製薬
コードを書いていると、 食べることも忘れて ついつい熱中してしまう。 会社でも、家でも プログラマーも、そうでない人も 夢中になって考え続ける、 そんな時こそカロリーメイト リキッドで 素早く手軽に５大栄養素を。 BALANCED FOOD CalorieMate LIQUIDto Programmer ＃うちこむ人にバランス栄養 >MESSAGESメッセージ >Translate Matz コード監修 まつもとゆきひろ Yukihiro Matsumoto プログラマー、ソフトウェア技術者。1965年生まれ、鳥取県出身。愛称は「Matz(マッツ)」。1995年にプログラム言語「Ruby」を公開、その使い勝手の良さから世界中のプログラマーに親しまれ続けている。2012年には内閣府「世界で活躍し『日本』を発信する日本人」の1人に選ばれた。 From Tech Crunch Japan世界的プ
2017年用、日本語のフリーフォント259種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
個人や商用で無料利用できる、日本語のフリーフォント260種類を紹介します（公開時より、2つ追加）。 ビジネスからプライベートまで、幅広く利用できるフォントが満載です！ 毎年まとめていますが、去年は219種類だったので、大幅に増えています。無料でなくなったフォントや配布終了になったフォントもいくつかありました。 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も明記。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 まずは個人的に、今年一年かなり使用したフォントからご紹介。 3種類
様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」
TOP > WebDesign > 様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイトをまとめたエントリー「465+ Useful CSS Layouts for Download」です。 Nice and Free CSS Templates/Layouts by My Celly 基本的な1カラム、2カラム、3カラムといったベーシックなものから、シンプルなものまで様々なCSSテンプレートがダウンロード可能です。今日は紹介されている中か
「Webデザインが苦手」を克服するための構成学。 - Qiita
前置き 私はデザインが苦手。UIもCSSも、かっこよくならない。でも、かっこいいデザインがしたい、という思いはある。 そういう悩みを私も抱えていて、この本を読んで少し楽になれたので、紹介することにします。 デザイン的学問のススメ。 教科書：美の構成学 構成学は、芸術をはじめとする「美しさ」がなぜそう見えるのか、その美しさを構成する要素がなんなのかを学術的に分析、研究するための学問です。 本文より引用 構成学を一言でいえば、造形に共通する形態、色彩、材料に関するそれぞれの特性を明らかにするとともに、造形との関わりを掘り下げる研究領域である。 「なぜ美しいのかわかる」 というのが大きなポイントです。 これがわかれば、「○○だから美しいんだ！」 と胸をはって言えるから。 （少なくとも、論理的に説明する理由をつけられる、という点で自信になる） この本から、Webデザインに適用できる（と思われる）考
誰もあなたの製品を使いたいと思ってはいない : 製品をデザインするための考え方 | POSTD
毎朝、デザイナーは目が覚めると、喜んで自分の製品に取りかかります。それがデジタル製品であっても物理的な製品であっても、デザイナーは心の中で、人々が自分の製品を使いたがるようになり、楽しんで使うようになると信じているのです。 それはやや一般論かもしれません。しかし、私たちはデザイナーとして、自然と 自分が取り組んでいる各プロジェクトを最高のものにし 、革新的なものにして、そして何より、違いをもたらしたいと考える傾向があります。 ああ、私の製品は素晴らしい物になるはずだ。機能やオプション、設定が充実している。みんなが毎日その製品を使い、愛用するようになるだろう。 – あるデザイナー ここで少し意外な事実をお教えましょう。人々は製品を使用ことにあまり興味はありません。ユーザがインターフェースを操作したり、つまみを回したり、レバーを引いたり、ボタンをタップしたりするのはすべて時間の無駄です。むしろ
短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみる - Yukihy Life
HTML、CSSの勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー！ jQueryを身につけるための最短ステップ ステップ１ Progateで手を動かしながら学ぶ ステップ２ 平行してWebデザインレシピの記事を読む ステップ３ ドットインストールで総復習&補完 ステップ４ 書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック
Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。 いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集 指定した行番号に移動 すべての子ノードを展開 デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット 複数のカーソル 画像をData URIとしてコピー 疑似クラスのトリガー 複数のコラムをドラッグで選択 「$0」で現在の要素を手に入れる 要素の表示 「Event Listeners」の表示 イージングのプレビュー Media Queriesの検証 ネットワークをフィルム
誰でもプロ並みの色調が作れる無料のカラーパレットサービス厳選8選
高機能なCMSが続々とリリースされている今、特別な技術がなくてもホームページやランディングページを作成できる環境が整ってきました。 Web制作会社やデザイナー等の専門職の方に頼らずにWebページを制作される方も増えてきていると思いますが、制作時につまづきやすいのが「配色」の選定です。 配色はページ全体の印象を決めますが、作成者のセンスに左右されるため、デザイナーのように配色の知識が無い方は何かと時間をとられてしまいます。 今回は、配色に自信の無い方でも最新のホームページのような配色ができる無料のカラーパレットをご紹介します。 あらかじめ配色が決まっているもの、自分で配色を調整できるものなど様々なパレットがあるので、目的に沿って使い分けてみましょう。 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向
JavaScript書けない人間が1年間でフロントエンドエンジニアになった話 - DMM.comラボ デザイナーズブログ
こんにちは、デザイン部所属の石橋です。 今はデザイナーをやりつつフロントエンドエンジニアをさせてもらってます。 そんな自分は2014年の5月にDMM.comラボへ来たんですが、入社時のスペックを以下に記します。 入社時のぼく HTML出来ます！（ただし<section>の使い方はぼんやり） CSS出来ます！（ただしスタイリングだけで設計は出来ない） jQuery出来ます！（ただし既存プラグイン実装に限る） おや…？ 「（フロントエンドってなんだろう…）」 「（JavaScriptとjQueryって何が違うんだろう…）」 やばい。 当時はいわゆる「コーディングがちょっとだけ得意なWebデザイナー」でした。 シンデレラストーリー プロローグ 弊社では一部のデザイナーも結構ガリガリとコーディングをするのですが、 入社時にまわりの能力の高さにちょっと本気で「ヤベェ所に来てしまった…」感がありました
これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア（無料）とオンラインサービス（無料と有料）です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
デザイナーはなぜMS Pゴシックを使わないのか? - エディトリアルデザイナーに聞いてみた
デザインを語る上で重要な要素のひとつ、「フォント」。デザインを実際に手がける人だけでなく、それを見る多くの人にとってなじみ深いフォントとして、Windowsのプリインストールフォント「MS Pゴシック」は代表的なもののひとつかもしれません。 「MS Pゴシック」 「MS Pゴシック」は過去にマイナビニュースで実施した美大生の「お気に入りフォント」アンケートにも名前が挙がった実力派(?)ですが、実際に日々グラフィック/エディトリアルデザインを手がけているデザイナーの目には、この定番フォントはどう映るのでしょうか。 今回は、デザイン会社にてエディトリアルデザイン/Webのレイアウトデザインを手がけているSさんに、「MS Pゴシック」についての率直な思いを伺いました。 ――「MS Pゴシック」、デザイン業務で使うことはありますか? 私は主にエディトリアル(雑誌や書籍など)、グラフィック、Web領
デザインの原理原則がわかる8つの記事 | creive
デザインをする際に、IllustratorやPhotoshop、Sketchが使えるといった、小手先の技術はもちろん大切ですが、そもそも「良いデザインとは何か」という概念的なことを知っておくのは大切です。 そこで、今回は、ノンデザイナーでも押さえておくべき、デザインの原理原則がわかる8つの記事を簡単な説明とともにご紹介します。 企画書の作成、簡単なモックアップをつくる際にも役立つものばかりです。 配色技法 デザインをしていて「良い配色」が思い浮かばない… なんて時に読むと考えがまとまる記事です。 「良い配色」という、なんとなく持っている概念を、論理的に説明したい時には重宝します。ドミナントカラー、トーンイントーン、カマイユなど7つの配色技法を、具体的な例を用いて説明しつつ、配色によってもたらされる効果を知ることができます。 → 配色に悩んだときに、きっと役立つ7つの配色技法【基本】 配色パ
ソースコード検索エンジン「NerdyData」で世界1.4億のサイトから実用コードが探せる
NerdyDataというソースコード検索エンジンを最近知りました。 通常の検索エンジンは、タグを取り除いたページ内のコンテンツが検索結果に表示されます。けれど、NerdyDataは、サイトにある生コードを検索することができます。 これを、使うことにより、コードの具体的な利用例なども見ることができ、便利だったので紹介です。 photo by Ruiwen Chua NerdyDataとは NerdyDataは、世界中の1億4000万サイト以上のソースコードの中から、HTML、CSS、JavaScriptのコードを直接検索できる、ソースコード検索エンジンです。 Nerdyという単語は、あまり聞き慣れなかったので「どういった意味だろう？」と調べてみたら以下のような意味でした。 オタクっぽい Ａ系, エー系, 秋葉系, アキバ系 おそらく、いい意味でPCオタク向けのデータが詰まった、ギーク御用達の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CSSが破綻する4つの理由 - Qiita
エンジニアのためのUIデザイン