CSSの作業をする際に便利なWebベースのツールやアプリケーションをご紹介します。 すべて無料のものをそろえましたので、Webクリエイターの方はぜひチェックしてみてください！ extractCSS HTMLシートからclass, id, インラインスタイルなどを抽出してCSSスタイルシートとして形成するための便利なツールです。 CSS Beautifier CSSスタイルシートを自動でフォーマットしてくれるので、読みやすく統一感のあるデザインのページが出来上がります。 CSScomb コーディングのスタイルをフォーマットする機能を持っていて、CSSプロパティをソートしてくれます。 CSS Compressor 圧縮してサイズを小さくしてくれる便利なアプリケーションです。 Style Stats どんなスタイルシートからでも便利な統計を取ることができるツールです。 アクセスしてURLを入力す

2017年用、日本語のフリーフォント260種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 個人や商用で無料利用できる、日本語のフリーフォント260種類を紹介します（公開時より、2つ追加）。 ビジネスからプライベートまで、幅広く利用できるフォントが満載です！ 毎年まとめていますが、去年は219種類だったので、大幅に増えています。無料でなくなったフォントや配布終了になったフォントもいくつかありました。 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も明記。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やラ

はじめての副業コース Web制作の副業に必要なスキルが学べる 確実にお仕事をはじめられる5万円案件保証手厚いサポートで副業を最短でスタート

Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはすべてのモダンブラウザで、IEは8+です。

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事『Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ』を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 font-feature-settin

コンテンツの区切りに使用する線、デザインのアクセントに使えるラインやボーダーをCSSで素敵にデザインするスタイルシートのテクニックを紹介します。 borderプロパティを使ったシンプルなものから、グラデーションや疑似要素やアニメーションを使ったアイデアが素晴らしいものまで、コピペで簡単に利用できます。

世界中の現役クリエイターを審査員に迎え、デザインやアイデアが素晴らしいWebサイトを選出するCSS Design Awards主催の「Website of the Year 2016」が発表されました。毎年楽しみにしている人も多いと思います。 「Website of the Year」のファイナリストに選出されたWebサイトを紹介します。 Website of the Year 2016 デザインがすごいだけでなく、操作やUIにもアイデアが満載のサイトばかりでした。 Chromeで見ることをお勧めします、音がでるサイトがけっこう多いです。 サイトとの出会いを楽しんでいただくため、説明は一切無しにしました。先入観無しでお楽しみください。

はじめての副業コース Web制作の副業に必要なスキルが学べる 確実にお仕事をはじめられる5万円案件保証手厚いサポートで副業を最短でスタート

ngJapan 2016での発表資料です。3つの事例を通して、Angular2の良かった点と不安な点をお伝えします。 事例 - Particle Develoo - ClockMaker Labs - WebP画像を作る君

世の中には無料のものから有料のものまでさまざまなフォントがあります。フォント制作ソフトも手軽に使えるようになった影響か、最近では日本語のフリーフォントもかなり増えており、フリーフォントの投稿サイト「フォントフリー」には2016年10月現在で300を超えるフォントが登録されています。 これだけフォントがあると、選択肢は無限大と言ってもよく、選ぶだけでも一苦労です。 そこで今回はそれからデザインのデザイナーが普段よく使っているフォントについてアンケートを取ってみました。 実制作で「本当に使える」フォントとは一体なんなのか。選んだ理由と合わせて聞いてみました。それでは早速見てみましょう！ 見出ゴMB31（みだしゴエムビーさんいち）｜モリサワ モリサワのスタンダードなフォントとして外せないフォントかなと思いチョイスしました。 シャープなフォントなので、テイストを選ばずいろんな場面で使用しています。

TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS

2016年も残すところ1ヶ月をきったタイミングで、今年1年間のあいだに公開された魅力的なテキストエフェクトの作り方チュートリアルをまとめた総集編を今回はご紹介します。Photoshop と Illustrator で作成できるチュートリアルを一緒にまとめています。 ステップ順に進めていくことで実践的なツールの使い方を覚えながら、デザインを完成させることができるので、ますます進化するデザインテクニックを学んでみてはいかがでしょう。デザインスキルをアップさせたい、そんなひとにオススメしたいチュートリアルを揃えています。 コンテンツ目次 1. Photoshop チュートリアル 2. Illustrator チュートリアル 3. テキストエフェクト用プレミアム素材 Photoshop チュートリアル LED スクリーン風テキストエフェクトの作り方 電光掲示板に表示されているような風合いに仕上げる

Top > ラーニング > Googleの無料BIツール「Google Data Portal(グーグルデータポータル)」の使い方 | 解析レポート作成時間がゼロに！

はじめに AnsibleはLinux、Macでは動くがWindowsでは動かない。Windowsで実行するためには、仮想でLinuxを立ち上げて、そこにAnsibleをインストールする必要がある。 Windowsで『初めてのAnsible』の「1.9 テスト用サーバーのセットアップ」相当の内容を実行する方法を、次の構成で確かめていく。 Windows 7 VirtualBox 5.0.20 Vagrant 1.8.4 CentOS 6.7 Ansible 2.1.0 WindowsにVirtualBoxとVagrantをインストールする WindowsにVirtualBoxとVagrantをインストールする。 VagrantでCentOSを2台起動する コマンドプロンプトを開いて、VagrantにCentOSのBOXを追加する。 >vagrant box add bento/centos-

日本語のフリーフォントを利用してデザインする際などに「クールなデザインにしたい」「かっこいいフォントを使いたい！」という場面があるかと思います。 ただ、英語のかっこいいフォントはすぐに見つかるのに、日本語になるとすぐに見つけられないということがあります。 そこで今回は、デザイン性が高くてかっこいい日本語フリーフォントをフォントのタイプに分けてご紹介していきます。 商用利用可能なものから、漢字を含んだもの、カタカナのみのかっこいいフォントまで幅広く用意してみましたのでご覧ください。 かっこいいゴシックフォント 鉄瓶ゴシック 鉄瓶（てつびん）ゴシックは、フォントな自由さんが公開している角ゴシックフォントです。 「源ノ角ゴシック」を改変して制作されており、極太の文字かつごつごつとした質感がかっこいいフォントです。 商用：OK ひらがな：◯ カタカナ：◯ 漢字：◯ ▷ 鉄瓶ゴシック スマートフォン

2010年からずっとiPhoneを使い続けてきた。振り返れば、iPhone使用歴はちょうど7年になる。iPhone4から5へ、5から6へと2年おきに買い換えてきた。その間、ダウンロードしたアプリ数は1,000近い。話題になっているアプリ、デザインが美しいアプリ、UI/UXが秀逸だと噂のアプリなどを片っ端から試し、どんなものが人の心を掴み、どんなものは受け入れられないのかを追ってきたつもりだ。 今回はぼくがその中でも、べらぼうに便利だと感じたアプリや、とりわけ感動したアプリを大きく6つに分けて紹介する。ゲームアプリはこの記事のいちばん最後で。 マストアプリ 便利なアプリ エンタメ系アプリ 情報収集系アプリ 小ネタ系アプリ 面白いゲームアプリ iPhone を買ったらすぐに入れるべきマストアプリ １番はじめに入れるべきデータ通信容量チェックアプリ My Data Manager - あなたのモ

パワーポイントデザインで失敗しないために、これだけはおさえておきたい「色の知識」では、簡単な色の知識や、配色するときのポイントなどについて説明させていただきました。この記事では、PowerPointで使う色を実際に選んでみたいと思います。前の記事を読んでいない方は、まずそちらをご覧いただいたほうが、より効果的にこの記事の内容を理解、実践できると思います。 ノンデザイナーの人たちが、いきなり色を選んで組み合わせまで考えるなんて、難しいのは当たり前ですよね。この記事を書いている僕も別にデザイナーじゃないので、色選びはあまり得意とは言えません。しかし、世の中にはたくさんの便利なWebサイトやツールであふれています。なので、まずは全面的にそれらに頼ってみましょう。