PRESSMAN*Tech(プレスマンテック)

東日本橋の制作・開発会社 プレスマンのスタッフブログ

hinoの投稿一覧

hino

hino の紹介

入社2年目のデザイナーです。
見やすさ&わかりやすさ、それにちょっぴり遊び心を加えたWebデザインを目指しています。

CSSだけで作る王冠付きのランキングリスト

CSSだけで作る王冠付きのランキングリスト

今回は、人気商品やアクセスの多い記事の表示に役立ちそうな、シンプルな王冠アイコン付きのランキングリストをCSSで装飾する方法をご紹介します。

続きを読む

TypekitでモリサワとTypeBankのフォントが使えるようになりました

typekit今月6日、Adobeが提供するフォントライブラリサービス「Typekit」にて、新たにモリサワとTypeBankのフォントが使えるようになりました。

今回追加されたフォントはモリサワ10書体、TypeBank10書体の計20書体です。
これで、Typekitで使用可能な日本語Webフォントは全部で34種類に増えました。

既存のフォントや利用方法に関しては以前の記事でも触れていますので、今回は新しく増えたフォントについてご紹介したいと思います。

続きを読む

秋をイメージしたフリー写真素材11枚と、Photoshopアクション3種

秋をイメージしたフリー写真素材11枚と、Photoshopアクション3種

今回は、これからの季節に使えそうな秋をイメージしたフリーの写真素材と、撮影した写真を手軽に秋の色合いに加工できるPhotoshopアクションをご紹介します。

続きを読む

CSSでラジオボタンをタブメニューに変える

ラジオボタンをタブメニューに変える。先日、ラジオボタンで実装済みのUIを急遽タブメニューにしたいというご要望をいただき、CSSを利用してタブメニュー風のデザインとして見せることにしました。
ラジオボタンを元にCSSでタブメニューを作成する場合、JavaScriptが必要ないため動作も軽く、比較的簡単に実装することができます。欠点としては、擬似クラスや隣接セレクタなどを多用するため、残念ながらIE8以下のブラウザでは動作しません。

続きを読む

CSSで作るシンプルな矢印アイコン29個

CSSで作るシンプルな矢印アイコン29個最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。
CSSでデザインの実装を行う場合、「カスタマイズやメンテナンスが容易」「レスポンシブWebデザインとも相性が良い」「画像を読み込まないのでモバイルユーザーにも優しい」「Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。

今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。

続きを読む

HTML+CSSだけで作るエアメール封筒

前回、CSSで作る郵便切手と消印風スタンプをご紹介しましたので、今回はエアメール風の封筒デザインを同じくCSSだけで作ってみたいと思います。
せっかくですので、前回作った郵便切手やスタンプと一緒に合わせて、ブログの記事風にレイアウトしてみました。

続きを読む

コピペで簡単!CSSだけで作れる郵便切手と消印風スタンプ

今月7月は別名「文月」と呼ばれ、特に23日には「文月ふみの日」として様々なイベントが行われます。

今回はそんなお手紙と関係の深い7月にちなんで、CSS3を使って画像を切手のように装飾したり、消印風のスタンプを作成する方法をご紹介したいと思います。

続きを読む

好きな風景をパレットに!Adobe Color CCの使い方

Webデザインを作り始めるときにいつも迷ってしまうのがサイトの配色です。

外出先で見かけた風景など、ふとした瞬間に「あ!この配色いいな。今度のWebサイトで使ってみよう」と思っても、その場ですぐ記録する方法がなく、結局デザインする頃には忘れてしまっていたり…。

今回は、配色テーマ作成ツールでおなじみの「Adobe Kuler」が新しく「Adobe Color CC」とサービス名を変更し、とても使いやすくなっていましたので、スマートフォンでの使い方を中心にご紹介したいと思います。

続きを読む

6月23日に終了するFacebook Like BoxからPage Pluginへの移行で気をつけたい事

Facebook Page Pluginホームページなどに表示してFacebookページへの「いいね!」を促すソーシャルプラグイン「Like Box」ですが、このLike Boxは現在deprecated(非推奨)とされており、2015年6月23日にサービスが終了します。これに代わるFacebookプラグインとして新たに、「Page Plugin」が提供されています。
ここではLike BoxからPage Pluginへの移行で、何が変わるのか、何に注意すればよいのかを見てみましょう。

続きを読む

無料でもOK!手軽に使えるTypekitの日本語Webフォント14個

Adobe Typekit

源ノ角ゴシック・小塚ゴシック・小塚明朝など、AdobeのTypekitにて14種類の日本語Webフォントの提供が始まりました。今までTypekitの日本語フォントはアプリケーションでの利用に限定されていたため、Webフォントとして使えるのは今回が初めてです。

続きを読む

▲ 先頭へ戻る