サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
ひらがな・カタカナ・漢字が使える最近リリースされたものを中心に、日本語のフリーフォントを紹介します。 年賀状などに使える手書き文字、冬コミ用のデザインフォント、仕事にも使える読みやすいフォントなど、たくさん揃っています。フォント紹介の前に各フォント制作者からのお願いごと。フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ 東青梅ゴシック / 東青梅ゴシック C 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 梅PゴシックとM+ OUTLINE FONTSをベースに、よく使われる漢字の字形をより統一したフォント。伝統的な形を受け継ぎつつ、モダンゴシックとの折衷をはかり、視認性が重視されたデザインです。 字画が多くても、読みやすいですね。 廻想体
スマホ向けのWebサイトが普及し始めた数年前から、HTMLとCSSの書き方は大きく変わりました。HTMLのタグやCSSの機能が変わったわけではありません。デスクトップとスマホの両方に対応するためには、それまでとは異なる考え方で実装する必要があります。 この「考え方」について重点が置かれ、HTMLの組み方からCSSの実践的なテクニックまで、基礎から詳しく解説されたオススメの本を紹介します。 一見、完全な入門書のように見えますが、初心者だけでなく、中級者にもお勧めしたい本です。基礎知識の解説は一通りシンプルにしっかり解説されており、知っている人は復習がてらさっと見て、知らない人は過不足なく学べます。 最新のHTMLとCSSの書き方、日本語の文字、コンポーネント、Flexboxを使ったレイアウトなどをどのような考え方で実装するのか、実践的な知識・テクニック・考え方を整理し、身につけることができま
TypeSquareは、2025年11月25日をもって新規会員登録やプランの新規購入を終了しました。 新規のご契約は、後継サービスのMorisawa FontsのWebフォントをご検討ください。 TypeSquareでは今後の新書体も含めて、書体の追加や更新は予定しておりません。 サービス終了に関する今後の予定や詳細についてはこちらをご覧ください。 UD新ゴ M Webフォントは新たな 表現力を提供する 文字が伝えるものは言葉の意味だけではなく、用いられる書体によりその印象は大きく異なります。 ウェブデザインにおいて、さまざまな書体の中から目的に合った Webフォントを選び出し、的確に使うことが必要になります。 リュウミン R-KL Webフォントは新たな 表現力を提供する 文字が伝えるものは言葉の意味だけではなく、用いられる書体によりその印象は大きく異なります。 ウェブデザインにおいて、
スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 複数のブレイクポイントを使ったメディアクエリの書き方 人気のフレームワークのブレイクポイントの設定 レスポンシブの確認が簡単にできる最強ツール 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 スマホ、タブレット、ラップトップ、デスクトップごとのブレイクポイント、そしてiPhone,iPad, Nexusなど各デバイス用のブレイクポイントに合わせたメディアクエリの書き方がまとめられています。SimpleCSS Media Queries デバイ
![[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f7c5c596162907ccc099585ca47e2a595ce4e13c0%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fcoliss.com%252Fwp-content%252Fuploads-201603%252F2016091201.gif&f=jpg&w=240)
HTML5でWebページを作成する時のベースになる必要最小限の構成で実装されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。HTML5 Boilerplate -GitHubイラスト: Girls Design MaterialsHTML5のテンプレートHTML5のテンプレートの解説HTML5のテンプレートHTML5 Boilerplateのテンプレートを日本語化しました。 ライセンスはMITライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctypehtml> <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title
By Wicker Paradise アイコンに関するニュースから販売まで手がけるサービス「Icons8」の中の人が、ウェブサイトのデザインを大幅に変更したところ47％ものユーザーを失ったことをブログで明らかにしました。ブログではユーザーを失うまでの経緯や、なぜ失ってしまったのかの分析結果まで書かれていて、興味深い内容になっています。 How We Lost 47% of Our Users After a Redesign | Icons8 https://icons8.com/articles/how-we-lost-47-of-our-users-after-a-redesign/ サービス開始当初、Icons8はアイコンの開発・販売を手がけるサービスでしたが、毎日新しいアイコンを作り続けるのには無理があるため、「リクエストアイコン」という機能を実装しました。リクエストアイコンとは、
デザイナーをはじめ、多くの制作者が利用している「アマナイメージズ」協力のもと、写真やイラストの著作権・被写体の肖像権についてまとめました。Webデザインで写真やイラストの素材を使用する時、写真をトレースしてイラストを描き起こす時、写真を模倣してほぼ同じ構図やシーンで撮影する時など、写真やイラストを安全に使うために知っておきたいことを紹介します。 画像: 新緑 © daj /amanaimages 以下の掲載写真の使用許諾は、アマナ様にすべてご手配いただきました。 写真やイラストの権利について 写真やイラストを安全に使うために知っておきたいこと ケーススタディ: まとめサイトでの画像引用、制作委託先が不正利用していたなど 写真やイラストの権利について 写真やイラストには、原則として著作権が存在します。 素材（有料・無料に関わらず）として利用できる写真やイラストも著作権の保護期間を過ぎたもの
2016年は、1月12日に古いバージョンのIEのサポートが終了します。 IE8, 9, 10などの古いブラウザへの対応に時間を割く必要がなくなり、今まで躊躇していたCSSやJavaScriptが多くの人に利用されるようになると思います。 これからどんどん取り入れていきたいCSSのテクニック・ライブラリを紹介します。イラスト: Girls Design Materials 2016年1月12日からIEの対応は実質IE11に レイアウト関連のCSS アニメーション関連のCSS ユーティリティ関連のCSS 2016年1月12日からIEの対応は実質IE11に 2016年1月12日(米国時間)に、IEの古いバージョンのサポートが終了します。 各Windows OSごとの対応バージョンは、下記の通り。 Internet Explorer サポートポリシー変更の重要なお知らせ Vistaユーザーはほぼ
Webデザインやグラフィックデザインのトレンドをしっかり知っておくことは、非常に大切です。廃れゆくものを採用するのではなく、今必要とされているものが何なのか、そしてなぜそれが必要とされているのか理解することで、よりよいものが制作できます。 Webとグラフィックデザインのトレンドとその背景、目的、展望などを紹介します。 16 Graphic DesignTrends To Watch In 2016 各項目ごとのグラフィックも分かりやすく、注目です。 01. ユーザーが使いやすいこと 02. レスポンシブデザインの考え方 03. アプリを彷彿させるWebデザイン 04. ナビゲーションの進化 05. モジュール式のテキスト 06. モジュール式と無限スクロール 07. Material Design 08. フラットデザイン 09. 1,000の言葉よりもビジュアルで 10. インフォグラ
今回は大阪中心部のIT・情報系の専門学校をまとめました。 資格やスキルなど特化した学校もあるため、自分に合った学校を見つけましょう。 田島悠介 今回は、なにか相談受けたんだって？ 大石ゆかり大阪に住んでる親戚がIT系の専門学校に通いたいって言ったんですが・・・どこを選べばいいかわからなくて・・・ 田島悠介 よし！それじゃ、自分にあったIT系専門学校の選び方と大阪にある学校を紹介していくね！ 大石ゆかり お願いします！ 目次 自分に合った学校の選び方 学費を抑えられる学校 資格が充実している学校 プログラミングを学習できる学校 実習の多い学校 就職サポートが充実している学校 まとめ 自分に合った学校の選び方 これからIT系の知識・スキルを習得したいと考えている方は多いでしょう。IT系の専門学校に興味を持ってもどの専門学校に入学すれば良いのか、自分にはどの専門学校が合っているのか考えること
このブログのようにWeb関連の技術ブログの場合、古い記事の内容は現在の実情にあわない場合があります。 このブログでは、そのような古い記事の場合に、記事の上に警告を表示しています。 この記事では、その方法について解説します。 ソースコード プラグインにする方法もありますが、今回はテーマファイルに追記することで簡単に実装してみます。 まず、テーマファイル内の single.php を開き、記事本文を表示する「」などの上に以下のように書きます。 解説 2行目の get_the_modified_date() 関数は、WordPress の独自関数で「記事が更新された日時」を返すものです。 引数で ‘Y’ と指定しているので、この場合は「記事が更新された年」が返ってきます。 2行目右側の date(‘Y’) は、現在の年を返します。 – 2 で、現在の年から 2 を引きます。 例えば、記事を書いた
WordPressのデザイン、記事の投稿、コンテンツ配信、検索エンジン最適化、メンテナンス、バックアップ、セキュリティ、パフォーマンス、アンケート、ショッピング機能など、ブログやサイトの運営に役立つWordPressのプラグインを紹介します。WordPress Plugins We Use プラグインは、海外のWeb制作系ブログ「CSS-Tricks」で実際に利用されている厳選プラグインで、それをなぜどのように使用しているのか非常に参考になりました。 CAPTCHAはコメントではなく、管理画面のログインに使用しているとか、なるほどと思いました。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 コンテンツ配信 検索エンジン最適化 メンテナンスとセキュリティ パフォーマンス デザインと記事の編集 パーミッションとモデレーション 販売 使
リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。CSS Protips -GitHub 当記事は、2015/11/4に公開した記事に追加分を加えたものです。 更新: 2016/3/7 13, 14, 15を追加。 更新: 2016/4/13 16, 17を追加。CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区
最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材やプレビューを紹介します。 Boring CardsUI Kit PSD、個人・商用利用無料。Bootstrap 4でも新しいコンポーネントとして注目されているカードを使用したUIキット。黄金比をベースにしたデザインはさまざまなサイズ・カラーで展開することができます。
無料とは思えないほど緻密で美しい！215種類の飾りやイラストが揃ったヴィンテージデザインのベクター素材
有名ブランドで採用されているカラーをはじめ、Material DesignやiOS 8で採用されている落ち着いたパステル、同一色相の美しいグラデーションなど。 最近注目されているカラーをまとめたPhotoshopのスウォッチを紹介します。Illustrator用のもいくつかあります。 Color palette -Material Design 2015年、多くのWebデザイナーが注目しているMaterial Designで使用されているPhotoshopとIllsutrator用のスウォッチファイル。フラットなカラーと同一色相のグラデが特徴的です。
コーポレートサイトやスモールビジネスから、ランディングページ、プロダクトページ、ポートフォリオやギャラリーなど、BootstrapをベースにしたWebページが簡単に作成できる無料のテーマがダウンロードできるサイトを紹介します。 テーマとして利用するだけでなく、制作のインスピレーションにもいいですね。 Peter Finlan 縦長ページにかっこいいスクロールエフェクトやアニメーションを加えた今時のWebページが実装できます。デザインも非常にかっこいいものが揃っています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fe1fd89076a824a2b1b121fa5a6c8839a4338de05%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fcoliss.com%252Fwp-content%252Fuploads-201601%252F2016012701.png&f=jpg&w=240)
