日本語フォントがGoogle Fontsに大量追加！すべてのフォントが商用利用も無料のフリーフォントです
フリーフォントが大好物な人に朗報です！ 🎉 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。 新しく追加された日本語のGoogle Fonts 他にもたくさんある日本語のGoogle Fonts Google FontsのライセンスはほとんどがSIL Open Font Licenseで、商用プロジェクトでも無料で利用できます。他に採用されているライセンスはAPACHE LICENSE, VERSION 2.0です。 フリーフォントが大好物な人には、下記もお勧めです！ 2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 新しく追加された日本語のGoogle Fonts まずは、先週Google Fontsに新しく追加された日本語
HTMLとCSSの実務レベルの作業フローや思考プロセスがていねいに解説された、Web制作に真剣に取り組みたい人にお勧めの本 -教科書では教えてくれないHTML＆CSS
HTMLもCSSも一通り勉強した、でも実際にWebページを実装しようとするとどこから手をつければよいか悩んでしまう。そんな人にお勧めしたい、実装の作業フローと思考プロセスをくわしく解説した良書を紹介します。 本書は通常の解説書とは一線を画すもので、現場レベルの作業や考え方を基礎からていねいに解説したものです。実装のテクニックもたくさん解説されており、さまざまなプロジェクトで役立ちます。 本書は「HTML5&CSS3デザインレシピ集（紹介記事）」「WordPressデザインレシピ集（紹介記事）」などでお馴染み、狩野 祐東氏の新刊です。 「教科書では教えてくれない」とあるように、入門書や講座では学べない現場レベルの実装を基礎からていねいに解説しています。自分のブログをちょっとつくってみたいという人向きではなく、仕事としてWeb制作に携わりたい人向けの解説書です。
2016年用、日本語のフリーフォント219種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
個人・商用で無料で利用できる、日本語のフリーフォント219種類を紹介します。前回は164種類だったので、大幅に増えています！ 記事公開後も増えています（201→207→211→219）。 年賀状の宛名にも使える縦書き対応のフォント、かわいい手書きフォント、読みやすいゴシックなどが揃っています。 毎年まとめていますが、初紹介のものから既存のものまで改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。 ライセンスはサイトだけでなく、同人誌や印刷物などでの利用も明記。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 Kazesawa フォント 個人・商用サイトで無料利用可。同人誌や各種
ゲーム感覚で自分のWebデザインのスキルがどのくらいなのかが分かるスキルチェックサイトのまとめ
図形の認識、カラーの見極め、文字の美しい字詰めなど、Webデザインに大切なスキルが自分はどのくらいなのか分かり、しかも勉強にもなるスキルチェックサイトを紹介します。 ちょっとした暇つぶしにチェックするだけでなく、定期的にやるとスキルがアップしてるのを実感したり、今日は体調悪いなという目安にもなりますね。
美しいバランスの黄金比をウェブページのレイアウトに実用的に取り入れる -Golden Bootstrap
黄金比を使ったグリッドを組み立てたり、エレメントに使ったりなど、美しいレイアウトを生み出すGolden Bootstrapを紹介します。 Golden Bootstrap Golden Bootstrap -GitHub Golden BootstrapはBootstrapのプラグインで、「bootstrap.less」にファイルをインクルードして利用します。 // Grid system and page structure ... @import "golden-bootstrap/golden-bootstrap.less"; // Add support for Golden Bootstrap ファイルをインクルードすると、黄金比用の3つの変数を利用できます。 @goldenRatio: 1.6180339887498948482; @goldenLarge: 1/@golden
[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify
section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。 デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。 ちょうどいい位置に自動でスクロール スクロールはイージングやバウンドなど、さまざまなエフェクトが利用できます。 Scrollifyの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsとeasing.jsを</body>の上あたりに記述します。 jQueryは1.6+で、どれでも可です。 <body> ... <script src="script/jquery-1.6.js"></script> <!--<script src="script/jquery-2.1.1.js"></script>--> <!--<scri
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
[CSS]さまざまなバリエーションを簡単に利用できる美しいデザインのボタンを実装するチュートリアル
画像は使用せずに、繊細なパターンとグラデーションで美しいボタンをスタイルし、サイズやカラーなどさまざまなバリエーションを簡単に利用できるように実装するスタイルシートのチュートリアルを紹介します。 ベースとなるボタン HTML マークアップは非常にシンプルです。 <a href="" class="button">Button</a> または、button要素でも構いません。 <button class="button">Button</button> CSS CSS3を使って、ちょっとリッチにスタイルしてみましょう。 .button{ display: inline-block; *display: inline; zoom: 1; padding: 6px 20px; margin: 0; cursor: pointer; border: 1px solid #bbb; overflow
一つのカラーから配色セオリーに基づいてカラースキームを作りだす配色設計に役立つツールのまとめ
コーポレートカラーなど、一つのカラーをベースに配色セオリーからカラースキームを設計したり、同系色やグラデーションを作りだしたりできるオンラインツールを紹介します。 またカラーのストックを増やしたり、カラーをベースにしたムードボード作りに役立つツールもいくつか。 最初は、国産のツールから。 配色の見本帳 | キーカラーで選ぶ配色パターン 一つのカラーをベースに、さまざまな色の法則から配色パターンを表示します。 上は緑みの青（#0099CE）をベースにしたもの。キャプチャの他に、彩度や明度による配色、色相環による配色など、さまざまな配色を表示します。説明付きなのも嬉しいポイントです。
うっかりさんに朗報、家の鍵でも財布でも自転車でも小さいタイルをつけるだけでトラッキングができるiOSアプリ -Tile
うっかりさんに朗報、家の鍵でも財布でも自転車でも小さいタイルをつけるだけでトラッキングができるiOSアプリ -Tile
たくさんあるオープンソースライセンスのそれぞれの特徴のまとめ
GitHubが、どのオープンソースライセンスを選択すればよいのか指針となるサイトを公開したので、それぞれの特徴を翻訳してまとめてみました。 Choosing an OSS license Apache v2 License GPL v2 MIT License Mozilla Public License Version 2.0 LGPL v2.1 BSD (3-Clause) License Artistic License 2.0 GPL v3 LGPL v3 Affero GPL Public Domain (Unlicense) No License Eclipse Public License v1.0 BSD 2-Clause license 備考：各項目の補足説明 最後の「備考：各項目の補足説明」に各項目の補足となる説明をまとめました。 Apache v2 License ソ
[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
幾何学的に設計されたピクトグラムのアイコン素材、貴重な設計図もダウンロードできます！ -100 Pittogrammi | コリス
イタリアのCIの巨匠：ボブ・ノールダ、写真家：ミンモ・カステラーノなどに触発され、幾何学的にストイックに設計されたピクトグラムのアイコン素材を紹介します。 アイコンの出来も素晴らしいですが、設計図というかマニュアルまでついてるのは珍しい！
レスポンシブ対応サイトで使用されているナビゲーションのパターンのまとめ
デスクトップ、タブレット、スマフォなどのレスポンシブ対応サイトで使用されているナビゲーションのトレンドを紹介します。 特に小さいサイズになった際に、どのようにアイテムを見せるかさまざまな工夫がこらされています。 Popular Design Trends for Responsive Navigation 下記は各ポイントを意訳したものです。 ブロックレベルのメニュー 凝縮するナビゲーション フォームのセレクトメニュー 非表示のドロップダウン スライドするナビゲーションボックス 終わりに -次のプロジェクトの開始に ブロックレベルのメニュー まずは、ボックスをベースとしたデザインのブロックレベルのナビゲーションです。表示サイズに合わせて、ボックスのサイズが変わったり、配置が変わったりします。
[JS]グリッドで配置したパネルをダイナミックなアニメーションでコントロールするスクリプト -gridSelector
Googleトレンドのようなグリッド状に配置した複数のパネルにダイナミックなアニメーションを与えるスクリプトを紹介します。 Dynamic Grid with Transitions デモはChrome, Firefoxでご覧ください。 ※Safariで見たら、クラッシュしました。 Demo 1: No transitions Demo 2: Transitions without delays Demo 3: Transitions with delays 3種類のデモは、1:アニメーション無し、2:ディレイ無しのアニメーション、3:ディレイ有りのアニメーションとなっています。 Demo 3のディレイ有りが一番かっこいいです！ Demo 3のアニメーションgif 左上からパネルの表示数・レイアウトが変更すると、アニメーションで変更します。 実装 div要素で配置したパネルと外部ファイルと
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト
12 fancy buttons デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。 12種類の中から、特に気に入ったものを下記にピックアップしてみました。 ※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。 demo 4 のアニメーション ホバーすると、上からパタッとなります。 .b04_3d_tick { perspective: 500px; perspective-origin: center top; } .b04_3d_tick div { position: absolute; text-align: center; width: 100%; height: 50px; box-sizing: border-box; padding: 10px; border: #000000 solid 1px; } .b04_
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインのセンスを磨く！2014年上半期洗練されたディテールのUIデザインのまとめ
これはスゴイぞ！Bootstrapのページ作成が積み木感覚で簡単にできてしまうジェネレーター -lollytin
Webディレクター・デザイナー必見！ワイヤーフレームや最近のUIを解説した -ワイヤフレームガイド
ウェブでも同人誌でも動画でも商用利用可！女子向けのしとやかでカワイイ日本語のフリーフォント -ロゴたいぷゴシック-コンデンスド | コリス