HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 | 翔泳社
フロントエンドエンジニアから学ぶ制作現場の実践的なテクニック！ 本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。 現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。 実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。 3つのサイトを作成することで、「本格的なレイアウトのサイトを作れた」「こういったレイアウトの場合こうコーディングすればいいという具体的なテクニックがわかっ
JetBrains Mono - JetBrains製の開発者用フォント
開発者にとって視認性の高いフォントは重要です。ポケモンセンターでもらえるシリアルコード、視認性悪くて文字の判別ができない「目がよくても無理」「なぜこのフォントにした」 - Togetterなんて話もあり、視認性の悪いフォントはそれだけでストレスになることがあります。 今回紹介するJetBrains Monoはプログラミング用エディタの開発で知られるJetBrains社が開発したフォントです。 JetBrains Monoの使い方 タイポグラフィ。 適用しているところです。 -> や == 、 === に特徴があります。 ハイライトされている例。メソッドがイタリックになっていますが、見やすいのではないでしょうか。 JetBrains Monoは他のフォントに比べて小文字が少し高かったり、 -> などが結合して表示されると言った特徴があります。もちろん日本語はありませんので、日本語は別なフォン
CSSの治安を取り戻す – 最初の30分
Gaji-Labo では稼働中のウェブサービスやウェブアプリケーションの CSS の改善するお仕事をいただくことがちょいちょいあります。 その際「CSSのリファクタリングなんて請けてくれる会社聞いたことない」というような趣旨のお話をぽろっといただきます。（実際にはほかにもやってる会社さん沢山あると思いますが、たしかにあまり聞かないですね） 今回は初めて入るプロジェクトで CSS の改善をする際、最初に CSS のどこを見るかまとめてみました。 CSS の得意な方が参加していないチーム向けの軽い内容です。ここに上げているような箇所に思い当たりがある場合、少しずつ CSS の実装にストレスを感じはじめているかもしれません。 真っ先に見極めることプロジェクトに参加して CSS が見られるようになり、手元の開発環境も無事整ったとき、僕が最初に気にする点です。 CSS はこうなってると大変というポイ
Webフロントエンドエンジニアにやさしいデザインファイルの作り方 - Qiita
Sketch - The digital design toolkit 画像はSketch最高っていう顔です。 HTMLやCSSを書くWebフロントエンドエンジニアにとって、Webデザイナーが用意した理想像を現実に落とし込むことは1つの使命であり、費用対効果への葛藤に揺れる中で「技術的に難しいから」という理由でデザインを却下したくないのは誰しも同じだと思います。一方で、技術的に難しくなくとも、デザインファイルの作り方次第ではエンジニアの実装効率も多少なりとも変わってきます。そこで、僕のデザイナー及びエンジニアとしての経験則から、HTML/CSSで実装しやすい（≒Webフロントエンドエンジニアにやさしい）デザインファイルの作り方を、Sketchでの用例も挙げつつまとめてみます。近年はFigmaが注目されつつありますが、基本的な話は共通すると思います。 本来ならばデザイナーにこそ読んでいただき
[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。 追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブラウザでフォントが読み込まれる仕組み font-displayプロパティとは ほとんどの場合、swapを使
![[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」](https://cdn-ak-scissors.b.st-hatena.com/image/square/a833243d7f7fa2de140f06d3243344bf1713f818/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017072510.png)
商用利用OK！2016年にリリースされた無料フォント30 | Webクリエイターボックス
2016年12月20日 フォント 2016年も残り二週間！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 ↑私が10年以上利用している会計ソフト！ 日本語フォント あさご本丸ゴシック 上品な丸みが可愛らしいフォント。軽やかさをいかしたポップなデザインに仕上がります。豊富なバリエーションは有料。 マキナス 2008年に制作開始したマキナスフォントが更に読みやすくなってリリースされました。約6,600字に対応。見出しに大きく打ち出して使うとかっこよさそう。 マメロン 約6,600字に対応しており、画数の多い漢字でもきれいに表示されます。個人的にはこのフォントの漢字がとっても好み！全角英数字は一文字ずつボタンのように枠がつきます
入力するだけでデザインが良くなる、新作フリーフォント素材40個まとめ 2016年11月度
文字を入力するだけでデザインがグッと良くなり、デザイン制作も楽しくなる、無料ダウンロード可能な新作フリーフォント素材をまとめてご紹介します。 人気の高いナチュラル系の筆記体や筆ブラシ文字、ウェブサイトでも可読性の高いスタイルの他、ひらがなやカタカナ、漢字も使える日本語フォントなど幅広いデザインに活用できるアイテムを中心に揃えています。 詳細は以下から。 入力するだけでデザインが良くなる、新作フリーフォント素材まとめ Cool Sans Family Free Demo ゴージャス＆ミニマルなデザインに最適なフリーフォントで、今回は Regular スタイルを無料ダウンロードできます。 ※ 個人利用可能 Sagona Typeface Demo 19世紀頃に利用されていた書体を元に作成されたセリフ書体で、あらゆるデザイン制作に活躍してくれるでしょう。 ※ 個人、商用利用可能 Five Bor
商用利用可能！高品質なオススメ日本語Webフォント10選（無料フォント多数） - ICS MEDIA
Webフォントは、サーバーにあるフォントデータを読み込むことで、端末の環境に依存せず同じフォントをウェブページに表示する技術です。 2010年頃からCSS 3の登場とともに徐々に浸透し、近年ではさまざまなウェブサイトやサービスで使われるようになりました。 しかし日本語フォントは3〜10MBもの大容量になったり、導入にコストがかかったりと、採用を見送っている方もいるのではないでしょうか。今回は実用的でオススメの日本語Webフォントを、それぞれの特徴を踏まえつつ紹介します。 Noto Sans JP / 源ノ角ゴシック 世界中の言語をサポートすることを目標にAdobeとGoogleが開発したフォントファミリー。Googleのブランド名は「Noto Sans JP」で、Adobeのブランドは「源ノ角げんのかくゴシック（英名：Source Han Sans）」といいます。 Noto Sans JP
続：デザイナーが仕事で使いまくるフリー日本語フォント６選
（2018-08-13更新） 座って座って！ キーンコーンカーンコーン！！！！ おすすめのフリーフォントの授業が始まりますよ！ 寝ててもいいからさ、そこに座っててよ〜 今週のはてぶランキングでカテゴリ１位、総合３位になったこの記事の続編です www.baconjapan.com たくさんの人が参考にしていただけたようで、とっても嬉しかったです。 ※今回もなるべく商用利用可能で、漢字も使えるものを中心としています。 目次 １．国鉄方向幕書体 （日本語フリーフォント） このかわいいやつを忘れてました！ そうそう、電車に書いてあるあの文字です。 ちょっと下手な字な分、独特の個性をもっていると思いませんか？ １番良い使いみちは電車のパロディとしてですが、それ以外での使いみちと言えば、不思議とか、未知を演出するにはぴったりかもしれません。 ▼「不思議な感じを演出」で似てるなあと思ったのはこの水素水の
縦書きや擬音や魔方陣のフォント大集合！マンガや同人誌に無料で使える日本語のフリーフォントのまとめ
縦書きのマンガのセリフや吹き出しに、実際に聞こえる音や様子を表現する音を書き文字に、普通の人には読めないヒエログリフ・神代文字や魔方陣にぴったりの文字など、マンガや同人誌に無料で利用できる日本語のフリーフォントを紹介します。 Rounded Mgen+ 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 「フリーフォントを一つだけ」と聞かれたら、この使いやすい丸ゴシックのフリーフォントがオススメです。 収録漢字は14000文字以上！ JIS第一・第二・第三・第四水準に対応。極細から極太まで7種類が用意されており、さらに丸みを変化させた3バージョンが揃っています。 ちょうどよい丸ゴシックって、なかなかないんですよね。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FONTBEAR.NET | 商用可能なフリーフォントを検索！
UbuntuTips/Desktop/InstallFont - Ubuntu Japanese Wiki
2016年総まとめ、デザイナーがダウンロードしておきたいフリーフォント