自分のPCにインストールされているフォントをブラウザ上で一覧できるWEBツール「wordmark.it」が便利だったので紹介します。 フリーソフトや同様のWEBツールもいくつかあるのですが、他のツールはフォントを選択すると反映されるといったものが多く、この「wordmark.it」はインストールされたフォントをまとめて確認できる点がおすすめです。 wordmark.it 操作はシンプルで中央のテキストボックスに確認したい文字列を入力するだけです。 positive/negativeで白黒を反転。 aa/Aa/AAで小文字・大文字・頭だけ大文字の切り替え。 smaller/biggerで文字サイズ変更。 となっています。 実際にプレビューした画面は以下のようになります。 他にも以下のようなツールもあります。 Aulta font chekker Font picker STC FONT BR

スタイルの付与・常套テクニックを使う CSSを分けて記述する 次にスタイルを定義していく。このようにシンプルなデザインの場合は、常套（じょうとう）的に使われているテクニックで効率的に制作できる。 CSSを設定するには＜link＞要素を用いて、href属性にパスを指定する。ここではほかに、type属性とrel属性・media属性を指定している。これらの属性について説明すると、＜link＞のtype属性はhrefで指定されるコンテンツ（この場合はCSSファイル）のMIMEタイプに関する情報を与えることができる。rel属性は、そのコンテンツとの関係性を述べ、media属性は意図する出力メディアを指定できる。ここでは「all」と指定しているので、すべてのメディアに対してこのCSSが適用されることになる。 この＜link＞属性に割り当てられているのは、CSSをインポートするのみの役割を持ったCSSで

リファレンスについて HTML リファレンス HTML Living Standardに対応したリファレンスです。 HTMLタグ リファレンス HTML4の時代に作成したリファレンスです。古いWebページを更新する際などに参考にしてください。 CSS リファレンス CSS2の時代に作成したリファレンスです。

ウェブサイトの要素をレイアウトをする際に非常に重要な ホワイトスペースの考え方について、すこしまとめてみました。 私が人にウェブデザインを教えるときは、まずここから始めます。 boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。 リズムが整っていれば、他の要素が主張したことが上手に伝わります。 リズムが整っていなければ、けんかしあい、不協和音＝見づらい状況を作り出します。 自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。 どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。 とてもとてもシンプルな例を出してみます。 AとBを比較してみてください。 どちらのほうが読みやすいように感じますか？ どんなふうに感じましたか？ この例では、Bのほうに大きな余白を与えました。 ４隅すべて同じぐらい

長藤デザイン合同会社, NAGAFUJI DESIGN LLC, Graphic Design, Motion Graphics

WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 続きを読む 光に敏感な目を持つWebデザイナーです。長時間モニターを眺めると目の疲れを通り越して頭痛を起こしたりとしんどい思いをすることも。なるべくライトはつけたくないのですが、それはそれでモニターが眩しすぎたりとなかなか難儀な体質です。そんな悩める私にBenQさんよりScreenBar Pro モニターライトをいただいたので、全力レビューしてみます！ 続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中

文字の手帖 文字文化の継承、発展のためモリサワが行っている活動や、文字に関するトピックをまとめ、それらを多くの方に触れていただけるよう、情報配信を積極的に行っております。 文字文化フォーラム 印刷/WEB/ 出版/ デザイン業界の方々を対象として文字に関わるさまざまなジャンルの方々に登壇していただき、文字文化の継承を目的とした活動を定期的に行っています。