Apple Cardに一目惚れした人も多いと思います。 私もその一人で、夏にリリースされるのが楽しみですね！ カードのデザインがかっこよく、そこで気になったのが使用されているフォントです。Apple Cardの「Marisa Robertson」に使用されているフォントが何か調べてみました。 Apple Card Apple Cardのページには、このフォントについての記載はありません。San Franciscoっぽいですが、角が丸いので異なります。そこで、AppleのHuman Interface Guidelinesを調べてみました。 watchOS - Human Interface Guidelines - Apple Developer 現在Appleでは、小型デバイスのシステムフォントとしてSan Francisco（SF）が使用されています。このフォントには小型デバイスに最適
Twitterやブログでお伝えしたように、当ブログは先日新サーバーに移転しました。2回目のサーバー移転で、前回から9年ぶりとなります。 WordPressをドメイン変更無しで、新サーバーに移転した手順の覚え書きです。 参考: WordPress日本語サイト 移転した一番の理由は、旧サーバーでSSLにすると費用がかなり高くなることです。他にもアプリがアップデートできず使用したいものが利用できない、サービスの縮小化など、将来的に不安があるので、年契約が終了するこのタイミングで移転することに決めました。 新サーバーはもちろんこれらがクリアされており、まだ数日ですが、快適に利用させてもらっています。 サーバー移転のスケジュール 1. 新サーバーの契約・旧サーバーの解約 2. WordPressのサイトデータのバックアップ 3. WordPressのデータベースのバックアップ 4. WordPres
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
レイアウトにfloatを使用していた頃はグリッドを構築するために、複雑なHTMLやテクニックが必要になることがありました。しかし、flexboxやCSS Gridの登場で、レスポンシブ対応の柔軟なグリッドを簡単に利用できるようになりました。 そんな時代に合わせて、グリッドは無し、有用なコンポーネントが簡単に利用できるリセット用のスタイルシートを紹介します。 Shoelace.css Shoelace.css -GitHub Shoelace.cssの特徴 Shoelace.cssの使い方 Shoelace.cssのデモ Shoelace.cssの特徴 グリッドはflexboxやCSS Grid、またBootstrapなどを利用し、プロジェクトにあったデザインでコンポーネントを作成することができます。 Shoelace.cssはフレームワークではなく、有用なコンポーネントが含まれたCSSリセ
以前、当ブログで紹介した際に大好評だった「感情類語辞典」と「性格類語辞典」が、Kindleセールで半額以下になっているので紹介します。 7/2までと期間が短く、貴重なこの機会をお見逃しなく！ 小説、脚本、テレビ、映画、アニメ、マンガ、ラノベ、同人誌で、キャラクターの感情・気持ち・性格を表現するときの新しいアイデアを引き出す助けとなるちょっと変わった類語辞典です。 Kindle本 50%オフ以上セール ※50%オフ以上セールは、7/2までです。 この感情類語辞典と性格類語辞典がセール対象になるのは、初じゃないでしょうか。 「50%オフ以上」は大袈裟ではなく、1728円の感情類語辞典が750円に、1404円の性格類語辞典が600円になっています。 私は書籍で持っていますが、けっこうな分厚さなので、Kindle版はありがたいですね。
CSS lockはレスポンシブWebデザインのテクニックで、フォントのサイズなどを指定した2つの値の間でスムーズに移行させることができます。レスポンシブのテクニックは通常、指定した値でフォントのサイズが急に変化しますが、常にビューポートの現在のサイズに依存して変化します。 レスポンシブ用にフォントのサイズと行の高さを可変で指定するテクニックを紹介します。 「math」とあるように、もう完全に数学です。 The math of CSS locks 下記は各ポイントを意訳したものです。 検証やスタディ部分は省略しているので、元記事をご覧ください。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS lockとは px単位のブレイクポイントを使ったCSS lock em単位のブレイクポイントを使ったCSS lock CSS lockまとめ CSS lockとは ビュー
Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap Version 3 to 4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 4で変わった点 Bootstrapのファイル構造 Bootstrap 4のインストール グリッドシステムのアップデート リセットは、「normalize.css」から「reboot.css」に classの変更とアップデート タイポグラフィ テー
図形の認識、カラーの見極め、文字の美しい字詰めなど、Webデザインに大切なスキルが自分はどのくらいなのか分かり、しかも勉強にもなるスキルチェックサイトを紹介します。 ちょっとした暇つぶしにチェックするだけでなく、定期的にやるとスキルがアップしてるのを実感したり、今日は体調悪いなという目安にもなりますね。
当ブログでも最近、SVGの素材を紹介することが多くなりました。そんなSVGファイルから不要なデータを取り除いて軽量化するアプリを紹介します。 ↓は、今日紹介したアイコンのSVGを軽量化したものです。 ほとんどのファイルが50%以上軽量化されました。 SVGO GUI SVGO GUIは、Node.jsベースのSVG軽量化ツール「SVGO」をGUIで操作できるようにしたもので、Windows用とMac用が揃っています。 使い方は非常に簡単で、Mac用で説明します。 ダウンロードしたSVGO GUIをダブルクリックして、起動します。 SVGO GUIの起動画面 あとは、このパネルにSVGファイルをドラッグするだけでOK！ ※軽量化は元ファイルに上書きするため、元ファイルが必要な時はファイルをコピーしてから利用してください。 SVGファイルの軽量化、完了！ 軽量化しても、グラフィックのクオリティ
個人・商用で無料で利用できる、日本語のフリーフォント219種類を紹介します。前回は164種類だったので、大幅に増えています！ 記事公開後も増えています（201→207→211→219）。 年賀状の宛名にも使える縦書き対応のフォント、かわいい手書きフォント、読みやすいゴシックなどが揃っています。 毎年まとめていますが、初紹介のものから既存のものまで改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。 ライセンスはサイトだけでなく、同人誌や印刷物などでの利用も明記。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 Kazesawa フォント 個人・商用サイトで無料利用可。同人誌や各種
これまでに数多くの一部上場企業様のWebサイトのリニューアル・サイト制作にコアメンバーとして参加し、その中で表記ルールもかなりの数を策定してきました。策定時のベースに使用する「ひらく漢字」「ひらかない漢字」の一部を紹介します。 ※以前、公開した記事を再編集したものです。 表記ルール: ひらくことが多い漢字 表記ルール: ひらくことを検討する漢字 表記ルールの策定にあたり 表記ルール: ひらくことが多い漢字 ひら（がなで書）くことが多い漢字。 ※「正・誤」は使用する際の基準であり、日本語としての「正・誤」ではありません。 読み 正 誤
CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値（absolute）と相対値（relative）の二つです。 絶対値（absolute） 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。 相対値（relative） 相対値はサイズ自体の値を持っていません。サイズは親要
HTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシート「sanitize.css」を紹介します。 「Normalize.css」の共同開発者：Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。 sanitize.css sanitize.css -GitHub sanitize.cssとは sanitize.cssの対応ブラウザ sanitize.cssのスタイル sanitize.cssの注目すべきスタイル sanitize.cssの適用 sanitize.cssとは sanitize.cssはHTMLのあらゆる要素を各ブラウザでの差異をなくし、整合性をもたせてレンダリングさせるスタイルシートで、ライセンスはCC 0で利用できます。 有用なデフォルトはそのまま 多
お馴染みの freepik.com 提供によるベクター素材をコリス限定で全員にプレゼント！ もちろん個人でも商用でも無料で利用できます。 今回は2015年の新年を迎えて、シンプルでかわいいデザインの使い勝手のよいアイコン素材です。 freepik.comはウェブやグラフィックデザイナーのためのベクターやイラストやPSD素材の検索エンジンで、日本語環境でももちろん利用できます。アイコンに特化したflaticon.comも運営しており、こちらには現在64,000個以上のアイコンが無料で利用できます。 freepik.comでアイコンの検索する時は、下記のページからが便利です。 freepik.comでアイコンを探す またfreepik.comは、そのブログだけのオリジナルの素材を配布するコラボをしています。 日本ではコリスが初！今回でいよいよ第15弾となりました！ 第1弾〜14弾まではこちら。
レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ！ FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ
Webデザイナーはコードを学ぶべき？ コーダーはデザインを学ぶべき？ 両方に精通している人はなかなか多くはいません。Webデザインがどのように進化してきたのかその流れをしっかり押さえ、デザインとコードのギャップをつなぐことができたか振り返ってみましょう。 A brief history of web design for designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 先日の彼らの記事「しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則」と同様に、分かりやすいアニメーションもお楽しみください。 1989年：Webデザインの暗黒時代 1995年：Webデザインの始まりはテーブルから 1995年：JavaScriptが表現の幅を広げる 1996年：Flashにより自由の黄金期へ 19
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く