reedomのブックマーク - はてなブックマーク

有料フォントの価格破壊！！Futura, DINなど57万円分の有料フォントが4,000円で特大セール販売中！

Design Cutsで4周年記念として、Futura, DINなどプロデザイナー御用達の有料フォント$5088（約573,000円）分が、$39（約4,000円）で購入できる特大セールをしています。期間は10月17日15時まで（UK時間）、日本時間だと17日23時でしょうか。 Futuraだけでも定価300,000円、DINだけでも定価80,000円。それらが全部込みで約4,000円で購入できてしまいます。他にもLatinotype社やCreative Marketで人気のフォントがたくさん揃っています。セットに含まれるフォントの一覧一つでもお気に入りのフォントがあれば、十分すぎるほど元が取れて、かなりのお釣りがあります。その中でも特に注目しておきたいフォントをピックアップします。まずは、Futura。 FuturaはAdobe, Linotype, Bitstreamなど、

reedom 2017/10/11

design
Font

リンク

デザインの神は細部に宿る！最近のWebサイトで見かけるナビゲーションのアイデアのまとめ

Webサイトをデザインする時にナビゲーションをどうするか、けっこう頭を悩ませると思います。コンテンツを見せるために、サイトの構造を伝えるために、ページを移動するために、ナビゲーションはデザインで重要なアイテムです。最近のWebサイトで見かける新鮮なアイデアが取り入れられたナビゲーションを紹介します。デザインなどの見た目だけでなく、操作性やインタラクションも非常によくできているものばかりです。 Nick Jones デザインに黄金比を取り入れることがあると思いますが、この発想はなかった！マウスのスクロール、キーボード操作で黄金分割されたコンテンツを次々に表示します。その仕組みは、CodePenで公開されています。 110% ナビゲーションの今までの概念がくつがえされるかもしれません。このサイトのナビゲーションには、2つの大きな特徴があります。まず一つ目は、中央にフローティングされたパネ

reedom 2017/08/04

design

リンク

マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法

Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミックデザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を

reedom 2017/01/11

CSS

リンク

インターフェイスデザインが素晴らしいiPhoneアプリをカテゴリ別・UIパターン別で見られるギャラリー -MobileMozaic

reedom 2012/10/22

design

リンク

デザインも豊富、カスタマイズも可、ローディング用のGIFアニメーションをさくっと作成できる -Loader Generator

簡単に、ローディング用のGIFアニメーション画像を作成できるオンラインサービスを紹介します。用意されているデザインは7種類、サイズやカラー、アニメーションのスピードなどカスタマイズも簡単にできます。上段：Line（カラーはピッカーから選択可能）中段：Circle, Arrow, Snake 下段：Pulsate, Wifi, Rectangle ローディング用の画像を作成するのは簡単です。サイトにアクセスします。

reedom 2012/10/22

リンク

[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework

reedom 2012/09/21

リンク

.htaccessのリダイレクト関連を手軽に設定できるオンラインサービス -Free .htaccess Redirect Generator

.htaccessの特にリダイレクト関連の使用項目をチェックし、個別に設定する箇所を記述するだけで手軽に.htaccessファイルを作成できるオンラインサービスを紹介します。 Free .htaccess Redirect Generator .htaccessファイルを編集する際は、必ずバックアップをとることをお勧めします。 .htaccessの利用方法やもう少し詳しい説明は、下記ページをご覧ください。サーバーの設定をカスタマイズ、よく利用する「.htaccess」の設定のまとめ以下、「Free .htaccess Redirect Generator」の各項目の簡単な説明を。 Rewrite to www www付きでアクセスしてきてもwww無しに向け直します。ドメイン名を入力。 301 Redirect File URLが恒久的に変更した際に、旧ページのアクセスを新ページに向け

reedom 2012/07/30

リンク

パフォーマンス改善やセキュリティに役立つ.htaccessの設定 | コリス

ウェブサイトのパフォーマンスの改善やSEO、セキュリティに役立つ.htaccessの設定を紹介します。 17 Useful Htaccess Tricks and Tips 備考：Apache チュートリアル: .htaccess ファイル、Apache コア機能 [ad#ad-2] .htaccessの設定：パフォーマンスやSEO関連 .htaccessの設定：セキュリティ関連 .htaccessの設定：パフォーマンスやSEO関連 .htaccessでタイムゾーンを設定 .htaccessでタイムゾーンを設定します。例：東京 SetEnv TZ JST-9 もしくは、 SetEnv TZ Asia/Tokyo .htaccessで301リダイレクトを設定 .htaccessで301リダイレクト（永続的なリダイレクト）を設定します。例：旧ファイル（old.html）、新ファイル（new

reedom 2010/11/13

apache

リンク

実用的なユーザビリティの10のポイント：ガイドライン編 | コリス

ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント（ガイドライン編）をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。また、ラベルを左に配置することはもう一つの問題があります。あなたはラベルを右揃えと左揃えのどちらで配置しますか？　左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.

reedom 2009/10/06

design
UI

リンク

タブUI詳解

タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。タブのみを指す場合は、「タブコントロール」としています。はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集はじめにタブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。パネル

reedom 2009/09/10

リンク

[CSS]気をつけたいIE 7のバグ -CSS-Discuss

CSS-Discussにアップされている「IE 7 Bugs」の意訳です。省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意：バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグフォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。例： body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。キーワード指定でのサイズフォントサイズに「small